TileMill – Tutorial to create web map from the Shapefile, alternative to ArcGIS Online

TileMill – Tutorial to create web map from the Shapefile, alternative to ArcGIS Online

TileMill is used to create beautiful map for journalist, web designer, researcher, or seasoned cartographer. It is a design studio where you create stunning maps. Following are the features of TIleMill.

  •  It supports Data from wide variety, ESRI Shapefile, KML, GeoJSON, GeoTIFF, PostGIS, CSV, and SQLite.
  • Rendering style is great, it’s core is Mapnik which has powerful feature like for RGBA color, True Type fonts, rasters, patterns, and even SVG transforms
  • It has CartoCSS which gives you full control over design. Documentation on this are handy, included on the software.
  • TileMill can export maps to MBTiles, PNG, PDF, SVG, or Mapnik XML formats. Once map is exported to MBTiles, it is easy to use in mapbox.
  1. Downloading the TileMill
  2. Opening the Maps in TileMill
  3. Loading the Data in the TileMill
  4. Changing Map Style
  5. Exporting the Map
  6. Uploading to Mapbox
  7. Final look of the Map

First step is to download the Software.

Downloading the TileMill

1.Go to the Mapbox website to download the TileMill. Download

 Download

2. Then run the setup wizard by clicking the downloaded file TileMill-v0.10.1-Setup.exe

 Download

3.Then press Next and Next and then Install.

Install

4.The TileMill will run for a while to install the required files, at the end click finish to finish the installation process.

Install finish

Opening the Maps in TileMill

5.Then open the TileMill from the start > All Program Files >TIleMile-v0.10.1


TillMill

6. Click on the New Project button to create a fresh project, and then fill up all required option. Finally click Add which will create a new project on the window.


TillMill New Project



 NEw project

7. Click newly created Project icon which will take you to the new window.


Click newly created Project icon

8. Map will open with all the TileMill option. Have a look at all the option on the below image.

  1. Main Toolbar
  2. Style Sheet Editor
  3. Preview map
  4. Style Sheet Editor






TileMill option

Loading the Data in the TileMill

9. Please download the Canada Shapefiles (Edited, not responsible for errors): TillMill.rar

Or

Go to Canada official website, all the data are from here: http://geogratis.gc.ca/geogratis/DownloadDirectory

10. Click on the Layers and then on Add Layer to import Canadian Shapefiles. In GIS it is the rule you can say, bottom layer is always Polygon followed by Polyline and on the top point file. So add all the layers, starting
with the polygon. By default a map of the world exist.



 Add Layer  Tillmill

11.  Click on the browse button to add the layers.


Add Layers Tillmill

12. Browse the Province.shp, select and press Done.


TillMill Add Layers

13. Add layer window will prompt back, then Click Save & Style. Province map will be added to the map window with the new style. In the same way, please add road.shp and city.shp. As said earlier next layer will be road and the last one will be the city layer. See below image.


Tillmill Click and save style


Layers order

Layer fashion should be this way.

14. Final map look will be as below. In your case map color might be different. Next step is to change the map color.


TillMill Final Look of the MAP

Changing Map Style.

15. First please read the tutorial about the TillMill style and TillMill Crash CourseIn our case we are using three layers and each of the layer has its own style. To change the color of any of this layers, you select the color from the color pallet (or you can type the color code on the style editor). Each color displaying in the bottom color pallet is for the individual layer. Do not pick the wrong color pallet.





Tillmill Map style

16. Now let us change the color of the map to have better look. Just change the code which are bold and blue color.

Layer Name

Style

Change To

Countries

#countries {::outline {line-color: #85c5d3;line-width: 2;line-join: round;}polygon-fill: #fff;

}

  

#countries {

  ::outline {

    line-color: #9cb2b6;

    line-width: 1;

    line-join: round;

  }

  polygon-fill: #d8d4d4;

}

Province

#province {

  line-color:#594;

  line-width:0.5;

  polygon-opacity:1;

  polygon-fill:#ae8;

}

#province {

  line-color:#666965;

  line-width:1;

  polygon-opacity:0.75;

  polygon-fill:#edd987;

}

Road

#road {

  line-width:1;

  line-color:#168;

}

#road {

  line-width:2;

  line-color:#411e02;

}

City

#city {

  marker-width:6;

  marker-fill:#f45;

  marker-line-color:#813;

  marker-allow-overlap:true;

}

#city {

  marker-width:8;

  marker-fill:#ee3010;

  marker-line-color:#6c0321;

  marker-allow-overlap:true;

}

17. Labelling the Province layer is done by adding the below code to the style. Add the label below the province layer style so the font does not label under the province layer, Read this for the layer labeling

Layer Name

Style

Change To

Province

#province {

  line-color:#666965;

  line-width:1;

  polygon-opacity:0.75;

  polygon-fill:#edd987;

}

#province {

::shape{  line-color:#666965;

  line-width:1;

  polygon-opacity:0.75;

  polygon-fill:#edd987;

}

::label {

  text-name: [PROV_TERR];

  text-face-name: ‘Angsana New Regular’;

  text-fill: #282727;

  text-size: 20;

   text-halo-fill: fadeout(black, 30%);

  text-halo-radius: 1;

   

 }

}


18.  For Labelling the City layer add the new style tab by clicking add button and type the name Label, after that click save button. This will add Label CSS style tab.

Labelling the City layer

 

19. Add the following code on the Label style tab. Read Advance Label Placement technique in TileMill.

Advance labelling tillmill

Code

Explanation

Zoom >4

Label will be labelled after zoom level 5

Text – name:

Field name to be labelled

Text – fill

Label color

Text – size

Font size

Text – halo – fill

Will add halo color around the text

Text – halo – radius

Size of the halo

Text – placements

The priority queue for the label position and number
16, 14, 12 is for font size to be used to make label to fit in.

Text –dy, text- dx

How far away the label should be placed, size in
pixel value.

 Final Code for the style sheet.

Style.mss

Label

 

 

Map {

  background-color: #b8dee6;

}

 

#countries {

  ::outline {

    line-color: #9cb2b6;

    line-width: 1;

    line-join: round;

  }

  polygon-fill: #d8d4d4;

}

 

 

 

#province {

::shape{  line-color:#666965;

  line-width:1;

  polygon-opacity:0.75;

  polygon-fill:#edd987;

}

::label {

  text-name: [PROV_TERR];

  text-face-name: ‘Angsana New Regular’;

  text-fill: #282727;

  text-size: 20;

   text-halo-fill: fadeout(black, 30%);

  text-halo-radius: 1;

    }

}

 

#road {

  line-width:2;

  line-color:#411e02;

}

 

#city {

  marker-width:8;

  marker-fill:#ee3010;

  marker-line-color:#6c0321;

  marker-allow-overlap:true;

 

}

 

#city [zoom>4] {

  text-name: [NAME_EN];

  text-face-name: ‘Angsana New Regular’;

  text-fill: #036;

  text-size: 20;

  text-halo-fill: fadeout(#b6bac0, 30%);

  text-halo-radius: 2.5;

  text-placements:
“N,S,E,W,NE,SE,NW,SW,16,14,12”;

  text-dy: 5;

  text-dx: 5;

}


20. Next step is to add the legend, click on the legend icon. The legend uses Unicode box-drawing characters to approximate the line styles.

legend

legend editor

Real code:

<span style=’color:#ee3010′>•</span>
Cities <br />

<span style=’color:#411e02′></span>
Main Roads <br />

<span style=’color:#edd987′></span>
Province <br />

Exporting the Map

TillMill can export map in different format such as MBTiles formats, PNG, PDF, SVG or Mapnik XML. But to make it interactive we will be exporting to MBTiles format.


21. Click on the export icon and then click on the MBtiles.

MBtiles export

22. Then shift and drag the map to adjust the loading view. We want just the Canada boundary to show when the map load. See the below image. And also click on the center of the Canada map to get the center coordinate, so map will zoom and center on that coordinate.

adjust the loading view

23. Assign the filename, also adjust the zoom level. Higher the zoom level bigger will be the file size. Finally click on Export button.

 export option

 

24. Map will start to export, once the process is done then click on save button to save the map on local drive.


export mbtitles

 

Uploading to Mapbox

Open the free account with the mapbox. Every month you get 3000 map views per month and 100 mb of storage.

Uploading to Mapbox

25. Click on Data and then followed by upload. Finally click on Choose file to upload mbtiles file from local drive to mapbox.


Mapbox upload



Uploading to Mapbox

26. It will take few minutes to upload the file which totally depend on the file size.

uploading scale

27. Once the data is uploaded, it’s information will be displayed as shown in the below image. Click on preview button to see the map. Then click on create project.



add project

28. Once the project is created, next process is to assign the name. For that click on Project, type the name and description and finally click on the save button to save the information. You have the option of picking up the
styles, adding the data and more.



name and description, mapbox

29.  Click on Info button to copy the html code to embed on the website.


embed html code

Final look of the Map

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu