css - Why would my map only display 50% -


i have created map in mapbox , placed on site. reason 50% of map displays on site.

after reading this question, added #map-container, still same result.

mapbox code:

<!--mapbox-->   <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' /> <!--end mapbox--> 

css:

#map-container {   position: relative;   width: 100%;   height: 100%; } #map {   height: 600px; } 

html code:

<div id="map-container">   <div id="map"></div> </div>  <script>   mapboxgl.accesstoken = 'pk.eyj1ijoic2vhbmryywfkbg96zsisimeioijjaja3cw1potcwmda5mndvd2hichlmnwc1in0.7bt7spxdoymyjyvdvvmqzw';    var map = new mapboxgl.map({     container: 'map',     style: 'mapbox://styles/yourstyle/cj5j5jl0c0bvb2rnamu85jjfp',     center: [29.184, -28.227],     pitch: 60, // pitch in degrees     bearing: -60, // bearing in degrees     zoom: 10   }); </script> 

here screenshot of problem:

enter image description here

html, body, #map {  width:100%; height:100%,  position:absolute; margin:0; z-index:1; } 

i think necessary specify map height explicitely in case 600px. try using above code. note : z index 1 z below 1 hidden


Comments

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

html - How to custom Bootstrap grid height? -

transpose - Maple isnt executing function but prints function term -