Merge pull request #309 from plotly/maps-updates

Maps docs updates for Plotly.js

Author: LiamConnors

_posts/plotly_js/fundamentals/config-options/2019-10-24-double-click-delay.html

@@ -7,7 +7,7 @@
 arrangement: horizontal
 markdown_content: |
  Sets the maximum delay between two consecutive clicks to be interpreted as a double-click in ms. This is the time interval between first mousedown, and' second mouseup. The default timing is 300 ms (less than half a second).
- This setting propagates to all on-subplot double clicks, (except for geo and mapbox).
+ This setting propagates to all on-subplot double clicks, (except for geo, map, and mapbox).
 ---
 var data = [{
  type: "bar",

_posts/plotly_js/maps/bubble-maps/2015-07-11-bubble_maps_plotlyjs_index.html

@@ -5,7 +5,7 @@
 language: plotly_js
 layout: base
 name: Bubble Maps
-order: 5
+order: 6
 page_type: example_index
 permalink: javascript/bubble-maps/
 redirect_from: javascript-graphing-library/bubble-maps/

_posts/plotly_js/maps/choropleth-mapbox/2019-08-16-US_states.html

@@ -1,22 +1,20 @@
 ---
-name: Dark tile, Needs Token
+name: Dark tile
 language: plotly_js
-suite: mapbox-county-choropleth
+suite: tile-county-choropleth
 order: 3
 sitemap: false
 arrangement: horizontal
 markdown_content: |
- This example uses [zmin and zmax](https://plotly.com/javascript/reference/choroplethmapbox/#choroplethmapbox-zmin) to define the lower bound and upper bound of the color domain. If these attributes are not set, Plotly [determines the color domain](https://plotly.com/javascript/reference/heatmap/#heatmap-zauto) based on the input data.
+ This example uses [zmin and zmax](https://plotly.com/javascript/reference/choroplethmap/#choroplethmap-zmin) to define the lower bound and upper bound of the color domain. If these attributes are not set, Plotly [determines the color domain](https://plotly.com/javascript/reference/heatmap/#heatmap-zauto) based on the input data.
 ---
 
 var data = [{
- type: "choroplethmapbox", name: "US states", geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json", locations: [ "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY" ],
+ type: "choroplethmap", name: "US states", geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json", locations: [ "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY" ],
 z: [ 141, 140, 155, 147, 132, 146, 151, 137, 146, 136, 145, 141, 149, 151, 138, 158, 164, 141, 146, 145, 142, 150, 155, 160, 156, 161, 147, 164, 150, 152, 155, 167, 145, 146, 151, 154, 161, 145, 155, 150, 151, 162, 172, 169, 170, 151, 152, 173, 160, 176 ],
 zmin: 25, zmax: 280, colorbar: {y: 0, yanchor: "bottom", title: {text: "US states", side: "right"}}}
  ];
 
-var layout = {mapbox: {style: "dark", center: {lon: -110, lat: 50}, zoom: 0.8}, width: 600, height: 400, margin: {t: 0, b: 0}};
+var layout = {map: {style: "dark", center: {lon: -110, lat: 50}, zoom: 0.8}, width: 600, height: 400, margin: {t: 0, b: 0}};
 
-var config = {mapboxAccessToken: "your access token"};
-
-Plotly.newPlot('myDiv', data, layout, config);
+Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/maps/choropleth-mapbox/2019-08-16-basic-choropleth1.html

@@ -1,23 +1,21 @@
 ---
-name: Basic Tile, Needs Token
+name: Basic Tile
 language: plotly_js
-suite: mapbox-county-choropleth
+suite: tile-county-choropleth
 order: 1
 sitemap: false
 arrangement: horizontal
 markdown_content: |
 
- This tutorial uses [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/) to make a map of US states using [vector tiles](https://plotly.com/javascript/mapbox-layers/).
+ This tutorial uses [Maplibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) to make a map of US states using [vector tiles](https://plotly.com/javascript/map-layers/).
 ---
 
 var data = [{
- type: "choroplethmapbox", locations: ["NY", "MA", "VT"], z: [-50, -10, -20],
+ type: "choroplethmap", locations: ["NY", "MA", "VT"], z: [-50, -10, -20],
  geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json"
 }];
 
-var layout = {mapbox: {center: {lon: -74, lat: 43}, zoom: 3.5},
+var layout = {map: {center: {lon: -74, lat: 43}, zoom: 3.5},
  width: 600, height:400};
 
-var config = {mapboxAccessToken: "your access token"};
-
-Plotly.newPlot('myDiv', data, layout, config);
+Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/maps/choropleth-mapbox/2019-08-16-choropleth-geojson-object.html

@@ -1,28 +1,26 @@
 ---
-name: Streets Tile, Needs Token
+name: Streets Tile
 language: plotly_js
-suite: mapbox-county-choropleth
+suite: tile-county-choropleth
 order: 2
 sitemap: false
 arrangement: horizontal
 markdown_content: |
 
- The following example sets `geojson object` of type `feature` and geometries of type 'Polygon'. For more information see [geojson attribute](https://plotly.com/javascript/reference/choroplethmapbox/#choroplethmapbox-geojson) in the reference page.
- As you see, scattermapbox trace is above Choropleth mapbox. To set the Choropleth mapbox above all the other traces you should set [below attribute](https://plotly.com/javascript/reference/choroplethmapbox/#choroplethmapbox-below).
+ The following example sets `geojson object` of type `feature` and geometries of type 'Polygon'. For more information see [geojson attribute](https://plotly.com/javascript/reference/choroplethmap/#choroplethmap-geojson) in the reference page.
+ As you see, the scattermap trace is above the Choropleth map trace. To set the Choropleth map trace above all the other traces you should set [below attribute](https://plotly.com/javascript/reference/choroplethmap/#choroplethmap-below).
 ---
 var data = [
- {type: "scattermapbox", lon: [-86], lat: [34], marker: {size: 20, color: 'purple'}},
+ {type: "scattermap", lon: [-86], lat: [34], marker: {size: 20, color: 'purple'}},
  {
- type: "choroplethmapbox",locations: ["AL"], z: [10], coloraxis: "coloraxis", geojson: {type: "Feature", id: "AL", geometry: {type: "Polygon", coordinates: [[
+ type: "choroplethmap",locations: ["AL"], z: [10], coloraxis: "coloraxis", geojson: {type: "Feature", id: "AL", geometry: {type: "Polygon", coordinates: [[
  [-86, 35], [-85, 34], [-85, 32], [-85, 32], [-85, 32], [-85, 32], [-85, 31],
  [-86, 31], [-87, 31], [-87, 31], [-88, 30], [-88, 30], [-88, 30], [-88, 30],
  [-88, 34], [-88, 35]]]
  }}}];
 
-var layout = {width: 600, height: 400, mapbox: {style: 'streets',
+var layout = {width: 600, height: 400, map: {style: 'streets',
  center: {lon: -86, lat: 33}, zoom: 5}, marker: {line: {color: "blue"}},
  coloraxis: {showscale: false, colorscale: "Viridis"}};
 
-Plotly.setPlotConfig({mapboxAccessToken: "your access token"});
-
 Plotly.newPlot('myDiv', data, layout);

_posts/plotly_js/maps/choropleth-mapbox/2019-08-16-choropleth_plotly_js_index.html

@@ -1,15 +1,15 @@
 ---
-description: How to make a D3.js-based choropleth mapbox in JavaScript. A Choropleth
- mapbox shades geographic regions by value.
+description: How to make a tile-based choropleth map in JavaScript. A Choropleth map shades geographic regions by value.
 display_as: maps
 language: plotly_js
 layout: base
-name: Choropleth Mapbox
-order: 3
+name: Choropleth Tile Map
+order: 4
 page_type: example_index
-permalink: javascript/mapbox-county-choropleth/
+permalink: javascript/tile-county-choropleth/
+redirect_from: javascript/mapbox-county-choropleth/
 thumbnail: thumbnail/mapbox-choropleth.png
 ---
 
-{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","mapbox-county-choropleth" | sort: "order" %}
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","tile-county-choropleth" | sort: "order" %}
 {% include posts/auto_examples.html examples=examples %}

_posts/plotly_js/maps/choropleth-mapbox/2024-06-29-basic-mapbox.html

@@ -0,0 +1,27 @@
+---
+name: Basic Tile using Mapbox
+language: plotly_js
+suite: tile-county-choropleth
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ <strong>> Mapbox traces are deprecated and may be removed in a future version of Plotly.js.</strong>
+
+ Earlier examples use traces that render with [Maplibre GL JS](https://maplibre.org/maplibre-gl-js/docs/).
+ These traces were introduced in Plotly.js 2.35.0 and replace Mapbox-based tile maps,
+ which are now deprecated. Here's one of the earlier examples using the Mapbox-based `choroplethmapbox` trace
+---
+
+var data = [{
+ type: "choroplethmapbox", locations: ["NY", "MA", "VT"], z: [-50, -10, -20],
+ geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json"
+}];
+
+var layout = {mapbox: {center: {lon: -74, lat: 43}, zoom: 3.5},
+ width: 600, height:400};
+
+var config = {mapboxAccessToken: "your access token"};
+
+Plotly.newPlot('myDiv', data, layout, config);

_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth_plotly_js_index.html

@@ -5,7 +5,7 @@
 language: plotly_js
 layout: base
 name: Choropleth Maps
-order: 8
+order: 9
 permalink: javascript/choropleth-maps/
 redirect_from: javascript-graphing-library/choropleth-maps/
 thumbnail: thumbnail/choropleth.jpg

_posts/plotly_js/maps/choropleth-maps/2016-08-04-florida-counties.html

@@ -12,14 +12,14 @@
  d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-blue-data.json', function(bluejson) {
 
  Plotly.newPlot('myDiv', [{
- type: 'scattermapbox',
+ type: 'scattermap',
  lat: [46],
  lon: [-74]
  }], {
  title: "Florida Counties",
  height: 600,
  width: 600,
- mapbox: {
+ map: {
  center: {
  lat: 28,
  lon: -84
@@ -41,8 +41,6 @@
  },
  ]
  }
- }, {
- mapboxAccessToken: 'your access token'
  });
 
 

_posts/plotly_js/maps/density-mapbox/2019-08-16-basic_density_mapbox.html

@@ -1,17 +1,17 @@
 ---
-name: Stamen Terrain Tile that Needs no Token
+name: Stamen Terrain Tile
 language: plotly_js
-suite: mapbox-density-heatmaps
-order: 1
+suite: tile-density-heatmaps
+order: 5
 sitemap: false
 layout: base
 arrangement: horizontal
 markdown_content: |
 
- To plot on Mapbox maps with Plotly you may need a Mapbox account and a public [Mapbox Access Token](https://studio.mapbox.com). See our [Mapbox Map Layers](https://plotly.com/javascript/mapbox-layers/) documentation for more information.
+
 ---
 var data = [{type: 'densitymapbox', lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2]}];
 
-var layout = {width: 600, height: 400, mapbox: {style: 'stamen-terrain'}};
+var layout = {width: 600, height: 400, mapbox: {style: 'https://tiles.stadiamaps.com/styles/stamen_watercolor.json?api_key=YOUR-API-KEY'}};
 
 Plotly.newPlot('myDiv', data, layout);