Adding Custom Overlays (Heat map images) over the multimap

Although multimap provides good map and aerial coverage of the most of the areas, you are still the best authority on data availability and data quality for your own needs.

Multimap allows you to add your own custom overlays on map. Multimap Custom Overlay API’s are built of foundation of tiles. Each tile represents a particular view of a rectangular piece of information. Multimap tile sets can be used immediately for regular map views, aerial views etc. However, the tiling system can also be used to serve up custom geospatially-oriented information. In other words, you can build your own tiles and "roll your own tile server" so that your users can see not only the built in maps, but your specific information.

Understanding Multimap Maps Tiles

Multimap Maps divides up each map and map style into a set of 256 pixel x 256 pixel tiles. The tiles are stitched together according to a naming scheme that is based on the images position and relative degree of resolution. Each tile is numbered according to where it is with respect to a 4 square quadrant system.

The Naming Scheme

If you look at a Multimap Maps map at the highest level, you will see four images representing the 4 256x256 tiles that make up the projection of the Earth as shown in the following diagram:

As you zoom in, each of these top level tiles is further divided into 4 tiles. The tile naming scheme is therefore as follows:

· A letter code indicating style (r - road, a - aerial, h - hybrid, o - bird's eye, b - bird's eye hybrid)

· A series of quadrant numbers. The numbers will always be between 0 and 3 (inclusive) and represent the relative position of the tile. The more numbers in the sequence, the greater the zoom level.

Preparing Your Own Tiles

To prepare custom tiles, convert an image into 256x256 pixel chunks and create a meaningful naming scheme. You will also have to decide how you want to host your images.

Converting Virtual Earth(Bing Maps) tiles Naming schema into multimap Naming schema

Following code can be used to convert the virtual earth tiles naming schema compatible with multimap tiles naming schemas:

/* Method used for getting the corresponding quadrant image for overlaying */ function getCrimeTileUrl (l_a,l_b) { var url = any web based location +'r' + getQuadKey(l_a.x, l_a.y, l_b-1) + '.png'; return url; } /* This is used to get the tile url complete path compatible with VE naming schema */ function getQuadKey(tileX,tileY,zoom) { var quadKey = ""; for (var i = zoom; i > 0; i--) { var digit = '0'; var mask = 1 << (i - 1); if ((tileX & mask) != 0) { digit++; } if ((tileY & mask) != 0) { digit++; digit++; } quadKey += digit; } return quadKey; }

In order to create a tile layer, specify the following:

· Minimum and maximum zoom levels for your tile images

· URL that you intend to use for creating or downloading them*

· Bounds of the map (if applicable - for example, if your custom map tiles cover only a small area)

Multimap recommends that you group the MMCopyrights into MMCopyrightCollection constructors and, for each tile layer.

When the copyrights have been allocated, add each MMCopyright instance to an MMCopyrightCollection. Multimap uses MMCopyrightCollection constructors to permit the display of multiple copyright texts for a particular set of tiles.

After creating an instance of the MMCopyrightCollection, you can add your previously-created MMCopyright to the collection.

Code:

var l_copyrightCollection; var crimetilelayers; function addCustomOverlay() { var l_copyright = new MMCopyright(1,[new MMBounds(new MMLatLon(-90, -180),new MMLatLon(90, 180))],0,"©2009 mywebsite.com"); var l_copyrightCollection = new MMCopyrightCollection('My Site - '); l_copyrightCollection.addCopyright(l_copyright); window.crimetilelayers = new MMTileLayer(l_copyrightCollection ,7, 18); //isPng function is used to check with the overlaying images are png or not crimetilelayers.isPng = function(){return true;}; //getOpacity function is used to control the transparency of the overlaying images crimetilelayers.getOpacity=function() {return 0;}; //following code is used to fetch the corresponding image with the help of getCrimeTileUrl function crimetilelayers.getTileUrl = getCrimeTileUrl; crimeNewLayer = new MMTileLayerOverlay(crimetilelayers); mapviewer.addOverlay(crimeNewLayer); } /* Method used to remove the custom overlay */ function removeCustomOverlay() { mapviewer.removeOverlay(crimeNewLayer); }

The Constructor Summary:

MMCopyright( index, <MMBounds> bounds, minZoom, text ) A single copyright entry to be added to a MMCopyrightCollection. Parameters: index - A unique identifier for this copyright object. bounds - A bounding box to which this information relates. minZoom - The minimum zoom factor at which this information shuld be displayed. text - The text to display. A collection of copyright data to be passed to a MMTileLayer object. MMCopyrightCollection( prefix ) Parameters: prefix - (optional) A prefix to be displayed in front of the combined copyrights, e.g., "Imagery: ". Constructor for a tile layer to be used in an MMMapType or an MMTileLayerOverlay. MMTileLayer( <MMCopyrightCollection> copyrights, min_zoom_factor, max_zoom_factor ) Parameters: copyrights - A copyright collection describing the data sources for the tiles in this tile layer. MMTileLayerOverlay class, for overlaying tiles on other tiles MMTileLayerOverlay( <MMTileLayer> tile_layer ) Parameters: tile_layer - The tile layer that you would like to have overlaid.

The Method Summary:

1. addOverlay A function for adding an overlay (marker, info box or polyline) to the mapviewer. If the overlay is already on the map, it will be removed and re-added. void addOverlay( <MMOverlay> overlay ) Parameters: overlay - The overlay to be added to the mapviewer. 2. removeOverlay A function to remove an overlay from the mapviewer. This function can be used for removing either markers or info boxes. void removeOverlay( <MMOverlay> overlay ) Parameters: overlay - The overlay to be removed.