I understand that this question has been asked, and answered before, but I haven't been able to successfully implement those examples.
I'm trying to load the map via zoomedIn() (works fine), then on the button press load the map with zoomedOut()
In zoomedOut() however, I'm throwing Map container is already initialized after var map = new L.Map('map');
I had thought that the previous line if (map != undefined) { map.remove(); } would have taken care of that.
What's going on - how can I redraw the map?
<body onLoad="javascript:zoomedIn();">
<form method = "post">
<button type="button" onclick="return zoomedOut()">Zoom Out</button>
<div id="map"</div>
</form>
<script language="javascript">
function zoomedIn() {
var map = new L.Map('map');
L.tileLayer('/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
id: 'mapbox.streets'
}).addTo(map);
var devon = new L.LatLng(50.900958,-3.370846);
map.setView(devon, 7);
}
</script>
<script language="javascript">
function zoomedOut() {
if (map != undefined) { map.remove(); }
var map = new L.Map('map');
L.tileLayer('/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
id: 'mapbox.streets'
}).addTo(map);
var devon = new L.LatLng(50.900958,-3.370846);
map.setView(devon, 1);
}
I understand that this question has been asked, and answered before, but I haven't been able to successfully implement those examples.
I'm trying to load the map via zoomedIn() (works fine), then on the button press load the map with zoomedOut()
In zoomedOut() however, I'm throwing Map container is already initialized after var map = new L.Map('map');
I had thought that the previous line if (map != undefined) { map.remove(); } would have taken care of that.
What's going on - how can I redraw the map?
<body onLoad="javascript:zoomedIn();">
<form method = "post">
<button type="button" onclick="return zoomedOut()">Zoom Out</button>
<div id="map"</div>
</form>
<script language="javascript">
function zoomedIn() {
var map = new L.Map('map');
L.tileLayer('https://api.tiles.mapbox./v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
id: 'mapbox.streets'
}).addTo(map);
var devon = new L.LatLng(50.900958,-3.370846);
map.setView(devon, 7);
}
</script>
<script language="javascript">
function zoomedOut() {
if (map != undefined) { map.remove(); }
var map = new L.Map('map');
L.tileLayer('https://api.tiles.mapbox./v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
id: 'mapbox.streets'
}).addTo(map);
var devon = new L.LatLng(50.900958,-3.370846);
map.setView(devon, 1);
}
- I don't understand what you are trying to achieve. Why would you want the map to be removed and then added again ? – Julien V Commented Jun 25, 2017 at 12:22
- I've got a bunch of markers on the map - I'm trying to redraw those markers. That's not in the code above of course, but as I understand it I need to redraw it. – Ben Mayo Commented Jun 25, 2017 at 13:43
- As here: stackoverflow./questions/19186428/… – Ben Mayo Commented Jun 25, 2017 at 13:45
- If you are trying to redraw some markers, your question should be titled "How to redraw Leaflet markers?" – IvanSanchez Commented Jun 25, 2017 at 17:31
- What I'm trying to do is understand why I'm getting the behaviour I'm getting. I deliberately didn't include my end goal in the question. – Ben Mayo Commented Jun 25, 2017 at 17:44
1 Answer
Reset to default 5You can use
map.invalidateSize()
It worked for me