search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.2k stars 2.22k forks source link

Mapbox doesn't display full until I open developer tools #12766

Open DevEvil99 opened 1 year ago

DevEvil99 commented 1 year ago

Im trying to generate a map and it will generate but the width is set to default until I open dev tools, how can I fix it? thank you!

<div id="map" class="map" style="width:100%; height:400px; border-radius:24px;">
        </div>

        <script>
        mapboxgl.accessToken = 'MY_TOKEN'; 
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v12',
            center: [<?php echo $longitude; ?>, <?php echo $latitude; ?>],
            zoom: 12
        });

        var marker = new mapboxgl.Marker()
            .setLngLat([<?php echo $longitude; ?>, <?php echo $latitude; ?>])
            .addTo(map);
    </script>

image image

suryakumara commented 1 year ago

Hi we have same problem. Anyone can solve this ? Thit not happend before. image

LongTalent commented 1 year ago

Same here, using mapbox-gl in version 2.14.1

suryakumara commented 1 year ago

@LongTalent Hi, when the map instance you can try to add : 

window.addEventListener('fullscreenchange', () => {
    map.resize();
});

to listen fullscreenchange event.

stepankuzmin commented 1 year ago

Hi @DevEvil99,

Thank you for opening this ticket. Please provide a minimal, complete, verifiable demonstration of the issue to help the maintainers and community understand and address the problem accurately. We recommend using https://jsbin.com/. Please include information about the browser version and operating system used.

DevEvil99 commented 1 year ago

Hello @stepankuzmin

I unfortunately lost my code but it was a PHP code that would get the IP of the user and used a API to get the city information and show that information in Mapbox code which I provided in the post, everything works perfectly but the map has a default value of 400px x 300px and it doesn't display full until I open developer tools, you can see better example here

OS: Windows 10 Browser: Brave. Version 1.52.129 Chromium: 114.0.5735.198 (Official Build) (64-bit)

stepankuzmin commented 1 year ago

Hi @suryakumara @LongTalent,

Could you please help us identify the issue? Could you create a small reproducible example of this issue?

DevEvil99 commented 1 year ago

@stepankuzmin

Something like this 

<?php

$userIP = $_SERVER['REMOTE_ADDR'];

$apiUrl = "https://geolocation-db.com/json/62d8d690-e7b8-11ed-8c81-cbb990727ab5/$userIP";
$response = file_get_contents($apiUrl);
$data = json_decode($response, true);

$latitude = $data['latitude'];
$longitude = $data['longitude'];
?>

<!DOCTYPE html>
<html>
<head>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body>
<div id="map" class="map" style="width:100%; height:400px; border-radius:24px;">
        </div>

        <script>
        mapboxgl.accessToken = 'MY_TOKEN'; 
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v12',
            center: [<?php echo $longitude; ?>, <?php echo $latitude; ?>],
            zoom: 12
        });

        var marker = new mapboxgl.Marker()
            .setLngLat([<?php echo $longitude; ?>, <?php echo $latitude; ?>])
            .addTo(map);
    </script>
</body>
</html>
stepankuzmin commented 1 year ago

@DevEvil99 Unfortunately, I'm not able to reproduce the error with your example. Can you reproduce it in other browsers, or is it only Brave?