Developers Club geek daily blog

3 years, 2 months ago
How to create interactive maps

Recently the interactive map displaying demographic changes in Europe from 2001 to 2011 — the period to which the most detailed statistics from each municipality is available has been published. By means of color scale degree of decrease or increase in population literally in each point of Europe (except for Russia and the CIS countries) and Turkey is designated.

One of developers of the Airbnb team took part in work on creation of this demographic card. Want to learn how independently to create the similar project? Then welcome under kat.

Preliminary conditions


For our example we use the data set across Berlin comprising data on buildings and quantity of their floors.

For a start we will prepare work environment:

Set Tilemill — this cartographic application allowing to create quickly and simply cards, using different data sources.

Download ready shape — the file which already contains the necessary data. If you have the data set, they need to be integrated with shape — the file. There are many ways to make it, for example, by means of Quantum GIS.

Create account on Mapbox — there is free rate with restriction in 50 000 viewings of the card.

We create the new project


We begin with adding of layer on which will be displayed given our card. Let's start Tilemill and we will create the new project.

How to create interactive maps

Now at the left you can see the world map, and on the right some rules Carto CSS (the language for design of cards used in TileMill). Thus, the preview of your card is reflected in the left part of the screen, and in right you define styles for its different parts.

Implementation of data


We add our shape — the file as new layer (the icon of layer in the lower left corner, Add Layer). ID — is unique identifier of layer in the project. We select shape — the file as data source and we press Save.

How to create interactive maps

Let's check that everything works normally. Let's color with our shape — the file, having added the next lines:

#buildings{
  polygon—fill: green;
}

By means of the buildings identifier appropriated when adding layer we can set style. Your card has to look as follows:

How to create interactive maps

In our example we want to visualize number of storeys of buildings. We clean style of the countries and we set black background of the card.

Map {
  background—color: black;
}

For style of number of storeys of buildings we can color only with certain, suitable us objects. In this example small buildings are painted green color, averages — in orange, and higher are painted in the blue. You can use any colors (in this example for choice of flowers Chroma.js Color Scale Helper was used).

#buildings{
  polygon—fill: #d4ffdf;
  line—opacity:0;
  
  /* smaller buildings — green */
  [floors = 1]{
    polygon—fill: #b0f1b8;
  }
  [floors = 2]{
    polygon—fill: #8ae393;
  }
  [floors = 3]{
    polygon—fill: #5fd36c;
  }

  /* smaller buildings — orange */
  [floors = 4]{
    polygon—fill: #fff98f;
  }
  [floors = 5]{
    polygon—fill: #f0e759;
  }
  [floors = 6]{
    polygon—fill: #e0d500;
  }
	
  /* higher buildings — blue */
  [floors >= 7]{
    polygon—fill: #def3ff;
  }
  [floors > 15]{
    polygon—fill: #bbdcfc;
  }
  [floors > 30]{
    polygon—fill: #65aef4;
  }
  [floors > 60]{
    polygon—fill: #0098f0;
  }
}

Now you have to see something like it:

How to create interactive maps

Interactivity adding


You can retrieve data from the attributive table and display them on the card by means of helps / popup windows. In our example we want to display popup window with the help on number of storeys of the building. To include this function, it is necessary to click the icon of hand in the lower left corner and to select "Teaser". Now we have to define layer ("buildings") on which we want to support interactivity, and to add "floors" in the section "Content to be shown on hover".

How to create interactive maps

After saving of the project, at guidance of the cursor on the building the window with information will emerge.

Export of mbtiles


Interactivity can be exported to the MBTiles format which is specially developed for storage of cards and possibility of access to them online and offline.

But before we export our layer, we will set transparent background.

Map {
  background—color:  transparent;
}

Finally the code has to look so:

Map {
  background—color: transparent;
}

#buildings{
  polygon—fill: #d4ffdf;
  line—opacity:0;
  
  /* smaller buildings — green */
  [floors = 1]{
    polygon—fill: #b0f1b8;
  }
  [floors = 2]{
    polygon—fill: #8ae393;
  }
  [floors = 3]{
    polygon—fill: #5fd36c;
  }

  /* smaller buildings — orange */
  [floors = 4]{
    polygon—fill: #fff98f;
  }
  [floors = 5]{
    polygon—fill: #f0e759;
  }
  [floors = 6]{
    polygon—fill: #e0d500;
  }
	
  /* higher buildings — blue */
  [floors >= 7]{
    polygon—fill: #def3ff;
  }
  [floors > 15]{
    polygon—fill: #bbdcfc;
  }
  [floors > 30]{
    polygon—fill: #65aef4;
  }
  [floors > 60]{
    polygon—fill: #0098f0;
  }
}

To export layer to mbtiles, it is necessary to click "Export" in the upper right corner and to select "MBTiles". You should wait until data are drawn. If you cannot define layer, use the following settings for export of the card:

  • Zoom: 9 — 13
  • Center: 13.3944,52.5141,10
  • Bounds: 13.0621,52.3475,13.7089,52.6734

On the end of process save *.mbtiles.

Loading on MapBox


Take .mbtiles the file and load it into the account Mapbox. After loading of new layer find it on the Data tab in your account. Now create the new project with this layer:

How to create interactive maps

If you do not see the card, use search string. Save the map and the copy of ID (it can be found in the section "Project" —> "Info").

Web — application


For display of the card in the browser we use Mapbox.js, after all it already includes layer of "grid" for the description of interaction of data in which we need to display values of number of storeys. You can also use Leaflet in combination with utfgrid Plugin.

How to create interactive maps

For a start you can use this sample code. It loads the card and shows number of floors in the console at guidance of the cursor on buildings. Simply change key of access and the ID card.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf—8 />
<title>Map example</title>
<meta name='viewport' content='initial—scale=1,maximum—scale=1,user—scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
  * { 
    margin:0; 
    padding:0; 
  }
  html, body{
    height: 100%;
  }
  #map { 
    height:100%; 
    width:100%; 
    background: #111;
  }
  .building—info {
    position: absolute;
    left: .5em;
    top: .5em;
    color: white;
    font—size: 2.5em;
    font—family: Arial, sans—serif;
  }
</style>
</head>
  <body>
    <div id='map'></div>
    <div class='building—info'></div>
    <script>
      L.mapbox.accessToken = 'your—access—token';
     
      var mapid = 'your—map—id';
      var infoElm = document.querySelector('.building—info');
      var map = L.mapbox.map('map', mapid, {gridLayer : false, zoomControl : false }).setView([52.5141,13.3944,10], 11);

      map.attributionControl.addAttribution('Source: Senatsverwaltung für Stadtentwicklung und Umwelt Berlin');

      var dataLayer = L.mapbox.gridLayer(mapid).addTo(map);

      dataLayer.on('mouseover', function(evt){

        if(typeof evt.data === 'undefined'){
          return infoElm.innerHTML = '';
        }

        infoElm.innerHTML = 'floors: ' + evt.data.floors;
      });
    </script>
  </body>
</html>

As you can see, in the above described way it is possible to create quickly and simply interesting cartographic projects. Of course, if you already have ready data, it is key component.

This article is a translation of the original post at habrahabr.ru/post/266575/
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here: sysmagazine.com@gmail.com.

We believe that the knowledge, which is available at the most popular Russian IT blog habrahabr.ru, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus