Search for content

Creating a Map App (OSM)

The PTV Developer Vector Maps OSM 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, the index.html file and your PTV Developer API key.

 

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>OSM 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 display additional layers.
     // attributionControl: true,
     // customAttribution: '[additional attribution (e.g. HERE)]',
     container: 'map',
     zoom: 11,
     pitch: 0,
     minZoom: 2,
     center: mapLocation,
     antialias: true,
     hash: true,
     style: 'https://vectormaps-resources.myptv.com/styles-osm/latest/standard-osm.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 our predefined standard-osm.json file. The transformRequest callback is used to manipulate the URL for each request that is sent by the MapLibre renderer. In this case we add an ApiKey header for authentication, where you have to replace YOUR_API_KEY with your own PTV Developer API key.