×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to create a custom overlay

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - Swap picture.)
jasfox (Talk | contribs)
m (Jasfox - 256, not 128)
Line 42: Line 42:
  
 
For the base '''map providers''', the globe is divided into individual map tiles. These are retrieved online from  Nokia’s map tile service.
 
For the base '''map providers''', the globe is divided into individual map tiles. These are retrieved online from  Nokia’s map tile service.
*  At minimum zoom, the world is contained in a single 128x128 pixel tile.
+
*  At minimum zoom, the world is contained in a single 256x256 pixel tile.
 
*  At the next zoom level up, the world  is 2 tiles wide and 2 tiles high. Then 4x4, 8x8, 16x16 etc.
 
*  At the next zoom level up, the world  is 2 tiles wide and 2 tiles high. Then 4x4, 8x8, 16x16 etc.
 
*  Each zoom level splits the tiles in two, doubling the number of tiles across the width and height  
 
*  Each zoom level splits the tiles in two, doubling the number of tiles across the width and height  

Revision as of 17:29, 15 June 2012

Underconstruction.pngUnder Construction: (20120615112503) This article is under construction and it may have outstanding issues. If you have any comments please use the comments tab.

This article explains how to create a custom overlay and add data from your own tile server to the map.

Article Metadata
Code ExampleTested with
Devices(s): Internet Explorer, Google Chrome, Firefox
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.0
Article
Keywords: Nokia Maps, Overlay, Map Provider, Data
Created: jasfox (15 Jun 2012)
Last edited: jasfox (15 Jun 2012)


Contents

Introduction

For extremely large data sets, it no longer makes sense to add each data point as an individual marker, image or polyline. In situations such as displaying weather or traffic conditions over a map, it would be less processor intensive to retrieve pre-built images from a tiler server rather than re-calculating and adding a large number of mapObjects on to the map display. The cost of making a few extra round trips to retrieve data from a server will be much smaller than the equivalent client side processing of adding hundreds of thousands of objects onto the map.

This article introduces a JavaScript library to overlay images over a map. It handles the data calls to an arbitrary tile server which generates tiles in the Normalised Mercator projection, which is the commonest format for online maps. It also handles the necessary attribution of the overlay images. The code example retrieves Map Tiles from a tile server run by the National Library of Scotland . The mapping is based on out-of-copyright Ordnance Survey maps, dating from the 1920s to the 1940s.

How Map Providers and Overlays Work

For the base map providers, the globe is divided into individual map tiles. These are retrieved online from Nokia’s map tile service.

  • At minimum zoom, the world is contained in a single 256x256 pixel tile.
  • At the next zoom level up, the world is 2 tiles wide and 2 tiles high. Then 4x4, 8x8, 16x16 etc.
  • Each zoom level splits the tiles in two, doubling the number of tiles across the width and height
  • Each Map is based on the Normalized Mercator projection.


Custom overlays work in the same fashion - using your own map tile server complex visual data can be displayed at different zoom levels.

  • One tile at minimum zoom, then 2x2, 4x4 and so on.
  • Must be based on the Normalized Mercator projection.
  • Use .png tiles to support transparency, so underlying map can be seen beneath your data.

Nm overlay.png


Adding Attribution

Unless you own your own map tile source, you will have to comply with the licensing agreement of the map tile provider. In many cases this will mean giving some attribution to the original owner, even if the tiles are being offered without cost. Here is the licensing agreement from the National Library of Scotland used in the example:

"You can embed the map in your own website, display your own markers or mapping data on top of it, use it for research purposes, or create derivative work from it. The only condition is that you must display an attribution to the National Library of Scotland, together with a link to the National Library of Scotland website http://www.nls.uk/ whenever our map is used. If you create derivative work, the documentation of your work must contain this attribution"


var copyright = new Copyright(new nokia.maps.geo.BoundingBox (new nokia.maps.geo.Coordinate (90, 180),
new nokia.maps.geo.Coordinate (-90, -180)),
"Historical maps from <br/><a href='http://geo.nls.uk/maps/api/'>NLS Maps API<\/a>");


Summary

Through using the functions in the Code Example it is possible to overlay map tile data over a Nokia map. If the images are returned in the .png format, transparency will be respected and the Nokia Map will show through underneath. - feel free to adapt the code to your own use.

Nm overlay2.png

384 page views in the last 30 days.