How do you reuse mapbox js after button click?
So, it's pretty simple with the googlemaps api to re-place the map in a new city after the button is clicked, but I need to use a custom map from MapBox for the project. Unfortunately their documentation didn't help.
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(48.1293954,11.556663), // Munich Germany
zoom: 10
});
}
function newLocation(newLat,newLng) {
map.setCenter({
lat : newLat,
lng : newLng
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
$(document).ready(function () {
$("#1").on('click', function () {
newLocation(48.1293954,11.556663);
});
$("#2").on('click', function () {
newLocation(40.7033127,-73.979681);
});
$("#3").on('click', function () {
newLocation(55.749792,37.632495);
});
});
This code is from another post: How to change Google Maps Center by clicking a button
My question is how to do this with mapbox.js and leaflet api ? Everything I've tried has failed.
+3
source to share
2 answers
Actually, I figured it out. You can use Leaflet L.LatLng to add a new operator for coordinates. It was the .setView () function that threw me off.
var map;
function initialize() {
var coordinates = new L.LatLng(40.673859, -73.970114);
map = new L.mapbox.map('map')
.setView(coordinates, 12)
.addLayer(L.mapbox.tileLayer('myMapID'));
}
function newLocation(newLat,newLng,newZoom) {
var newCoord = new L.LatLng(newLat,newLng)
map.setView(newCoord, newZoom);
}
window.addEventListener('load',initialize,false);
$(document).ready(function() {
$("#1").on('click', function () {
newLocation(40.765172,-73.978844,12);
});
$("#2").on('click', function () {
newLocation(35,-75,4);
});
$("#3").on('click', function () {
newLocation(15,-75,4);
});
});
0
source to share