Overview

EchoX uses mapstraction - a mapping API abstraction library.

Usage with leaflet.js

In order to use mxn with leaflet you need to include the leaflet js and css on your page along with the mapstraction javascript:

    <link href="http://s.echo.com/0.2.1/dist/maps/leaflet.css" media="all" rel="stylesheet" type="text/css" />
    <script src="http://s.echo.com/0.2.1/dist/maps/leaflet.js" type="text/javascript"></script>
    <script src="http://s.echo.com/0.2.1/dist/maps/mxn.js?(leaflet)" type="text/javascript"></script>

Examples

Source

var map = new mxn.Mapstraction('map', 'leaflet');
map.addControls({zoom: 'large', overview: true, scale: true, map_type: true, pan: true});
var latlon = new mxn.LatLonPoint(51.50730, -0.12763);
map.setCenterAndZoom(latlon, 12);

var bb = new mxn.BoundingBox(51.9,-4.3,52.25,-3.75);
map.setBounds(bb);

console.log('Current bounds are ' + map.getBounds().toString(4));

map.setZoom(map.getZoom() - 1);

map.setZoom(map.getZoom() + 1);

console.log('Current zoom level is ' + map.getZoom());

console.log("Current center is " + map.getCenter().toString(4));

map.setCenter(new mxn.LatLonPoint(53.94, 48.96));

map.setCenter(new mxn.LatLonPoint(38.404196,-123.008194), {pan: true});

map.addControls({zoom: 'large', overview: true, scale: true, map_type: true, pan: true});

map.addControls({});

map.addControls({});
map.addSmallControls();

map.addControls({});
map.addMapTypeControls();

map.addControls({});
map.addControls({scale: true});

var marker = new mxn.Marker(map.getCenter());
map.addMarker(marker);
marker.addData({'infoBubble': 'This is a popup'});
marker.openBubble();

//'marker' is created in add marker example
map.removeMarker(marker);

var iconURL = "http://api.maps.nokia.com/en/playground/examples/maps/res/markerHouse.png";
// add a marker
var icon_marker = new mxn.Marker(map.getCenter());
icon_marker.setIcon(iconURL);
icon_marker.setIconSize([32,32]);
icon_marker.setIconAnchor([0,16]);
map.addMarker(icon_marker);
icon_marker.addData({'infoBubble': 'This icon is ' + iconURL});
icon_marker.openBubble();

//'icon_marker' is created in add icon marker example
map.removeMarker(icon_marker);

var polyline = new mxn.Polyline([
    new mxn.LatLonPoint(53.94, 48.96),
    new mxn.LatLonPoint(53.50, 49.03),
    new mxn.LatLonPoint(53.41, 49.38),
    new mxn.LatLonPoint(53.43, 50.02),
    new mxn.LatLonPoint(53.33, 50.19),
    new mxn.LatLonPoint(53.26, 50.21),
    new mxn.LatLonPoint(53.13, 50.05),
    new mxn.LatLonPoint(53.19, 49.83),
    new mxn.LatLonPoint(53.11, 49.54),
    new mxn.LatLonPoint(53.20, 49.20),
    new mxn.LatLonPoint(53.10, 48.70),
    new mxn.LatLonPoint(52.93, 48.56),
    new mxn.LatLonPoint(52.54, 48.26)
]);
polyline.closed = true;
map.addPolyline(polyline);
map.setCenterAndZoom(new mxn.LatLonPoint(53.94, 48.96), 7);

//'polyline' is created in add polyline example
map.removePolyline(polyline);

var point = new mxn.LatLonPoint(1.35, 103.8);
map.setCenterAndZoom(point, 12);
var centerRadius = new mxn.Radius(point, 1);
polyline = centerRadius.getPolyline(3, '#F00');
map.addPolyline(polyline);
marker = new mxn.Marker(point);
map.addMarker(marker);
marker.addData({'infoBubble': 'I am inside of a circle!'});
marker.openBubble();

//'polyline' and 'marker' are created in add radius example
map.removePolyline(polyline);
map.removeMarker(marker);

Info