app/assets/javascripts/map.js.erb

   1 // Leaflet extensions
   2 L.extend(L.LatLngBounds.prototype, {
   3   getSouthLat: function () {
   4     return this._southWest.lat;
   5   },
   6
   7   getWestLng: function () {
   8     return this._southWest.lng;
   9   },
  10
  11   getNorthLat: function () {
  12     return this._northEast.lat;
  13   },
  14
  15   getEastLng: function () {
  16     return this._northEast.lng;
  17   },
  18
  19   toBBOX: function () {
  20     var decimal = 6;
  21     var mult = Math.pow(10, decimal);
  22     var xmin = Math.round(this.getWestLng() * mult) / mult;
  23     var ymin = Math.round(this.getSouthLat() * mult) / mult;
  24     var xmax = Math.round(this.getEastLng() * mult) / mult;
  25     var ymax = Math.round(this.getNorthLat() * mult) / mult;
  26     return xmin + "," + ymin + "," + xmax + "," + ymax;
  27   },
  28
  29   getSize: function () {
  30     return (this._northEast.lat - this._southWest.lat) *
  31            (this._northEast.lng - this._southWest.lng);
  32   },
  33
  34   wrap: function () {
  35     return new L.LatLngBounds(this._southWest.wrap(), this._northEast.wrap());
  36   }
  37 });
  38
  39 L.extend(L.Bounds.prototype, {
  40   getWidth: function () {
  41    return this.max.x - this.min.x;
  42   },
  43
  44   getHeight: function () {
  45    return this.max.y - this.min.y;
  46   }
  47 });
  48
  49 L.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>;
  50
  51 var map;
  52
  53 var layers = [
  54   {
  55     klass: L.OSM.Mapnik,
  56     attribution: "",
  57     keyid: "mapnik",
  58     layerCode: "M",
  59     name: I18n.t("javascripts.map.base.standard")
  60   },
  61   {
  62     klass: L.OSM.CycleMap,
  63     attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  64     keyid: "cyclemap",
  65     layerCode: "C",
  66     name: I18n.t("javascripts.map.base.cycle_map")
  67   },
  68   {
  69     klass: L.OSM.TransportMap,
  70     attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  71     keyid: "transportmap",
  72     layerCode: "T",
  73     name: I18n.t("javascripts.map.base.transport_map")
  74   },
  75   {
  76     klass: L.OSM.MapQuestOpen,
  77     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'>",
  78     keyid: "mapquest",
  79     layerCode: "Q",
  80     name: I18n.t("javascripts.map.base.mapquest")
  81   }
  82 ];
  83
  84 function createMap(divName, options) {
  85   options = $.extend({zoomControl: true, panZoomControl: true, layerControl: true}, options);
  86
  87   map = L.map(divName, $.extend({}, options, {panControl: false, zoomsliderControl: false, maxZoom: 18}));
  88
  89   if (map.attributionControl) {
  90     map.attributionControl.setPrefix('');
  91   }
  92
  93   if (options.panZoomControl) {
  94     new L.Control.Pan().addTo(map);
  95     new L.Control.Zoomslider({stepHeight: 7}).addTo(map);
  96   }
  97
  98   var layersControl = L.control.layers();
  99
 100   if (options.layerControl) {
 101     layersControl.addTo(map);
 102     map.layersControl = layersControl;
 103   }
 104
 105   for (var i = 0; i < layers.length; i++) {
 106     layers[i].layer = new (layers[i].klass)(layers[i]);
 107     layersControl.addBaseLayer(layers[i].layer, layers[i].name);
 108   }
 109
 110   layers[0].layer.addTo(map);
 111
 112   $("#" + divName).on("resized", function () {
 113     map.invalidateSize();
 114   });
 115
 116   return map;
 117 }
 118
 119 function getUserIcon(url) {
 120   return L.icon({
 121     iconUrl: url || <%= asset_path('marker-red.png').to_json %>,
 122     iconSize: [25, 41],
 123     iconAnchor: [12, 41],
 124     popupAnchor: [1, -34],
 125     shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>,
 126     shadowSize: [41, 41]
 127   });
 128 }
 129
 130 function addObjectToMap(object, zoom, callback) {
 131   $.ajax({
 132     url: OSM.apiUrl(object),
 133     dataType: "xml",
 134     success: function (xml) {
 135       var layer = new L.OSM.DataLayer(xml, {
 136         style: {
 137           strokeColor: "blue",
 138           strokeWidth: 3,
 139           strokeOpacity: 0.5,
 140           fillOpacity: 0.2,
 141           fillColor: "lightblue",
 142           pointRadius: 6
 143         }
 144       });
 145
 146       var bounds = layer.getBounds();
 147
 148       if (zoom) {
 149         map.fitBounds(bounds);
 150       }
 151
 152       if (callback) {
 153         callback(bounds);
 154       }
 155
 156       layer.addTo(map);
 157     }
 158   });
 159 }
 160
 161 function addBoxToMap(bounds) {
 162   var box = L.rectangle(bounds, {
 163     weight: 2,
 164     color: '#e90',
 165     fillOpacity: 0
 166   });
 167
 168   box.addTo(map);
 169
 170   return box;
 171 }
 172
 173 function getMapBaseLayer() {
 174   for (var i = 0; i < layers.length; i++) {
 175     if (map.hasLayer(layers[i].layer)) {
 176       return layers[i];
 177     }
 178   }
 179 }
 180
 181 function getMapLayers() {
 182   for (var i = 0; i < layers.length; i++) {
 183     if (map.hasLayer(layers[i].layer)) {
 184       return layers[i].layerCode;
 185     }
 186   }
 187
 188   return "";
 189 }
 190
 191 function setMapLayers(layerConfig) {
 192   var foundLayer = false;
 193   for (var i = 0; i < layers.length; i++) {
 194     if (layerConfig.indexOf(layers[i].layerCode) >= 0) {
 195       map.addLayer(layers[i].layer);
 196       foundLayer = true;
 197     } else {
 198       map.removeLayer(layers[i].layer);
 199     }
 200   }
 201   if (!foundLayer) {
 202     map.addLayer(layers[0].layer);
 203   }
 204 }