Richard February 2016

Leaflet.js: Remove map and show error message?

I'm using mapbox.js v2.1.1. I want to check if a layer is valid, and if not, remove the map and show a friendly error message.

I can remove the map OK, but I can't get the error message to show in its place - I just see a white box.

This is my JS:

var map = L.mapbox.map('map', 'mapbox.streets').setView([52.905, -1.79], 6);
var layer = L.mapbox.featureLayer()
  .loadURL(url)
  .on('ready', function() {
    if !(layer.getBounds().isValid()) {
       map.remove();
       $('#map').html("Location unknown");
    }
  })
  .addTo(map);

My HTML is just <div id="map-ccg"></div>.

So I think map.remove() is working fine, but then my HTML is not appearing in its place.

What am I doing wrong?

I guess I could just add a new div under the map and set the HTML of that instead, but it seems fiddly. This must be a common requirement, so is there any inbuilt Leaflet way of doing this?

Answers


IvanSanchez February 2016

This might be a stupid question, but if your HTML looks like <div id="map-ccg"></div>, then why are you doing $('#map') instead of $('#map-ccg') ?

Post Status

Asked in February 2016
Viewed 2,109 times
Voted 4
Answered 1 times

Search




Leave an answer