Hello beautiful folks! 👋 Final yr, I noticed a mission on Product Hunt which allowed folks 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 enthusiastic about determining how they had been capable of 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 technology. I considered this mission for some time, tried engaged on it however rapidly gave up due to how troublesome it was to know the fundamentals and get a map rendering pipeline operating regionally.

It wasn’t till just lately that I got here throughout an article the place the creator used Mapbox Studio to create a blueprint model map. That put up rekindled my curiosity in customized map technology and I knew that with the supply of Open Road Maps there’s undoubtedly 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 folks like this:

OpenMapTiles Map Server is healthier fitted to a manufacturing setting. It’s a whole package deal with caching and built-in map companies (WMTS/WMS). Additionally it is a lot simpler to arrange than TileServerGL. That is particularly helpful when working with vector map information (similar to OpenMapTiles) and dynamically creating raster tiles from such information.

If in case you have raster tiles (already ready upfront) and also you solely must serve them, the TileServerGL is completely ample. There are additionally alternate options like tileserver-gl-light (with out rasterization) or tileserver-php.

supply

I made a decision to go together with tileserver-gl.

Let me inform you proper now that I’m not at all an skilled in mapping. I did this mission out of private curiosity and can’t assure the correctness of the knowledge on this web page. I attempted my finest to ensure every little thing I wrote is right however errors can nonetheless creep in. In the event you discover any error simply e mail me and I’ll repair it. Thanks!

Putting in the Docker model

Set up Docker and Kitematic when 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 information folder for the tileserver-gl container. You are able to do that in Kitematic by clicking on the container identify within the left column, clicking on “settings” on the high proper after which selecting the “Volumes” tab.

One other factor I like doing is mapping the container port to a recognized 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 information. We shall be downloading a mbtiles file for Pakistan. This mbtiles file is a compressed file which comprises all the knowledge you see in a standard map. We shall be downloading the OpenStreetMap vector tiles.

Now put the downloaded file within the native folder you mapped above to the /information folder for the container. In my case, I mapped a docker_tileserver folder on my Desktop because the /information 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 /information 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": "/information"
    },
    "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]
      }
    }
  },
  "information": {
    "v3": {
      "mbtiles": "/information/2017-07-03_asia_pakistan.mbtiles"
    }
  }
}

We haven’t added something new within the config file. Go to Kitematic and restart the server. It’s best to be capable to entry localhost:3000 and be greeted with this web page:

At this level, you’ll be able to click on on the viewer and navigate the maps. If that’s what you wished all alongside, excellent. You’re lastly at your vacation spot. You’ll be able to plug in an online interface utilizing mapbox-gl-js or one thing comparable and name it a day.

Nevertheless, I wished one thing extra. I wished 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 a protracted historical past as an Open supply firm. Their help is top-notch and their instruments are wonderful. Fortunate for us, they host a web-based map editor known 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’ll be able to all the time start styling from scratch however it’s all the time simpler and quicker to face on the shoulder of the giants. We shall be enhancing the Darkish Matter model to go well with our wants.

The best way 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 highway 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 {identify:latin}{identify:nonlatin} to {identify:latin}) together with a number 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 Type

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 to alter 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 in addition click on on Type Settings and edit them like this:

Now click on on Export and obtain the JSON file. It can 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 /information 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 Type

Now we simply must 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": "/information"
    },
    "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": "/information/types/blueprint.json",
      "tilejson": {
        "bounds": [60.8786, 23.32744, 77.83562, 37.09664]
      }
    }
  },
  "information": {
    "v3": {
      "mbtiles": "2017-07-03_asia_pakistan.mbtiles"
    }
  }
}

In the event you use any customized fonts you’ll be able to put them within the types folder and hopefully, they need to work. Now restart the tileserver-gl container from kitematic and it is best to be capable to see “Blueprint” model on the homepage.

I went forward and created a static map of my metropolis out of this. You’ll be able to too! Let’s first see how I did it. I used the viewer for the Blueprint model and went to my metropolis (Lahore). I obtained 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’ll be able to learn extra about how the static export works within the on-line documentation.

I created a pleasant trying poster utilizing this as nicely!

Subsequent Steps

Now that you know the way the export works, you’ll be able to go forward and create a pleasant trying poster in your metropolis or nation. Simply obtain the respective mbtiles file in your location and try to be good to go!

There are nonetheless some edges of tileserver-gl which I haven’t managed to completely discover. I would go forward and use tippecanoe to create some cool trying maps like this:

I hope you loved the put up. If there’s something I missed or something which I defined mistaken please let me know. See you all within the subsequent put up! ❤️

Helpful Hyperlinks: