Mapbox not showing up

At the bottom of this page a Mapbox should be coming up. Instead I just see the marker but the map appears in black. I tried to find what was interfering but couldn´t find it !

Ok well your code is setup correctly, but configured wrong. Not unless you want to be super zoomed in on a sea just off of Antarctica.

So you have your code set at a zoom of 16. That is really zoomed in! Try backing it away. The example of 10.7 seems good and is what is in their examples.

Secondly, your coordinates are probably off. For some reason the longitude is the first number and the latitude is the second number.

I live in Vancouver Canada which is 49.2827° N, 123.1207° W. But for the coordinates to mapbox, this is represented as [-123.1207, 49.2827].

Now for an example try plugging these value into your code…

mapboxgl.accessToken = 'pk.eyJ1IjoiY29yb2JvcmkiLCJhIjoiY2s3Y3FyaWx0MDIwbTNpbnc4emxkdndrbiJ9.9KeSiPVeMK0rWvJmTE0lVA';
       var map = new mapboxgl.Map({
           container: 'map', style: 'mapbox://styles/mapbox/satellite-v9',
           center: [-123.1207, 49.2827], zoom: 10.7
       }); var marker = new mapboxgl.Marker().setLngLat([-123.1207, 49.2827]).addTo(map);
    </script>

You should see your zoom backed out a little and a satellite view just off the coast of Vancouver Canada. Yup, that is my home.

4 Likes

Hi, last night I knew I wasn’t at my best. I knew I had latitude and longitude mixed up and had it working fine on a plain HTML page but didn’t see it on the actual website. I guess after finding out yesterday that my folks are closing by the end of their earthly life I shouldn’t tried to do some work to forget about the whole situation.

Thanks Martyr2