LatLng ⇢ LngLat

CHANGELOG.md

@@ -4,6 +4,29 @@ An in-progress version being developed in the `master` branch.
 
 #### Breaking changes
 
+* Switched to [longitude, latitude] coordinate order, matching GeoJSON. We anticipate that mapbox-gl-js will be widely used
+  with GeoJSON, and in the long term having a coordinate order that is consistent with GeoJSON will lead to less confusion
+  and impedence mismatch than will a [latitude, longitude] order.
+
+  The following APIs were renamed:
+
+    * `LatLng` was renamed to `LngLat`
+    * `LatLngBounds` was renamed to `LngLatBounds`
+    * `Popup#setLatLng` was renamed to `Popup#setLngLat`
+    * `Popup#getLatLng` was renamed to `Popup#getLngLat`
+    * The `latLng` property of Map events was renamed `lngLat`
+
+  The following APIs now expect array coordinates in [longitude, latitude] order:
+
+    * `LngLat.convert`
+    * `LngLatBounds.convert`
+    * `Popup#setLngLat`
+    * The `center` and `maxBounds` options of the `Map` constructor
+    * The arguments to `Map#setCenter`, `Map#fitBounds`, `Map#panTo`, and `Map#project`
+    * The `center` option of `Map#jumpTo`, `Map#easeTo`, and `Map#flyTo`
+    * The `around` option of `Map#zoomTo`, `Map#rotateTo`, and `Map#easeTo`
+    * The `coordinates` properties of video and image sources
+
 * Updated to mapbox-gl-style-spec v8.0.0 ([Changelog](https://github.com/mapbox/mapbox-gl-style-spec/blob/v8.0.0/CHANGELOG.md)). Styles are
   now expected to be version 8. You can use the [gl-style-migrate](https://github.com/mapbox/mapbox-gl-style-lint#migrations)
   utility to update existing styles.

bench/fps/site.js

@@ -21,7 +21,7 @@ function setup(state, callback) {
     var map = new mapboxgl.Map({
         container: 'map',
         zoom: 15,
-        center: [38.912753, -77.032194],
+        center: [-77.032194, 38.912753],
         style: 'https://www.mapbox.com/mapbox-gl-styles/styles/bright-v7.json',
         hash: true
     });

debug/site.js

@@ -4,7 +4,7 @@ mapboxgl.accessToken = getAccessToken();
 var map = new mapboxgl.Map({
     container: 'map',
     zoom: 12.5,
-    center: [38.888, -77.01866],
+    center: [-77.01866, 38.888],
     style: 'mapbox://mapbox.streets-v8',
     hash: true
 });
@@ -57,7 +57,7 @@ map.on('style.load', function() {
 
 map.on('click', function(e) {
     (new mapboxgl.Popup())
-        .setLatLng(map.unproject(e.point))
+        .setLngLat(map.unproject(e.point))
         .setHTML("<h1>Hello World!</h1>")
         .addTo(map);
 });

debug/video.html

@@ -42,10 +42,10 @@
             "type": "video",
             "url": [ "https://www.mapbox.com/drone/video/drone.mp4", "https://www.mapbox.com/drone/video/drone.webm" ],
             "coordinates": [
-                [37.56238816766053, -122.51596391201019],
-                [37.56410183312965, -122.51467645168304],
-                [37.563391708549425, -122.51309394836426],
-                [37.56161849366671, -122.51423120498657]
+                [-122.51596391201019, 37.56238816766053],
+                [-122.51467645168304, 37.56410183312965],
+                [-122.51309394836426, 37.563391708549425],
+                [-122.51423120498657, 37.56161849366671]
             ]
         }
     },
@@ -70,7 +70,7 @@
   container: 'map',
   minZoom: 14,
   zoom: 17,
-  center: [37.562984, -122.514426],
+  center: [-122.514426, 37.562984],
   bearing: -96,
   style: videoStyle,
   hash: false

docs/_posts/examples/3400-01-01-custom-style-id.html

@@ -10,7 +10,7 @@
 var map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://mapbox.dark-v8', //hosted style id
-  center: [39, -77.38], // starting position
+  center: [-77.38, 39], // starting position
   zoom: 3 // starting zoom
 });
 </script>

docs/_posts/examples/3400-01-01-simple-map.html

@@ -11,7 +11,7 @@
 var map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://mapbox.streets-v8', //stylesheet location
-  center: [40, -74.50], // starting position
+  center: [-74.50, 40], // starting position
   zoom: 9 // starting zoom
 });
 </script>

docs/_posts/examples/3400-01-02-check-for-support.html

@@ -13,7 +13,7 @@
   var map = new mapboxgl.Map({
     container: 'map',
   style: 'mapbox://mapbox.streets-v8',
-    center: [40, -74.50],
+    center: [-74.50, 40],
     zoom: 9
   });
 }

docs/_posts/examples/3400-01-02-interactive-false.html

@@ -10,7 +10,7 @@
 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://mapbox.streets-v8',
-  center: [40, -74.50],
+  center: [-74.50, 40],
   zoom: 9,
   // causes pan & zoom handlers not to be applied, similar to
   // .dragging.disable() and other handler .disable() funtions in Leaflet.

docs/_posts/examples/3400-01-02-map-tiles.html

@@ -27,7 +27,7 @@
       "maxzoom": 22
     }]
   },
-  center: [40, -74.50], // starting position
+  center: [-74.50, 40], // starting position
   zoom: 2 // starting zoom
 });
 </script>

docs/_posts/examples/3400-01-03-fitbounds.html

@@ -28,17 +28,17 @@
 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://mapbox.streets-v8',
-  center: [40, -74.50],
+  center: [-74.50, 40],
   zoom: 9
 });
 
 function fit() {
     map.fitBounds([[
-      -5.353521,
-      32.958984
+      32.958984,
+      -5.353521
     ], [
-      5.615985,
-      43.50585
+      43.50585,
+      5.615985
     ]]);
 }
 </script>

docs/_posts/examples/3400-01-03-flyto-options.html

@@ -25,8 +25,8 @@
 <br />
 <button onclick='fly();' id='fly'>Fly</button>
 <script>
-var start = [40, -74.50];
-var end = [40, 74.50];
+var start = [-74.50, 40];
+var end = [74.50, 40];
 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://mapbox.streets-v8',

docs/_posts/examples/3400-01-03-flyto.html

@@ -28,15 +28,15 @@
 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://mapbox.streets-v8',
-  center: [40, -74.50],
+  center: [-74.50, 40],
   zoom: 9
 });
 
 function fly() {
-    // Fly to a random location by offsetting the point 40, -74.50
+    // Fly to a random location by offsetting the point -74.50, 40
     // by up to 5 degrees.
     map.flyTo({ center: [
-        40 + (Math.random() - 0.5) * 10,
-        -74.50 + (Math.random() - 0.5) * 10] });
+        -74.50 + (Math.random() - 0.5) * 10,
+        40 + (Math.random() - 0.5) * 10] });
 }
 </script>

docs/_posts/examples/3400-01-04-geojson-line.html

@@ -10,7 +10,7 @@
 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://mapbox.streets-v8',
-  center: [37.830348, -122.486052],
+  center: [-122.486052, 37.830348],
   zoom: 15
 });
 

docs/_posts/examples/3400-01-04-navigation.html

@@ -10,7 +10,7 @@
 var map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://mapbox.streets-v8',
-  center: [40, -74.50], // starting position
+  center: [-74.50, 40], // starting position
   zoom: 9 // starting zoom
 });
 

docs/_posts/examples/3400-01-05-featuresat.html

@@ -30,7 +30,7 @@
   var map = new mapboxgl.Map({
     container: 'map',
     style: style,
-    center: [37.8, -96],
+    center: [-96, 37.8],
     zoom: 3
   });
 

docs/_posts/examples/3400-01-05-geojson-markers.html

@@ -10,7 +10,7 @@
 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://mapbox.streets-v8',
-  center: [37.8, -96],
+  center: [-96, 37.8],
   zoom: 3
 });
 

docs/_posts/examples/3400-01-05-mouse-position.html

@@ -26,7 +26,7 @@
 var map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://mapbox.streets-v8',
-  center: [40, -74.50], // starting position
+  center: [-74.50, 40], // starting position
   zoom: 9 // starting zoom
 });
 
@@ -35,7 +35,7 @@
         // e.point is the x, y coordinates of the mousemove event relative
         // to the top-left corner of the map
         JSON.stringify(e.point) + '<br />' +
-        // e.latLng is the latitude, longitude geographical position of the event
-        JSON.stringify(e.latLng);
+        // e.lngLat is the longitude, latitude geographical position of the event
+        JSON.stringify(e.lngLat);
 });
 </script>

docs/_posts/examples/3400-01-05-popup-on-click.html

@@ -10,13 +10,13 @@
 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://mapbox.streets-v8',
-  center: [37.8, -96],
+  center: [-96, 37.8],
   zoom: 3
 });
 
 map.on('click', function(e) {
    var tooltip = new mapboxgl.Popup()
-      .setLatLng(map.unproject(e.point))
+      .setLngLat(e.lngLat)
       .setHTML('<h1>Hello World!</h1>')
       .addTo(map);
 });

docs/_posts/examples/3400-01-05-popup.html

@@ -10,14 +10,14 @@
 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://mapbox.streets-v8',
-  center: [37.8, -96],
+  center: [-96, 37.8],
   zoom: 3
 });
 
 var tooltip = new mapboxgl.Popup({
     closeOnClick: false
   })
-  .setLatLng([37.8, -96])
+  .setLngLat([-96, 37.8])
   .setHTML('<h1>Hello World!</h1>')
   .addTo(map);
 </script>

docs/_posts/examples/3400-01-06-satellite-map.html

@@ -26,7 +26,7 @@
 var map = new mapboxgl.Map({
   container: 'map',
   zoom: 9,
-  center: [36.25956997955441, 137.9150899566626],
+  center: [137.9150899566626, 36.25956997955441],
   style: style,
   hash: false
 });

docs/_posts/examples/3400-01-07-video-on-a-map.html

@@ -47,7 +47,7 @@
   container: 'map',
   minZoom: 14,
   zoom: 17,
-  center: [37.562984, -122.514426],
+  center: [-122.514426, 37.562984],
   bearing: -96,
   style: videoStyle,
   hash: false

docs/_posts/examples/3400-01-08-third-party.html

@@ -36,7 +36,7 @@
   container: 'map',
   style: simple,
   zoom: 1,
-  center: [35, -14]
+  center: [-14, 35]
 });
 
 map.addControl(new mapboxgl.Navigation());