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 Pricing 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