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:
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
Post a Comment