//= require index/key
//= require index/notes
-function allLayers() {
- return [{
- layer: new L.OSM.Mapnik({
- attribution: '',
- code: "M"
- }),
- keyid: "mapnik",
- name: I18n.t("javascripts.map.base.standard")
- }, {
- layer: new L.OSM.CycleMap({
- attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
- code: "C"
- }),
- keyid: "cyclemap",
- name: I18n.t("javascripts.map.base.cycle_map")
- }, {
- layer: new L.OSM.TransportMap({
- attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
- code: "T"
- }),
- keyid: "transportmap",
- name: I18n.t("javascripts.map.base.transport_map")
- }, {
- layer: new L.OSM.MapQuestOpen({
- 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'>",
- code: "Q"
- }),
- keyid: "mapquest",
- name: I18n.t("javascripts.map.base.mapquest")
- }];
-}
-
$(document).ready(function () {
var params = OSM.mapParams();
map.attributionControl.setPrefix('');
- var layers = allLayers();
+ var layers = [
+ new L.OSM.Mapnik({
+ attribution: '',
+ code: "M",
+ keyid: "mapnik",
+ name: I18n.t("javascripts.map.base.standard")
+ }),
+ new L.OSM.CycleMap({
+ attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
+ code: "C",
+ keyid: "cyclemap",
+ name: I18n.t("javascripts.map.base.cycle_map")
+ }),
+ new L.OSM.TransportMap({
+ attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
+ code: "T",
+ keyid: "transportmap",
+ name: I18n.t("javascripts.map.base.transport_map")
+ }),
+ new L.OSM.MapQuestOpen({
+ 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'>",
+ code: "Q",
+ keyid: "mapquest",
+ name: I18n.t("javascripts.map.base.mapquest")
+ })
+ ];
- layers[0].layer.addTo(map);
+ layers[0].addTo(map);
$("#map").on("resized", function () {
map.invalidateSize();
if (params.layers) {
var foundLayer = false;
for (var i = 0; i < layers.length; i++) {
- if (params.layers.indexOf(layers[i].layer.options.code) >= 0) {
- map.addLayer(layers[i].layer);
+ if (params.layers.indexOf(layers[i].options.code) >= 0) {
+ map.addLayer(layers[i]);
foundLayer = true;
} else {
- map.removeLayer(layers[i].layer);
+ map.removeLayer(layers[i]);
}
}
if (!foundLayer) {
- map.addLayer(layers[0].layer);
+ map.addLayer(layers[0]);
}
}
}
});
-// non-scoped utilities
-function getMapBaseLayer() {
- for (var i = 0; i < layers.length; i++) {
- if (map.hasLayer(layers[i].layer)) {
- return layers[i];
+function getMapBaseLayerId(map) {
+ for (var i in map._layers) { // TODO: map.eachLayer
+ var layer = map._layers[i];
+ if (layer.options && layer.options.keyid) {
+ return layer.options.keyid;
}
}
}
openSidebar();
- if (getMapBaseLayer().keyid == "mapnik") {
+ if (getMapBaseLayerId() == "mapnik") {
$("#format_mapnik").prop("checked", true);
}
function htmlUrlChanged() {
var bounds = getBounds();
- var layerName = getMapBaseLayer().keyid;
+ var layerName = getMapBaseLayerId();
var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBoxString() + "&layer=" + layerName;
var markerUrl = "";
title = $(this).text();
function updateMapKey() {
- var mapLayer = getMapBaseLayer().keyid,
+ var mapLayer = getMapBaseLayerId(),
mapZoom = map.getZoom();
$(".mapkey-table-entry").each(function () {
return this._container;
},
- _initLayout: function (map) {
+ _initLayout: function () {
var className = 'leaflet-control-map-ui',
container = this._container = L.DomUtil.create('div', className);
- var link = this._layersLink = L.DomUtil.create('a', 'leaflet-map-ui-layers', container);
+ var link = L.DomUtil.create('a', 'control-button', container);
+ link.innerHTML = "<span class='icon layers'></span>";
link.href = '#';
link.title = 'Layers';
- this._uiPane = this.options.uiPane;
+ this._ui = $(L.DomUtil.create('div', 'layers-ui', this.options.uiPane))
+ .html(JST["templates/map/layers"]());
- $(link).on('click', $.proxy(this.toggleLayers, this));
- },
-
- toggleLayers: function (e) {
- e.stopPropagation();
- e.preventDefault();
+ var list = this._ui.find('.base-layers ul');
- var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
-
- if ($(this._uiPane).is(':visible')) {
- $(this._uiPane).hide();
- controlContainer.css({paddingRight: '0'});
- } else {
- $(this._uiPane)
- .show()
- .html(JST["templates/map/layers"]());
-
- var list = $(this._uiPane).find('.base-layers ul');
+ this.options.layers.forEach(function(layer) {
+ var item = $('<li></li>')
+ .appendTo(list);
- var layers = this.options.layers;
- for (var i = 0; i < layers.length; i++) {
- var item = $('<li></li>')
- .appendTo(list);
+ if (this._map.hasLayer(layer)) {
+ item.addClass('active');
+ }
-
var div = $('<div></div>')
- .appendTo(item);
+ var div = $('<div></div>')
+ .appendTo(item);
+ this._map.whenReady(function() {
var map = L.map(div[0], {attributionControl: false, zoomControl: false})
.setView(this._map.getCenter(), Math.max(this._map.getZoom() - 2, 0))
- .addLayer(new layers[i].layer.constructor);
+ .addLayer(new layer.constructor);
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
+ }, this);
+
+ var label = $('<label></label>')
+ .text(layer.options.name)
+ .appendTo(item);
+
+ item.on('click', function() {
+ this.options.layers.forEach(function(other) {
+ if (other === layer) {
+ this._map.addLayer(other);
+ } else {
+ this._map.removeLayer(other);
+ }
+ }, this);
+ }.bind(this));
+
+ this._map.on('layeradd', function(e) {
+ if (e.layer === layer) {
+ item.addClass('active');
+ }
+ }).on('layerremove', function(e) {
+ if (e.layer === layer) {
+ item.removeClass('active');
+ }
+ });
+ }, this);
- var label = $('<label></label>')
- .text(layers[i].name)
- .appendTo(item);
- }
+ $(link).on('click', $.proxy(this.toggleLayers, this));
+ },
- controlContainer.css({paddingRight: '200px'});
+ toggleLayers: function (e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
+
+ if ($(this._ui).is(':visible')) {
+ $(this.options.uiPane).hide();
+ controlContainer.css({paddingRight: '0'});
+ } else {
+ $(this.options.uiPane).show();
+ controlContainer.css({paddingRight: '230px'});
}
}
});
<h2><%= I18n.t('javascripts.map.layers.header') %></h2>
-<div class='overlay-layers'>
+<section class='overlay-layers'>
<p><%= I18n.t('javascripts.map.layers.overlays') %></p>
- <label><input type='checkbox' id='notes-layer-checkbox'><%= I18n.t('javascripts.map.layers.notes') %></label>
- <label><input type='checkbox' id='data-layer-checkbox'><%= I18n.t('javascripts.map.layers.data') %></label>
-</div>
-<div class='base-layers'>
+ <ul>
+ <li><label><input type='checkbox' id='notes-layer-checkbox'><%= I18n.t('javascripts.map.layers.notes') %></label></li>
+ <li><label><input type='checkbox' id='data-layer-checkbox'><%= I18n.t('javascripts.map.layers.data') %></label></li>
+ </ul>
+</section>
+<section class='base-layers'>
<p><%= I18n.t('javascripts.map.layers.base') %></p>
<ul>
</ul>
-</div>
+</section>
width: 200px;
height: 100%;
background: white;
+}
- .leaflet-container {
- width: 100%;
- height: 50px;
+.layers-ui {
+ section {
+ border-top: 1px solid #868e85;
+ padding: 15px;
+ }
+
+ li {
+ margin-bottom: 10px;
+ }
+
+ label {
+ border-radius: 4px;
+ display: block;
+ padding: 5px;
+ background-color: #868e85;
+ }
+
+ li.active label {
+ background-color: #68c879;
+ }
+
+ .base-layers {
+ label {
+ border-radius: 0px 0px 4px 4px;
+ }
+
+ .leaflet-container {
+ border-radius: 4px 4px 0px 0px;
+ width: 100%;
+ height: 50px;
+ cursor: pointer;
+ }
}
}
projects / rails.git / commitdiff