Examples, Demos and Custom Map Components written by the HERE Maps Coding Community
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:
- 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
- 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.
- Concurrent Search - Making concurrent requests.
- Find a US State - A simple game based on Geocoding.
- 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 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.
- 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.
- 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
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
The advanced examples are split thematically as shown: