add new scattermap traces

Author: LiamConnors

_posts/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_basic-mapbox.html

@@ -0,0 +1,43 @@
+---
+name: Basic Example (Mapbox)
+language: plotly_js
+suite: scatter-tile-maps
+order: 10
+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:'scattermapbox',
+ lat:['45.5017'],
+ lon:['-73.5673'],
+ mode:'markers',
+ marker: {
+ size:14
+ },
+ text:['Montreal']
+}]
+
+var layout = {
+ autosize: true,
+ hovermode:'closest',
+ mapbox: {
+ bearing:0,
+ center: {
+ lat:45,
+ lon:-73
+ },
+ pitch:0,
+ zoom:5
+ },
+}
+
+Plotly.setPlotConfig({
+ mapboxAccessToken: "your access token"
+})
+
+Plotly.newPlot('myDiv', data, layout)

_posts/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_basic.html

@@ -1,14 +1,14 @@
 ---
 name: Basic Example
 language: plotly_js
-suite: scattermapbox
+suite: scatter-tile-maps
 order: 1
 sitemap: false
 arrangement: horizontal
 ---
 
 var data = [{
- type:'scattermapbox',
+ type:'scattermap',
  lat:['45.5017'],
  lon:['-73.5673'],
  mode:'markers',
@@ -21,7 +21,7 @@
 var layout = {
  autosize: true,
  hovermode:'closest',
- mapbox: {
+ map: {
  bearing:0,
  center: {
  lat:45,
@@ -32,8 +32,4 @@
  },
 }
 
-Plotly.setPlotConfig({
- mapboxAccessToken: "your access token"
-})
-
 Plotly.newPlot('myDiv', data, layout)

_posts/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_colorscale.html

@@ -1,7 +1,7 @@
 ---
-name: Adding Colorscale to Mapbox
+name: Adding Colorscale to Maps
 language: plotly_js
-suite: scattermapbox
+suite: scatter-tile-maps
 order: 3
 sitemap: false
 arrangement: horizontal
@@ -15,7 +15,7 @@
  scl = [[0, 'rgb(150,0,90)'],[0.125, 'rgb(0, 0, 200)'],[0.25,'rgb(0, 25, 255)'],[0.375,'rgb(0, 152, 255)'],[0.5,'rgb(44, 255, 150)'],[0.625,'rgb(151, 255, 0)'],[0.75,'rgb(255, 234, 0)'],[0.875,'rgb(255, 111, 0)'],[1,'rgb(255, 0, 0)']];
 
  var data = [{
- type: 'scattermapbox',
+ type: 'scattermap',
  mode: 'markers',
  text: unpack(rows, 'Globvalue'),
  lon: unpack(rows, 'Lon'),
@@ -44,7 +44,7 @@
 
  layout = {
  dragmode: 'zoom',
- mapbox: {
+ map: {
  center: {
  lat: 38.03697222,
  lon: -90.70916722
@@ -66,9 +66,5 @@
  showlegend: false
  };
 
- Plotly.setPlotConfig({
- mapboxAccessToken: "your access token"
- })
-
  Plotly.newPlot('myDiv', data, layout);
  });

_posts/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_lines.html

@@ -1,7 +1,7 @@
 ---
-name: Adding Lines to Mapbox
+name: Adding Lines to Maps
 language: plotly_js
-suite: scattermapbox
+suite: scatter-tile-maps
 order: 4
 sitemap: false
 arrangement: horizontal
@@ -26,7 +26,7 @@
  var opacityValue = count[i]/getMaxOfArray(count);
 
  var result = {
- type: 'scattermapbox',
+ type: 'scattermap',
  lon: [ startLongitude[i] , endLongitude[i] ],
  lat: [ startLat[i] , endLat[i] ],
  mode: 'lines',
@@ -42,7 +42,7 @@
 
  layout = {
  dragmode: 'zoom',
- mapbox: {
+ map: {
  center: {
  lat: 38.03697222,
  lon: -90.70916722
@@ -66,10 +66,6 @@
  showlegend: false
  };
 
- Plotly.setPlotConfig({
- mapboxAccessToken: "your access token"
- })
-
  Plotly.newPlot("myDiv", data, layout, {showLink: false});
 
 });

_posts/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_multiple.html

@@ -1,7 +1,7 @@
 ---
 name: Multiple Markers
 language: plotly_js
-suite: scattermapbox
+suite: scatter-tile-maps
 order: 2
 sitemap: false
 arrangement: horizontal
@@ -21,7 +21,7 @@
  return (row.class === classes);
  });
  return {
- type: 'scattermapbox',
+ type: 'scattermap',
  name: classes,
  lat: unpack(rowsFiltered, 'reclat'),
  lon: unpack(rowsFiltered, 'reclong')
@@ -34,7 +34,7 @@
  color: 'white'
  },
  dragmode: 'zoom',
- mapbox: {
+ map: {
  center: {
  lat: 38.03697222,
  lon: -90.70916722
@@ -66,9 +66,5 @@
  }]
  };
 
- Plotly.setPlotConfig({
- mapboxAccessToken: "your access token"
- });
-
  Plotly.newPlot('myDiv', data, layout);
 });

_posts/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_plotly_js_index.html

@@ -1,13 +1,14 @@
 ---
-description: How to make scatter plots on Mapbox maps in Plotly.JS
+description: How to make scatter plots on tile maps in Plotly.JS
 display_as: maps
 language: plotly_js
 layout: base
-name: Scatter Plots on Mapbox
+name: Scatter Plots on Tile Maps
 order: 7
-permalink: javascript/scattermapbox/
+permalink: javascript/scatter-tile-maps/
+redirect_from: javascript/scattermapbox/
 thumbnail: thumbnail/scatter-mapbox.jpg
 ---
 
-{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","scattermapbox" | sort: "order" %}
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","scatter-tile-maps" | sort: "order" %}
 {% include posts/auto_examples.html examples=examples %}

_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html

@@ -1,16 +1,16 @@
 ---
 name: Set Marker Symbols
 language: plotly_js
-suite: scattermapbox
+suite: scatter-tile-maps
 order: 5
 sitemap: false
 arrangement: horizontal
 markdown_content: |
- This example uses [symbol attribute](https://plotly.com/javascript/reference/scattermapbox/#scattermapbox-marker-symbol) to set the marker symbol.
+ This example uses [symbol attribute](https://plotly.com/javascript/reference/scattermap/#scattermap-marker-symbol) to set the marker symbol.
 ---
 var data = [
 {
-type: "scattermapbox",
+type: "scattermap",
 mode: "markers+text+lines",
 lon: [-75, -80, -50],
 lat: [45, 20, -20],
@@ -21,10 +21,8 @@
 ];
 
 var layout = {
-mapbox: { style: "outdoors", zoom: 0.7 },
+map: { style: "outdoors", zoom: 0.7 },
 showlegend: false, height: 500, width: 700
 };
 
-var config = {mapboxAccessToken: "your access token"};
-
-Plotly.newPlot("myDiv", data, layout, config);
+Plotly.newPlot("myDiv", data, layout);