Hello beautiful individuals! 👋 Final 12 months, I noticed a venture on Product Hunt which allowed individuals to generate posters from maps. The web site has since closed down and the corporate has been acquired by Airbnb. That is what the output appeared like:
Now, I used to be all in favour of determining how they have been in a position to render this map. My expertise with maps was restricted to Google Maps solely so I used to be excited to discover the world of customized map era. I thought of this venture for some time, tried engaged on it however rapidly gave up due to how tough it was to know the fundamentals and get a map rendering pipeline operating regionally.
It wasn’t till not too long ago that I got here throughout an article the place the creator used Mapbox Studio to create a blueprint model map. That submit rekindled my curiosity in customized map era and I knew that with the supply of Open Avenue Maps there’s positively an Open Supply software program which I can use.
Offline rendering choices:
I may use tileserver-gl or openmaptiles. Each are developed by the identical firm. The distinction is summed up by considered one of their gross sales individuals like this:
OpenMapTiles Map Server is best fitted to a manufacturing setting. It’s a whole package deal with caching and built-in map providers (WMTS/WMS). Additionally it is a lot simpler to arrange than TileServerGL. That is particularly helpful when working with vector map knowledge (comparable to OpenMapTiles) and dynamically creating raster tiles from such knowledge.
In case you have raster tiles (already ready upfront) and also you solely have to serve them, the TileServerGL is completely enough. There are additionally alternate options like tileserver-gl-light (with out rasterization) or tileserver-php.
I made a decision to go together with tileserver-gl.
Let me inform you proper now that I’m not at all an professional in mapping. I did this venture out of private curiosity and can’t assure the correctness of the data on this web page. I attempted my finest to ensure every part I wrote is right however errors can nonetheless creep in. For those who discover any error simply e-mail me and I’ll repair it. Thanks!
Putting in the Docker model
Set up Docker and Kitematic in the event you don’t have it already. Open Kitematic and create a container utilizing the tileserver-gl repo by Klokantech:
Now we have to map a neighborhood folder to the knowledge folder for the tileserver-gl container. You are able to do that in Kitematic by clicking on the container title within the left column, clicking on “settings” on the prime proper after which selecting the “Volumes” tab.
One other factor I like doing is mapping the container port to a identified host port so that each time the container is run I can entry tileserver-gl on the similar port within the browser. You are able to do that by going to the Hostname / Ports tab.
Subsequent step is to obtain some tile knowledge. We can be downloading a mbtiles file for Pakistan. This mbtiles file is a compressed file which incorporates all the data you see in a standard map. We can be downloading the OpenStreetMap vector tiles.
Now put the downloaded file within the native folder you mapped above to the /knowledge folder for the container. In my case, I mapped a docker_tileserver folder on my Desktop because the /knowledge folder on the container.
Making a configuration file
By default tileserver-gl already has a configuration file however now that we need to use customized mbtiles we have to create a config file. Begin by making a config.json file within the mapped /knowledge folder. Subsequent, populate it with the next content material:
{
"choices": {
"paths": {
"root": "/usr/src/app/node_modules/tileserver-gl-styles",
"fonts": "fonts",
"types": "types",
"mbtiles": "/knowledge"
},
"serveStaticMaps": true,
"formatQuality": {
"jpeg": 90,
"webp": 90
},
"maxSize": 8192,
"pbfAlias": "pbf"
},
"types": {
"klokantech-basic": {
"model": "klokantech-basic/model.json",
"tilejson": {
"bounds": [60.8786, 23.32744, 77.83562, 37.09664]
}
},
"osm-bright": {
"model": "osm-bright/model.json",
"tilejson": {
"bounds": [60.8786, 23.32744, 77.83562, 37.09664]
}
}
},
"knowledge": {
"v3": {
"mbtiles": "/knowledge/2017-07-03_asia_pakistan.mbtiles"
}
}
}
We haven’t added something new within the config file. Go to Kitematic and restart the server. You must be capable to entry localhost:3000 and be greeted with this web page:
At this level, you possibly can click on on the viewer and navigate the maps. If that’s what you needed all alongside, good. You’re lastly at your vacation spot. You may plug in an internet interface utilizing mapbox-gl-js or one thing comparable and name it a day.
Nonetheless, I needed one thing extra. I needed to create a customized blueprint model and render giant maps utilizing that model. Now we’ll go forward and discover ways to do precisely that.
Making a customized model
Klokantech has an extended historical past as an Open supply firm. Their help is top-notch and their instruments are wonderful. Fortunate for us, they host an internet map editor referred to as maputnik. We will use that to create customized types and use them with tileserver-gl. Go forward open up the on-line editor.
Now you possibly can at all times start styling from scratch however it’s at all times simpler and sooner to face on the shoulder of the giants. We can be modifying the Darkish Matter model to swimsuit our wants.
The way in which styling works is {that a} map is made up of a number of layers. These layers vary from water layer to constructing layer to main street layer to minor freeway layer. You edit the model of every layer and might even cover the layers you don’t need to present on the ultimate map.
I modified the halo coloration, font-size and place names (from {title:latin}{title:nonlatin} to {title:latin}) together with lots of different mundane stuff. That is essentially the most time-consuming activity of the entire course of and takes time to get proper.
After doing all of the model edits that is what I ended up with:
Exporting Customized Model
We can’t merely export this map as a result of it makes use of a free service graciously supplied by OpenMapTiles to render the tiles within the editor. We’ve got to vary some settings in order that the model.json file it produces is usable for us in our offline setup with our personal data-source.
Within the on-line editor click on on Sources and edit the supply like this:
And likewise click on on Model Settings and edit them like this:
Now click on on Export and obtain the JSON file. It’s going to obtain a blueprint.json file. We used Darkish Matter model as our base which makes use of some icons and sprites which we haven’t downloaded.
Obtain the next recordsdata and place them within the mapped /knowledge folder like this:
.
├── config.json
├── types
│ ├── blueprint.json
│ ├── icons
│ │ ├── circle-11.svg
│ │ ├── star-11.svg
│ │ └── wood-pattern.svg
│ ├── sprite.json
│ ├── sprite.png
│ ├── sprite@2x.json
│ └── sprite@2x.png
└── 2017-07-03_asia_pakistan.mbtiles
Enabling Customized Model
Now we simply have to allow our customized model within the config.json file:
{
"choices": {
"paths": {
"root": "/usr/src/app/node_modules/tileserver-gl-styles",
"fonts": "fonts",
"types": "types",
"mbtiles": "/knowledge"
},
"serveStaticMaps": true,
"formatQuality": {
"jpeg": 90,
"webp": 90
},
"maxSize": 8192,
"pbfAlias": "pbf"
},
"types": {
"klokantech-basic": {
"model": "klokantech-basic/model.json",
"tilejson": {
"bounds": [60.8786, 23.32744, 77.83562, 37.09664]
}
},
"osm-bright": {
"model": "osm-bright/model.json",
"tilejson": {
"bounds": [60.8786, 23.32744, 77.83562, 37.09664]
}
},
"blueprint": {
"model": "/knowledge/types/blueprint.json",
"tilejson": {
"bounds": [60.8786, 23.32744, 77.83562, 37.09664]
}
}
},
"knowledge": {
"v3": {
"mbtiles": "2017-07-03_asia_pakistan.mbtiles"
}
}
}
For those who use any customized fonts you possibly can put them within the types folder and hopefully, they need to work. Now restart the tileserver-gl container from kitematic and you must be capable to see “Blueprint” model on the homepage.
I went forward and created a static map of my metropolis out of this. You may too! Let’s first see how I did it. I used the viewer for the Blueprint model and went to my metropolis (Lahore). I received the next URL:
http://localhost:3000/types/blueprint/#13/31.49/74.28045
Subsequent, I transformed that URL to the type of a static picture export URL:
http://localhost:3000/types/blueprint/static/74.28045,31.49,14/1270x700@2x.png
You may learn extra about how the static export works within the on-line documentation.
I created a pleasant trying poster utilizing this as properly!
Subsequent Steps
Now that you know the way the export works, you possibly can go forward and create a pleasant trying poster to your metropolis or nation. Simply obtain the respective mbtiles file to your location and you need to be good to go!
There are nonetheless some edges of tileserver-gl which I haven’t managed to totally discover. I’d go forward and use tippecanoe to create some cool trying maps like this:
I hope you loved the submit. If there’s something I missed or something which I defined incorrect please let me know. See you all within the subsequent submit! ❤️
Helpful Hyperlinks:
