0

I'm trying to create a map that shows some markers. I'm using leaflet with Mapbox layer and MarkerCluster plugin (as I have hundreads of markers to show).

I would like to make the map takes place in the whole screen, so I tried to set width and height to 100% in the div's map but nothing is show when I do this.

When I try to set width to 1080px and height to 720px, the map appear and works perfectly, and it's the same for every values as soon as it's in px or em (I tried with 100em, 1920x1080 and 100x60).

Here is my code, without the part that add markers (I can add it if you wish).

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>

    </head>
    <body>
    <div id="map" style="width: 1080px; height: 720px;"></div> <!-- This will work -->
    <div id="map" style="width: 100%; height: 100%;"></div> <!-- This wont work -->
        <script>
            var mymap = L.map('map').setView([48.8557, 2.3600], 10);

                L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWF5YW5uIiwiYSI6ImNqMXc0cnM1ZjAwMHAycW1zZGp1bHZqNnMifQ.ga4h0pRd0yPhomP8lPrDYA', {
                    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
                    maxZoom: 20,
                }).addTo(mymap);

        </script>
    </body>
</html>

Thanks for your answer

EDIT: CSS height 100% percent not working this doesn't worked for me

Community
  • 1
  • 1
toximorph
  • 48
  • 1
  • 9
  • 1
    have you tried `width="100%"` and `max-width="1080px"` ? that will set the maximum the image can get and the amount that you want to get reescalated if the screen is closer – Alberto Martínez Apr 25 '17 at 10:05
  • This worked but if I only put `width:1080px` it show the same result – toximorph Apr 25 '17 at 10:19
  • so try the method i told you, hope it will be usefull :) – Alberto Martínez Apr 25 '17 at 10:20
  • 2
    html and body also need height:100% so viewport can be calculated from html down to the div via body. Else you have 100% of nothing . you may also use vh unit : div {height:100vh;} if you do not want to set height on parents(body,html here). – G-Cyrillus Apr 25 '17 at 10:56
  • 2
    Use `height: 100vh` instead. CSS units relative to the viewport are more reliable for these "full-screen" use cases. – IvanSanchez Apr 25 '17 at 11:29
  • Thanks to you all, the vh method works for me ! – toximorph Apr 25 '17 at 12:02

0 Answers0