HERE Maps for JavaScript 3.1

Pre-requirements

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('https://js.api.here.com/v3/3.1/styles/omv/oslo/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 ""