HERE Maps Community on GitHub

Examples, Demos and Custom Map Components written by the HERE Maps Coding Community

NOTE These examples are for the deprecated 2.5.4 JavaScript API. Newer 3.x examples can be downloaded here and also viewed on jsFiddle.

Simple Examples: A series of graduated code examples using the Maps API for JavaScript, each example displays a short snippet of code with the correct syntax to do a specified task - for example "How do I add a Polygon to the map?" Useful when getting started, or as an aide-memoire when writing something new.

Advanced Examples: A second set of examples, demonstrating the use of the advanced features of the Maps API for JavaScript. These examples cover more difficult concepts such as asynchronous loading,KML and Map overlays.

Demos and Custom Components: Demos showcase the power of the Maps API for JavaScript when mashed up with other APIs or data sources. Custom Components extend the basic functionality of the API to introduce new components which offer additional capabilities (such as GeoJSON parsing). The files necessary for each demo can be found in a separate directory. Each custom component also offers a demonstation of usage where the component itself can be found within a separate libs directory. Obviously demos and custom components cover a very broad range of subjects, so they have been split thematically below:

See the LICENSE file in the root of this project for license details.

Demos and Custom Components

Custom Components

• Map Restriction - Restricts the map to a certain region or zoom level
• Interactive Control - Simple method to add "onclick" and forwarding to map markers
• Magnifier - Demonstration of map observers showing a high zoom map over the base map.
• Text on Icon - adding text to a custom marker
• Tooltips - custom control to add tooltips to markers
• x-Ray - demonstration of map observers showing a satellite map over the base map

Directions Rendering

• Routing with Directions - demonstrates the use of a custom directions renderer component to display manuever instructions on the page
• Suggestion Based Routing - complete routing example where the start and end points are based on user suggestions
• Context Menu Based Routing - routing example using a context menu
• Routing to a known destination - routing example to a fixed end point. The user enters a starting address
• Query String Routing - complete routing example where the start and end points are encoded in the query string.

Geocoding Demos

• Concurrent Search - Making concurrent requests.
• Find a US State - A simple game based on Geocoding.

Heat Map Mashups

• Flickr - heatmap of locations people have taken photos and uploaded to Flickr
• Instagram - heatmap of locations people have taken photos and uploaded to Instagram

KML + GeoJSON Demos

KML Generation Tools

• KML Generator from Data - Geocoding of files to KML Format.
• KML Generator from Map - Point and Click KML Generator
• Premier League Football Teams - Map Objects to KML

GeoJSON Parsing Examples

• GeoJSON: Hurricane Season - Displays GeoJSON data from the 2004 Hurricane Season
• GeoJSON: Premier League Teams - Displays the location of Football Stadiums in the English Premier League
• GeoJSON: Russian Provinces - Displays the Name and location of the provinces of Russia
• GeoJSON: Parser Demo - Parsing Demo of various standard GeoJSON elements.

KML Parsing Examples

• KML: Chinese Cities - Displays KML data about the largest cities in China
• KML :Finnish Cities - Displays KML data about the largest cities in Finland
• KML: Estate Agents - Displays a KML data file created from a Right Move Estate Agents data file
• KML: Premier League Football Teams - Displays a KML data file holding the location of Football Stadiums in the English Premier League

AJAX Loading

• XML: Marker Data - Loads marker using an AJAX call.

Map Overlay Demos

• Aerial HERE Maps Styles - A demonstration of available aerial HERE Maps map types (terrain, satellite etc.) and available languages.
• Base HERE Maps Styles - A demonstration of available HERE Maps base map types and available languages.
• Map with POIs - A HERE Map displaying points of interest icons.
• Bilingual Map - A HERE Map in Chinese and English
• Community Maps - A demonstration displaying the HERE Maps community map layer using a quad key algorithm.
• Grid Overlay - A demonstration of TMS (Tile Map Server) syntax using a tile overlay from the National Library of Scotland.

Sidebar Component

• German Election Results - election results in a side bar
• German City Populations - city populations in a side bar
• Premier League Football - football teams in a side bar
• Side Bar within Map - a side bar within the map itself

Simple Examples

Basic code snippets to get you started:

• Add a Circle to the Map
• Add a Polygon to the Map
• Add a Rectangle to the Map
• Add a Marker to the Map
• Change Marker on Zoom
• Display Place Data
• Find Nearest Marker
• Find User Address
• Find User Position
• Geocoding
• Geocoordinate on Click
• Highlight a Marker
• Infobubble on Click
• Infobubble
• Map Components
• Open Infobubble with Id
• Pan the Map
• Pixel to Geocoordinate
• Set Center and Zoom Level
• Simple Routing
• Zoom to All Markers

Advanced Examples

The advanced examples are split thematically as shown:

Advanced Map Objects

• Custom Graphics Marker
• Sprite Markers

Asynchronous Loading

• Asynchronous Loading
• Combining with Static Maps

Clustering

• Clustering with a Theme
• Clustering with Zoom
• Simple Clustering
• Unclustered Markers

KML

• Simple KML Loader
• Cross-domain KML Loader

Overlays

• Ground Overlay
• Tile Overlay

Other

• Context Menu
• Coroutine
• IDL Check
• Map Language
• OLists
• Map Features