Creating a map app

The Vector Maps service provides highly configurable map styles. You have the choice of using one of our predefined style or to build your own.

Showing a map in a web browser

In this tutorial, we describe how to create a simple web application that shows a map based on vector tiles from PTV Developer.

You will need a browser that supports WebGL and the following two files:

  • .json (Mapbox style document)
  • index.html
The MapBox style document (style.json)

The style document contains information on how the map is rendered and from which resources. It is the standard way MapBox configures the renderer. A very detailed description on how this JSON file works can be found on the MapBox GL js API documentation page.

A sample style.json looks like this:

{ "version": 8, "name": "Basic", "pitch": 0, "sources": { "ptv": { "type": "vector", "tiles": ["{z}/{x}/{y}"], "minZoom": 0, "maxzoom": 17 } }, "sprite": "", "glyphs": "{fontstack}/{range}.pbf", "layers": [ YOUR_LAYER_DEFINITIONS_HERE ] }

  • The tiles property describes the URL of the tile server from PTV.
  • The sprite property defines the address where to fetch the sprite sheet. The sheet defines all kinds of icons like highway shields and so on.
  • The glyphs entry is the URL for the fonts which will be needed for rendering the map labels and street names.
  • The layers section describes how the map should be rendered. Every map element provided in a vector tile can be customized and styled with a layer definition. We provide a set of four different layer styles, which can be downloaded from our vectormaps-resources server. Please read our “Styling your map” documentation for this purpose and have an additional look at the MapBox GL js API about Layers.
HTML code

As an example we provide a simple index.html file where we instantiate the MapBox renderer:

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>VectorMap</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src=''></script> <link href='' rel='stylesheet' /> <style type="text/css"> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id='map'></div> <script type="text/javascript"> var apiKey = 'YOUR_API_KEY'; mapboxgl.setRTLTextPlugin( '', null, true // Lazy load the plugin to support right-to-left languages such as Arabic and Hebrew. ); var mapLocation = [8.4055677, 49.0070036]; var map = new mapboxgl.Map({ // You need a customAttribution if you do not use map styles provided by PTV or if you have to add additional copyright attribution. // attributionControl: true, // customAttribution: '&copy; 2021 PTV AG, HERE', container: 'map', zoom: 11, pitch: 0, minZoom: 2, center: mapLocation, antialias: true, hash: true, // you can also use your own style 'https://<your_servername>/style.json' style: '', transformRequest: (url, resourceType) => { if (resourceType === 'Tile' && url.startsWith('')) { return { url: url + '?apiKey=' + apiKey } } } }); // Add controls to the map. map.addControl(new mapboxgl.NavigationControl()); map.addControl(new mapboxgl.GeolocateControl({ positionOptions: { enableHighAccuracy: true}, trackUserLocation: true }) ); </script> </body> </html>

This will set up a simple map view which occupies the entire browser window.

In the script section, we first initialize the MapBox RTL plugin that is necessary for rendering right to left written languages like Hebrew or Arabic correctly.

Second, we instantiate a map by calling var map = new mapboxgl.Map(). We define the initial view state properties like the zoom factor and the pitch. The style section will link to our formerly created style.json file. Make sure that you host this file on a server which adds the header Access-Control-Allow-Origin', '*' to the response, otherwise you may get a CORS access error. The transformRequest callback is used to manipulate the URL for each request that is sent by the Mapbox renderer. In this case, we have to add an ApiKey header for authentication, where you have to replace YOUR_API_KEY with your own PTV Developer API key.