HERE Maps for JavaScript 3.1

Pre-requirements

  • JavaScript library from here
  • Credentials to acces the service, see here
  • Authentication via apikey. Authentication via header token is not supported.

Live Demo

You can see the comprehensive set of examples here.

Code

For the basic example include the library components to the page:

<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

The CSS for this example would be similar to this:

        body { width: 100%; height: 100%; position: absolute; margin: 0px; padding: 0px; overflow: hidden;}
        #map { position:absolute; top:0; bottom:0; width:100%; height: 100%;}

The following JavaScript snippet renders the map in the provided container and enables map interactions:

    <body>
        <div id="map"></div>
        <script>
            const platform = new H.service.Platform({
                'apikey': '{YOUR_APIKEY}'
            });

            // Obtain the default map types from the platform object:
            const defaultLayers = platform.createDefaultLayers();

            // Instantiate (and display) a map:
            var map = new H.Map(
                document.getElementById("map"),
                defaultLayers.vector.normal.map, {
                    zoom: 14,
                    center: { lat: 52.5, lng: 13.4 }
                });

            // MapEvents enables the event system
            // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
            const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
        </script>
    </body>

Custom configurations

The library could be configured to use the paths that are different from default. The following example demonstrates such a use-case:

var platform = new H.service.Platform({
  apikey: '<API_KEY>'
});

// create a service that calls the custom endpoint
var service = platform.getOMVService({path:  'v2/vectortiles/core/mc'});
// create a provider and a layer that use the custom service and a custom style
var provider = new H.service.omv.Provider(service,
    new H.map.Style('http://js.api.here.com/v3/3.1/styles/omv/japan/normal.day.yaml'));
var layer = new H.map.layer.TileLayer(provider, {max: 22});

// Instantiate (and display) a map:
var map = new H.Map(
    document.getElementById("map"),
    layer, {
        zoom: 14,
        center: { lat: 52.5, lng: 13.4 }
    });

results matching ""

    No results matching ""