Skip to content

Instantly share code, notes, and snippets.

@hijiangtao

hijiangtao/mapInit.html

Created December 19, 2016 08:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hijiangtao/1bcab3154afa08d1b5d97f7944216208 to your computer and use it in GitHub Desktop.
Save hijiangtao/1bcab3154afa08d1b5d97f7944216208 to your computer and use it in GitHub Desktop.
Download ZIP
Part of Layers didn't display when the map was initialized but became normal when I resize the browser window?
Raw
mapInit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet JS Bin</title>
</head>
<body>
<div id='map'></div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script>
// Remember to include either the Leaflet 0.7.3 or the Leaflet 1.0.0-beta1 library
var baseLayer = L.tileLayer(
'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png')
map = new L.map('map', {
center: L.latLng(39.914,116.396),
zoom: 12,
layers: baseLayer
})
map.zoomControl.setPosition('topright');
</script>
<style>
#map {
width:100vw;
height:100vh;
}
</style>
</body>
</html>
@hijiangtao
Copy link
Author

hijiangtao commented Dec 19, 2016 •
edited

The problem is caused by customized stylesheet order. I should put the style codes in front of JS codes, otherwise the map will not show correctly as the map container had been modified after the map was initialized. More details at Leaflet/Leaflet#5207

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment