Rename to L.OSM.Layers and continue implementation
This commit is contained in:
John Firebaugh
parent
7bcea3839d
commit
33aa0a6e45
6 changed files with 88 additions and 85 deletions
|
|
@ -6,8 +6,6 @@
|
|||
//= require leaflet
|
||||
//= require leaflet.osm
|
||||
//= require leaflet.locationfilter
|
||||
//= require leaflet.locate
|
||||
//= require leaflet.note
|
||||
//= require i18n/translations
|
||||
//= require oauth
|
||||
//= require osm
|
||||
|
|
@ -15,7 +13,6 @@
|
|||
//= require map
|
||||
//= require menu
|
||||
//= require sidebar
|
||||
//= require leaflet.share
|
||||
//= require richtext
|
||||
//= require resize
|
||||
//= require geocoder
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
//= require_self
|
||||
//= require leaflet.layers
|
||||
//= require leaflet.share
|
||||
//= require leaflet.note
|
||||
//= require leaflet.locate
|
||||
//= require index/browse
|
||||
//= require index/export
|
||||
//= require index/key
|
||||
//= require index/notes
|
||||
//= require index/map_ui
|
||||
|
||||
var map, layers; // TODO: remove globals
|
||||
|
||||
|
|
@ -18,7 +21,36 @@ $(document).ready(function () {
|
|||
|
||||
map.attributionControl.setPrefix('');
|
||||
|
||||
layers = mapLayers();
|
||||
layers = [{
|
||||
layer: new L.OSM.Mapnik({
|
||||
attribution: ''
|
||||
}),
|
||||
keyid: "mapnik",
|
||||
layerCode: "M",
|
||||
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>",
|
||||
}),
|
||||
keyid: "cyclemap",
|
||||
layerCode: "C",
|
||||
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>",
|
||||
}),
|
||||
keyid: "transportmap",
|
||||
layerCode: "T",
|
||||
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'>",
|
||||
}),
|
||||
keyid: "mapquest",
|
||||
layerCode: "Q",
|
||||
name: I18n.t("javascripts.map.base.mapquest")
|
||||
}];
|
||||
|
||||
layers[0].layer.addTo(map);
|
||||
|
||||
$("#map").on("resized", function () {
|
||||
|
|
@ -28,7 +60,8 @@ $(document).ready(function () {
|
|||
L.control.zoom({position: 'topright'})
|
||||
.addTo(map);
|
||||
|
||||
OSM.mapUI().addTo(map);
|
||||
L.OSM.layers({position: 'topright', layers: layers})
|
||||
.addTo(map);
|
||||
|
||||
L.control.share({
|
||||
getUrl: function(map) {
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
//= require templates/map/layers
|
||||
|
||||
OSM.MapUI = L.Control.extend({
|
||||
onAdd: function(map) {
|
||||
this._initLayout(map);
|
||||
return this._container;
|
||||
},
|
||||
|
||||
_initLayout: function(map) {
|
||||
var className = 'control-layers',
|
||||
container = this._container = L.DomUtil.create('div', className);
|
||||
|
||||
var link = this._layersLink = L.DomUtil.create('a', 'control-button', container);
|
||||
link.innerHTML = "<span class='icon layers'></span>";
|
||||
link.href = '#';
|
||||
link.title = 'Layers';
|
||||
|
||||
this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
|
||||
L.DomEvent
|
||||
.on(this._uiPane, 'click', L.DomEvent.stopPropagation)
|
||||
.on(this._uiPane, 'click', L.DomEvent.preventDefault)
|
||||
.on(this._uiPane, 'dblclick', L.DomEvent.preventDefault);
|
||||
|
||||
$(link).on('click', $.proxy(this.toggleLayers, this));
|
||||
},
|
||||
|
||||
toggleLayers: function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
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"]());
|
||||
controlContainer.css({paddingRight: '200px'});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
OSM.mapUI = function() {
|
||||
return new OSM.MapUI();
|
||||
};
|
||||
47
app/assets/javascripts/leaflet.layers.js
Normal file
47
app/assets/javascripts/leaflet.layers.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
//= require templates/map/layers
|
||||
|
||||
L.OSM.Layers = L.Control.extend({
|
||||
onAdd: function (map) {
|
||||
this._initLayout(map);
|
||||
return this._container;
|
||||
},
|
||||
|
||||
_initLayout: function (map) {
|
||||
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);
|
||||
link.href = '#';
|
||||
link.title = 'Layers';
|
||||
|
||||
this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
|
||||
|
||||
L.DomEvent
|
||||
.on(this._uiPane, 'click', L.DomEvent.stopPropagation)
|
||||
.on(this._uiPane, 'click', L.DomEvent.preventDefault)
|
||||
.on(this._uiPane, 'dblclick', L.DomEvent.preventDefault);
|
||||
|
||||
$(link).on('click', $.proxy(this.toggleLayers, this));
|
||||
},
|
||||
|
||||
toggleLayers: function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
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"]({layers: this.options.layers}));
|
||||
controlContainer.css({paddingRight: '200px'});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
L.OSM.layers = function(options) {
|
||||
return new L.OSM.Layers(options);
|
||||
};
|
||||
|
|
@ -15,38 +15,6 @@ L.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>;
|
|||
var objectLayer;
|
||||
var objectLoader;
|
||||
|
||||
function mapLayers() {
|
||||
return [{
|
||||
layer: new L.OSM.Mapnik({
|
||||
attribution: ''
|
||||
}),
|
||||
keyid: "mapnik",
|
||||
layerCode: "M",
|
||||
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>",
|
||||
}),
|
||||
keyid: "cyclemap",
|
||||
layerCode: "C",
|
||||
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>",
|
||||
}),
|
||||
keyid: "transportmap",
|
||||
layerCode: "T",
|
||||
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'>",
|
||||
}),
|
||||
keyid: "mapquest",
|
||||
layerCode: "Q",
|
||||
name: I18n.t("javascripts.map.base.mapquest")
|
||||
}]
|
||||
}
|
||||
|
||||
function getUserIcon(url) {
|
||||
return L.icon({
|
||||
iconUrl: url || <%= asset_path('marker-red.png').to_json %>,
|
||||
|
|
|
|||
|
|
@ -6,4 +6,9 @@
|
|||
</div>
|
||||
<div class='base-layers'>
|
||||
<p><%= I18n.t('javascripts.map.layers.base') %></p>
|
||||
<ul>
|
||||
<% for (var i = 0; i < layers.length; i++) { %>
|
||||
<label><input type='radio'><%= layers[i].name %></label>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue