
Add layers, interactivity, fun featuresĪnd turn your setup into a web app with your favorite framework (NodeJS, etc. Map.addControl(new mapboxgl.NavigationControl()) Ħ. Add zoom and rotation controls to the map. Replace the url to your style and the access token placeholder by yours. The example below shows how to display a map full screen with basic controls. Create an account or sign in to yours, and create a token. To use this API developed by Mapbox, an Access Token is needed. We'll finally create our interactive map using Mapbox GL JS. Once we think we're good to go, we can change the docker run so that it runs automatically at server boot sudo docker run -t -d -restart unless-stopped -v $(pwd):/data -p 8080:8080 maptiler/tileserver-gl -c myconfig.json 5. Then, you can run and check that everything works :) sudo docker run -it -v $(pwd):/data -p 8080:8080 maptiler/tileserver-gl -c myconfig.json In your style file, replace the source and glyphs URLs by the following: "url": "mbtiles://mytiles.mbtiles" Bounds are the boundaries of the tileset, long/lat of bottom left and upper right corners. Replacing your tileset and style name accordingly. Finally, create a myconfig.json file containing the following:.json style files you've created in step #3. Create two additional folders in the root folder: "glyphs" and "styles", where you'll move the.Download the Noto Sans fonts from, and copy the files into a new "fonts" folder within the root folder.In the following, "root folder" will refer to the root folder of our tileserver. In order to get closer to production, we will need to create a config file, and get a few things in place. You will be able to inspect them, or see a basic preview with TileServer-GL's default style. The above should already get your tileserver running and accessible on, serving the tilesets in your current directory. Sudo docker run -it -v $(pwd):/data -p 8080:80 maptiler/tileserver-gl OpenMapTiles recommends installing and using it with docker: : sudo docker pull maptiler/tileserver-gl In the following paragraph, we'll see which fields we need to modify in order for our style to be used in combination with our own tileset and tileserver. Now you can start customizing how you want all layers to be displayed.

In Data Source, replace the URL by the TileJSON URL you can copy from your TileServer-GL homepage. Click on Code on Github, then Code > Download ZIP, and extract the style.json.

Start by using one of the styles listed on. Alternatively if you want to train with the tiles served by your local vector tile server, you can download the editor or use docker to run it locally: sudo docker pull maputnik/editorĭocker run -it -rm -p 8888:8888 maputnik/editor You can use the online editor if you want to edit your style using the online maptiler tiles as example. Maputnik is a free and open source visual editor for the Mapbox GL style specification. If you want to include the sea in your tiles, the ability to add shapefiles is actually used by the default json and lua files, as the README of tilemaker explains: create a directory called coastline in the same place you're running tilemaker from, and then save the files from in it, such that tilemaker can find a file at coastline/water_polygons.shp. You can use that functionality if you want to add custom layers into your basic tileset. Note: Shapefiles (.shp) can also be added as described on this page. config resources/config-openmaptiles.json \ There are default files in the source folder that can be used. lua file tells how each node should be placed it into those layers according to their tags json file listing each layer, and the zoom levels at which to apply it


Tilemaker creates vector tiles (in Mapbox Vector Tile format) from an. Create Mapbox tilesetĭownload and install Tilemaker to create your vector tiles. Select PBF as the output format (Optional) Additional static layersĬustom layers can be create in Shapefile format using (not tested) 2. Download OpenStreetMap ExtractĮxtract OSM data using. In the following, I will explain in 5 steps how you can reproduce a starting point for something similar on your own server (the below assumes an Ubuntu server). I wanted to create a web app whose main asset featuring an interactive map, fully self-hosted including tiles and custom geo-data, and with a customizable style.
