A interactive growth map of the city Amsterdam, Live Demo

🌏 Browser Support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📙 Overview

Groei.Amstedam is a interactive map where you can see the development of the city through the years. This application is build in one week and has been improved for the course Performance Matters. This project is made in cooperation with HvA, AdamNet and OBA.

🎨 Features

• An interactive map. Build with LeafLet & MapBox
• The most up to date data of Amsterdam, fetch from AdamLink
• A Scrollbar to slide through the years
• Accessibility: can be used without mouse or touchscreen
• An autoplay function with an option to increase the play speed
• Server-side fetching and parsing of the api
• An offline (ServiceWorker) and Non-JavaScript (EJS Templating) version

🚀 Installation

Clone the repository

$ git clone https://github.com/Casburggraaf/Groei.Amsterdam

Install the packages

$ npm install

Run the application

$ npm start

Or run the application for development.

$ npm run dev

🔎 Audit

First Audit(Click to see report)

Complete report

The improvements I made for this app:

• Fetch Api and store the data server-side, in comparison to fetching the api client-side on every reload
• Parse data server-side
• CDN, CloudFlare. With gives these improvements
  • Minification of the HTML, JS and CSS
  • Http2
  • Caching
  • Always online
  • G-zip
• Server-side Templating
• Browserify to bundle all JavaScript files
• Improvement on how to handle render map changes

To improve the render time of the map after a change I made a script to handle changes of only one year, this is used when the play button is pressed or when the user navigates by arrow keys. Normally on every change, every layer that contains a year is given an opacity 0. Than a script will filter all "old" streets and gives it a blue color. Then it will find the new layer and gives it the color red. The new script will first detect that the change is only one year after that it will only change the previous layer to blue and change the next layer to the color red.

render() {
  const _this = this;

  const date = document.querySelector("#myRange").value;

  if ((parseInt(date) - parseInt(this.prevRender)) !== 1){
    Object.keys(this.geoLayers).forEach(function(key) {
      if (_this.geoLayers[key]) {
        if (key < date) {
          _this.geoLayers[key].setStyle({
            "opacity": 0.3,
            "color": "#2474A6",
          });
        } else if (key > date) {
          _this.geoLayers[key].setStyle({
            "opacity": 0
          });
        }
      }
    });
  } else if(this.geoLayers[this.prevRender]){
    this.geoLayers[this.prevRender].setStyle({
      "opacity": 0.3,
      "color": "#2474A6",
    });
  }


  if (this.geoLayers[date]) {
    this.geoLayers[date].setStyle({
      "opacity": 0.65,
      "color": "#E00B27"
    });
  }
  this.prevRender = document.querySelector("#myRange").value;
}

Final Audit(Click to see report)

Complete report

Conclusion

By these improvements the first paint is much quicker. First interaction is also improved and the site uses less cpu. Groei.amsterdam was build in one week client side. Right now it is server-side rendering, which improves the performance. Furthermore, the application is working without javascript. If there will be a JavaScript error client side, the application is still working. Finally, the accessibility mark has also improved. It is possible to use the application with keyboard only.

TODO

These improvement can be done to improve the app even further

• Server-side rendering of the map leaflet-headless
• Make own modules of code in server.js
• Store global selectors as variables in server.js
• Additional features for non-javascript users

📜 License

This software is licensed under the MIT © Cas Burggraaf