app/assets/javascripts/index.js

   1 //= require_self
   2 //= require leaflet.sidebar
   3 //= require leaflet.locate
   4 //= require leaflet.layers
   5 //= require leaflet.key
   6 //= require leaflet.note
   7 //= require leaflet.share
   8 //= require index/search
   9 //= require index/browse
  10 //= require index/export
  11 //= require index/notes
  12 //= require index/history
  13 //= require router
  14
  15 $(document).ready(function () {
  16   var params = OSM.mapParams();
  17
  18   var map = L.map("map", {
  19     zoomControl: false,
  20     layerControl: false
  21   });
  22
  23   map.attributionControl.setPrefix('');
  24
  25   map.hash = L.hash(map);
  26
  27   $(window).on('popstate', function() {
  28     map.hash.update();
  29   });
  30
  31   var copyright = I18n.t('javascripts.map.copyright', {copyright_url: '/copyright'});
  32
  33   var layers = [
  34     new L.OSM.Mapnik({
  35       attribution: copyright,
  36       code: "M",
  37       keyid: "mapnik",
  38       name: I18n.t("javascripts.map.base.standard")
  39     }),
  40     new L.OSM.CycleMap({
  41       attribution: copyright + ". Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  42       code: "C",
  43       keyid: "cyclemap",
  44       name: I18n.t("javascripts.map.base.cycle_map")
  45     }),
  46     new L.OSM.TransportMap({
  47       attribution: copyright + ". Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  48       code: "T",
  49       keyid: "transportmap",
  50       name: I18n.t("javascripts.map.base.transport_map")
  51     }),
  52     new L.OSM.MapQuestOpen({
  53       attribution: copyright + ". Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>",
  54       code: "Q",
  55       keyid: "mapquest",
  56       name: I18n.t("javascripts.map.base.mapquest")
  57     }),
  58     new L.OSM.HOT({
  59       attribution: copyright + ". Tiles courtesy of <a href='http://hot.openstreetmap.org/' target='_blank'>Humanitarian OpenStreetMap Team</a>",
  60       code: "H",
  61       keyid: "hot",
  62       name: I18n.t("javascripts.map.base.hot")
  63     })
  64   ];
  65
  66   function updateLayers(params) {
  67     var layerParam = params.layers || "M";
  68     var layersAdded = "";
  69
  70     for (var i = layers.length - 1; i >= 0; i--) {
  71       if (layerParam.indexOf(layers[i].options.code) >= 0) {
  72         map.addLayer(layers[i]);
  73         layersAdded = layersAdded + layers[i].options.code;
  74       } else if (i == 0 && layersAdded == "") {
  75         map.addLayer(layers[i]);
  76       } else {
  77         map.removeLayer(layers[i]);
  78       }
  79     }
  80   }
  81
  82   updateLayers(params);
  83
  84   $(window).on("hashchange", function () {
  85     updateLayers(OSM.mapParams());
  86   });
  87
  88   map.on("baselayerchange", function (e) {
  89     if (map.getZoom() > e.layer.options.maxZoom) {
  90       map.setView(map.getCenter(), e.layer.options.maxZoom, { reset: true });
  91     }
  92   });
  93
  94   map.noteLayer = new L.LayerGroup();
  95   map.noteLayer.options = {code: 'N'};
  96
  97   map.dataLayer = new L.OSM.DataLayer(null);
  98   map.dataLayer.options.code = 'D';
  99
 100   if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
 101     if (params.layers.indexOf(map.noteLayer.options.code) >= 0) {
 102       map.addLayer(map.noteLayer);
 103     }
 104
 105     if (params.layers.indexOf(map.dataLayer.options.code) >= 0) {
 106       map.addLayer(map.dataLayer);
 107     }
 108   }
 109
 110   var position = $('html').attr('dir') === 'rtl' ? 'topleft' : 'topright';
 111
 112   L.OSM.zoom({position: position})
 113     .addTo(map);
 114
 115   L.control.locate({
 116     position: position,
 117     strings: {
 118       title: I18n.t('javascripts.map.locate.title'),
 119       popup: I18n.t('javascripts.map.locate.popup')
 120     }
 121   }).addTo(map);
 122
 123   var sidebar = L.OSM.sidebar('#map-ui')
 124     .addTo(map);
 125
 126   L.OSM.layers({
 127     position: position,
 128     layers: layers,
 129     sidebar: sidebar
 130   }).addTo(map);
 131
 132   L.OSM.key({
 133     position: position,
 134     sidebar: sidebar
 135   }).addTo(map);
 136
 137   L.OSM.share({
 138     position: position,
 139     sidebar: sidebar,
 140     short: true
 141   }).addTo(map);
 142
 143   L.OSM.note({
 144     position: position,
 145     sidebar: sidebar
 146   }).addTo(map);
 147
 148   L.control.scale()
 149     .addTo(map);
 150
 151   $('.leaflet-control .control-button').tooltip({placement: 'left', container: 'body'});
 152
 153   map.on('moveend layeradd layerremove', function() {
 154     updatelinks(
 155       map.getCenter().wrap(),
 156       map.getZoom(),
 157       map.getLayersCode(),
 158       map._object);
 159
 160     var expiry = new Date();
 161     expiry.setYear(expiry.getFullYear() + 10);
 162     $.cookie("_osm_location", cookieContent(map), { expires: expiry });
 163
 164     // Trigger hash update on layer changes.
 165     map.hash.onMapMove();
 166   });
 167
 168   if (OSM.PIWIK) {
 169     map.on('layeradd', function (e) {
 170       if (e.layer.options) {
 171         var goal = OSM.PIWIK.goals[e.layer.options.keyid];
 172
 173         if (goal) {
 174           $('body').trigger('piwikgoal', goal);
 175         }
 176       }
 177     });
 178   }
 179
 180   if (params.bounds) {
 181     map.fitBounds(params.bounds);
 182   } else {
 183     map.setView([params.lat, params.lon], params.zoom);
 184   }
 185
 186   var marker = L.marker([0, 0], {icon: getUserIcon()});
 187
 188   if (params.marker) {
 189     marker.setLatLng([params.mlat, params.mlon]).addTo(map);
 190   }
 191
 192   $("#homeanchor").on("click", function(e) {
 193     e.preventDefault();
 194
 195     var data = $(this).data(),
 196       center = L.latLng(data.lat, data.lon);
 197
 198     map.setView(center, data.zoom);
 199     marker.setLatLng(center).addTo(map);
 200   });
 201
 202   $("a[data-editor=remote]").click(function(e) {
 203       remoteEditHandler(map.getBounds());
 204       e.preventDefault();
 205   });
 206
 207   if (OSM.preferred_editor == "remote" && $('body').hasClass("site-edit")) {
 208     remoteEditHandler(map.getBounds());
 209   }
 210
 211   if (OSM.params().edit_help) {
 212     $('#editanchor')
 213       .removeAttr('title')
 214       .tooltip({
 215         placement: 'bottom',
 216         title: I18n.t('javascripts.edit_help')
 217       })
 218       .tooltip('show');
 219
 220     $('body').one('click', function() {
 221       $('#editanchor').tooltip('hide');
 222     });
 223   }
 224
 225   initializeBrowse(map);
 226   initializeNotes(map);
 227
 228   OSM.Index = function(map) {
 229     var page = {}, minimized = false;
 230
 231     page.pushstate = page.popstate = function(path) {
 232       if (minimized) $("#sidebar").addClass("minimized");
 233       map.invalidateSize();
 234       $("#view_tab").addClass("current");
 235       $('#sidebar_content').load(path);
 236     };
 237
 238     page.unload = function() {
 239       $("#view_tab").removeClass("current");
 240     };
 241
 242     page.minimizeSidebar = function() {
 243       $("#sidebar").addClass("minimized");
 244       map.invalidateSize();
 245       minimized = true;
 246     };
 247
 248     $(document).on("click", "#sidebar_content .close", page.minimizeSidebar);
 249
 250     return page;
 251   };
 252
 253   OSM.Browse = function(map) {
 254     var page = {};
 255
 256     page.pushstate = page.popstate = function(path, type, id) {
 257       $("#sidebar").removeClass("minimized");
 258       map.invalidateSize();
 259       $('#sidebar_content').load(path, function() {
 260         page.load(path, type, id);
 261       });
 262     };
 263
 264     page.load = function(path, type, id) {
 265       if (OSM.STATUS === 'api_offline' || OSM.STATUS === 'database_offline') return;
 266
 267       if (type === 'note') {
 268         map.noteLayer.showNote(parseInt(id));
 269       } else {
 270         map.addObject({type: type, id: parseInt(id)}, {zoom: true});
 271       }
 272     };
 273
 274     page.unload = function() {
 275       map.removeObject();
 276     };
 277
 278     return page;
 279   };
 280
 281   var history = OSM.History(map);
 282
 283   OSM.route = OSM.Router({
 284     "/":                           OSM.Index(map),
 285     "/search":                     OSM.Search(map),
 286     "/export":                     OSM.Export(map),
 287     "/history":                    history,
 288     "/user/:display_name/edits":   history,
 289     "/browse/friends":             history,
 290     "/browse/nearby":              history,
 291     "/browse/:type/:id(/history)": OSM.Browse(map)
 292   });
 293
 294   $(document).on("click", "a", function(e) {
 295     if (e.isPropagationStopped()) return;
 296     if (OSM.route(this.pathname + this.search + this.hash)) e.preventDefault();
 297   });
 298
 299   $("#search_form").on("submit", function(e) {
 300     e.preventDefault();
 301     OSM.route("/search?query=" + encodeURIComponent($("#query").val()) + OSM.formatHash(map));
 302   });
 303
 304   $("#describe_location").on("click", function(e) {
 305     e.preventDefault();
 306     OSM.route("/search?query=" + encodeURIComponent(map.getCenter().lat + "," + map.getCenter().lng));
 307   });
 308 });