How to change the map center in Leaflet.js
79
The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function?
function initialize() {
map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);
map.locate({setView: true, maxZoom: 8});
}
javascript leaflet
edited Nov 13 '18 at 20:38
jww
52.8k39224492
asked Oct 4 '12 at 20:24
Joel JamesJoel James
1,27052342
add a comment |
79
The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function?
function initialize() {
map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);
map.locate({setView: true, maxZoom: 8});
}
javascript leaflet
edited Nov 13 '18 at 20:38
jww
52.8k39224492
asked Oct 4 '12 at 20:24
Joel JamesJoel James
1,27052342
add a comment |
79
79
79
14
The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function?
function initialize() {
map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);
map.locate({setView: true, maxZoom: 8});
}
javascript leaflet
edited Nov 13 '18 at 20:38
jww
52.8k39224492
asked Oct 4 '12 at 20:24
Joel JamesJoel James
1,27052342
The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function?
function initialize() {
map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);
map.locate({setView: true, maxZoom: 8});
}
javascript leaflet
javascript leaflet
edited Nov 13 '18 at 20:38
jww
52.8k39224492
asked Oct 4 '12 at 20:24
Joel JamesJoel James
1,27052342
edited Nov 13 '18 at 20:38
jww
52.8k39224492
asked Oct 4 '12 at 20:24
Joel JamesJoel James
1,27052342
edited Nov 13 '18 at 20:38
jww
52.8k39224492
edited Nov 13 '18 at 20:38
jww
52.8k39224492
edited Nov 13 '18 at 20:38
jww
52.8k39224492
52.8k39224492
asked Oct 4 '12 at 20:24
Joel JamesJoel James
1,27052342
asked Oct 4 '12 at 20:24
Joel JamesJoel James
1,27052342
asked Oct 4 '12 at 20:24
Joel JamesJoel James
1,27052342
1,27052342
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
111
For example:
map.panTo(new L.LatLng(40.737, -73.923));
answered Oct 4 '12 at 20:44
Paulo RodriguesPaulo Rodrigues
3,51762454
8
Documentation is available at leafletjs.com/reference.html#map-panto
– Ehtesh Choudhury
Aug 30 '13 at 9:05
1
map.panTo([40.737, -73.923])works as well!
– Dustin Michels
Dec 7 '18 at 17:36
2
map.flyTo([40.737, -73.923], 8)if you want to zoom and animate as well
– Martin Belcher - Eigo
Dec 10 '18 at 15:51
add a comment |
96
You can also use:
map.setView(new L.LatLng(40.737, -73.923), 8);
It just depends on what behavior you want. map.panTo() will pan to the location with zoom/pan animation, while map.setView() immediately set the new view to the desired location/zoom level.
edited Feb 22 '14 at 0:06
GoTo
8361219
answered Oct 7 '12 at 21:51
Greg WilsonGreg Wilson
1,56011114
3
I like this one because you also get the zoom level, which is very useful.
– Mr. Concolato
Oct 16 '14 at 18:12
2
Also you can pass the coordinates as an array:map.setView([40.737, -73.923], 8)or an objectmap.setView({lat:40.737, lng:-73.923}, 8)
– leobelizquierdo
Feb 11 '16 at 17:48
Please how can we acheive this: stackoverflow.com/q/35740338/44080
– Charles Okwuagwu
Mar 2 '16 at 7:08
4
panTo was not showing animation, I usemap.setView(latlng, map.getZoom(), { animation: true });
– Ivan Ferrer Villa
Jan 24 '17 at 15:49
add a comment |
4
Use map.panTo(); does not do anything if the point is in the current view. Use map.setView() instead.
I had a polyline and I had to center map to a new point in polyline at every second. Check the code :
GOOD: https://jsfiddle.net/nstudor/xcmdwfjk/
mymap.setView(point, 11, { animation: true });
BAD: https://jsfiddle.net/nstudor/Lgahv905/
mymap.panTo(point);
mymap.setZoom(11);
edited Jul 17 '18 at 9:31
SHR
5,76072341
answered Jul 17 '18 at 9:14
Stefan NedelcuStefan Nedelcu
412
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f12735303%2fhow-to-change-the-map-center-in-leaflet-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
111
For example:
map.panTo(new L.LatLng(40.737, -73.923));
answered Oct 4 '12 at 20:44
Paulo RodriguesPaulo Rodrigues
3,51762454
8
Documentation is available at leafletjs.com/reference.html#map-panto
– Ehtesh Choudhury
Aug 30 '13 at 9:05
1
map.panTo([40.737, -73.923])works as well!
– Dustin Michels
Dec 7 '18 at 17:36
2
map.flyTo([40.737, -73.923], 8)if you want to zoom and animate as well
– Martin Belcher - Eigo
Dec 10 '18 at 15:51
add a comment |
111
For example:
map.panTo(new L.LatLng(40.737, -73.923));
answered Oct 4 '12 at 20:44
Paulo RodriguesPaulo Rodrigues
3,51762454
8
Documentation is available at leafletjs.com/reference.html#map-panto
– Ehtesh Choudhury
Aug 30 '13 at 9:05
1
map.panTo([40.737, -73.923])works as well!
– Dustin Michels
Dec 7 '18 at 17:36
2
map.flyTo([40.737, -73.923], 8)if you want to zoom and animate as well
– Martin Belcher - Eigo
Dec 10 '18 at 15:51
add a comment |
111
111
111
For example:
map.panTo(new L.LatLng(40.737, -73.923));
answered Oct 4 '12 at 20:44
Paulo RodriguesPaulo Rodrigues
3,51762454
For example:
map.panTo(new L.LatLng(40.737, -73.923));
answered Oct 4 '12 at 20:44
Paulo RodriguesPaulo Rodrigues
3,51762454
answered Oct 4 '12 at 20:44
Paulo RodriguesPaulo Rodrigues
3,51762454
answered Oct 4 '12 at 20:44
Paulo RodriguesPaulo Rodrigues
3,51762454
answered Oct 4 '12 at 20:44
Paulo RodriguesPaulo Rodrigues
3,51762454
3,51762454
8
Documentation is available at leafletjs.com/reference.html#map-panto
– Ehtesh Choudhury
Aug 30 '13 at 9:05
1
map.panTo([40.737, -73.923])works as well!
– Dustin Michels
Dec 7 '18 at 17:36
2
map.flyTo([40.737, -73.923], 8)if you want to zoom and animate as well
– Martin Belcher - Eigo
Dec 10 '18 at 15:51
add a comment |
8
Documentation is available at leafletjs.com/reference.html#map-panto
– Ehtesh Choudhury
Aug 30 '13 at 9:05
1
map.panTo([40.737, -73.923])works as well!
– Dustin Michels
Dec 7 '18 at 17:36
2
map.flyTo([40.737, -73.923], 8)if you want to zoom and animate as well
– Martin Belcher - Eigo
Dec 10 '18 at 15:51
8
8
Documentation is available at leafletjs.com/reference.html#map-panto
– Ehtesh Choudhury
Aug 30 '13 at 9:05
Documentation is available at leafletjs.com/reference.html#map-panto
– Ehtesh Choudhury
Aug 30 '13 at 9:05
1
1
map.panTo([40.737, -73.923]) works as well!– Dustin Michels
Dec 7 '18 at 17:36
map.panTo([40.737, -73.923]) works as well!– Dustin Michels
Dec 7 '18 at 17:36
2
2
map.flyTo([40.737, -73.923], 8) if you want to zoom and animate as well– Martin Belcher - Eigo
Dec 10 '18 at 15:51
map.flyTo([40.737, -73.923], 8) if you want to zoom and animate as well– Martin Belcher - Eigo
Dec 10 '18 at 15:51
add a comment |
96
You can also use:
map.setView(new L.LatLng(40.737, -73.923), 8);
It just depends on what behavior you want. map.panTo() will pan to the location with zoom/pan animation, while map.setView() immediately set the new view to the desired location/zoom level.
edited Feb 22 '14 at 0:06
GoTo
8361219
answered Oct 7 '12 at 21:51
Greg WilsonGreg Wilson
1,56011114
3
I like this one because you also get the zoom level, which is very useful.
– Mr. Concolato
Oct 16 '14 at 18:12
2
Also you can pass the coordinates as an array:map.setView([40.737, -73.923], 8)or an objectmap.setView({lat:40.737, lng:-73.923}, 8)
– leobelizquierdo
Feb 11 '16 at 17:48
Please how can we acheive this: stackoverflow.com/q/35740338/44080
– Charles Okwuagwu
Mar 2 '16 at 7:08
4
panTo was not showing animation, I usemap.setView(latlng, map.getZoom(), { animation: true });
– Ivan Ferrer Villa
Jan 24 '17 at 15:49
add a comment |
96
You can also use:
map.setView(new L.LatLng(40.737, -73.923), 8);
It just depends on what behavior you want. map.panTo() will pan to the location with zoom/pan animation, while map.setView() immediately set the new view to the desired location/zoom level.
edited Feb 22 '14 at 0:06
GoTo
8361219
answered Oct 7 '12 at 21:51
Greg WilsonGreg Wilson
1,56011114
3
I like this one because you also get the zoom level, which is very useful.
– Mr. Concolato
Oct 16 '14 at 18:12
2
Also you can pass the coordinates as an array:map.setView([40.737, -73.923], 8)or an objectmap.setView({lat:40.737, lng:-73.923}, 8)
– leobelizquierdo
Feb 11 '16 at 17:48
Please how can we acheive this: stackoverflow.com/q/35740338/44080
– Charles Okwuagwu
Mar 2 '16 at 7:08
4
panTo was not showing animation, I usemap.setView(latlng, map.getZoom(), { animation: true });
– Ivan Ferrer Villa
Jan 24 '17 at 15:49
add a comment |
96
96
96
You can also use:
map.setView(new L.LatLng(40.737, -73.923), 8);
It just depends on what behavior you want. map.panTo() will pan to the location with zoom/pan animation, while map.setView() immediately set the new view to the desired location/zoom level.
edited Feb 22 '14 at 0:06
GoTo
8361219
answered Oct 7 '12 at 21:51
Greg WilsonGreg Wilson
1,56011114
You can also use:
map.setView(new L.LatLng(40.737, -73.923), 8);
It just depends on what behavior you want. map.panTo() will pan to the location with zoom/pan animation, while map.setView() immediately set the new view to the desired location/zoom level.
edited Feb 22 '14 at 0:06
GoTo
8361219
answered Oct 7 '12 at 21:51
Greg WilsonGreg Wilson
1,56011114
edited Feb 22 '14 at 0:06
GoTo
8361219
edited Feb 22 '14 at 0:06
GoTo
8361219
edited Feb 22 '14 at 0:06
GoTo
8361219
8361219
answered Oct 7 '12 at 21:51
Greg WilsonGreg Wilson
1,56011114
answered Oct 7 '12 at 21:51
Greg WilsonGreg Wilson
1,56011114
answered Oct 7 '12 at 21:51
Greg WilsonGreg Wilson
1,56011114
1,56011114
3
I like this one because you also get the zoom level, which is very useful.
– Mr. Concolato
Oct 16 '14 at 18:12
2
Also you can pass the coordinates as an array:map.setView([40.737, -73.923], 8)or an objectmap.setView({lat:40.737, lng:-73.923}, 8)
– leobelizquierdo
Feb 11 '16 at 17:48
Please how can we acheive this: stackoverflow.com/q/35740338/44080
– Charles Okwuagwu
Mar 2 '16 at 7:08
4
panTo was not showing animation, I usemap.setView(latlng, map.getZoom(), { animation: true });
– Ivan Ferrer Villa
Jan 24 '17 at 15:49
add a comment |
3
I like this one because you also get the zoom level, which is very useful.
– Mr. Concolato
Oct 16 '14 at 18:12
2
Also you can pass the coordinates as an array:map.setView([40.737, -73.923], 8)or an objectmap.setView({lat:40.737, lng:-73.923}, 8)
– leobelizquierdo
Feb 11 '16 at 17:48
Please how can we acheive this: stackoverflow.com/q/35740338/44080
– Charles Okwuagwu
Mar 2 '16 at 7:08
4
panTo was not showing animation, I usemap.setView(latlng, map.getZoom(), { animation: true });
– Ivan Ferrer Villa
Jan 24 '17 at 15:49
3
3
I like this one because you also get the zoom level, which is very useful.
– Mr. Concolato
Oct 16 '14 at 18:12
I like this one because you also get the zoom level, which is very useful.
– Mr. Concolato
Oct 16 '14 at 18:12
2
2
Also you can pass the coordinates as an array:
map.setView([40.737, -73.923], 8) or an object map.setView({lat:40.737, lng:-73.923}, 8)– leobelizquierdo
Feb 11 '16 at 17:48
Also you can pass the coordinates as an array:
map.setView([40.737, -73.923], 8) or an object map.setView({lat:40.737, lng:-73.923}, 8)– leobelizquierdo
Feb 11 '16 at 17:48
Please how can we acheive this: stackoverflow.com/q/35740338/44080
– Charles Okwuagwu
Mar 2 '16 at 7:08
Please how can we acheive this: stackoverflow.com/q/35740338/44080
– Charles Okwuagwu
Mar 2 '16 at 7:08
4
4
panTo was not showing animation, I use
map.setView(latlng, map.getZoom(), { animation: true });– Ivan Ferrer Villa
Jan 24 '17 at 15:49
panTo was not showing animation, I use
map.setView(latlng, map.getZoom(), { animation: true });– Ivan Ferrer Villa
Jan 24 '17 at 15:49
add a comment |
4
Use map.panTo(); does not do anything if the point is in the current view. Use map.setView() instead.
I had a polyline and I had to center map to a new point in polyline at every second. Check the code :
GOOD: https://jsfiddle.net/nstudor/xcmdwfjk/
mymap.setView(point, 11, { animation: true });
BAD: https://jsfiddle.net/nstudor/Lgahv905/
mymap.panTo(point);
mymap.setZoom(11);
edited Jul 17 '18 at 9:31
SHR
5,76072341
answered Jul 17 '18 at 9:14
Stefan NedelcuStefan Nedelcu
412
add a comment |
4
Use map.panTo(); does not do anything if the point is in the current view. Use map.setView() instead.
I had a polyline and I had to center map to a new point in polyline at every second. Check the code :
GOOD: https://jsfiddle.net/nstudor/xcmdwfjk/
mymap.setView(point, 11, { animation: true });
BAD: https://jsfiddle.net/nstudor/Lgahv905/
mymap.panTo(point);
mymap.setZoom(11);
edited Jul 17 '18 at 9:31
SHR
5,76072341
answered Jul 17 '18 at 9:14
Stefan NedelcuStefan Nedelcu
412
add a comment |
4
4
4
Use map.panTo(); does not do anything if the point is in the current view. Use map.setView() instead.
I had a polyline and I had to center map to a new point in polyline at every second. Check the code :
GOOD: https://jsfiddle.net/nstudor/xcmdwfjk/
mymap.setView(point, 11, { animation: true });
BAD: https://jsfiddle.net/nstudor/Lgahv905/
mymap.panTo(point);
mymap.setZoom(11);
edited Jul 17 '18 at 9:31
SHR
5,76072341
answered Jul 17 '18 at 9:14
Stefan NedelcuStefan Nedelcu
412
Use map.panTo(); does not do anything if the point is in the current view. Use map.setView() instead.
I had a polyline and I had to center map to a new point in polyline at every second. Check the code :
GOOD: https://jsfiddle.net/nstudor/xcmdwfjk/
mymap.setView(point, 11, { animation: true });
BAD: https://jsfiddle.net/nstudor/Lgahv905/
mymap.panTo(point);
mymap.setZoom(11);
edited Jul 17 '18 at 9:31
SHR
5,76072341
answered Jul 17 '18 at 9:14
Stefan NedelcuStefan Nedelcu
412
edited Jul 17 '18 at 9:31
SHR
5,76072341
edited Jul 17 '18 at 9:31
SHR
5,76072341
edited Jul 17 '18 at 9:31
SHR
5,76072341
5,76072341
answered Jul 17 '18 at 9:14
Stefan NedelcuStefan Nedelcu
412
answered Jul 17 '18 at 9:14
Stefan NedelcuStefan Nedelcu
412
answered Jul 17 '18 at 9:14
Stefan NedelcuStefan Nedelcu
412
412
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f12735303%2fhow-to-change-the-map-center-in-leaflet-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
