Maps Examples for HERE Maps API
Article Metadata
Code Example
Article
Since this article was first written, the Ovi Maps API has been superceded by the HERE Maps API. The latest version of the API can be found here. The original Ovi Map Examples for this article were tested on FireFox 5 only, though they should work with other supported browsers as well. All examples are also hosted live at dev.drjukka.com. The code examples have been
converted to use the latest HERE Maps library.
For Client side implementations, Qt versions of similar use case can be found from Qt Maps Examples, and examples for Windows phone using Bing maps can be found from Maps Examples for Windows phone wiki article.
Contents |
Hello Map
Basic minimal implementation of the map, includes couple of additional lines for kinetic panning etc. interactions.
see also: Basic Map
Download example: Media:JsMaps HelloWorld.zip
Map events
Check for mouse events for the API (behavior control) as well as DOM events for the Map div. Also Map observers adding removing included.
see also: Map Events
Download example: Media:JsMaps MouseEvents.zip
Map interaction
Shows some basic interaction functionalities with the map like zooming, tilting, rotating & moving. As well as shows changing map type.
see also: Map components
Download example: Media:JsMaps BasicMapinteraction.zip
Simple Map content
Shows some basic map content handling parts. Including Markers, polyline & polygon. Additional functionality shown are Z-Orders, changing visibility, adding & removing objects from Map as well as from a container, and also changing colors for polygon & polyline
Download example: Media:JsMaps ContentHandling.zip
More Map content
Shows using Rectangle & Circle. As well as shows additional functionality, such as changing line width, object location, Circle precision etc.
see also: Adding shapes onto the map
Download example: Media:JsMaps MoreContentHandling.zip
Map markers
Shows how to personalize markers, use Draggable marker, utilizing click events for bringing plain-text info bubble as well as using HTML in the info bubble
Download example: Media:JsMaps ContentHandlingMarkers.zip
Dynamic polyline
Shows how to add and remove markers to the map with click events, as well as how to dynamically add and remove points from polyline.
Download example: Media:JsMaps ModifyPolyline.zip
Custom control
Simple example on making custom component control and adding/removing it from components array of the map.
Download example: Media:JsMaps CustomControl.zip
UI controls and overlays Handling
Shows UI map controls adding & removal as well as overlays discovery and adding & removing them.
Download example: Media:JsMaps MapContentAndUIHandling.zip
My Map position
Show on how to use the API for getting the address and position of the user, as well as how to use the positioning monitoring.
see also: Positioning
Download example: Media:JsMaps Positioning.zip
Geo Coding
Simple example showing on how you can Geo code an address to a location utilizing the Geo coding service
see also: Geocode example
Download example: Media:JsMaps GeoCoding.zip
Reverse Geo coding
Simple example showing on how you can Reverse Geo code location from an address by utilizing the reverse Geo coding service
see also: Reverse Geocode example
Download example: Media:JsMaps RevGeoCoding.zip
Map search
Simple example showing how to do a simple text based search for places and show them in the map. Search can also be limited on specific area.
see also: Search example
Download example: Media:JsMaps SimpleAreaSearch.zip
Routing
Simple example showing how you can route between two points and show the route in a map. Start and end points can also be determined via reverse geo coding, or by clicking the map.
see also: A to B routing example
Download example: Media:JsMaps Routing.zip
(no comments yet)