Overlays

Overlays are entities that represent longitude/latitude coordinates. This means that when the map moves they also move.

There are several types of overlays that QuickMap^® supports

• Points. These are added to the map using markers.
• Lines. These are added to the map using polylines
• Areas. These are added to the map using polygons.
• Tiles. These are added to the map using tiles. The base map itself uses this overlay type.

Markers

Markers represent points on a map. By default they use the POI icon. There are some other types of basic icons within QuickMap^® and the Icon class allows for custom icons.

Markers are interactive and can recieve a click and mouse hover events. The click and hover events cause the pop up to be displayed.

function init() { 
    // set centre of the map to -33.866774, 151.207108, which is the centre of Sydney, 
    // and the zoom level to 15. 
    var locationToCentreOn = new MapDS.LatLng( -33.866774, 151.207108 ); 
    var map = new MapDS.Maps.Map( "map", { zoom:15, centre:locationToCentreOn } ); 
    // add a marker 
    map.addOverlay( new MapDS.Maps.Marker( locationToCentreOn ) ); 
} 
 
window.onload = init;

Simple Marker Example.

Icons

There are four predefined icons within QuickMap^® that can be used. The follow list defines them:

•  POI
•  Location
•  RouteStart
•  RouteEnd
•  WayPoint

These definitions are under MapDS.Maps.MarkerOptions.IconType.

function init() { 
    // set centre of the map to -33.866774, 151.207108, which is the centre of Sydney, and the zoom level to 15. 
    var locationToCentreOn = new MapDS.LatLng( -33.866774, 151.207108 ); 
    var map = new MapDS.Maps.Map( "map", { zoom:15, centre:locationToCentreOn } ); 
    // add a marker using the Location icon 
    map.addOverlay( new MapDS.Maps.Marker( locationToCentreOn, {
        icon: MapDS.Maps.MarkerOptions.IconType.Location
    } ) ); 
} 
 
window.onload = init;

Simple Icon Example.

Custom Icons

Using the Icon class allows for creation of custom icons that can then be used with a marker.

function init() { 
    // set centre of the map to -33.866774, 151.207108, which is the centre of Sydney,
    // and the zoom level to 15. 
    var locationToCentreOn = new MapDS.LatLng( -33.866774, 151.207108 ); 
    var map = new MapDS.Maps.Map( "map", { zoom:15, centre:locationToCentreOn } ); 
    // add a marker using a custom icon 
    var size = new MapDS.Size( 30, 32 ); 
    var offset = new MapDS.Pixel( -15, -16 ); 
    var icn = new MapDS.Maps.Icon( './images/markers/cross.png', size, offset );
     
    map.addOverlay( new MapDS.Maps.Marker( locationToCentreOn, {icon: icn} ) ); 
} 
 
window.onload = init;

Simple Custom Icon Example.

Polylines

A polyline consists of a collection of points, a good example of this is the route to follow as part of driving directions.

function init() {
    var points = []
      points.push( new MapDS.LatLng( -33.866774, 151.207108 ) );
      points.push( new MapDS.LatLng( -33.836774, 151.207108 ) );
      points.push( new MapDS.LatLng( -33.806774, 151.157108 ) );
    
      var map = new MapDS.Maps.Map( "map" );
      // add a Polyline
      map.addOverlay( new MapDS.Maps.Polyline( points, { colour: '#003DF5', width: 7 } ) );
      map.loadBestView();
}
 
window.onload = init;

Simple Polyline Example.

Polygons

Polygons are similar to Polylines but with one main difference. Polygons are closed whereas Polylines are open ended. This means that in a Polygon the first and last points are the same.

function init() {
    var points = []
      points.push( new MapDS.LatLng(-33.81301, 151.18761) );
      points.push( new MapDS.LatLng(-33.81301, 151.28941) );
      points.push( new MapDS.LatLng(-33.8744, 151.18761) );
    
      var map = new MapDS.Maps.Map( "map" );
      // create a Shape layer to hold the polygons
      var pLayer = new MapDS.Maps.Layer.Shape();
      map.addOverlay( pLayer );
      
      // add a Polygon
      pLayer.addOverlay( new MapDS.Maps.Polygon( points, { colour: '#003DF5', width: 2, fillcolour: '#3366FF' } ) );
      map.loadBestView();
}
 
window.onload = init;
 

Simple Polygon Example.

Tiles

The base map within QuickMap^® consists of a series of tiles covering the surface of the earth across multiple zoom levels.

Coverage

Not all areas for each zoom level have tiles, areas of the map may contain tiles at different zoom levels. The lowest zoom level for QuickMap^® is 3 and the highest is 18. Each of these zoom levels consists of 4N tiles, where N is the zoom level. So at zoom level 4 the map is broken into a 16x16 grid consisting of 256 tiles.

Custom Tile Overlays

Custom tiles can be used by implementing the Layer.Tile class. When defining a custom tile overlay you need to define what zoom levels the tiles are for, and the URI(s) where the tiles can be found. There are also properties for the opacity of the overlay and also the attribution.

var customTileLayer = new MapDS.Maps.Layer.Tile( 3, 18, {  
  url: [  
    'http://www.domain.com/${z}/${x}/${y}?key='+MapDS.Maps.APIKey,  
    'http://www.domain.com/${z}/${x}/${y}?key='+MapDS.Maps.APIKey,  
    'http://www.domain.com/${z}/${x}/${y}?key='+MapDS.Maps.APIKey,  
    'http://www.domain.com/${z}/${x}/${y}?key='+MapDS.Maps.APIKey  
  ],  
  opacity: 0.5  
} );  
map.addOverlay(customTileLayer)