Invalid LngLat latitude value: must be between -90 and 90

[cryptobench]

Hi! I'm trying to implement a map into my site and pass some values into it. I got some database fields containing latitude and longitude data. I then assert them into my html file and they load perfectly into the HTML, but the dots aren't rendered on the site due to this error:

Uncaught Error: Invalid LngLat latitude value: must be between -90 and 90 at new bu (lng_lat.js:35) at Function.bu.convert (lng_lat.js:112) at o.setLngLat (marker.js:251) at map:2279 at Array.forEach () at map:2271

I haven't been able to find something about this on Google, so that's why im coming here. I tried searching the following latitude and longitude on Google and there's no issue there.

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />

<div style="position: absolute;
top: 0;
bottom: 0;
width: 100%; z-index: 15;" id='map'></div>
 <script>
    mapboxgl.accessToken = 'pk.blablablalblalbla'; // replace this with your access token
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/phillipj/cjvh85kpx0b5t1cpfk9obwztb', // replace this with your style URL
      center: [50.032, 41.913],
      zoom: 1
    });
    var geojson = {
  type: 'FeatureCollection',
  features: [
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [49.8928, -119.4852]
    },
    properties: {
      title: 'Node',
      description: 'Kelowna, Canada'
    }
  },]
};
// add markers to map
geojson.features.forEach(function(marker) {

// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';

// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);
});
    </script>

CSS 

.marker {
  background-image: url('https://docs.mapbox.com/help/demos/custom-markers-gl-js/mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

[cryptobench]

Switched around coordinates and it fixed it.

[roy1196]

Do you know what is the reason for this error? It not make sense that I have to change the coordinates.

[rajputvishal]

You ll have to pass coordinates in [Long, Lat] order instead of [Lat, Long].