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

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

View File

@ -21,15 +21,24 @@
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('TERRAIN'));
this.map.addLayer(this.layers[0]);
//this.layers.push(new L.Google());
//this.layers.push(new L.Google('TERRAIN'));
//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(
new L.Control.Layers(
{
'Google':this.layers[0],
'Google Terrain': this.layers[1]
'Grayscale':grayscale,
'Streets': streets
}, {}
)
);
@ -42,7 +51,7 @@
this.map.panTo(_latlng);
this.marker.addEventListener('dragend', this.markerDrag, this);
}
_.bindAll(this);
//_.bindAll(this);
this.initEvents();
;

View File

@ -8,6 +8,7 @@
layers:{},
initMap: function(){
/*
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.TERRAIN = new L.Google('TERRAIN');
@ -23,8 +24,21 @@
'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('zoomend', this.mapZoom, this);
this.map.addEventListener('baselayerchange', this.layerChange, this);