audiolab/soundmap
1
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Uso de mapas de mapbox para la creación de markers

Browse Source
This commit is contained in:
lrullo 2018-11-12 17:13:32 +01:00
parent 7ee760dc2b
commit fc5b82481c
2 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/soundmap.add.js
View File

@ -21,15 +21,24 @@
initMap: function(){ initMap: function(){
this.map = L.map('map_canvas',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom}); //this.layers.push(new L.Google());
this.layers.push(new L.Google()); //this.layers.push(new L.Google('TERRAIN'));
this.layers.push(new L.Google('TERRAIN')); //this.map.addLayer(this.layers[0]);
this.map.addLayer(this.layers[0]); /* L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token'
}).addTo(this.map);*/
mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox.light'}),
streets = L.tileLayer(mapboxUrl, {id: 'mapbox.streets'});
this.map = L.map('map_canvas',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [grayscale,streets]});
this.map.addControl( this.map.addControl(
new L.Control.Layers( new L.Control.Layers(
{ {
'Google':this.layers[0], 'Grayscale':grayscale,
'Google Terrain': this.layers[1] 'Streets': streets
}, {} }, {}
) )
); );
@ -42,7 +51,7 @@
this.map.panTo(_latlng); this.map.panTo(_latlng);
this.marker.addEventListener('dragend', this.markerDrag, this); this.marker.addEventListener('dragend', this.markerDrag, this);
} }
_.bindAll(this); //_.bindAll(this);
this.initEvents(); this.initEvents();
; ;

14
js/soundmap.config.js
View File

@ -8,6 +8,7 @@
layers:{}, layers:{},
initMap: function(){ initMap: function(){
/*
this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom}); this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom});
this.layers.SATELLITE = new L.Google(); this.layers.SATELLITE = new L.Google();
this.layers.TERRAIN = new L.Google('TERRAIN'); this.layers.TERRAIN = new L.Google('TERRAIN');
@ -23,8 +24,21 @@
'Google Roadmap': this.layers.ROADMAP 'Google Roadmap': this.layers.ROADMAP
}, {} }, {}
) )
);*/
mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox.light'}),
streets = L.tileLayer(mapboxUrl, {id: 'mapbox.streets'});
this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [grayscale,streets]});
this.map.addControl(
new L.Control.Layers(
{
'Grayscale':grayscale,
'Streets': streets
}, {}
)
); );
this.map.addEventListener('dragend', this.mapDrag, this); this.map.addEventListener('dragend', this.mapDrag, this);
this.map.addEventListener('zoomend', this.mapZoom, this); this.map.addEventListener('zoomend', this.mapZoom, this);
this.map.addEventListener('baselayerchange', this.layerChange, this); this.map.addEventListener('baselayerchange', this.layerChange, this);