changes based on py tutorial

Author: mahdis-z

_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area-basic.html

@@ -0,0 +1,41 @@
+---
+name: Mapbox Access Token
+plot_url: https://codepen.io/plotly/embed/WNepqgo/?height=510&theme-id=15263&default-tab=result
+language: plotly_js
+suite: filled-area-on-mapbox
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+    To plot on Mapbox maps with Plotly you `may` need a Mapbox account and a public [Mapbox Access Token](https://www.mapbox.com/studio). See our [Mapbox Map Layers](/javascript/mapbox-layers/) documentation for more information.
+    There are three different ways to show a filled area in a Mapbox map.
+    <ol>
+        <li> Use a [scattermapbox](https://plot.ly/javascript/reference/#scattermapbox) trace and set `fill` attribute to 'toself' </li>
+        <li> Use a Mapbox layout (i.e. by minimally using an empty Scattermapbox trace) and add a GeoJSON layer </li>
+        <li> Use the [Choroplethmapbox](https://plot.ly/javascript/mapbox-county-choropleth/) trace type </li>
+    </ol>
+    <h6> Filled `Scattermapbox` Trace </h6>
+    The following example uses `Scattermapbox` and sets `fill = 'toself'`.
+---
+var data = [
+	{
+		type: "scattermapbox",
+		fill: "toself",
+		lon: [-74, -70, -70, -74],
+		lat: [47, 47, 45, 45],
+		marker: { size: 10, color: "orange" }
+	}
+];
+
+var layout = {
+	mapbox: {
+		style: "stamen-terrain",
+		center: { lon: -73, lat: 46 },
+		zoom: 5
+	},
+	showlegend: false,
+	height: 450,
+	width: 600
+};
+
+Plotly.newPlot("gd", data, layout);

_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-line-mapbox.html

@@ -1,14 +1,14 @@
 ---
 title: JavaScript Graphing Library D3.js-based Fill Area Mapbox | Examples | Plotly
-name: Show an Area, line, or a Symbol on Map
-permalink: javascript/lines-on-mapbox/
-description: How to define a region or a symbol in map using a D3.js-based scattermapbox.
+name: Filled Area on Maps
+permalink: javascript/filled-area-on-mapbox/
+description: How to make an area on Map using a D3.js-based scattermapbox.
 layout: user-guide
-thumbnail: thumbnail/fill-area.jpg
+thumbnail: thumbnail/area.jpg
 language: plotly_js
 has_thumbnail: true
 display_as: maps
 order: 8
 ---
-{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","lines-on-mapbox" | sort: "order" %}
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","filled-area-on-mapbox" | sort: "order" %}
 {% include auto_examples.html examples=examples %}

_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.html

@@ -1,9 +1,9 @@
 ---
-name: Dark tile, Free Token is required
+name: GeoJSON Layers
 plot_url: https://codepen.io/plotly/embed/zYOZVWW/?height=510&theme-id=15263&default-tab=result
 language: plotly_js
-suite: lines-on-mapbox
-order: 2
+suite: filled-area-on-mapbox
+order: 3
 sitemap: false
 arrangement: horizontal
 markdown_content: |

_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area_plotly_js_index.html renamed to _posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html

@@ -0,0 +1,26 @@
+---
+name: Multiple Filled Areas with a Scattermapbox trace
+plot_url: https://codepen.io/plotly/embed/ZEzeVBM/?height=510&theme-id=15263&default-tab=result
+language: plotly_js
+suite: filled-area-on-mapbox
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+    The following example shows how to use `null` in your data to draw multiple filled areas. Such gaps in trace data are unconnected by default, but this can be controlled via the [connectgaps](https://plot.ly/javascript/reference/#scattermapbox-connectgaps) attribute.
+---
+var data = [{
+		type: "scattermapbox",
+		mode: "lines",
+		fill: "toself",
+		lon: [-10, -10, 8, 8, -10, null, 30, 30, 50, 50, 30, null, 100, 100, 80, 80, 100],
+		lat: [30, 6, 6, 30, 30,    null, 20, 30, 30, 20, 20, null, 40, 50, 50, 40, 40]
+		}]
+
+var layout = {
+	mapbox: {style: "stamen-terrain", center: {lon: 40, lat: 20}, 'zoom': 1.5},
+	showlegend: false,
+	width:700, height: 700}
+
+Plotly.newPlot("gd", data, layout)