Layers work
This commit is contained in:
John Firebaugh
parent
d0ed118ee2
commit
ef73cc1f57
6 changed files with 138 additions and 89 deletions
|
|
@ -9,38 +9,6 @@
|
|||
//= 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();
|
||||
|
||||
|
|
@ -51,9 +19,34 @@ $(document).ready(function () {
|
|||
|
||||
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();
|
||||
|
|
@ -105,15 +98,15 @@ $(document).ready(function () {
|
|||
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]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,11 +147,11 @@ $(document).ready(function () {
|
|||
}
|
||||
});
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ $(document).ready(function () {
|
|||
|
||||
openSidebar();
|
||||
|
||||
if (getMapBaseLayer().keyid == "mapnik") {
|
||||
if (getMapBaseLayerId() == "mapnik") {
|
||||
$("#format_mapnik").prop("checked", true);
|
||||
}
|
||||
|
||||
|
|
@ -186,7 +186,7 @@ $(document).ready(function () {
|
|||
|
||||
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 = "";
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ $(document).ready(function () {
|
|||
title = $(this).text();
|
||||
|
||||
function updateMapKey() {
|
||||
var mapLayer = getMapBaseLayer().keyid,
|
||||
var mapLayer = getMapBaseLayerId(),
|
||||
mapZoom = map.getZoom();
|
||||
|
||||
$(".mapkey-table-entry").each(function () {
|
||||
|
|
|
|||
|
|
@ -7,15 +7,66 @@ L.OSM.Layers = L.Control.extend({
|
|||
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"]());
|
||||
|
||||
var list = this._ui.find('.base-layers ul');
|
||||
|
||||
this.options.layers.forEach(function(layer) {
|
||||
var item = $('<li></li>')
|
||||
.appendTo(list);
|
||||
|
||||
if (this._map.hasLayer(layer)) {
|
||||
item.addClass('active');
|
||||
}
|
||||
|
||||
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 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);
|
||||
|
||||
$(link).on('click', $.proxy(this.toggleLayers, this));
|
||||
},
|
||||
|
|
@ -26,39 +77,12 @@ L.OSM.Layers = L.Control.extend({
|
|||
|
||||
var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
|
||||
|
||||
if ($(this._uiPane).is(':visible')) {
|
||||
$(this._uiPane).hide();
|
||||
if ($(this._ui).is(':visible')) {
|
||||
$(this.options.uiPane).hide();
|
||||
controlContainer.css({paddingRight: '0'});
|
||||
} else {
|
||||
$(this._uiPane)
|
||||
.show()
|
||||
.html(JST["templates/map/layers"]());
|
||||
|
||||
var list = $(this._uiPane).find('.base-layers ul');
|
||||
|
||||
var layers = this.options.layers;
|
||||
for (var i = 0; i < layers.length; i++) {
|
||||
var item = $('<li></li>')
|
||||
.appendTo(list);
|
||||
|
||||
var div = $('<div></div>')
|
||||
.appendTo(item);
|
||||
|
||||
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);
|
||||
|
||||
map.dragging.disable();
|
||||
map.touchZoom.disable();
|
||||
map.doubleClickZoom.disable();
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
var label = $('<label></label>')
|
||||
.text(layers[i].name)
|
||||
.appendTo(item);
|
||||
}
|
||||
|
||||
controlContainer.css({paddingRight: '200px'});
|
||||
$(this.options.uiPane).show();
|
||||
controlContainer.css({paddingRight: '230px'});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -569,10 +569,40 @@ a.donate {
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue