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 var layers;
  53 var objectLayer;
  54 var objectLoader;
  55
  56 function createMap(divName, options) {
  57   if (!layers) {
  58     layers = [
  59       {
  60         klass: L.OSM.Mapnik,
  61         attribution: "",
  62         keyid: "mapnik",
  63         layerCode: "M",
  64         name: I18n.t("javascripts.map.base.standard")
  65       },
  66       {
  67         klass: L.OSM.CycleMap,
  68         attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  69         keyid: "cyclemap",
  70         layerCode: "C",
  71         name: I18n.t("javascripts.map.base.cycle_map")
  72       },
  73       {
  74         klass: L.OSM.TransportMap,
  75         attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  76         keyid: "transportmap",
  77         layerCode: "T",
  78         name: I18n.t("javascripts.map.base.transport_map")
  79       },
  80       {
  81         klass: L.OSM.MapQuestOpen,
  82         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'>",
  83         keyid: "mapquest",
  84         layerCode: "Q",
  85         name: I18n.t("javascripts.map.base.mapquest")
  86       }
  87     ];
  88   }
  89
  90   options = $.extend({zoomControl: true, panZoomControl: true, layerControl: true}, options);
  91
  92   map = L.map(divName, $.extend({}, options, {panControl: false, zoomsliderControl: false, maxZoom: 18}));
  93
  94   if (map.attributionControl) {
  95     map.attributionControl.setPrefix('');
  96   }
  97
  98   if (options.panZoomControl) {
  99     new L.Control.Pan().addTo(map);
 100     new L.Control.Zoomslider({stepHeight: 7}).addTo(map);
 101   }
 102
 103   var layersControl = L.control.layers();
 104
 105   if (options.layerControl) {
 106     layersControl.addTo(map);
 107     map.layersControl = layersControl;
 108   }
 109
 110   for (var i = 0; i < layers.length; i++) {
 111     layers[i].layer = new (layers[i].klass)(layers[i]);
 112     layersControl.addBaseLayer(layers[i].layer, layers[i].name);
 113   }
 114
 115   layers[0].layer.addTo(map);
 116
 117   $("#" + divName).on("resized", function () {
 118     map.invalidateSize();
 119   });
 120
 121   return map;
 122 }
 123
 124 function getUserIcon(url) {
 125   return L.icon({
 126     iconUrl: url || <%= asset_path('marker-red.png').to_json %>,
 127     iconSize: [25, 41],
 128     iconAnchor: [12, 41],
 129     popupAnchor: [1, -34],
 130     shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>,
 131     shadowSize: [41, 41]
 132   });
 133 }
 134
 135 function addObjectToMap(object, zoom, callback) {
 136   if (objectLoader) {
 137     objectLoader.abort();
 138   }
 139
 140   if (objectLayer) {
 141     map.removeLayer(objectLayer);
 142   }
 143
 144   objectLoader = $.ajax({
 145     url: OSM.apiUrl(object),
 146     dataType: "xml",
 147     success: function (xml) {
 148       objectLayer = new L.OSM.DataLayer(null, {
 149         style: {
 150           strokeColor: "blue",
 151           strokeWidth: 3,
 152           strokeOpacity: 0.5,
 153           fillOpacity: 0.2,
 154           fillColor: "lightblue",
 155           pointRadius: 6
 156         }
 157       });
 158
 159       objectLayer.interestingNode = function (node, ways, relations) {
 160         if (object.type === "node") {
 161           return true;
 162         } else if (object.type === "relation") {
 163           for (var i = 0; i < relations.length; i++)
 164             if (relations[i].members.indexOf(node) != -1)
 165               return true;
 166         } else {
 167           return false;
 168         }
 169       };
 170
 171       objectLayer.addData(xml);
 172
 173       var bounds = objectLayer.getBounds();
 174
 175       if (zoom) {
 176         map.fitBounds(bounds);
 177       }
 178
 179       if (callback) {
 180         callback(bounds);
 181       }
 182
 183       objectLayer.addTo(map);
 184     }
 185   });
 186 }
 187
 188 function addBoxToMap(bounds) {
 189   var box = L.rectangle(bounds, {
 190     weight: 2,
 191     color: '#e90',
 192     fillOpacity: 0
 193   });
 194
 195   box.addTo(map);
 196
 197   return box;
 198 }
 199
 200 function getMapBaseLayer() {
 201   for (var i = 0; i < layers.length; i++) {
 202     if (map.hasLayer(layers[i].layer)) {
 203       return layers[i];
 204     }
 205   }
 206 }
 207
 208 function getMapLayers() {
 209   var layerConfig = "";
 210   for (var i = 0; i < layers.length; i++) {
 211     if (map.hasLayer(layers[i].layer)) {
 212       layerConfig += layers[i].layerCode;
 213     }
 214   }
 215   return layerConfig;
 216 }
 217
 218 function setMapLayers(layerConfig) {
 219   var foundLayer = false;
 220   for (var i = 0; i < layers.length; i++) {
 221     if (layerConfig.indexOf(layers[i].layerCode) >= 0) {
 222       map.addLayer(layers[i].layer);
 223       foundLayer = true;
 224     } else {
 225       map.removeLayer(layers[i].layer);
 226     }
 227   }
 228   if (!foundLayer) {
 229     map.addLayer(layers[0].layer);
 230   }
 231 }