app/assets/javascripts/map.js.erb

   1 // Leaflet extensions
   2 L.LatLngBounds.include({
   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
  35 L.Bounds.include({
  36   getWidth: function () {
  37    return this.max.x - this.min.x;
  38   },
  39
  40   getHeight: function () {
  41    return this.max.y - this.min.y;
  42   }
  43 });
  44
  45 var map;
  46
  47 var layers = [
  48   {
  49     urlTemplate: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  50     attribution: "",
  51     keyid: "mapnik",
  52     layerCode: "M",
  53     name: I18n.t("javascripts.map.base.standard")
  54   },
  55   {
  56     urlTemplate: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
  57     attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  58     keyid: "cyclemap",
  59     layerCode: "C",
  60     name: I18n.t("javascripts.map.base.cycle_map")
  61   },
  62   {
  63     urlTemplate: 'http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png',
  64     attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  65     keyid: "transportmap",
  66     layerCode: "T",
  67     name: I18n.t("javascripts.map.base.transport_map")
  68   },
  69   {
  70     urlTemplate: 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
  71     subdomains: '1234',
  72     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'>",
  73     keyid: "mapquest",
  74     layerCode: "Q",
  75     name: I18n.t("javascripts.map.base.mapquest")
  76   }
  77 ];
  78
  79 function createMap(divName, options) {
  80   map = L.map(divName, options);
  81
  82   if (map.attributionControl) {
  83     map.attributionControl.setPrefix(''); // For tmcw
  84   }
  85
  86   var layersControl = L.control.layers();
  87
  88   if (!options || options.layerControl !== false) {
  89     layersControl.addTo(map);
  90   }
  91
  92   for (var i = 0; i < layers.length; i++) {
  93     layers[i].layer = L.tileLayer(layers[i].urlTemplate, layers[i]);
  94     if (i == 0) {
  95       layers[i].layer.addTo(map);
  96     }
  97     layersControl.addBaseLayer(layers[i].layer, layers[i].name);
  98   }
  99
 100   $("#" + divName).on("resized", function () {
 101     map.invalidateSize();
 102   });
 103
 104   return map;
 105 }
 106
 107 function getArrowIcon() {
 108   return L.icon({
 109     iconUrl: <%= asset_path('arrow.png').to_json %>,
 110     iconSize: [25, 22],
 111     iconAnchor: [22, 20]
 112   });
 113 }
 114
 115 function addMarkerToMap(position, icon, description) {
 116   var marker = L.marker(position, icon ? {icon: icon} : null).addTo(map);
 117
 118   if (description) {
 119     marker.bindPopup(description);
 120   }
 121
 122   return marker;
 123 }
 124
 125 function removeMarkerFromMap(marker) {
 126   map.removeLayer(marker);
 127 }
 128
 129 function addObjectToMap(object, zoom, callback) {
 130   $.ajax({
 131     url: OSM.apiUrl(object),
 132     dataType: "xml",
 133     success: function (xml) {
 134       var layer = new L.OSM.DataLayer(xml, {
 135         style: {
 136           strokeColor: "blue",
 137           strokeWidth: 3,
 138           strokeOpacity: 0.5,
 139           fillOpacity: 0.2,
 140           fillColor: "lightblue",
 141           pointRadius: 6
 142         }
 143       });
 144
 145       var bounds = layer.getBounds();
 146
 147       if (zoom) {
 148         map.fitBounds(bounds);
 149       }
 150
 151       if (callback) {
 152         callback(bounds);
 153       }
 154
 155       layer.addTo(map);
 156     }
 157   });
 158 }
 159
 160 function addBoxToMap(bounds) {
 161   var box = L.rectangle(bounds, {
 162     weight: 2,
 163     color: '#e90',
 164     fillOpacity: 0
 165   });
 166
 167   box.addTo(map);
 168
 169   return box;
 170 }
 171
 172 function getMapBaseLayer() {
 173   for (var i = 0; i < layers.length; i++) {
 174     if (map.hasLayer(layers[i].layer)) {
 175       return layers[i];
 176     }
 177   }
 178 }
 179
 180 function getMapLayers() {
 181   for (var i = 0; i < layers.length; i++) {
 182     if (map.hasLayer(layers[i].layer)) {
 183       return layers[i].layerCode;
 184     }
 185   }
 186
 187   return "";
 188 }
 189
 190 function setMapLayers(layerConfig) {
 191   for (var i = 0; i < layers.length; i++) {
 192     if (~layerConfig.indexOf(layers[i].layerCode)) {
 193       map.addLayer(layers[i].layer);
 194     } else {
 195       map.removeLayer(layers[i].layer);
 196     }
 197   }
 198 }