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