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
- Click me to set bounds.
- Click me to get bounds.
- Click me to decrement zoom.
- Click me to increment zoom.
- Click me to get zoom.
- Click me to getCenter.
- Click me to setCenter.
- Click me to pan to center.
- Click me to add controls.
- Click me to remove controls.
- Click me to add small controls.
- Click me to add map type controls.
- Click me to add map scale controls.
- Add a standard marker or remove it.
- Add a marker with a custom icon or remove it.
- Add a polyline or remove it.
- Add a radius around point or remove it.
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);