1

Im building a fairly simple website out of html and the main page includes a mapbox map. According to the mapbox example code which I used and implemented in my website in the way that suited me it made a div with a set height and width. This is good and all for my laptops screen size but on mobile or any other browser with a different sized screen it goes weird. All my other pages dont have this same div element and they scale correctly to mobile. So my question really is how do I make this element scale to the device size like the rest of my website does. Ive included the code below.

I tried to scale it in css with .map but that didnt seem to do anything

Any help much apreciated :)

<div class='map' id='map' style='width: 1920px; height: 900px;'></div>
 <script>
    mapboxgl.accessToken = 'MyMapboxToken';
    var map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        zoom: 10, // starting zoom
        center: [144.97442638919176, -37.78177360539262] // starting center
    });
    
    map.addControl(
    new mapboxgl.GeolocateControl({
    positionOptions: {
    enableHighAccuracy: true
    },
    trackUserLocation: true
    })
    );

    map.on('load', function () {
        map.addSource('places', {
            type: 'geojson',
            // Use a URL for the value for the `data` property.
            data: 'Link To My Data'
        });

        map.addLayer({
            'id': 'places',
            'type': 'circle',
            'source': 'places',
            'paint': {
                'circle-radius': 8,
                'circle-stroke-width': 2,
                'circle-color': 'red',
                'circle-stroke-color': 'white'
            }
        });

    });

</script>
sleepysheep
  • 11
  • 2

1 Answers1

0

Try

<div class='map' id='map' style='width: 100%; min-height: 300px;'></div>

Here we set the size to 100% of the parent container (or body by default). The height is set to at least 300px high.

Change the values as you see fit.

Example : Codepen

But maybe I misunderstood the question ^^

Cladjidane
  • 68
  • 5