This repository holds a series of JavaScript based examples using the HERE Maps API for JavaScript. More information about the API can be found on https://here.com/docs website. To run the examples, clone this repo to a folder on your Desktop. Replace the credentials in the test-credentials.js file with your own credentials.
Note: In order to get the sample code to work, you must replace all instances of
window.apikeywithin the code and use your own HERE credentials.
You can obtain a set of credentials from the HERE Base Plan # page on here.com.
See the LICENSE file in the root of this project for license details.
All of the following examples use version 3.1 of the API
- Adding an Overlay to the Map - Display custom map tiles as an overlay
- Animated Markers - Update marker position with animation
- Calculating a Location from a Mouse Click - Obtain the latitude and longitude of a location within the map
- Changing from the Metric System - Display a map including a scale bar in miles or yards
- Circle on the Map - Display a map highlighting a circular region
- DOM Marker - Display a marker that is capable of receiving DOM events
- DOM Marker rotation - Rotate DOM Marker's content using CSS
- Display KML Data - Parse a KML file and display the data on a map
- Display GeoJSON Data - Parse a GeoJSON file and display the data on a map
- Display an Indoor Map - Use the HERE Indoor Maps API to load and visualize an indoor map
- UI interactions on Indoor Map - HERE Indoor Maps API with UI interactions on the map
- Restrict map movement with Indoor Map - Restrict the map movement within the indoor map bounds
- Draggable Marker - Display a moveable marker on a map
- Draggable geo shapes - Display moveable geometric shapes on a map
- Extruded geo shapes - 3D extrusion of the geometric shapes
- Finding the Nearest Marker - Find a marker nearest to the click location
- Image overlay - Display an animated weather radar
- Interactive Map Layer - Visualize Data from Interactive Map Layer on Map
- Interleave vector and object layers - Display an object under the buildings
- Map Objects Event Delegation - Use event delegation on map objects
- Map Objects Events - Handle events on various map objects
- Map at a specified location - Display a map at a specified location and zoom level
- Map using View Bounds - Display a map of a given area
- Map with custom MapSettings UI Control - Switch between different layers using a custom MapSettings UI control.
- Map with Driving Route from A to B - Request a driving route from A to B and display it on the map.
- Map with Pedestrian Route from A to B - Request a walking route from A to B and display it on the map.
- Map with Route from A to B using Public Transport - Request a route from A to B using public transport and display it on the map.
- Map with isoline route - Request a range for the EV vehicle.
- Marker Clustering - Cluster multiple markers together to better visualize the data
- Marker Clustering with Custom Theme - Cluster multiple markers and customize the theme
- Marker on the Map - Display a map highlighting points of interest
- Markers with Altitude - Display markers at different altitudes
- Multi-language support - Display a map with labels in a foreign language
- Opening an Infobubble on a Mouse Click - Open an infobubble when a marker is clicked
- Ordering Overlapping Markers - Arrange the order in which a series of map objects are displayed
- Panning the Map - Programmatically pan the map so that it is continually in motion
- Polygon on the Map - Display a map highlighting a region or area
- Polyline on the Map - Display a map with a line showing a known route
- Rectangle on the map - Display a map highlighting a retangular region or area
- Resizable geo Polygon - Display resizable polygon on a map
- Resizable geo Polyline - Display resizable polyline on a map
- Resizable geo Circle - Display resizable circle on a map
- Resizable geo Rect - Display resizable rectangle on a map
- Restrict Map Movement - Restrict a moveable map to a given rectangular area
- SVG Graphic Markers - Display a map with custom SVG markers
- Search for a Landmark - Request the location of a landmark and display it on the map.
- Search for a Location based on an Address - Request a location using a free-form text input and display it on the map.
- Search for a Location given a Structured Address - Request a location from a structured address and display it on the map.
- Search for the Address of a Known Location - Request address details for a given location and display it on the map.
- Set a map style at the load time - Set a style of the whole map during the map instantiation
- Set a map style exported from the HERE Style Editor - Set a style exported from the HERE Style Editor during the map instantiation
- Synchronising Two Maps - Synchronise a static map with an interactive map
- Take a Snapshot of the Map - Capture an area on the map
- Truck routing road restrictions Show a various truck routes with the truck related road restrictions highlighted on the map
- Zoom into Bounds - Zoom into bounds limiting maximum level
- Zooming to a Set of Markers - Alter the viewport to ensure a group of objects are visible