update tile choropleth

Author: LiamConnors

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

@@ -1,7 +1,7 @@
 ---
-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
@@ -10,13 +10,11 @@
 ---
 
 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/mapbox-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
+name: Choropleth Tile Map
 order: 3
 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,25 @@
+---
+name: Basic Tile using Mapbox
+language: plotly_js
+suite: tile-county-choropleth
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ 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);