- var epsg4326 = new OpenLayers.Projection("EPSG:4326");
+ // Leaflet extensions
+ L.LatLngBounds.include({
+ getSouthLat: function () {
+ return this._southWest.lat;
+ },
+
+ getWestLng: function () {
+ return this._southWest.lng;
+ },
+
+ getNorthLat: function () {
+ return this._northEast.lat;
+ },
+
+ getEastLng: function () {
+ return this._northEast.lng;
+ },
+
+ toBBOX: function () {
+ var decimal = 6;
+ var mult = Math.pow(10, decimal);
+ var xmin = Math.round(this.getWestLng() * mult) / mult;
+ var ymin = Math.round(this.getSouthLat() * mult) / mult;
+ var xmax = Math.round(this.getEastLng() * mult) / mult;
+ var ymax = Math.round(this.getNorthLat() * mult) / mult;
+ return xmin + "," + ymin + "," + xmax + "," + ymax;
+ },
+
+ getSize: function () {
+ return (this._northEast.lat - this._southWest.lat) *
+ (this._northEast.lng - this._southWest.lng);
+ }
+ });
+
+ L.Bounds.include({
+ getWidth: function () {
+ return this.max.x - this.min.x;
+ },
+
+ getHeight: function () {
+ return this.max.y - this.min.y;
+ }
+ });
+
+ L.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>;
+
var map;
- var markers;
- var vectors;
- var popup;
+
+ var layers = [
+ {
+ klass: L.OSM.Mapnik,
+ attribution: "",
+ keyid: "mapnik",
+ layerCode: "M",
+ name: I18n.t("javascripts.map.base.standard")
+ },
+ {
+ klass: L.OSM.CycleMap,
+ attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
+ keyid: "cyclemap",
+ layerCode: "C",
+ name: I18n.t("javascripts.map.base.cycle_map")
+ },
+ {
+ klass: L.OSM.TransportMap,
+ attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
+ keyid: "transportmap",
+ layerCode: "T",
+ name: I18n.t("javascripts.map.base.transport_map")
+ },
+ {
+ klass: L.OSM.MapQuestOpen,
+ attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>",
+ keyid: "mapquest",
+ layerCode: "Q",
+ name: I18n.t("javascripts.map.base.mapquest")
+ }
+ ];
function createMap(divName, options) {
- options = options || {};
-
- map = new OpenLayers.Map(divName, {
- controls: options.controls || [
- new OpenLayers.Control.ArgParser(),
- new OpenLayers.Control.Attribution(),
- new SimpleLayerSwitcher(),
- new OpenLayers.Control.Navigation(),
- new OpenLayers.Control.Zoom(),
- new OpenLayers.Control.SimplePanZoom(),
- new OpenLayers.Control.ScaleLine({geodesic: true})
- ],
- numZoomLevels: 20,
- displayProjection: new OpenLayers.Projection("EPSG:4326"),
- theme: "<%= asset_path 'theme/openstreetmap/style.css' %>"
- });
-
- var mapnik = new OpenLayers.Layer.OSM.Mapnik(I18n.t("javascripts.map.base.standard"), {
- attribution: "",
- keyid: "mapnik",
- displayOutsideMaxExtent: true,
- wrapDateLine: true,
- layerCode: "M"
- });
- map.addLayer(mapnik);
-
- var cyclemap = new OpenLayers.Layer.OSM.CycleMap(I18n.t("javascripts.map.base.cycle_map"), {
- attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
- keyid: "cyclemap",
- displayOutsideMaxExtent: true,
- wrapDateLine: true,
- layerCode: "C"
- });
- map.addLayer(cyclemap);
-
- var transportmap = new OpenLayers.Layer.OSM.TransportMap(I18n.t("javascripts.map.base.transport_map"), {
- attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
- keyid: "transportmap",
- displayOutsideMaxExtent: true,
- wrapDateLine: true,
- layerCode: "T"
- });
- map.addLayer(transportmap);
-
- var mapquest = new OpenLayers.Layer.OSM(I18n.t("javascripts.map.base.mapquest"), [
- "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
- "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
- "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
- "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
- ], {
- attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>",
- keyid: "mapquest",
- displayOutsideMaxExtent: true,
- wrapDateLine: true,
- numZoomLevels: 19,
- layerCode: "Q"
- });
- map.addLayer(mapquest);
-
- markers = new OpenLayers.Layer.Markers("Markers", {
- displayInLayerSwitcher: false,
- numZoomLevels: 20,
- projection: "EPSG:900913"
- });
- map.addLayer(markers);
-
- map.dataLayer = new OpenLayers.Layer(I18n.t('browse.start_rjs.data_layer_name'), {
- visibility: false,
- displayInLayerSwitcher: false
- });
- map.addLayer(map.dataLayer);
-
- $("#" + divName).on("resized", function () {
- map.updateSize();
- });
-
- $("#" + divName).trigger("initialised");
-
- return map;
- }
+ options = $.extend({zoomControl: true, panZoomControl: true, layerControl: true}, options);
- function getArrowIcon() {
- var size = new OpenLayers.Size(25, 22);
- var offset = new OpenLayers.Pixel(-22, -20);
- var icon = new OpenLayers.Icon("<%= asset_path 'arrow.png' %>", size, offset);
+ map = L.map(divName, $.extend({}, options, {panControl: false, zoomsliderControl: false, maxZoom: 18}));
- return icon;
- }
+ if (map.attributionControl) {
+ map.attributionControl.setPrefix('');
+ }
+
+ if (options.panZoomControl) {
+ new L.Control.Pan().addTo(map);
+ new L.Control.Zoomslider({stepHeight: 7}).addTo(map);
+ }
+
+ var layersControl = L.control.layers();
+
+ if (options.layerControl) {
+ layersControl.addTo(map);
+ map.layersControl = layersControl;
+ }
+
+ for (var i = 0; i < layers.length; i++) {
+ layers[i].layer = new (layers[i].klass)(layers[i]);
+ layersControl.addBaseLayer(layers[i].layer, layers[i].name);
+ }
- function addMarkerToMap(position, icon, description) {
- var marker = new OpenLayers.Marker(proj(position), icon);
+ layers[0].layer.addTo(map);
- markers.addMarker(marker);
+ $("#" + divName).on("resized", function () {
+ map.invalidateSize();
+ });
- if (description) {
- marker.events.register("mouseover", marker, function() {
- openMapPopup(marker, description);
- });
- }
++ $("#" + divName).trigger("initialised");
+
- return marker;
+ return map;
+ }
+
+ function getUserIcon(url) {
+ return L.icon({
+ iconUrl: url || <%= asset_path('marker-red.png').to_json %>,
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>,
+ shadowSize: [41, 41]
+ });
}
function addObjectToMap(object, zoom, callback) {