Mapiator - Documentation

Here you will find information on:

adding arbitrary (clickable) elements to the map
creating paths and polygons
manipulating the map with JavaScript
loading different tiles

Adding DOM elements to the map

To add a dom element to the map:

var element = document.createElement('div');
map.overlayLayer.addElement(element, 48.0, 10.0); // latitude, longitude

The element will be positioned on the map so that its upper left corner is at the specified geo position. It will move around with the map. The element may contain other elements. You can style it with CSS.

Note: The element’s “position” css attribute will be set to absolute and the “z-index” will be adjusted by the map.

To make the element clickable use your favorite JavaScript framework or simply do:

element.onclick = function(e){
    alert('Ouch! I have been klicked');
};

Paths and polygons

Drawing a path:

var path = Mapiator.Path( [[50.0, 9.0], [50.0, 12.0], [48.1, 11.6]] );
                          // list of [lat, lng] pairs
map.addElement( path );

Drawing a polygon:

var poly = Mapiator.Polygon( [[50.0, 7.0], [50.0, 10.0], [48.13, 9.57]] );
map.addElement( poly );

Append further points at the end of a path:

path.appendPoint( 51.2, 10.3 ); // lat, lng

Modify the list of points directly:

path.points[1] = [43.0, 12.1]; // lat, lng

Important: After manipulating a path or a polygon:

path.recalc(); // forgetting it may lead to display errors
map.redraw(); // make sure the map displays the updated path

To draw a path or a polygon from WKT data do:

var path = Mapiator.parseWKT( "LINESTRING (9.0 50.0, 12.0 50.0, 11.6 48.1)" );
map.addElement( path );

var poly = Mapiator.parseWKT( "POLYGON (7.0 50.0, 10.0 50.0, 9.57 48.13)" );
map.addElement( poly );

To style your path or polygon do:

path.strokeWidth = 5; // pixels
path.strokeStyle = 'rgba(0, 100, 0, 0.5)'; // YES! transparency is supported!

poly.fillStyle = 'rgba(0, 0, 100, 0.5)';
map.redraw();

Manipulate the map with JavaScript

Center the map on a specific point:

map.setCenter( 53, 10 ); // latitude, longitude

Moving the map:

// move the center of the map 20 pixels west and 30 pixels north:
map.moveByPx( 20, 30 );

Zooming:

// zoom in 1 level:
map.zoomIn(); // the map automatically redraws after this

// zoom out 1 level:
map.zoomOut(); // the map automatically redraws after this

// set a specific zoom level:
map.setZoom( 7 ); // you need to redraw after this

Changing the tiles

To load different tiles you need to write a function which returns the tile url for given x, y and zoom values. E.g.:

map.getTileUrl = function(x, y, zoom){
  // return url for Open Street Map tile:
  return 'http://b.tile.openstreetmap.org/'+zoom+'/'+x+'/'+y+'.png';
};

If you want to learn about how the x, y and zoom values correspond to a position on the map or how tiles are created I recommend you read this article: Tiles à la Google Maps: Coordinates, Tile Bounds and Projection

If you want to draw tiles of a size different from 256x256 you need to tell Mapiator about it:

map.setTileSizeInPx( 512 );

You need to redraw afterwards. Usually you would do this before (re)drawing the map the first time.