├── LICENSE ├── README.md ├── capture-map-area ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── change-harp-style-at-load ├── data │ └── night.json ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── change-style-at-load ├── data │ ├── dark.yaml │ └── icons │ │ └── sprite-2x.png ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── change-style-at-runtime ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── circle-on-the-map ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── context-menu ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── custom-cluster-theme ├── data │ ├── photos.js │ └── wikimedia-logo.png ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── custom-tile-overlay ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── tiles │ ├── 12 │ └── 1343 │ │ └── 2200.png │ ├── 13 │ ├── 2686 │ │ ├── 4400.png │ │ └── 4401.png │ └── 2687 │ │ ├── 4400.png │ │ └── 4401.png │ ├── 14 │ ├── 5372 │ │ ├── 8800.png │ │ ├── 8801.png │ │ ├── 8802.png │ │ └── 8803.png │ ├── 5373 │ │ ├── 8800.png │ │ ├── 8801.png │ │ ├── 8802.png │ │ └── 8803.png │ ├── 5374 │ │ ├── 8800.png │ │ ├── 8801.png │ │ ├── 8802.png │ │ └── 8803.png │ └── 5375 │ │ ├── 8800.png │ │ ├── 8801.png │ │ ├── 8802.png │ │ └── 8803.png │ ├── 15 │ ├── 10744 │ │ ├── 17601.png │ │ ├── 17602.png │ │ ├── 17603.png │ │ ├── 17604.png │ │ ├── 17605.png │ │ ├── 17606.png │ │ └── 17607.png │ ├── 10745 │ │ ├── 17601.png │ │ ├── 17602.png │ │ ├── 17603.png │ │ ├── 17604.png │ │ ├── 17605.png │ │ ├── 17606.png │ │ └── 17607.png │ ├── 10746 │ │ ├── 17601.png │ │ ├── 17602.png │ │ ├── 17603.png │ │ ├── 17604.png │ │ ├── 17605.png │ │ ├── 17606.png │ │ └── 17607.png │ ├── 10747 │ │ ├── 17601.png │ │ ├── 17602.png │ │ ├── 17603.png │ │ ├── 17604.png │ │ ├── 17605.png │ │ ├── 17606.png │ │ └── 17607.png │ ├── 10748 │ │ ├── 17601.png │ │ ├── 17602.png │ │ ├── 17603.png │ │ ├── 17604.png │ │ ├── 17605.png │ │ ├── 17606.png │ │ └── 17607.png │ ├── 10749 │ │ ├── 17601.png │ │ ├── 17602.png │ │ ├── 17603.png │ │ ├── 17604.png │ │ ├── 17605.png │ │ ├── 17606.png │ │ └── 17607.png │ └── 10750 │ │ ├── 17601.png │ │ ├── 17602.png │ │ ├── 17603.png │ │ ├── 17604.png │ │ ├── 17605.png │ │ ├── 17606.png │ │ └── 17607.png │ ├── LICENSE │ └── blank.png ├── custom-zooming-into-bounds ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── display-geojson-on-map ├── data │ └── berlin.json ├── demo.css ├── demo.details ├── demo.html └── demo.js ├── display-kml-on-map ├── data │ └── us-states.kml ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── img │ └── star.png ├── dom-marker-rotation ├── demo.css ├── demo.details ├── demo.html └── demo.js ├── draggable-marker ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── draggable-shapes ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── extruded-objects ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── finding-the-nearest-marker ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── fonts ├── FiraMono-Regular.eot ├── FiraMono-Regular.ttf ├── FiraMono-Regular.woff ├── FiraMono-Regular.woff2 ├── FiraSans-Light.eot ├── FiraSans-Light.ttf ├── FiraSans-Light.woff └── FiraSansOT-Light.otf ├── geocode-a-location-from-address ├── demo.css ├── demo.details ├── demo.html ├── demo.js ├── img │ └── arrows.png └── styles.css ├── geocode-a-location-from-structured-address ├── demo.css ├── demo.details ├── demo.html ├── demo.js ├── img │ └── arrows.png └── styles.css ├── image-overlay ├── data │ ├── 0.png │ ├── 1.png │ ├── 10.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ └── 9.png ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── indoor-map-movement ├── demo.css ├── demo.details ├── demo.html └── demo.js ├── indoor-map-ui-interaction ├── demo.css ├── demo.details ├── demo.html └── demo.js ├── indoor-map ├── demo.css ├── demo.details ├── demo.html └── demo.js ├── interactive-basemap ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── interleave-layers ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── map-at-specified-location ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── map-multi-language-support ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── map-object-events-displayed ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── map-objects-event-delegation ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── map-scale-bar-changing-from-the-metric-system ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── map-using-view-bounds ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── map-with-custom-map-settings-ui-control ├── data │ └── berlin.json ├── demo.css ├── demo.details ├── demo.html └── demo.js ├── map-with-dom-marker ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── map-with-isoline-route ├── demo.css ├── demo.details ├── demo.html ├── demo.js ├── img │ └── arrows.png └── styles.css ├── map-with-pedestrian-route-from-a-to-b ├── demo.css ├── demo.details ├── demo.html ├── demo.js ├── img │ └── arrows.png └── styles.css ├── map-with-route-from-a-to-b-using-public-transport ├── demo.css ├── demo.details ├── demo.html ├── demo.js ├── img │ └── arrows.png └── styles.css ├── map-with-route-from-a-to-b ├── demo.css ├── demo.details ├── demo.html ├── demo.js ├── img │ └── arrows.png └── styles.css ├── map-with-svg-graphic-markers ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── marker-clustering ├── data │ └── airports.js ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── markers-on-the-map ├── demo.css ├── demo.details ├── demo.html ├── demo.js ├── markers-on-the-map.png └── styles.css ├── markers-update-position-with-animation ├── demo.css ├── demo.details ├── demo.html └── demo.js ├── markers-with-altitude ├── demo.css ├── demo.details ├── demo.html └── demo.js ├── meta.json ├── open-infobubble ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── ordering-overlapping-markers ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── panning-the-map ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── polygon-on-the-map ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── polygon-with-holes-on-the-map ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── polyline-on-the-map ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── position-on-mouse-click ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── postcodes-jsla-fts ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── rectangle-on-the-map ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── resizable-circle ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── resizable-polygon ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── resizable-polyline ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── resizable-rect ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── restrict-map ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── reverse-geocode-an-address-from-location ├── demo.css ├── demo.details ├── demo.html ├── demo.js ├── img │ └── arrows.png └── styles.css ├── search-for-landmark ├── demo.css ├── demo.details ├── demo.html ├── demo.js ├── img │ └── arrows.png └── styles.css ├── search-match-fts ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── synchronising-two-maps ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── template.css ├── test-credentials.js ├── tilted-map-bounds ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css ├── transit-iml ├── demo.css ├── demo.details ├── demo.html └── demo.js ├── truck-routing-road-restrictions ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css └── zoom-to-set-of-markers ├── demo.css ├── demo.details ├── demo.html ├── demo.js └── styles.css /LICENSE: -------------------------------------------------------------------------------- 1 | Unless otherwise noted in a LICENSE file for specific files or directories, the files in this repository are under the following license. 2 | 3 | The MIT License (MIT) 4 | 5 | Copyright (c) 2016 HERE Europe B.V. 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | -------------------------------------------------------------------------------- /capture-map-area/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 160px; 10 | } 11 | 12 | .btn-group { 13 | position: absolute; 14 | top: 11rem; 15 | left: 0.2rem; 16 | background-color: #fff; 17 | padding: 10px; 18 | } 19 | 20 | @media (max-width: 1024px ) { 21 | .btn-group { 22 | top: 15rem; 23 | } 24 | } -------------------------------------------------------------------------------- /capture-map-area/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Take a Snapshot of the Map 3 | description: Capture an area on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /capture-map-area/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Take a Snapshot of the Map 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Take a Snapshot of the Map

21 |

Capture an area on the map

22 |
23 |

This example demonstrates how to take a snapshot of the map. It specifies area to be captured with top/left and bottom/right view port coordinates

24 |
25 |
26 |

Code

27 |

Snapshot functionality belongs to the mapsjs-core module of the API. 28 | The capture method of the H.Map class takes as an argument callback 29 | function that is executed when snapshot is ready, instance of H.ui.UI class 30 | to add the scale bar to the output, and top/left (50,50)-bottom/right (500,200) coordinates to specify the area of the map to capture.

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /capture-map-area/styles.css: -------------------------------------------------------------------------------- 1 | #capture-map-area #map { 2 | display: inline-block; 3 | } 4 | 5 | #capture-map-area #panel { 6 | display: inline-block; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /change-harp-style-at-load/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /change-harp-style-at-load/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Set a map style exported from the HERE Style Editor 3 | description: Set a style created in the HERE Style Editor during the map instantiation 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /change-harp-style-at-load/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Set a map style exported from the HERE Style Editor 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Set a map style exported from the HERE Style Editor

21 |

Set a style created in the HERE Style Editor during the map instantiation

22 |
23 |

This example shows how to set a map style that was created in the HERE Style Editor. 24 |

25 |
26 |

Code

27 |

The code below creates a new H.map.render.harp.Style instance that loads and parses the user's style 'night.json'. 28 | After that the style is used to create a new H.map.layer.TileLayer, which is passed to the map constructor. 29 |

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /change-harp-style-at-load/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Boilerplate map initialization code starts below: 3 | */ 4 | 5 | // Step 1: initialize communication with the platform 6 | // In your own code, replace variable window.apikey with your own apikey 7 | 8 | var platform = new H.service.Platform({ 9 | apikey: window.apikey 10 | }); 11 | 12 | // Step 2: specify engine type. In this example, we use HARP rendering engine, which is capable 13 | // of rendering vector data using the style configuration exported from the HERE Style Editor. 14 | // HARP engine is not the default engine, and it's not included in the mapsjs-core.js module. 15 | // To use this engine, you need to include mapsjs-harp.js file to your HTML page 16 | var engineType = H.Map.EngineType['HARP']; 17 | 18 | // Step 3: create the style object from the style configuration 19 | // exported from the HERE Style Editor. The argument is a style path 20 | var style = new H.map.render.harp.Style('https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/data/night.json'); 21 | 22 | // Step 4: create a layer with the style object: 23 | var vectorLayer = platform.getOMVService().createLayer(style, { engineType }); 24 | 25 | // Step 5: initialize a map 26 | var map = new H.Map(document.getElementById('map'), 27 | vectorLayer, { 28 | engineType, 29 | center: {lat: 52.51477270923461, lng: 13.39846691425174}, 30 | zoom: 13, 31 | pixelRatio: window.devicePixelRatio || 1 32 | }); 33 | // add a resize listener to make sure that the map occupies the whole container 34 | window.addEventListener('resize', () => map.getViewPort().resize()); 35 | 36 | //Step 6: make the map interactive 37 | // MapEvents enables the event system 38 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 39 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 40 | -------------------------------------------------------------------------------- /change-harp-style-at-load/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/change-harp-style-at-load/styles.css -------------------------------------------------------------------------------- /change-style-at-load/data/icons/sprite-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/change-style-at-load/data/icons/sprite-2x.png -------------------------------------------------------------------------------- /change-style-at-load/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /change-style-at-load/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Set a map style at the load time 3 | description: Set a style of the whole map during the map instantiation 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /change-style-at-load/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Set a map style at the load time 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Set a map style at the load time

20 |

Set a style of the whole map during the map instantiation

21 |
22 |

This example shows how to set a map style during the map loading. The vector layer uses the 'normal.day' style by default, the style 23 | can be changed to the user defined while the map is loading. 24 |

25 |
26 |

Code

27 |

The code below created a new H.map.Style instance that loads and parses the user's style 'dark.yaml'. After that 28 | the style is set on the current vector provider. 29 |

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /change-style-at-load/demo.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * @param {H.Map} map A HERE Map instance within the application 4 | */ 5 | function setStyle(map){ 6 | // get the vector provider from the base layer 7 | var provider = map.getBaseLayer().getProvider(); 8 | // Create the style object from the YAML configuration. 9 | // First argument is the style path and the second is the base URL to use for 10 | // resolving relative URLs in the style like textures, fonts. 11 | // all referenced resources relative to the base path https://js.api.here.com/v3/3.1/styles/omv. 12 | var style = new H.map.Style('https://heremaps.github.io/maps-api-for-javascript-examples/change-style-at-load/data/dark.yaml', 13 | 'https://js.api.here.com/v3/3.1/styles/omv/'); 14 | // set the style on the existing layer 15 | provider.setStyle(style); 16 | } 17 | 18 | /** 19 | * Boilerplate map initialization code starts below: 20 | */ 21 | 22 | //Step 1: initialize communication with the platform 23 | // In your own code, replace variable window.apikey with your own apikey 24 | 25 | var platform = new H.service.Platform({ 26 | apikey: window.apikey 27 | }); 28 | var defaultLayers = platform.createDefaultLayers(); 29 | 30 | //Step 2: initialize a map 31 | var map = new H.Map(document.getElementById('map'), 32 | defaultLayers.vector.normal.map, { 33 | center: {lat: 52.51477270923461, lng: 13.39846691425174}, 34 | zoom: 13, 35 | pixelRatio: window.devicePixelRatio || 1 36 | }); 37 | // add a resize listener to make sure that the map occupies the whole container 38 | window.addEventListener('resize', () => map.getViewPort().resize()); 39 | 40 | //Step 3: make the map interactive 41 | // MapEvents enables the event system 42 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 43 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 44 | 45 | // Now use the map as required... 46 | setStyle(map); 47 | -------------------------------------------------------------------------------- /change-style-at-load/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/change-style-at-load/styles.css -------------------------------------------------------------------------------- /change-style-at-runtime/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /change-style-at-runtime/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Change map style at runtime 3 | description: Change a style of the map feature when map is instantiated 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /change-style-at-runtime/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Change map style at runtime 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Change map style at runtime

20 |

Change a style of the map feature when map is instantiated

21 |
22 |

This example shows how to change map feature style during the map runtime. The map is loaded with the default "normal.map" style, after that 23 | the color of the features "landuse.park" and "landuse.builtup" is changed to the dark green and the dark grey accordingly. 24 |

25 |
26 |

Code

27 |

The code below adds a change event listener to the instence of the H.map.Style associated with the 28 | layer's provider. Within this listener the section of the map style is extracted and modified and merged back to the original style. 29 | That results in the changed colors for the "landuse.park" and "landuse.builtup" map features. 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /change-style-at-runtime/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/change-style-at-runtime/styles.css -------------------------------------------------------------------------------- /circle-on-the-map/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /circle-on-the-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Circle on the Map 3 | description: Display a map highlighting a circular region 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /circle-on-the-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Circle on the Map 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Circle on the Map

20 |

Display a map highlighting a circular region

21 |
22 |

This example shows a circle with a radius of 1000 meters centered over a location in New Delhi (28.6071°N, 77.2127°E) and displayed on a moveable map.

23 |
24 |

Code

25 |

A circle is created using the H.map.Circle class, 26 | passing in the center point and radius. The look-and-feel of the circle 27 | can be altered by adding the style parameter 28 |

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /circle-on-the-map/demo.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Adds a circle over New Delhi with a radius of 1000 metres onto the map 4 | * 5 | * @param {H.Map} map A HERE Map instance within the application 6 | */ 7 | function addCircleToMap(map){ 8 | map.addObject(new H.map.Circle( 9 | // The central point of the circle 10 | {lat:28.6071, lng:77.2127}, 11 | // The radius of the circle in meters 12 | 1000, 13 | { 14 | style: { 15 | strokeColor: 'rgba(55, 85, 170, 0.6)', // Color of the perimeter 16 | lineWidth: 2, 17 | fillColor: 'rgba(0, 128, 0, 0.7)' // Color of the circle 18 | } 19 | } 20 | )); 21 | } 22 | 23 | 24 | 25 | 26 | 27 | /** 28 | * Boilerplate map initialization code starts below: 29 | */ 30 | 31 | //Step 1: initialize communication with the platform 32 | // In your own code, replace variable window.apikey with your own apikey 33 | var platform = new H.service.Platform({ 34 | apikey: window.apikey 35 | }); 36 | var defaultLayers = platform.createDefaultLayers(); 37 | 38 | //Step 2: initialize a map - this map is centered over New Delhi 39 | var map = new H.Map(document.getElementById('map'), 40 | defaultLayers.vector.normal.map, { 41 | center: {lat:28.6071, lng:77.2127}, 42 | zoom: 13, 43 | pixelRatio: window.devicePixelRatio || 1 44 | }); 45 | // add a resize listener to make sure that the map occupies the whole container 46 | window.addEventListener('resize', () => map.getViewPort().resize()); 47 | 48 | //Step 3: make the map interactive 49 | // MapEvents enables the event system 50 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 51 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 52 | 53 | // Create the default UI components 54 | var ui = H.ui.UI.createDefault(map, defaultLayers); 55 | 56 | // Now use the map as required... 57 | addCircleToMap(map); -------------------------------------------------------------------------------- /circle-on-the-map/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/circle-on-the-map/styles.css -------------------------------------------------------------------------------- /context-menu/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /context-menu/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Context Menu 3 | description: Adding a context menu to map objects 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /context-menu/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Context menu 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

Context menu

22 |

Adding a context menu to map objects

23 |
24 |

This example shows how to add a context menu for the map and map objects. Map has a default context items to show the click position, centring the map and creating a circle. Circles have their own context menu item to remove them. 25 |

26 |
27 |

Code

28 |

In order to add context menu items, first you need to subscribe to contextmenu event. ContextMenuEvent has a special items property, where menu items are stored. Each menu item is an instance of H.util.ContextItem class. 29 |

30 |

By default new menu items does not replace the previous ones, instead all items are collected and displayed together. However you can easily modify the items array to change this behaviour.

31 |

Context items can be visually separated from each other by using the H.util.ContextItem.SEPARATOR. 32 |

33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /context-menu/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/context-menu/styles.css -------------------------------------------------------------------------------- /custom-cluster-theme/data/wikimedia-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-cluster-theme/data/wikimedia-logo.png -------------------------------------------------------------------------------- /custom-cluster-theme/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /custom-cluster-theme/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Marker Clustering with Custom Theme 3 | description: Cluster multiple markers and customize the theme 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | - https://heremaps.github.io/maps-api-for-javascript-examples/custom-cluster-theme/data/photos.js 7 | normalize_css: no 8 | dtd: html 5 9 | wrap: d 10 | panel_html: 0 11 | panel_js: 0 12 | panel_css: 0 13 | ... -------------------------------------------------------------------------------- /custom-cluster-theme/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-cluster-theme/styles.css -------------------------------------------------------------------------------- /custom-tile-overlay/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 400px; 10 | } -------------------------------------------------------------------------------- /custom-tile-overlay/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Adding an Overlay to the Map 3 | description: This example displays a movable map initially centered on the historical centre of Berlin (52.515, °N, 13.405°E) with an overlay of a historical map from 1789 on top of the base map. A public domain image was used as a source, and split it into individual map tiles. Additional tiles are only downloaded when the zoom level or location changes. 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/12/1343/2200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/12/1343/2200.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/13/2686/4400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/13/2686/4400.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/13/2686/4401.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/13/2686/4401.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/13/2687/4400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/13/2687/4400.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/13/2687/4401.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/13/2687/4401.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5372/8800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5372/8800.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5372/8801.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5372/8801.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5372/8802.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5372/8802.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5372/8803.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5372/8803.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5373/8800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5373/8800.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5373/8801.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5373/8801.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5373/8802.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5373/8802.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5373/8803.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5373/8803.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5374/8800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5374/8800.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5374/8801.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5374/8801.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5374/8802.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5374/8802.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5374/8803.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5374/8803.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5375/8800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5375/8800.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5375/8801.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5375/8801.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5375/8802.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5375/8802.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/14/5375/8803.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/14/5375/8803.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10744/17601.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10744/17601.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10744/17602.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10744/17602.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10744/17603.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10744/17603.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10744/17604.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10744/17604.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10744/17605.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10744/17605.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10744/17606.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10744/17606.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10744/17607.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10744/17607.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10745/17601.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10745/17601.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10745/17602.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10745/17602.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10745/17603.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10745/17603.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10745/17604.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10745/17604.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10745/17605.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10745/17605.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10745/17606.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10745/17606.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10745/17607.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10745/17607.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10746/17601.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10746/17601.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10746/17602.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10746/17602.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10746/17603.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10746/17603.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10746/17604.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10746/17604.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10746/17605.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10746/17605.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10746/17606.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10746/17606.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10746/17607.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10746/17607.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10747/17601.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10747/17601.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10747/17602.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10747/17602.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10747/17603.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10747/17603.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10747/17604.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10747/17604.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10747/17605.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10747/17605.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10747/17606.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10747/17606.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10747/17607.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10747/17607.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10748/17601.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10748/17601.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10748/17602.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10748/17602.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10748/17603.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10748/17603.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10748/17604.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10748/17604.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10748/17605.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10748/17605.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10748/17606.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10748/17606.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10748/17607.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10748/17607.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10749/17601.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10749/17601.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10749/17602.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10749/17602.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10749/17603.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10749/17603.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10749/17604.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10749/17604.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10749/17605.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10749/17605.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10749/17606.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10749/17606.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10749/17607.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10749/17607.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10750/17601.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10750/17601.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10750/17602.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10750/17602.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10750/17603.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10750/17603.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10750/17604.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10750/17604.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10750/17605.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10750/17605.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10750/17606.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10750/17606.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/15/10750/17607.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/15/10750/17607.png -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/LICENSE: -------------------------------------------------------------------------------- 1 | This is a faithful photographic reproduction of a two-dimensional, public domain work of art. The work of art itself is in the public domain for the following reason: 2 | 3 | This work is in the public domain in its country of origin and other countries and areas where the copyright term is the author's life plus 100 years or less. 4 | 5 | The official position taken by the Wikimedia Foundation is that "faithful reproductions of two-dimensional public domain works of art are public domain". 6 | This photographic reproduction is therefore also considered to be in the public domain in the United States. In other jurisdictions, re-use of this content may be restricted; see Reuse of PD-Art photographs for details. 7 | 8 | Reuse of PD-Art photographs: https://commons.wikimedia.org/wiki/Commons:Reuse_of_PD-Art_photographs 9 | See also: https://commons.wikimedia.org/wiki/Commons:Reusing_content_outside_Wikimedia -------------------------------------------------------------------------------- /custom-tile-overlay/tiles/blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-tile-overlay/tiles/blank.png -------------------------------------------------------------------------------- /custom-zooming-into-bounds/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /custom-zooming-into-bounds/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Zoom into Bounds 3 | description: Zoom into bounds limiting maximum level 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /custom-zooming-into-bounds/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Zoom into Bounds 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Zoom into Bounds

21 |

Zoom into bounds limiting maximum level

22 |
23 |

This example displays circles on the map, which denote cities' population. By clicking on each circle you can zoom into it, 24 | but with different maximum zoom levels, depending on the circle size.

25 |
26 |

Code

27 |

We are using the getBoundingBox to retrieve object's bounds and then set it to the H.map.ViewModel 28 | to achieve the best zoom level and map centre, and then perform a custom processing on it to limit maximum zoom level.

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /custom-zooming-into-bounds/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/custom-zooming-into-bounds/styles.css -------------------------------------------------------------------------------- /display-geojson-on-map/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 400px; 10 | } -------------------------------------------------------------------------------- /display-geojson-on-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Display GeoJSON Data 3 | description: Parse a GeoJSON file and display the data on a map. 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /display-geojson-on-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Display GeoJSON Data 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

Display GeoJSON Data

20 |

This example shows how to display objects from GeoJSON file on the map using built in parser.

21 |

In order to work with GeoJSON files we have to additionally load data module of the API. Than we use H.data.geojson.Reader class, which downloads and parses the file. Than we add a layer on the map using addLayer method to see the results.

22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /display-geojson-on-map/demo.js: -------------------------------------------------------------------------------- 1 | function showGeoJSONData (map) { 2 | // Create GeoJSON reader which will download the specified file. 3 | // Shape of the file was obtained by using HERE Geocoding and Search API. 4 | // It is possible to customize look and feel of the objects. 5 | var reader = new H.data.geojson.Reader('data/berlin.json', { 6 | // This function is called each time parser detects a new map object 7 | style: function (mapObject) { 8 | // Parsed geo objects could be styled using setStyle method 9 | if (mapObject instanceof H.map.Polygon) { 10 | mapObject.setStyle({ 11 | fillColor: 'rgba(255, 0, 0, 0.5)', 12 | strokeColor: 'rgba(0, 0, 255, 0.2)', 13 | lineWidth: 3 14 | }); 15 | } 16 | } 17 | }); 18 | 19 | // Start parsing the file 20 | reader.parse(); 21 | 22 | // Add layer which shows GeoJSON data on the map 23 | map.addLayer(reader.getLayer()); 24 | } 25 | 26 | /** 27 | * Boilerplate map initialization code starts below: 28 | */ 29 | // Step 1: initialize communication with the platform 30 | var platform = new H.service.Platform({ 31 | apikey: window.apikey 32 | }); 33 | var defaultLayers = platform.createDefaultLayers(); 34 | 35 | // Step 2: initialize a map 36 | var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, { 37 | zoom: 10, 38 | center: {lat: 52.522763341087874, lng: 13.492702024100026}, 39 | pixelRatio: window.devicePixelRatio || 1 40 | }); 41 | // add a resize listener to make sure that the map occupies the whole container 42 | window.addEventListener('resize', () => map.getViewPort().resize()); 43 | 44 | 45 | // Step 3: make the map interactive 46 | // MapEvents enables the event system 47 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 48 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 49 | 50 | // Create the default UI components 51 | var ui = H.ui.UI.createDefault(map, defaultLayers); 52 | 53 | showGeoJSONData(map); -------------------------------------------------------------------------------- /display-kml-on-map/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 400px; 10 | } -------------------------------------------------------------------------------- /display-kml-on-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Display KML Data 3 | description: Parse a KML file and display the data on a map. 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /display-kml-on-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Display KML Data 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 39 | 40 | 41 |

Display KML Data

42 |

This example shows a map of the United States from the U.S. Census Bureau, highlighting the borders of each state. 43 | The data to display on the map has been read in from a KML file and loaded using the built-in KML parser.

44 |

The name of the state is logged when the user taps on the state's shape

45 |
46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /dom-marker-rotation/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /dom-marker-rotation/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: DOM Marker rotation 3 | description: Rotate DOM Marker's content using CSS 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | 7 | normalize_css: no 8 | dtd: html 5 9 | wrap: d 10 | panel_html: 0 11 | panel_js: 0 12 | panel_css: 0 13 | ... 14 | -------------------------------------------------------------------------------- /dom-marker-rotation/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM Marker rotation 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

DOM Marker rotation

20 |

Rotate DOM Marker's content using CSS

21 |
22 |

This example shows DOM Marker with SVG icon which rotates every second by 45 degrees. 23 |

24 |
25 |

Code

26 |

27 | The DOM node provided in constructor of H.map.DomIcon is cloned and rendered every time a 28 | DOM marker reaches (is visible within) the map view port. Therefore all manipulation has to be done 29 | in onAtach callback where the currently displayed clone reference is available. 30 | The API manipulates position of rendered DOM element (e.g. when panning the map, zooming the map, etc.) by changing 31 | the transform CSS property of the clonedElement. Therefore in order to rotate DOM icon, 32 | we need to manipulate its child node transform CSS property (in our case SVG node). 33 |

34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /draggable-marker/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /draggable-marker/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Draggable Marker 3 | description: Display a moveable marker on a map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /draggable-marker/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Draggable Marker 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Draggable Marker

20 |

Display a moveable marker on a map

21 |
22 |

This example displays a moveable map of Boston, including a marker. The marker can also be moved around the map.

23 |
24 |

Code

25 |

Default markers are created by using the H.map.Marker class without specifying an icon and passing in a location only. 26 | To respond to drag events the marker.draggable flag needs to be set. The default panning interaction of the 27 | map (H.mapevents.Behavior) must be disabled whilst the drag event is in operation.

28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /draggable-marker/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/draggable-marker/styles.css -------------------------------------------------------------------------------- /draggable-shapes/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /draggable-shapes/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Draggable geo shapes 3 | description: Display a moveable geo shapes on a map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... 13 | -------------------------------------------------------------------------------- /draggable-shapes/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Draggable geo shapes 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Draggable geo shapes

20 |

Display draggable geo shapes on map

21 |
22 |

This example displays a moveable map with four geo shapes. These shapes can be moved around the map.

23 |
24 |

Code

25 |

Four geo shapes, H.map.Polyline, H.map.Polygon, H.map.Circle, H.map.Rect 26 | are placed on map. In order to respond to drag events the draggable flag needs to be set. In order to 27 | have smoother resizing the object's volatility property should be set to true.

28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /draggable-shapes/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/draggable-shapes/styles.css -------------------------------------------------------------------------------- /extruded-objects/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /extruded-objects/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Extruded geoshapes 3 | description: Display a map with the 3D extruded object 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /extruded-objects/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Extruded geoshapes 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Extruded geoshapes

20 |

Display a map highlighting a region or area

21 |
22 |

This example displays an extruded polygon and circle located in the central Paris and displayed on a moveable map. Hold Alt+Left mouse button to tilt and rotate the map.

23 |
24 |

Code

25 |

A polygon is created using the H.map.Polygon class, 26 | passing in an H.geo.LineString holding the vertices of the polygon. The circle is created with the H.map.Circle 27 | class, passing in a center and the radius of the circle. The extrusion of both objects is defined by the extrude optional parameter.

28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /extruded-objects/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/extruded-objects/styles.css -------------------------------------------------------------------------------- /finding-the-nearest-marker/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /finding-the-nearest-marker/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Finding the Nearest Marker 3 | description: Find a marker nearest to the click location 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /finding-the-nearest-marker/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Finding the Nearest Marker 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 39 | 40 | 41 |
42 |

Finding the Nearest Marker

43 |

Find a marker nearest to the click location

44 |
45 |

Click anywhere on the Map to find out which of the five Markers is the nearest to that spot. You can also drag and drop any Marker to a new position.

46 |
47 |

Code

48 |

Examples demonstrates how to calculate distance between two geo points and employs simple marker drag and drop implementation.

49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /finding-the-nearest-marker/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/finding-the-nearest-marker/styles.css -------------------------------------------------------------------------------- /fonts/FiraMono-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/fonts/FiraMono-Regular.eot -------------------------------------------------------------------------------- /fonts/FiraMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/fonts/FiraMono-Regular.ttf -------------------------------------------------------------------------------- /fonts/FiraMono-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/fonts/FiraMono-Regular.woff -------------------------------------------------------------------------------- /fonts/FiraMono-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/fonts/FiraMono-Regular.woff2 -------------------------------------------------------------------------------- /fonts/FiraSans-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/fonts/FiraSans-Light.eot -------------------------------------------------------------------------------- /fonts/FiraSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/fonts/FiraSans-Light.ttf -------------------------------------------------------------------------------- /fonts/FiraSans-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/fonts/FiraSans-Light.woff -------------------------------------------------------------------------------- /fonts/FiraSansOT-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/fonts/FiraSansOT-Light.otf -------------------------------------------------------------------------------- /geocode-a-location-from-address/demo.css: -------------------------------------------------------------------------------- 1 | #geocode #map { 2 | display: block; 3 | width: 95%; 4 | margin-bottom: 3px; 5 | height: 450px; 6 | background: grey; 7 | } 8 | 9 | #geocode #panel { 10 | display: block; 11 | width: 95%; 12 | min-height: 450px; 13 | max-height: 450px; 14 | border: 1px solid #e3e3e3; 15 | border-radius: 4px; 16 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 17 | box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 18 | } 19 | -------------------------------------------------------------------------------- /geocode-a-location-from-address/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Search for a Location based on an Address 3 | description: Request a location using a free-form text input and display it on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /geocode-a-location-from-address/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Search for a Location based on an Address 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Search for a Location based on an Address

20 |

Request a location using a free-form text input and display it on the map.

21 |
22 |

This example makes a geocoding request and retrieves the latitude, longitude and 23 | complete address details of 200 S Mathilda Ave, Sunnyvale, CA based on a free-form 24 | text input. A clickable marker is placed on the location found.

25 |
26 |
27 |

Code

28 |

Access to the geocoding service is obtained from the H.service.Platform 29 | by calling getSearchService(). The geocode() method is used 30 | to find a location by passing in the relevant q parameter as defined in 31 | Geocoding and Search API v7. 32 | The styling and display of the response is under the control of the developer.

33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /geocode-a-location-from-address/img/arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/geocode-a-location-from-address/img/arrows.png -------------------------------------------------------------------------------- /geocode-a-location-from-address/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/geocode-a-location-from-address/styles.css -------------------------------------------------------------------------------- /geocode-a-location-from-structured-address/demo.css: -------------------------------------------------------------------------------- 1 | #geocode #map { 2 | display: block; 3 | width: 95%; 4 | margin-bottom: 3px; 5 | height: 450px; 6 | background: grey; 7 | } 8 | 9 | #geocode #panel { 10 | display: block; 11 | width: 95%; 12 | min-height: 450px; 13 | max-height: 450px; 14 | border: 1px solid #e3e3e3; 15 | border-radius: 4px; 16 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 17 | box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 18 | } 19 | -------------------------------------------------------------------------------- /geocode-a-location-from-structured-address/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Search for a Location given a Structured Address 3 | description: Request a location from a structured address and display it on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /geocode-a-location-from-structured-address/img/arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/geocode-a-location-from-structured-address/img/arrows.png -------------------------------------------------------------------------------- /geocode-a-location-from-structured-address/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/geocode-a-location-from-structured-address/styles.css -------------------------------------------------------------------------------- /image-overlay/data/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/0.png -------------------------------------------------------------------------------- /image-overlay/data/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/1.png -------------------------------------------------------------------------------- /image-overlay/data/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/10.png -------------------------------------------------------------------------------- /image-overlay/data/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/2.png -------------------------------------------------------------------------------- /image-overlay/data/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/3.png -------------------------------------------------------------------------------- /image-overlay/data/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/4.png -------------------------------------------------------------------------------- /image-overlay/data/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/5.png -------------------------------------------------------------------------------- /image-overlay/data/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/6.png -------------------------------------------------------------------------------- /image-overlay/data/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/7.png -------------------------------------------------------------------------------- /image-overlay/data/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/8.png -------------------------------------------------------------------------------- /image-overlay/data/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/data/9.png -------------------------------------------------------------------------------- /image-overlay/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /image-overlay/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Image overlay 3 | description: Display an animated weather radar 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /image-overlay/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image overlay 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Image overlay

21 |

Display an animated weather radar.

22 |
23 |

This example shows a rectangular area with the animated weather map over the North Atlatic and Europe.

24 |
25 |

Code

26 |

An animated rectangular area is created using the H.map.Overlay class, passing in an 27 | H.geo.Rect holding the top-left and bottom-right points of the rectangle. The overlay's bitmap is updated 28 | with the help of the setBitmap method. 29 |

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /image-overlay/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {H.Map} map A HERE Map instance within the application 3 | */ 4 | function addOverlayToMap(map) { 5 | var imgCounter = 0; 6 | 7 | // create an overlay that will use a weather map as a bitmap 8 | var overlay = new H.map.Overlay( 9 | new H.geo.Rect( 10 | 70.72849153520343, -24.085683364175395, 11 | 29.569664922291, 44.216452317817016 12 | ), 13 | rainRadar[imgCounter], 14 | { 15 | // the bitmap is frequently updated mark the object as volatile 16 | volatility: true 17 | } 18 | ); 19 | 20 | // update overlay's bitmap every 250 milliseconds 21 | setInterval(function() { 22 | imgCounter = imgCounter < 10 ? ++imgCounter : 0; 23 | overlay.setBitmap(rainRadar[imgCounter]); 24 | }, 250); 25 | 26 | // add overlay to the map 27 | map.addObject(overlay); 28 | } 29 | 30 | /** 31 | * Boilerplate map initialization code starts below: 32 | */ 33 | 34 | //Step 1: initialize communication with the platform 35 | // In your own code, replace variable window.apikey with your own apikey 36 | var platform = new H.service.Platform({ 37 | apikey: window.apikey 38 | }); 39 | var defaultLayers = platform.createDefaultLayers(); 40 | 41 | //Step 2: initialize a map - this map is centered over Europe 42 | var map = new H.Map(document.getElementById('map'), 43 | defaultLayers.vector.normal.map,{ 44 | center: {lat: 53.1, lng: 13.1}, 45 | zoom: 3, 46 | pixelRatio: window.devicePixelRatio || 1 47 | }); 48 | // add a resize listener to make sure that the map occupies the whole container 49 | window.addEventListener('resize', () => map.getViewPort().resize()); 50 | 51 | //Step 3: make the map interactive 52 | // MapEvents enables the event system 53 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 54 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 55 | 56 | // pre-load the bitmaps 57 | var rainRadar = []; 58 | (function() { 59 | var i = 0, 60 | img; 61 | for (; i <= 10; i++) { 62 | img = new Image(); 63 | img.crossOrigin = 'anonymous'; 64 | img.src = 'https://heremaps.github.io/maps-api-for-javascript-examples/image-overlay/data/' + i + '.png'; 65 | rainRadar.push(img); 66 | } 67 | }()); 68 | 69 | // Now use the map as required... 70 | addOverlayToMap(map); -------------------------------------------------------------------------------- /image-overlay/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/image-overlay/styles.css -------------------------------------------------------------------------------- /indoor-map-movement/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 400px; 10 | } -------------------------------------------------------------------------------- /indoor-map-movement/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Restrict map movement with Indoor Map 3 | description: Restrict the map movement within the indoor map bounds 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... 13 | -------------------------------------------------------------------------------- /indoor-map-ui-interaction/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 400px; 10 | } -------------------------------------------------------------------------------- /indoor-map-ui-interaction/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: UI interactions on Indoor Map 3 | description: HERE Indoor Maps API with UI interactions on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... 13 | -------------------------------------------------------------------------------- /indoor-map/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 400px; 10 | } -------------------------------------------------------------------------------- /indoor-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Displaying an Indoor Map 3 | description: Use Here Indoor Maps service to load and visualize an indoor map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... 13 | -------------------------------------------------------------------------------- /interactive-basemap/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /interactive-basemap/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Interactive base map 3 | description: Retrieve information associated with the map features 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /interactive-basemap/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/interactive-basemap/styles.css -------------------------------------------------------------------------------- /interleave-layers/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /interleave-layers/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Interleave vector and object layers" 3 | description: Insert an object layer between the two vector layers 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /interleave-layers/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Interleave vector and object layers 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Interleave vector and object layers

19 |

Insert an object layer between the two vector layers

20 |
21 |

This example shows how to interleave an object layer and the vector layer. It is possible to do it dynamically during the map runtime. 22 | The map is loaded with the default vector layer, after that the layer is split into two and the new object layer is inserted between them. 23 |

24 |
25 |

Code

26 |

The code below extracts the buildings configuration from the base layer. After that it creates a new object and vector layers 27 | that are added sequentially to the map's layer collection. The layers are rendered in the order they are added and the default object layer remained 28 | on top of the layers collection. 29 |

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /interleave-layers/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/interleave-layers/styles.css -------------------------------------------------------------------------------- /map-at-specified-location/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-at-specified-location/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Marker on the Map 3 | description: Display a map at a specified location and zoom level 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-at-specified-location/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Map at a specified location 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Map at a specified location

21 |

Display a map at a specified location and zoom level

22 |
23 |

This example displays a movable map initially centered on the Brandenburg Gate in the centre of Berlin (52.5159°N, 13.3777°E)

24 |
25 |

Code

26 |

27 | The map.setCenter() method and map.setZoom() method are able to control the location of the map.
28 |

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /map-at-specified-location/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Moves the map to display over Berlin 3 | * 4 | * @param {H.Map} map A HERE Map instance within the application 5 | */ 6 | function moveMapToBerlin(map){ 7 | map.setCenter({lat:52.5159, lng:13.3777}); 8 | map.setZoom(14); 9 | } 10 | 11 | /** 12 | * Boilerplate map initialization code starts below: 13 | */ 14 | 15 | //Step 1: initialize communication with the platform 16 | // In your own code, replace variable window.apikey with your own apikey 17 | var platform = new H.service.Platform({ 18 | apikey: window.apikey 19 | }); 20 | var defaultLayers = platform.createDefaultLayers(); 21 | 22 | //Step 2: initialize a map - this map is centered over Europe 23 | var map = new H.Map(document.getElementById('map'), 24 | defaultLayers.vector.normal.map,{ 25 | center: {lat:50, lng:5}, 26 | zoom: 4, 27 | pixelRatio: window.devicePixelRatio || 1 28 | }); 29 | // add a resize listener to make sure that the map occupies the whole container 30 | window.addEventListener('resize', () => map.getViewPort().resize()); 31 | 32 | //Step 3: make the map interactive 33 | // MapEvents enables the event system 34 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 35 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 36 | 37 | // Create the default UI components 38 | var ui = H.ui.UI.createDefault(map, defaultLayers); 39 | 40 | // Now use the map as required... 41 | window.onload = function () { 42 | moveMapToBerlin(map); 43 | } -------------------------------------------------------------------------------- /map-at-specified-location/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-at-specified-location/styles.css -------------------------------------------------------------------------------- /map-multi-language-support/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-multi-language-support/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Multi-language support 3 | description: Display a map with labels in a foreign language 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-multi-language-support/demo.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Switches the map language to simplified Chinese 4 | * 5 | * @param {H.Map} map A HERE Map instance within the application 6 | * @pama {H.service.Platform} platform A stub class to access HERE services 7 | */ 8 | function switchMapLanguage(map, platform){ 9 | // Create default layers 10 | let defaultLayers = platform.createDefaultLayers({ 11 | lg: 'zh' 12 | }); 13 | // Set the normal map variant of the vector map type 14 | map.setBaseLayer(defaultLayers.vector.normal.map); 15 | 16 | // Display default UI components on the map and change default 17 | // language to simplified Chinese. 18 | // Besides supported language codes you can also specify your custom translation 19 | // using H.ui.i18n.Localization. 20 | var ui = H.ui.UI.createDefault(map, defaultLayers, 'zh-CN'); 21 | 22 | // Remove not needed settings control 23 | ui.removeControl('mapsettings'); 24 | } 25 | 26 | 27 | 28 | 29 | 30 | /** 31 | * Boilerplate map initialization code starts below: 32 | */ 33 | 34 | //Step 1: initialize communication with the platform 35 | var platform = new H.service.Platform({ 36 | apikey: window.apikey 37 | }); 38 | var pixelRatio = window.devicePixelRatio || 1; 39 | var defaultLayers = platform.createDefaultLayers({ 40 | tileSize: pixelRatio === 1 ? 256 : 512, 41 | ppi: pixelRatio === 1 ? undefined : 320 42 | }); 43 | 44 | //Step 2: initialize a map - this map is centered over Hong Kong. 45 | var map = new H.Map(document.getElementById('map'), 46 | defaultLayers.vector.normal.map,{ 47 | center: {lat:22.2783, lng:114.1588}, 48 | zoom: 12, 49 | pixelRatio: pixelRatio 50 | }); 51 | // add a resize listener to make sure that the map occupies the whole container 52 | window.addEventListener('resize', () => map.getViewPort().resize()); 53 | 54 | //Step 3: make the map interactive 55 | // MapEvents enables the event system 56 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 57 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 58 | 59 | // Now use the map as required... 60 | switchMapLanguage(map, platform); 61 | -------------------------------------------------------------------------------- /map-multi-language-support/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-multi-language-support/styles.css -------------------------------------------------------------------------------- /map-object-events-displayed/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-object-events-displayed/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map Objects Events 3 | description: Handle events on various map objects 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-object-events-displayed/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-object-events-displayed/styles.css -------------------------------------------------------------------------------- /map-objects-event-delegation/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-objects-event-delegation/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map Objects Event Delegation 3 | description: Use event delegation on map objects 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-objects-event-delegation/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-objects-event-delegation/styles.css -------------------------------------------------------------------------------- /map-scale-bar-changing-from-the-metric-system/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-scale-bar-changing-from-the-metric-system/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Changing from the Metric System 3 | description: Display a map including a scale bar in miles or yards 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-scale-bar-changing-from-the-metric-system/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Changing from the Metric System 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Changing from the Metric System

21 |

Display a map including a scale bar in miles or yards

22 |
23 |

This example displays a movable map centered over the business district of Boston (42.3572°N, 71.0596°W). 24 | The scale bar of the map is displayed in miles, yards or feet dependent upon the zoom level.

25 |
26 |

Code

27 | The system of units displayed on the scale bar can be changed by calling the setUnitSystem() method, 28 | and providing one of the H.ui.UnitSystem enum values. 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /map-scale-bar-changing-from-the-metric-system/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Alters the UI to use imperial measurements. 3 | * 4 | * @param {H.Map} map A HERE Map instance within the application 5 | * @param {Object.} defaultLayers 6 | * an object holding the three default HERE Map types 7 | */ 8 | function useImperialMeasurements(map, defaultLayers){ 9 | // Create the default UI components 10 | var ui = H.ui.UI.createDefault(map, defaultLayers); 11 | 12 | // Set the UI unit system to imperial measurement 13 | ui.setUnitSystem(H.ui.UnitSystem.IMPERIAL); 14 | } 15 | 16 | /** 17 | * Boilerplate map initialization code starts below: 18 | */ 19 | 20 | //Step 1: initialize communication with the platform 21 | // In your own code, replace variable window.apikey with your own apikey 22 | var platform = new H.service.Platform({ 23 | apikey: window.apikey 24 | }); 25 | var defaultLayers = platform.createDefaultLayers(); 26 | 27 | //Step 2: initialize a map - this map is centered over Boston. 28 | var map = new H.Map(document.getElementById('map'), 29 | defaultLayers.vector.normal.map,{ 30 | center: {lat:42.3572, lng:-71.0596}, 31 | zoom: 14, 32 | pixelRatio: window.devicePixelRatio || 1 33 | }); 34 | // add a resize listener to make sure that the map occupies the whole container 35 | window.addEventListener('resize', () => map.getViewPort().resize()); 36 | 37 | //Step 3: make the map interactive 38 | // MapEvents enables the event system 39 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 40 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 41 | 42 | // Now use the map as required... 43 | useImperialMeasurements(map, defaultLayers); 44 | -------------------------------------------------------------------------------- /map-scale-bar-changing-from-the-metric-system/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-scale-bar-changing-from-the-metric-system/styles.css -------------------------------------------------------------------------------- /map-using-view-bounds/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-using-view-bounds/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map using View Bounds 3 | description: Display a map of a given area 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-using-view-bounds/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Map using View Bounds 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Map using View Bounds

20 |

Display a map of a given area

21 |
22 |

This example displays a map of Boston, covering the area from 42.3736°N, 71.0751°W in the North-West corner to 42.3472°N, 71.0408°W in the South-East corner.

23 |
24 |

Code

25 |

26 | Passing the bounds to the setLookAtData method of the H.map.ViewModel 27 | moves and zooms the map to cover the specified area.
28 |

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /map-using-view-bounds/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Moves the map to display over Boston using viewBounds 3 | * 4 | * @param {H.Map} map A HERE Map instance within the application 5 | */ 6 | function setMapViewBounds(map){ 7 | var bbox = new H.geo.Rect(42.3736,-71.0751,42.3472,-71.0408); 8 | map.getViewModel().setLookAtData({ 9 | bounds: bbox 10 | }); 11 | } 12 | 13 | /** 14 | * Boilerplate map initialization code starts below: 15 | */ 16 | 17 | //Step 1: initialize communication with the platform 18 | // In your own code, replace variable window.apikey with your own apikey 19 | var platform = new H.service.Platform({ 20 | apikey: window.apikey 21 | }); 22 | var defaultLayers = platform.createDefaultLayers(); 23 | 24 | //Step 2: initialize a map - this map is centered over Europe 25 | var map = new H.Map(document.getElementById('map'), 26 | defaultLayers.vector.normal.map,{ 27 | center: {lat:50, lng:5}, 28 | zoom: 4, 29 | pixelRatio: window.devicePixelRatio || 1 30 | }); 31 | // add a resize listener to make sure that the map occupies the whole container 32 | window.addEventListener('resize', () => map.getViewPort().resize()); 33 | 34 | //Step 3: make the map interactive 35 | // MapEvents enables the event system 36 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 37 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 38 | 39 | // Create the default UI components 40 | var ui = H.ui.UI.createDefault(map, defaultLayers); 41 | 42 | // Now use the map as required... 43 | window.onload = function () { 44 | setMapViewBounds(map); 45 | } -------------------------------------------------------------------------------- /map-using-view-bounds/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-using-view-bounds/styles.css -------------------------------------------------------------------------------- /map-with-custom-map-settings-ui-control/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 400px; 10 | } -------------------------------------------------------------------------------- /map-with-custom-map-settings-ui-control/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map with custom MapSettings UI Control 3 | description: Switch between different layers using a custom MapSettings UI control. 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-with-custom-map-settings-ui-control/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Map with custom MapSettings UI Control 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

Map with custom MapSettings UI Control

21 |

22 | This example shows how to create a custom Map Settings UI Control to switch between different layers.
23 | For more details see the H.ui.MapSettingsControl API reference page. 24 |

25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /map-with-dom-marker/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-with-dom-marker/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: DOM Marker 3 | description: Display a marker that is capable of receiving DOM events 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-with-dom-marker/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM Marker 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

DOM Marker

21 |

Display a marker that is capable of receiving DOM events

22 |
23 |

This example displays a movable map of Chicago with a single marker 24 | highlighting the location of Soldier Field (41.8625°N, 87.6166°W), 25 | home of the Chicago Bears. Marker displays the letter C in the correct club colors.

26 |

The marker is capable of receiving DOM (Document Object Model) events such as mouseenter, 27 | mouseleave etc. The marker will fade if the mouse pointer is placed over it.

28 |
29 |

Code

30 |

DOM markers are created by using the H.map.DomMarker class by providing a H.map.DomIcon.

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /map-with-dom-marker/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-dom-marker/styles.css -------------------------------------------------------------------------------- /map-with-isoline-route/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-with-isoline-route/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map with Isoline Route for the EV vehicle 3 | description: Request a range for the EV vehicle 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | 7 | normalize_css: no 8 | dtd: html 5 9 | wrap: d 10 | panel_html: 0 11 | panel_js: 0 12 | panel_css: 0 13 | ... -------------------------------------------------------------------------------- /map-with-isoline-route/img/arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-isoline-route/img/arrows.png -------------------------------------------------------------------------------- /map-with-isoline-route/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-isoline-route/styles.css -------------------------------------------------------------------------------- /map-with-pedestrian-route-from-a-to-b/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-with-pedestrian-route-from-a-to-b/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map with Pedestrian Route from A to B 3 | description: Request a walking route from A to B and display it on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-with-pedestrian-route-from-a-to-b/img/arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-pedestrian-route-from-a-to-b/img/arrows.png -------------------------------------------------------------------------------- /map-with-pedestrian-route-from-a-to-b/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-pedestrian-route-from-a-to-b/styles.css -------------------------------------------------------------------------------- /map-with-route-from-a-to-b-using-public-transport/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map-with-route #map { 3 | display: block; 4 | width: 95%; 5 | margin-bottom: 3px; 6 | height: 450px; 7 | background: grey; 8 | } 9 | 10 | #map-with-route #panel { 11 | display: block; 12 | width: 95%; 13 | min-height: 450px; 14 | max-height: 450px; 15 | border: 1px solid #e3e3e3; 16 | border-radius: 4px; 17 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 18 | box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 19 | } 20 | 21 | 22 | #map-with-route #panel h3 { 23 | margin-left: 2.5%; 24 | } 25 | 26 | -------------------------------------------------------------------------------- /map-with-route-from-a-to-b-using-public-transport/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map with Route from A to B using Public Transport 3 | description: Request a route from A to B using public transport and display it on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-with-route-from-a-to-b-using-public-transport/img/arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-route-from-a-to-b-using-public-transport/img/arrows.png -------------------------------------------------------------------------------- /map-with-route-from-a-to-b-using-public-transport/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-route-from-a-to-b-using-public-transport/styles.css -------------------------------------------------------------------------------- /map-with-route-from-a-to-b/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-with-route-from-a-to-b/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map with Driving Route from A to B 3 | description: Request a driving route from A to B and display it on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | 7 | normalize_css: no 8 | dtd: html 5 9 | wrap: d 10 | panel_html: 0 11 | panel_js: 0 12 | panel_css: 0 13 | ... -------------------------------------------------------------------------------- /map-with-route-from-a-to-b/img/arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-route-from-a-to-b/img/arrows.png -------------------------------------------------------------------------------- /map-with-route-from-a-to-b/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-route-from-a-to-b/styles.css -------------------------------------------------------------------------------- /map-with-svg-graphic-markers/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /map-with-svg-graphic-markers/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: SVG Graphic Markers 3 | description: Display a map with custom SVG markers 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /map-with-svg-graphic-markers/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Display a map with custom SVG markers 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

SVG Graphic Markers

22 |

Display a map with custom SVG markers

23 |
24 |

This example displays a movable map of Chicago with two individually 25 | colored SVG markers highlighting the location of Soldier Field (41.8625°N, 87.6166°W) 26 | and Wrigley Field (41.9483°N, 87.6555°W). These locations are the home of the 27 | Chicago Bears and Chicago Cubs respectively, and each marker displays the letter C in the correct club colors.

28 |
29 | 30 |

Code

31 |

SVG Graphics images are created using the H.map.Icon class. The icon is added as a parameter when creating an H.map.Marker.

32 | 33 | 34 | -------------------------------------------------------------------------------- /map-with-svg-graphic-markers/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/map-with-svg-graphic-markers/styles.css -------------------------------------------------------------------------------- /marker-clustering/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /marker-clustering/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Marker Clustering 3 | description: Cluster multiple markers together to better visualize the data 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | - https://heremaps.github.io/maps-api-for-javascript-examples/marker-clustering/data/airports.js 7 | normalize_css: no 8 | dtd: html 5 9 | wrap: d 10 | panel_html: 0 11 | panel_js: 0 12 | panel_css: 0 13 | ... -------------------------------------------------------------------------------- /marker-clustering/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/marker-clustering/styles.css -------------------------------------------------------------------------------- /markers-on-the-map/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /markers-on-the-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Marker on the Map 3 | description: Display a map highlighting points of interest 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /markers-on-the-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Marker on the Map 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

Marker on the Map

22 |

Display a map highlighting points of interest

23 |
24 |

This example displays a moveable map of Europe, including markers highlighting the locations of the capitals of France, Italy, Germany, Spain and the United Kingdom.

25 |
26 |

Code

27 |

28 | Default markers are created by using the H.map.Marker class without specifying an icon and passing in a location only.
29 | For more information on markers and ways to customize them, refer to the following documents: 30 |

34 |

35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /markers-on-the-map/demo.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | * Adds markers to the map highlighting the locations of the captials of 5 | * France, Italy, Germany, Spain and the United Kingdom. 6 | * 7 | * @param {H.Map} map A HERE Map instance within the application 8 | */ 9 | function addMarkersToMap(map) { 10 | var parisMarker = new H.map.Marker({lat:48.8567, lng:2.3508}); 11 | map.addObject(parisMarker); 12 | 13 | var romeMarker = new H.map.Marker({lat:41.9, lng: 12.5}); 14 | map.addObject(romeMarker); 15 | 16 | var berlinMarker = new H.map.Marker({lat:52.5166, lng:13.3833}); 17 | map.addObject(berlinMarker); 18 | 19 | var madridMarker = new H.map.Marker({lat:40.4, lng: -3.6833}); 20 | map.addObject(madridMarker); 21 | 22 | var londonMarker = new H.map.Marker({lat:51.5008, lng:-0.1224}); 23 | map.addObject(londonMarker); 24 | } 25 | 26 | /** 27 | * Boilerplate map initialization code starts below: 28 | */ 29 | 30 | //Step 1: initialize communication with the platform 31 | // In your own code, replace variable window.apikey with your own apikey 32 | var platform = new H.service.Platform({ 33 | apikey: window.apikey 34 | }); 35 | var defaultLayers = platform.createDefaultLayers(); 36 | 37 | //Step 2: initialize a map - this map is centered over Europe 38 | var map = new H.Map(document.getElementById('map'), 39 | defaultLayers.vector.normal.map,{ 40 | center: {lat:50, lng:5}, 41 | zoom: 4, 42 | pixelRatio: window.devicePixelRatio || 1 43 | }); 44 | // add a resize listener to make sure that the map occupies the whole container 45 | window.addEventListener('resize', () => map.getViewPort().resize()); 46 | 47 | //Step 3: make the map interactive 48 | // MapEvents enables the event system 49 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 50 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 51 | 52 | // Create the default UI components 53 | var ui = H.ui.UI.createDefault(map, defaultLayers); 54 | 55 | // Now use the map as required... 56 | window.onload = function () { 57 | addMarkersToMap(map); 58 | } -------------------------------------------------------------------------------- /markers-on-the-map/markers-on-the-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/markers-on-the-map/markers-on-the-map.png -------------------------------------------------------------------------------- /markers-on-the-map/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/markers-on-the-map/styles.css -------------------------------------------------------------------------------- /markers-update-position-with-animation/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /markers-update-position-with-animation/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Animated markers 3 | description: Update marker position with animation 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | 7 | normalize_css: no 8 | dtd: html 5 9 | wrap: d 10 | panel_html: 0 11 | panel_js: 0 12 | panel_css: 0 13 | ... 14 | -------------------------------------------------------------------------------- /markers-update-position-with-animation/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated markers 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Animated markers

20 |

Update marker position with animation.

21 |
22 |

This example shows visualization of animated DOM markers on a map. Markers change their positions to random 23 | geo coordinates generated within radius of 450 km from the map's center. 24 |

25 |
26 |

Code

27 |

28 | DOM markers with SVG icon are placed around the Europe. Each DOM marker then periodicaly changes its position using 29 | setGeometry() method to randomly generated geo coordinate with an animation. To calculate random 30 | geo coordinate within specified radius, H.geo.Point#walk() method is used. 31 | The animation effect is achieved with help of custom ease() function which is called 32 | within updateMarkerPositions() function each interval loop. 33 |

34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /markers-with-altitude/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /markers-with-altitude/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Markers with altitude 3 | description: Display markers at different altitudes 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | 7 | normalize_css: no 8 | dtd: html 5 9 | wrap: d 10 | panel_html: 0 11 | panel_js: 0 12 | panel_css: 0 13 | ... -------------------------------------------------------------------------------- /open-infobubble/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /open-infobubble/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Opening an Infobubble on a Mouse Click 3 | description: Open an infobubble when a marker is clicked 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /open-infobubble/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Opening an Infobubble on a Mouse Click 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Opening an Infobubble on a Mouse Click

20 |

Open an infobubble when a marker is clicked

21 |
22 |

This example displays a map with two markers showing the position 23 | of Liverpool and Manchester City football clubs. Clicking on a 24 | marker opens an infobubble which holds HTML content related to the marker.

25 |
26 |

Code

27 |

Infobubble opens on tap event, event delegation is used to add event listener to the group that holds markers. 28 | setData/getData methods on the map objects are used to bind custom data.

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /open-infobubble/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/open-infobubble/styles.css -------------------------------------------------------------------------------- /ordering-overlapping-markers/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /ordering-overlapping-markers/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Ordering Overlapping Markers 3 | description: Arrange the order in which a series of map objects are displayed 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /ordering-overlapping-markers/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ordering Overlapping Markers 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Ordering Overlapping Markers

21 |

Arrange the order in which a series of map objects are displayed

22 |
23 |

This example shows how to arrange the visibility order of markers by clicking them. Zoom in and out to overlap markers and try re-arranging them.

24 |
25 |

Code

26 |

This example uses marker's z-index value to set its rendering order.

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /ordering-overlapping-markers/demo.js: -------------------------------------------------------------------------------- 1 | 2 | function orderMarkers() { 3 | var zIndex = 1, 4 | // create a set of markers 5 | marker = new H.map.Marker( 6 | {lat: 52.508249, lng: 13.338931} 7 | ), 8 | marker2 = new H.map.Marker( 9 | {lat: 52.506682, lng: 13.332107} 10 | ), 11 | marker3 = new H.map.Marker( 12 | {lat: 52.503730, lng: 13.331678} 13 | ), 14 | marker4 = new H.map.Marker( 15 | {lat: 52.531, lng: 13.380} 16 | ); 17 | 18 | // add markers to the map 19 | map.addObjects([marker, marker2, marker3, marker4]); 20 | 21 | map.addEventListener('tap', function (evt) { 22 | if (evt.target instanceof H.map.Marker) { 23 | // increase z-index of the marker that was tapped 24 | evt.target.setZIndex(zIndex++); 25 | } 26 | }); 27 | } 28 | 29 | /** 30 | * Boilerplate map initialization code starts below: 31 | */ 32 | 33 | // initialize communication with the platform 34 | // In your own code, replace variable window.apikey with your own apikey 35 | var platform = new H.service.Platform({ 36 | apikey: window.apikey 37 | }); 38 | var defaultLayers = platform.createDefaultLayers(); 39 | 40 | var map = new H.Map(document.getElementById('map'), 41 | defaultLayers.vector.normal.map,{ 42 | center: {lat: 52.5, lng: 13.4}, 43 | zoom: 10, 44 | pixelRatio: window.devicePixelRatio || 1 45 | }); 46 | // add a resize listener to make sure that the map occupies the whole container 47 | window.addEventListener('resize', () => map.getViewPort().resize()); 48 | 49 | 50 | // MapEvents enables the event system 51 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 52 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 53 | 54 | 55 | // Now use the map as required... 56 | orderMarkers(); -------------------------------------------------------------------------------- /ordering-overlapping-markers/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/ordering-overlapping-markers/styles.css -------------------------------------------------------------------------------- /panning-the-map/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /panning-the-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Panning the Map 3 | description: Programmatically pan the map so that it is continually in motion 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /panning-the-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Panning the Map 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Panning the Map

21 |

Programmatically pan the map so that it is continually in motion

22 |
23 |

This example displays a map of the Indian Ocean which continuously pans using screen space X/Y coordinates.

24 |
25 |

Code

26 |

A timer is used to periodically update the map. The interaction() method of the H.map.ViewPort is used to manipulate the map view.

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /panning-the-map/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Pan the map so that it is continually in motion 3 | * 4 | * @param {H.Map} map A HERE Map instance within the application 5 | */ 6 | function panTheMap(map) { 7 | var viewPort, 8 | incX = 1, 9 | incY = 2, 10 | x = 100, 11 | y = 100; 12 | 13 | // Obtain the view port object of the map to manipulate its screen coordinates 14 | var viewPort = map.getViewPort(), 15 | // function calculates new screen coordinates and calls 16 | // viewport's interaction method with them 17 | pan = function() { 18 | x = x + incX; 19 | if (Math.abs(x) > 100) { 20 | incX = -incX; 21 | } 22 | 23 | y = y + incY; 24 | if (Math.abs(y) > 100) { 25 | incY = -incY; 26 | } 27 | 28 | viewPort.interaction(x, y); 29 | }; 30 | 31 | // set interaction modifier that provides information which map properties 32 | // change with each "interact" call 33 | viewPort.startInteraction(H.map.render.RenderEngine.InteractionModifiers.COORD, 0, 0); 34 | // set up simple animation loop 35 | setInterval(pan, 15); 36 | } 37 | 38 | /** 39 | * Boilerplate map initialization code starts below: 40 | */ 41 | 42 | //Step 1: initialize communication with the platform 43 | // In your own code, replace variable window.apikey with your own apikey 44 | var platform = new H.service.Platform({ 45 | apikey: window.apikey 46 | }); 47 | var defaultLayers = platform.createDefaultLayers(); 48 | 49 | // Step 2: initialize a map 50 | var map = new H.Map(document.getElementById('map'), 51 | defaultLayers.vector.normal.map,{ 52 | center: {lat: 19.11, lng: 72.89}, 53 | zoom: 4, 54 | pixelRatio: window.devicePixelRatio || 1 55 | }); 56 | // add a resize listener to make sure that the map occupies the whole container 57 | window.addEventListener('resize', () => map.getViewPort().resize()); 58 | 59 | panTheMap(map); -------------------------------------------------------------------------------- /panning-the-map/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/panning-the-map/styles.css -------------------------------------------------------------------------------- /polygon-on-the-map/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /polygon-on-the-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Polygon on the Map 3 | description: Display a map highlighting a region or area 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /polygon-on-the-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Polygon on the Map 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

Polygon on the Map

22 |

Display a map highlighting a region or area

23 |
24 |

This example displays a polygon covering part of Western Europe displayed on a moveable map.

25 |
26 |

Code

27 |

A polygon is created using the H.map.Polygon class, 28 | passing in an H.geo.LineString holding the vertices of the polygon. The look-and-feel of the 29 | polygon can be altered by adding the style parameter

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /polygon-on-the-map/demo.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | * Adds a polygon to the map 5 | * 6 | * @param {H.Map} map A HERE Map instance within the application 7 | */ 8 | function addPolygonToMap(map) { 9 | var lineString = new H.geo.LineString( 10 | [52, 13, 100, 48, 2, 100, 48, 16, 100, 52, 13, 100], 11 | 'values lat lng alt' 12 | ); 13 | map.addObject( 14 | new H.map.Polygon(lineString, { 15 | style: { 16 | fillColor: '#FFFFCC', 17 | strokeColor: '#829', 18 | lineWidth: 8 19 | } 20 | }) 21 | ); 22 | } 23 | 24 | /** 25 | * Boilerplate map initialization code starts below: 26 | */ 27 | 28 | //Step 1: initialize communication with the platform 29 | // In your own code, replace variable window.apikey with your own apikey 30 | var platform = new H.service.Platform({ 31 | apikey: window.apikey 32 | }); 33 | var defaultLayers = platform.createDefaultLayers(); 34 | 35 | //Step 2: initialize a map - this map is centered over Europe 36 | var map = new H.Map(document.getElementById('map'), 37 | defaultLayers.vector.normal.map,{ 38 | center: {lat:52, lng:5}, 39 | zoom: 5, 40 | pixelRatio: window.devicePixelRatio || 1 41 | }); 42 | // add a resize listener to make sure that the map occupies the whole container 43 | window.addEventListener('resize', () => map.getViewPort().resize()); 44 | 45 | //Step 3: make the map interactive 46 | // MapEvents enables the event system 47 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 48 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 49 | 50 | // Create the default UI components 51 | var ui = H.ui.UI.createDefault(map, defaultLayers); 52 | 53 | 54 | // Now use the map as required... 55 | addPolygonToMap(map); -------------------------------------------------------------------------------- /polygon-on-the-map/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/polygon-on-the-map/styles.css -------------------------------------------------------------------------------- /polygon-with-holes-on-the-map/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /polygon-with-holes-on-the-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Polygon with Holes on the Map 3 | description: Display a map highlighting a region or area 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /polygon-with-holes-on-the-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Polygon with Holes on the Map 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Polygon with Holes on the Map

21 |

Display a map highlighting a region or area

22 |
23 |

This example displays a polygon with two triangular holes in it covering part of Western Europe displayed on a moveable map.

24 |
25 |

Code

26 |

A polygon is created using the H.map.Polygon class, passing in an 27 | H.geo.Polygon holding the vertices for the outline and interior parts of the polygon. 28 | The look-and-feel of the polygon can be altered by adding the style parameter

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /polygon-with-holes-on-the-map/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Adds a polygon to the map 3 | * 4 | * @param {H.Map} map A HERE Map instance within the application 5 | */ 6 | function addPolygonToMap(map) { 7 | var geoPolygon = new H.geo.Polygon( 8 | // define exterior shape 9 | new H.geo.LineString([52, 13, 100, 48, 2, 100, 48, 16, 100, 52, 13, 100]), 10 | [ // define interior geometries - holes 11 | new H.geo.LineString([48.5, 4.5, 0, 49.5, 8, 0, 48.5, 9, 0]), 12 | new H.geo.LineString([48.5, 15, 0, 50, 11, 0, 51, 13, 0]) 13 | ] 14 | ); 15 | map.addObject( 16 | new H.map.Polygon(geoPolygon, { 17 | style: { 18 | fillColor: '#FFFFCC', 19 | strokeColor: '#829', 20 | lineWidth: 8 21 | } 22 | }) 23 | ); 24 | } 25 | 26 | /** 27 | * Boilerplate map initialization code starts below: 28 | */ 29 | 30 | //Step 1: initialize communication with the platform 31 | // In your own code, replace variable window.apikey with your own apikey 32 | var platform = new H.service.Platform({ 33 | apikey: window.apikey 34 | }); 35 | var defaultLayers = platform.createDefaultLayers(); 36 | 37 | //Step 2: initialize a map - this map is centered over Europe 38 | var map = new H.Map(document.getElementById('map'), 39 | defaultLayers.vector.normal.map,{ 40 | center: {lat:52, lng:5}, 41 | zoom: 5, 42 | pixelRatio: window.devicePixelRatio || 1 43 | }); 44 | // add a resize listener to make sure that the map occupies the whole container 45 | window.addEventListener('resize', () => map.getViewPort().resize()); 46 | 47 | //Step 3: make the map interactive 48 | // MapEvents enables the event system 49 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 50 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 51 | 52 | // Create the default UI components 53 | var ui = H.ui.UI.createDefault(map, defaultLayers); 54 | 55 | 56 | // Add Polygon with holes to the map 57 | addPolygonToMap(map); 58 | -------------------------------------------------------------------------------- /polygon-with-holes-on-the-map/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/polygon-with-holes-on-the-map/styles.css -------------------------------------------------------------------------------- /polyline-on-the-map/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /polyline-on-the-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Polyline on the Map 3 | description: Display a map with a line showing a known route 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /polyline-on-the-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Polyline on the Map 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Polyline on the Map

20 |

Display a map highlighting a region or area

21 |
22 |

This example displays a line connecting the cities of Dublin (53.3477°N, 6.2597°W), 23 | London (51.5008°N, 0.1224°W), Paris (48.8567°N, 2.3508°E) and 24 | Berlin (52.5166°N, 13.3833°E) and displays it on the map.

25 |
26 |

Code

27 |

A polyline is created using the H.map.Polyline class, passing in an 28 | H.geo.LineString holding the points of the line. The look-and-feel of the polyline can be altered by adding the style parameter

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /polyline-on-the-map/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Adds a polyline between Dublin, London, Paris and Berlin to the map 3 | * 4 | * @param {H.Map} map A HERE Map instance within the application 5 | */ 6 | function addPolylineToMap(map) { 7 | var lineString = new H.geo.LineString(); 8 | 9 | lineString.pushPoint({lat:53.3477, lng:-6.2597}); 10 | lineString.pushPoint({lat:51.5008, lng:-0.1224}); 11 | lineString.pushPoint({lat:48.8567, lng:2.3508}); 12 | lineString.pushPoint({lat:52.5166, lng:13.3833}); 13 | 14 | map.addObject(new H.map.Polyline( 15 | lineString, { style: { lineWidth: 4 }} 16 | )); 17 | } 18 | 19 | /** 20 | * Boilerplate map initialization code starts below: 21 | */ 22 | 23 | //Step 1: initialize communication with the platform 24 | // In your own code, replace variable window.apikey with your own apikey 25 | var platform = new H.service.Platform({ 26 | apikey: window.apikey 27 | }); 28 | var defaultLayers = platform.createDefaultLayers(); 29 | 30 | //Step 2: initialize a map - this map is centered over Europe 31 | var map = new H.Map(document.getElementById('map'), 32 | defaultLayers.vector.normal.map,{ 33 | center: {lat:52, lng:5}, 34 | zoom: 5, 35 | pixelRatio: window.devicePixelRatio || 1 36 | }); 37 | // add a resize listener to make sure that the map occupies the whole container 38 | window.addEventListener('resize', () => map.getViewPort().resize()); 39 | 40 | //Step 3: make the map interactive 41 | // MapEvents enables the event system 42 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 43 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 44 | 45 | // Create the default UI components 46 | var ui = H.ui.UI.createDefault(map, defaultLayers); 47 | 48 | 49 | // Now use the map as required... 50 | addPolylineToMap(map); -------------------------------------------------------------------------------- /polyline-on-the-map/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/polyline-on-the-map/styles.css -------------------------------------------------------------------------------- /position-on-mouse-click/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /position-on-mouse-click/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Calculating a Location from a Mouse Click 3 | description: Obtain the latitude and longitude of a location within the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /position-on-mouse-click/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/position-on-mouse-click/styles.css -------------------------------------------------------------------------------- /postcodes-jsla-fts/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /postcodes-jsla-fts/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map with postcodes from the Advanced Data Sets 3 | description: Display a map with the Advanced Data Sets postcode boundaries overlay 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /postcodes-jsla-fts/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/postcodes-jsla-fts/styles.css -------------------------------------------------------------------------------- /rectangle-on-the-map/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /rectangle-on-the-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Rectangle on the map 3 | description: Display a map highlighting a retangular region or area 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /rectangle-on-the-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rectangle on the map 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Rectangle on the map

21 |

Display a map highlighting a retangular region or area

22 |
23 |

This example shows a rectangle covering part of Western Europe displayed on a moveable map.

24 |
25 |

Code

26 |

A rectangle is created using the H.map.Rect class, passing in an 27 | H.geo.Rect holding the top-left and bottom-right points of the rectangle.

28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /rectangle-on-the-map/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Adds a rectangle to the map 3 | * 4 | * @param {H.Map} map A HERE Map instance within the application 5 | */ 6 | function addRectangleToMap(map) { 7 | var boundingBox = new H.geo.Rect(53.1, 13.1, 43.1, 40.1); 8 | map.addObject( 9 | new H.map.Rect(boundingBox, { 10 | style: { 11 | fillColor: '#FFFFCC', 12 | strokeColor: '#E8FA75', 13 | lineWidth: 8 14 | }, 15 | }) 16 | ); 17 | } 18 | 19 | /** 20 | * Boilerplate map initialization code starts below: 21 | */ 22 | 23 | //Step 1: initialize communication with the platform 24 | // In your own code, replace variable window.apikey with your own apikey 25 | var platform = new H.service.Platform({ 26 | apikey: window.apikey 27 | }); 28 | var defaultLayers = platform.createDefaultLayers(); 29 | 30 | //Step 2: initialize a map - this map is centered over Europe 31 | var map = new H.Map(document.getElementById('map'), 32 | defaultLayers.vector.normal.map,{ 33 | center: {lat: 53.1, lng: 13.1}, 34 | zoom: 3, 35 | pixelRatio: window.devicePixelRatio || 1 36 | }); 37 | // add a resize listener to make sure that the map occupies the whole container 38 | window.addEventListener('resize', () => map.getViewPort().resize()); 39 | 40 | //Step 3: make the map interactive 41 | // MapEvents enables the event system 42 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 43 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 44 | 45 | // Now use the map as required... 46 | addRectangleToMap(map); -------------------------------------------------------------------------------- /rectangle-on-the-map/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/rectangle-on-the-map/styles.css -------------------------------------------------------------------------------- /resizable-circle/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /resizable-circle/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Resizable circle 3 | description: Display resizable geo circle on a map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... 13 | -------------------------------------------------------------------------------- /resizable-circle/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resizable circle 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Resizable circle

20 |

Display resizable geo circle on a map

21 |
22 |

This example displays a circle object, which can be resized by dragging its outline.

23 |
24 |

Code

25 |

There is a H.map.Group container, which contains resizable H.map.Circle and H.map.Polyline 26 | as circle's outline used for resizing. The outline is hidden by default and shown only when mouse position 27 | is over the group object, or is touched on touch device (pointerenter event). In order to listen to 28 | drag event, object's draggable property must be set to true. 29 | In order to have smoother resizing, the object's volatility property should be set to true.

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /resizable-circle/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/resizable-circle/styles.css -------------------------------------------------------------------------------- /resizable-polygon/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /resizable-polygon/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Resizable polygon 3 | description: Display resizable geo polygon on a map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... 13 | -------------------------------------------------------------------------------- /resizable-polygon/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resizable polygon 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Resizable polygon

20 |

Display resizable geo polygon on a map

21 |
22 |

This example displays a polygon object, which can be resized by dragging its vertices.

23 |
24 |

Code

25 |

There is a main H.map.Group container, which contains resizable H.map.Polygon and another container containing markers 26 | (H.map.Marker) as polygon's vertices (corners) used for resizing. Markers, shown as small red circles, are hidden 27 | by default and shown only when mouse position is over the main group object, or is touched on touch device 28 | (pointerenter event). In order to listen to drag event, object's draggable property 29 | must be set to true. In order to have smoother resizing, the object's volatility property should be set to true.

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /resizable-polygon/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/resizable-polygon/styles.css -------------------------------------------------------------------------------- /resizable-polyline/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /resizable-polyline/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Resizable polyline 3 | description: Display resizable geo polyline on a map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... 13 | -------------------------------------------------------------------------------- /resizable-polyline/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resizable polyline 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Resizable polyline

20 |

Display resizable geo polyline on a map

21 |
22 |

This example displays a polyline object, which can be resized by dragging its vertices.

23 |
24 |

Code

25 |

There is a main H.map.Group container, which contains resizable H.map.Polyline and another container containing markers 26 | (H.map.Marker) as polyline's vertices (corners) used for resizing. Markers, shown as small red circles, 27 | are hidden by default and shown only when mouse position is over the main group object, or is touched on touch device 28 | (pointerenter event). In order to listen to drag event, object's draggable 29 | property must be set to true. In order to have smoother resizing, the object's volatility 30 | property should be set to true.

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /resizable-polyline/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/resizable-polyline/styles.css -------------------------------------------------------------------------------- /resizable-rect/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /resizable-rect/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Resizable geo rectangle 3 | description: Display resizable geo rectangle on a map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... 13 | -------------------------------------------------------------------------------- /resizable-rect/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resizable rectangle 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Resizable rectangle

20 |

Display resizable geo rectangle on a map

21 |
22 |

This example displays a rectangle object, which can be resized by dragging its outline.

23 |
24 | 25 |

Code

26 |

There is a H.map.Group container, which contains resizable H.map.Rect and H.map.Polyline 27 | as rectangle's outline used for resizing. The outline is hidden by default and shown only when mouse position 28 | is over the group object, or is touched on touch device (pointerenter event). In order to listen to 29 | drag event, object's draggable property must be set to true. 30 | In order to have smoother resizing, the object's volatility property should be set to true.

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /resizable-rect/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/resizable-rect/styles.css -------------------------------------------------------------------------------- /restrict-map/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /restrict-map/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Restrict Map Movement 3 | description: Restrict a moveable map to a given rectangular area 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /restrict-map/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Restrict Map Movement 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

Restrict Map Movement

22 |

Restrict a moveable map to a given rectangular area

23 |
24 |

This example displays a moveable map of Alcatraz Island. Even though the map can still be panned and zoomed, 25 | the center of the map cannot be moved outside of the marked area

26 |
27 |

Code

28 |

The H.map.ViewModel represents the position of the map. The sync event is fired whenever 29 | the rendered map is synchronized with the view-model data. By listening to the sync event the value of the map.center can be restricted to a certain range.

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /restrict-map/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Restricts a moveable map to a given rectangle. 3 | * 4 | * @param {H.Map} map A HERE Map instance within the application 5 | * 6 | */ 7 | function restrictMap(map){ 8 | 9 | var bounds = new H.geo.Rect(37.829, -122.426, 37.824, -122.42); 10 | 11 | map.getViewModel().addEventListener('sync', function() { 12 | var center = map.getCenter(); 13 | 14 | if (!bounds.containsPoint(center)) { 15 | if (center.lat > bounds.getTop()) { 16 | center.lat = bounds.getTop(); 17 | } else if (center.lat < bounds.getBottom()) { 18 | center.lat = bounds.getBottom(); 19 | } 20 | if (center.lng < bounds.getLeft()) { 21 | center.lng = bounds.getLeft(); 22 | } else if (center.lng > bounds.getRight()) { 23 | center.lng = bounds.getRight(); 24 | } 25 | map.setCenter(center); 26 | } 27 | }); 28 | 29 | //Debug code to visualize where your restriction is 30 | map.addObject(new H.map.Rect(bounds, { 31 | style: { 32 | fillColor: 'rgba(55, 85, 170, 0.1)', 33 | strokeColor: 'rgba(55, 85, 170, 0.6)', 34 | lineWidth: 8 35 | } 36 | } 37 | )); 38 | } 39 | 40 | /** 41 | * Boilerplate map initialization code starts below: 42 | */ 43 | 44 | //Step 1: initialize communication with the platform 45 | // In your own code, replace variable window.apikey with your own apikey 46 | var platform = new H.service.Platform({ 47 | apikey: window.apikey 48 | }); 49 | var defaultLayers = platform.createDefaultLayers(); 50 | 51 | //Step 2: initialize a map - this map is centered over Alcatraz Island 52 | var map = new H.Map(document.getElementById('map'), 53 | defaultLayers.vector.normal.map,{ 54 | center: {lat:37.82667, lng:-122.423333}, 55 | zoom: 16, 56 | pixelRatio: window.devicePixelRatio || 1 57 | }); 58 | // add a resize listener to make sure that the map occupies the whole container 59 | window.addEventListener('resize', () => map.getViewPort().resize()); 60 | 61 | //Step 3: make the map interactive 62 | // MapEvents enables the event system 63 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 64 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 65 | 66 | // Step 4: Create the default UI: 67 | var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US'); 68 | 69 | restrictMap(map); -------------------------------------------------------------------------------- /restrict-map/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/restrict-map/styles.css -------------------------------------------------------------------------------- /reverse-geocode-an-address-from-location/demo.css: -------------------------------------------------------------------------------- 1 | #geocode #map { 2 | display: block; 3 | width: 95%; 4 | margin-bottom: 3px; 5 | height: 450px; 6 | background: grey; 7 | } 8 | 9 | #geocode #panel { 10 | display: block; 11 | width: 95%; 12 | min-height: 450px; 13 | max-height: 450px; 14 | border: 1px solid #e3e3e3; 15 | border-radius: 4px; 16 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 17 | box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 18 | } 19 | -------------------------------------------------------------------------------- /reverse-geocode-an-address-from-location/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Search for the Address of a Known Location 3 | description: Request address details for a given location and display it on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /reverse-geocode-an-address-from-location/img/arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/reverse-geocode-an-address-from-location/img/arrows.png -------------------------------------------------------------------------------- /reverse-geocode-an-address-from-location/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/reverse-geocode-an-address-from-location/styles.css -------------------------------------------------------------------------------- /search-for-landmark/demo.css: -------------------------------------------------------------------------------- 1 | #geocode #map { 2 | display: block; 3 | width: 95%; 4 | margin-bottom: 3px; 5 | height: 450px; 6 | background: grey; 7 | } 8 | 9 | #geocode #panel { 10 | display: block; 11 | width: 95%; 12 | min-height: 450px; 13 | max-height: 450px; 14 | border: 1px solid #e3e3e3; 15 | border-radius: 4px; 16 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 17 | box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 18 | } 19 | -------------------------------------------------------------------------------- /search-for-landmark/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Search for a Landmark 3 | description: Request the location of a landmark and display it on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /search-for-landmark/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Search for a Landmark 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Search for a Landmark

21 |

Request the location of a landmark and display it on the map.

22 |
23 |

This example makes a landmark search and retrieves the name and location of 24 | the Eiffel Tower based on the input text. A clickable marker is placed on the location found.

25 |
26 |
27 |

Code

28 |

Access to the geocoding service is obtained from the H.service.Platform 29 | by calling getSearchService(). The discover() method is used 30 | to find a landmark by passing in the relevant parameters as defined in 31 | Geocoding and Search API v7 32 | . 33 | The styling and display of the response is under the control of the developer.

34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /search-for-landmark/img/arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/search-for-landmark/img/arrows.png -------------------------------------------------------------------------------- /search-for-landmark/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/search-for-landmark/styles.css -------------------------------------------------------------------------------- /search-match-fts/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /search-match-fts/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Data Matching with the Advanced Data Sets 3 | description: Match routing result with the Advanced Data Sets data 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /search-match-fts/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/search-match-fts/styles.css -------------------------------------------------------------------------------- /synchronising-two-maps/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 400px; 10 | } -------------------------------------------------------------------------------- /synchronising-two-maps/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Synchronising Two Maps 3 | description: This example shows two maps. The upper map allows for moving and zooming. The lower map observes the upper map's zoom level and position and adopts these values every time the upper map changes. 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /synchronising-two-maps/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Synchronising Two Maps 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

Synchronising Two Maps

22 |

Synchronise a static map with an interactive map

23 |
24 |

This example shows two maps. The upper map allows for moving and zooming. The lower map observes the upper map's zoom level and position and adopts these values every time the upper map changes.

25 |
26 |

Movable Map

27 |
28 |
29 |

Static Map

30 |
31 |

Code

32 |

33 | H.Map instance fires various events which we can listen and control the second map. 34 |

35 | 36 | 37 | -------------------------------------------------------------------------------- /synchronising-two-maps/styles.css: -------------------------------------------------------------------------------- 1 | #map { 2 | height: auto; 3 | } -------------------------------------------------------------------------------- /test-credentials.js: -------------------------------------------------------------------------------- 1 | var apikey = 'DlqeuMym9uodgxow7dJBpcLJypNMo3p5WbukDvfSW8I'; 2 | -------------------------------------------------------------------------------- /tilted-map-bounds/demo.css: -------------------------------------------------------------------------------- 1 | #map { 2 | width: 95%; 3 | height: 450px; 4 | background: grey; 5 | } 6 | 7 | #panel { 8 | width: 100%; 9 | height: 400px; 10 | } -------------------------------------------------------------------------------- /tilted-map-bounds/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: View bounds of the tilted map 3 | description: Visualize the visible area of the tilted and rotated map. 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /tilted-map-bounds/styles.css: -------------------------------------------------------------------------------- 1 | #map { 2 | height: auto; 3 | } -------------------------------------------------------------------------------- /transit-iml/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /transit-iml/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Interactive Map Layer 3 | description: Visualize Data from Interactive Map Layer on Map. 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... 13 | -------------------------------------------------------------------------------- /transit-iml/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Interactive Map Layer 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Interactive Map Layer

18 |

Visualize Data from Interactive Map Layer on Map

19 |
20 |

This examples adds dashed lines showing the 2030 Washington D.C. Proposed Transit.

21 |
22 |

Code

23 |

24 | The example uses H.service.iml.Service 25 | class to fetch data from Interactive Map Layer, and visualizes the data with customized style.

26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /truck-routing-road-restrictions/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: auto !important; 11 | font-weight: bold; 12 | } 13 | -------------------------------------------------------------------------------- /truck-routing-road-restrictions/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Map with the truck routes from A to B and road restrictions 3 | description: Show a various truck routes with the truck related road restrictions highlighted on the map 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | 7 | normalize_css: no 8 | dtd: html 5 9 | wrap: d 10 | panel_html: 0 11 | panel_js: 0 12 | panel_css: 0 13 | ... 14 | -------------------------------------------------------------------------------- /truck-routing-road-restrictions/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/truck-routing-road-restrictions/styles.css -------------------------------------------------------------------------------- /zoom-to-set-of-markers/demo.css: -------------------------------------------------------------------------------- 1 | 2 | #map { 3 | width: 95%; 4 | height: 450px; 5 | background: grey; 6 | } 7 | 8 | #panel { 9 | width: 100%; 10 | height: 400px; 11 | } -------------------------------------------------------------------------------- /zoom-to-set-of-markers/demo.details: -------------------------------------------------------------------------------- 1 | --- 2 | name: Zooming to a Set of Markers 3 | description: Alter the viewport to ensure a group of objects are visible 4 | resources: 5 | - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js 6 | normalize_css: no 7 | dtd: html 5 8 | wrap: d 9 | panel_html: 0 10 | panel_js: 0 11 | panel_css: 0 12 | ... -------------------------------------------------------------------------------- /zoom-to-set-of-markers/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Zooming to a Set of Markers 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Zooming to a Set of Markers

20 |

Alter the viewport to ensure a group of objects are visible

21 |
22 |

This examples adds three markers showing the locations of 23 | Boston, Washington and Toronto to the map and alters the map display to ensure that all of the markers are visible.

24 |
25 |

Code

26 |

An H.map.Group is used to associate the markers together and the group.getBounds() 27 | method to find the minimal bounding box holding all of the group's contents. 28 | The map.viewBounds() can then be updated.

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /zoom-to-set-of-markers/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Adds three markers and alters the view bounds of the map to ensure that all 3 | * markers are visible 4 | * 5 | * @param {H.Map} map A HERE Map instance within the application 6 | */ 7 | function addMarkersAndSetViewBounds() { 8 | // create map objects 9 | var toronto = new H.map.Marker({lat:43.7, lng:-79.4}), 10 | boston = new H.map.Marker({lat:42.35805, lng:-71.0636}), 11 | washington = new H.map.Marker({lat:38.8951, lng:-77.0366}), 12 | group = new H.map.Group(); 13 | 14 | // add markers to the group 15 | group.addObjects([toronto, boston, washington]); 16 | map.addObject(group); 17 | 18 | // get geo bounding box for the group and set it to the map 19 | map.getViewModel().setLookAtData({ 20 | bounds: group.getBoundingBox() 21 | }); 22 | } 23 | 24 | /** 25 | * Boilerplate map initialization code starts below: 26 | */ 27 | 28 | //Step 1: initialize communication with the platform 29 | // In your own code, replace variable window.apikey with your own apikey 30 | var platform = new H.service.Platform({ 31 | apikey: window.apikey 32 | }); 33 | var defaultLayers = platform.createDefaultLayers(); 34 | 35 | //Step 2: initialize a map - this map is centered over Europe 36 | // note that all the markers are in North America... 37 | var map = new H.Map(document.getElementById('map'), 38 | defaultLayers.vector.normal.map,{ 39 | center: {lat:52, lng:5}, 40 | zoom: 5, 41 | pixelRatio: window.devicePixelRatio || 1 42 | }); 43 | // add a resize listener to make sure that the map occupies the whole container 44 | window.addEventListener('resize', () => map.getViewPort().resize()); 45 | 46 | //Step 3: make the map interactive 47 | // MapEvents enables the event system 48 | // Behavior implements default interactions for pan/zoom (also on mobile touch environments) 49 | var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); 50 | 51 | // Now use the map as required... 52 | addMarkersAndSetViewBounds(map); -------------------------------------------------------------------------------- /zoom-to-set-of-markers/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/deb9b965e26433e2932f6de674372a82689383d6/zoom-to-set-of-markers/styles.css --------------------------------------------------------------------------------