CODEWITHSUNDEEP
javascripthtmlcsshoverleaflet
Matthias
Matthias

Reputation: 471

Leaflet show map on hover - map doesn't load correct

I have a leaflet map inside a div-container. It's not visible by default. When I hover the Button Map it becomes visible. The problem is, that the map tiles inside the container aren't loaded correct. Also when I zoom in the map it doesn't reload the tiles correct. It seems like there is only one tile loaded. Has anybody an idea what could be the problem? When I place the map separately (not nested div-container) and visible on default it works fine.

var map = L.map('map');
var osm = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
});

var geojsonFeature = [{
    "type": "Feature",
    "properties": {
		"id": "marker1",
        "name": "Coors Field"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
},{
    "type": "Feature",
    "properties": {
		"id": "marker2",
        "name": "School",
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.69404, 38.85621]
    }
}];

var markersById = {};

var markerLayer = L.geoJson(null, {
  pointToLayer: function(feature, latlng) {
    return L.marker(latlng, {});

  },
  onEachFeature: function(feature, layerinfo) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.name + "<table>";

      layerinfo.bindPopup(content, {
        closeButton: true
      });

      // Save the layer into markersById if it has an id.
      if (feature.properties.id) {
        markersById[feature.properties.id] = layerinfo;
      }
    }
  }
});

markerLayer.addData(geojsonFeature);
markerLayer.addTo(map);
map.setView(markersById["marker1"].getLatLng(), 16);
map.addLayer(osm);
body {
  padding: 0;
  margin: 0;
}

#map {
  height: 100%;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.mapContainer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.mapContainer-content {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.mapContainer:hover .mapContainer-content {
  display: block;
}

.mapContainer:hover .dropbtn {
  background-color: #3e8e41;
}
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" rel="stylesheet"/>
<body>
  <div class="mapContainer">
    <button class="dropbtn">Map</button>
    <div class="mapContainer-content">
      <div id="map"></div>
    </div>
  </div>
</body>

Upvotes: 1

Views: 555

Answers (1)

ghybs
ghybs

Reputation: 53280

You have to use map.invalidateSize() once your map container is revealed.

Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.

var map = L.map('map');
var osm = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
});

var geojsonFeature = [{
    "type": "Feature",
    "properties": {
		"id": "marker1",
        "name": "Coors Field"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
},{
    "type": "Feature",
    "properties": {
		"id": "marker2",
        "name": "School",
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.69404, 38.85621]
    }
}];

var markersById = {};

var markerLayer = L.geoJson(null, {
  pointToLayer: function(feature, latlng) {
    return L.marker(latlng, {});

  },
  onEachFeature: function(feature, layerinfo) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.name + "<table>";

      layerinfo.bindPopup(content, {
        closeButton: true
      });

      // Save the layer into markersById if it has an id.
      if (feature.properties.id) {
        markersById[feature.properties.id] = layerinfo;
      }
    }
  }
});

markerLayer.addData(geojsonFeature);
markerLayer.addTo(map);
map.setView(markersById["marker1"].getLatLng(), 16);
map.addLayer(osm);

document.getElementsByClassName("mapContainer")[0].addEventListener("mouseover", function () {
    map.invalidateSize();
});
body {
  padding: 0;
  margin: 0;
}

#map {
  height: 100%;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.mapContainer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.mapContainer-content {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.mapContainer:hover .mapContainer-content {
  display: block;
}

.mapContainer:hover .dropbtn {
  background-color: #3e8e41;
}
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" rel="stylesheet"/>
<body>
  <div class="mapContainer">
    <button class="dropbtn">Map</button>
    <div class="mapContainer-content">
      <div id="map"></div>
    </div>
  </div>
</body>

Note: if necessary, you can wrap the map.invalidateSize() in a timeout, to let some time for the browser to re-layout through the CSS :hover, before it calls invalidateSize so that it reads the correct container dimensions.

Upvotes: 1

Related Questions