{"id":13701266,"url":"https://github.com/heremaps/maps-api-for-javascript-examples","last_synced_at":"2025-05-16T06:07:01.074Z","repository":{"id":9652772,"uuid":"49207729","full_name":"heremaps/maps-api-for-javascript-examples","owner":"heremaps","description":"Self-contained examples for Maps API for JavaScript v3.","archived":false,"fork":false,"pushed_at":"2023-12-07T15:21:36.000Z","size":12157,"stargazers_count":189,"open_issues_count":13,"forks_count":429,"subscribers_count":38,"default_branch":"master","last_synced_at":"2024-04-14T05:58:24.375Z","etag":null,"topics":["examples","geo","geocoding","geospatial","javascript","js","kml","mapping","maps","traffic-information","visualization"],"latest_commit_sha":null,"homepage":"https://developer.here.com/javascript-apis/documentation/v3/maps","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heremaps.png","metadata":{"files":{"readme":"README.md","changelog":"change-harp-style-at-load/data/night.json","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-07T13:59:30.000Z","updated_at":"2024-06-19T17:12:33.806Z","dependencies_parsed_at":"2023-12-07T16:33:28.861Z","dependency_job_id":null,"html_url":"https://github.com/heremaps/maps-api-for-javascript-examples","commit_stats":{"total_commits":113,"total_committers":26,"mean_commits":4.346153846153846,"dds":0.7610619469026548,"last_synced_commit":"a4747797192f97b6e9b1a806aad9ebb06a5493e9"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heremaps%2Fmaps-api-for-javascript-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heremaps%2Fmaps-api-for-javascript-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heremaps%2Fmaps-api-for-javascript-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heremaps%2Fmaps-api-for-javascript-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heremaps","download_url":"https://codeload.github.com/heremaps/maps-api-for-javascript-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478190,"owners_count":22077676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["examples","geo","geocoding","geospatial","javascript","js","kml","mapping","maps","traffic-information","visualization"],"created_at":"2024-08-02T20:01:25.378Z","updated_at":"2025-05-16T06:06:56.044Z","avatar_url":"https://github.com/heremaps.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Maps API for JavaScript\n\nThis 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](https://www.here.com/docs/category/here-sdk-for-js) website.\nTo 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.\n\n\u003e **Note:** In order to get the sample code to work, you **must** replace all instances of `window.apikey` within the code and use your own **HERE** credentials.\n\n\u003e You can obtain a set of credentials from the [HERE Base Plan Pricing](https://here.com/get-started/pricing) page on here.com.\n\nSee the [LICENSE](LICENSE) file in the root of this project for license details.\n\n## Maps API for JavaScript\n\nAll of the following examples use **version 3.1** of the API\n\n* [Adding an Overlay to the Map](https://heremaps.github.io/maps-api-for-javascript-examples/custom-tile-overlay/demo.html) - Display custom map tiles as an overlay\n* [Animated Markers](https://heremaps.github.io/maps-api-for-javascript-examples/markers-update-position-with-animation/demo.html) - Update marker position with animation\n* [Calculating a Location from a Mouse Click](https://heremaps.github.io/maps-api-for-javascript-examples/position-on-mouse-click/demo.html) - Obtain the latitude and longitude of a location within the map\n* [Changing from the Metric System](https://heremaps.github.io/maps-api-for-javascript-examples/map-scale-bar-changing-from-the-metric-system/demo.html) - Display a map including a scale bar in miles or yards\n* [Circle on the Map](https://heremaps.github.io/maps-api-for-javascript-examples/circle-on-the-map/demo.html) - Display a map highlighting a circular region\n* [DOM Marker](https://heremaps.github.io/maps-api-for-javascript-examples/map-with-dom-marker/demo.html) - Display a marker that is capable of receiving DOM events\n* [DOM Marker rotation](https://heremaps.github.io/maps-api-for-javascript-examples/dom-marker-rotation/demo.html) - Rotate DOM Marker's content using CSS\n* [Display KML Data](https://heremaps.github.io/maps-api-for-javascript-examples/display-kml-on-map/demo.html) - Parse a KML file and display the data on a map\n* [Display GeoJSON Data](https://heremaps.github.io/maps-api-for-javascript-examples/display-geojson-on-map/demo.html) - Parse a GeoJSON file and display the data on a map\n* [Display an Indoor Map](https://heremaps.github.io/maps-api-for-javascript-examples/indoor-map/demo.html) - Use the HERE Indoor Maps API to load and visualize an indoor map\n* [UI interactions on Indoor Map](https://heremaps.github.io/maps-api-for-javascript-examples/indoor-map-ui-interaction/demo.html) - HERE Indoor Maps API with UI interactions on the map\n* [Restrict map movement with Indoor Map](https://heremaps.github.io/maps-api-for-javascript-examples/indoor-map-movement/demo.html) - Restrict the map movement within the indoor map bounds\n* [Draggable Marker](https://heremaps.github.io/maps-api-for-javascript-examples/draggable-marker/demo.html) - Display a moveable marker on a map\n* [Draggable geo shapes](https://heremaps.github.io/maps-api-for-javascript-examples/draggable-shapes/demo.html) - Display moveable geometric shapes on a map\n* [Extruded geo shapes](https://heremaps.github.io/maps-api-for-javascript-examples/extruded-objects/demo.html) - 3D extrusion of the geometric shapes\n* [Finding the Nearest Marker](https://heremaps.github.io/maps-api-for-javascript-examples/finding-the-nearest-marker/demo.html) - Find a marker nearest to the click location\n* [Image overlay](https://heremaps.github.io/maps-api-for-javascript-examples/image-overlay/demo.html) - Display an animated weather radar\n* [Interactive Map Layer](https://heremaps.github.io/maps-api-for-javascript-examples/transit-iml/demo.html) - Visualize Data from Interactive Map Layer on Map\n* [Interleave vector and object layers](https://heremaps.github.io/maps-api-for-javascript-examples/interleave-layers/demo.html) - Display an object under the buildings\n* [Map Objects Event Delegation](https://heremaps.github.io/maps-api-for-javascript-examples/map-objects-event-delegation/demo.html) - Use event delegation on map objects\n* [Map Objects Events](https://heremaps.github.io/maps-api-for-javascript-examples/map-object-events-displayed/demo.html) - Handle events on various map objects\n* [Map at a specified location](https://heremaps.github.io/maps-api-for-javascript-examples/map-at-specified-location/demo.html) - Display a map at a specified location and zoom level\n* [Map using View Bounds](https://heremaps.github.io/maps-api-for-javascript-examples/map-using-view-bounds/demo.html) - Display a map of a given area\n* [Map with custom MapSettings UI Control](https://heremaps.github.io/maps-api-for-javascript-examples/map-with-custom-map-settings-ui-control/demo.html) - Switch between different layers using a custom MapSettings UI control.\n* [Map with Driving Route from A to B](https://heremaps.github.io/maps-api-for-javascript-examples/map-with-route-from-a-to-b/demo.html) - Request a driving route from A to B and display it on the map.\n* [Map with Pedestrian Route from A to B](https://heremaps.github.io/maps-api-for-javascript-examples/map-with-pedestrian-route-from-a-to-b/demo.html) - Request a walking route from A to B and display it on the map.\n* [Map with Route from A to B using Public Transport](https://heremaps.github.io/maps-api-for-javascript-examples/map-with-route-from-a-to-b-using-public-transport/demo.html) - Request a route from A to B using public transport and display it on the map.\n* [Map with isoline route](https://heremaps.github.io/maps-api-for-javascript-examples/map-with-isoline-route/demo.html) - Request a range for the EV vehicle.\n* [Marker Clustering](https://heremaps.github.io/maps-api-for-javascript-examples/marker-clustering/demo.html) - Cluster multiple markers together to better visualize the data\n* [Marker Clustering with Custom Theme](https://heremaps.github.io/maps-api-for-javascript-examples/custom-cluster-theme/demo.html) - Cluster multiple markers and customize the theme\n* [Marker on the Map](https://heremaps.github.io/maps-api-for-javascript-examples/markers-on-the-map/demo.html) - Display a map highlighting points of interest\n* [Markers with Altitude](https://heremaps.github.io/maps-api-for-javascript-examples/markers-with-altitude/demo.html) - Display markers at different altitudes\n* [Multi-language support](https://heremaps.github.io/maps-api-for-javascript-examples/map-multi-language-support/demo.html) - Display a map with labels in a foreign language\n* [Opening an Infobubble on a Mouse Click](https://heremaps.github.io/maps-api-for-javascript-examples/open-infobubble/demo.html) - Open an infobubble when a marker is clicked\n* [Ordering Overlapping Markers](https://heremaps.github.io/maps-api-for-javascript-examples/ordering-overlapping-markers/demo.html) - Arrange the order in which a series of map objects are displayed\n* [Panning the Map](https://heremaps.github.io/maps-api-for-javascript-examples/panning-the-map/demo.html) - Programmatically pan the map so that it is continually in motion\n* [Polygon on the Map](https://heremaps.github.io/maps-api-for-javascript-examples/polygon-on-the-map/demo.html) - Display a map highlighting a region or area\n* [Polyline on the Map](https://heremaps.github.io/maps-api-for-javascript-examples/polyline-on-the-map/demo.html) - Display a map with a line showing a known route\n* [Rectangle on the map](https://heremaps.github.io/maps-api-for-javascript-examples/rectangle-on-the-map/demo.html) - Display a map highlighting a retangular region or area\n* [Resizable geo Polygon](https://heremaps.github.io/maps-api-for-javascript-examples/resizable-polygon/demo.html) - Display resizable polygon on a map\n* [Resizable geo Polyline](https://heremaps.github.io/maps-api-for-javascript-examples/resizable-polyline/demo.html) - Display resizable polyline on a map\n* [Resizable geo Circle](https://heremaps.github.io/maps-api-for-javascript-examples/resizable-circle/demo.html) - Display resizable circle on a map\n* [Resizable geo Rect](https://heremaps.github.io/maps-api-for-javascript-examples/resizable-rect/demo.html) - Display resizable rectangle on a map\n* [Restrict Map Movement](https://heremaps.github.io/maps-api-for-javascript-examples/restrict-map/demo.html) - Restrict a moveable map to a given rectangular area\n* [SVG Graphic Markers](https://heremaps.github.io/maps-api-for-javascript-examples/map-with-svg-graphic-markers/demo.html) - Display a map with custom SVG markers\n* [Search for a Landmark](https://heremaps.github.io/maps-api-for-javascript-examples/search-for-landmark/demo.html) - Request the location of a landmark and display it on the map.\n* [Search for a Location based on an Address](https://heremaps.github.io/maps-api-for-javascript-examples/geocode-a-location-from-address/demo.html) - Request a location using a free-form text input and display it on the map.\n* [Search for a Location given a Structured Address](https://heremaps.github.io/maps-api-for-javascript-examples/geocode-a-location-from-structured-address/demo.html) - Request a location from a structured address and display it on the map.\n* [Search for the Address of a Known Location](https://heremaps.github.io/maps-api-for-javascript-examples/reverse-geocode-an-address-from-location/demo.html) - Request address details for a given location and display it on the map.\n* [Set a map style at the load time](https://heremaps.github.io/maps-api-for-javascript-examples/change-style-at-load/demo.html) - Set a style of the whole map during the map instantiation\n* [Set a map style exported from the HERE Style Editor](https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/demo.html) - Set a style exported from the [HERE Style Editor](https://platform.here.com/style-editor) during the map instantiation\n* [Synchronising Two Maps](https://heremaps.github.io/maps-api-for-javascript-examples/synchronising-two-maps/demo.html) - Synchronise a static map with an interactive map\n* [Take a Snapshot of the Map](https://heremaps.github.io/maps-api-for-javascript-examples/capture-map-area/demo.html) - Capture an area on the map\n* [Truck routing road restrictions](https://heremaps.github.io/maps-api-for-javascript-examples/truck-routing-road-restrictions/demo.html) Show a various truck routes with the truck related road restrictions highlighted on the map\n* [Zoom into Bounds](https://heremaps.github.io/maps-api-for-javascript-examples/custom-zooming-into-bounds/demo.html) - Zoom into bounds limiting maximum level\n* [Zooming to a Set of Markers](https://heremaps.github.io/maps-api-for-javascript-examples/zoom-to-set-of-markers/demo.html) - Alter the viewport  to ensure a group of objects are visible\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheremaps%2Fmaps-api-for-javascript-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheremaps%2Fmaps-api-for-javascript-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheremaps%2Fmaps-api-for-javascript-examples/lists"}