Search for content

Creating a Map App

The PTV Developer Vector Maps API allows you to render geographical vector tiles on a map view in a browser window.

 

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 html file:

  • index.html

 

HTML code

As an example we provide a simple index.html file where we instantiate the MapLibre 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='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
 <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' 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';
   maplibregl.setRTLTextPlugin(
     'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
     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 maplibregl.Map({
     // You need a customAttribution if you have to add additional copyright attribution, for example if you want to show additional layers.
     // attributionControl: true,
     // customAttribution: '[additional attribution]',
     container: 'map',
     zoom: 11,
     pitch: 0,
     minZoom: 2,
     center: mapLocation,
     antialias: true,
     hash: true,
     style: 'https://vectormaps-resources.myptv.com/styles/latest/standard.json',
     transformRequest: (url, resourceType) => {
       if (resourceType === 'Tile' && url.startsWith('https://api.myptv.com')) {
         return {
           url: url + '?apiKey=' + apiKey
         }
       }
     }
   });
   // Add controls to the map.
   map.addControl(new maplibregl.NavigationControl());
   map.addControl(new maplibregl.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 maplibregl.Map(). We define the initial view state properties like the zoom factor and the pitch. The style section will link to the standard style provided by PTV. The transformRequest callback is used to manipulate the URL for each request that is sent by the MapLibre 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.