define line and area on mapbox [JS]

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

@@ -0,0 +1,40 @@
+---
+name: Mapbox Access Token
+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("myDiv", data, layout);

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

@@ -0,0 +1,13 @@
+---
+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/area.jpg
+language: plotly_js
+has_thumbnail: true
+display_as: maps
+order: 10
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","filled-area-on-mapbox" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}

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

@@ -0,0 +1,60 @@
+---
+name: GeoJSON Layers
+plot_url: https://codepen.io/plotly/embed/zYOZVWW/?height=510&theme-id=15263&default-tab=result
+language: plotly_js
+suite: filled-area-on-mapbox
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+    This example shows an area below [water layer](https://plot.ly/javascript/reference/#choroplethmapbox-below), and sets geojson object of type feature and geometries of type [MultiPolygon](https://plot.ly/javascript/reference/#choroplethmapbox-geojson).
+---
+var data = [{
+    type: "scattermapbox", mode: "markers",
+    lon: [-73.605], lat: [45.51],
+    marker: { size: 20, color: ["cyan"] }
+  }];
+
+var layout = {
+  mapbox: {
+    style: "dark",
+    center: { lon: -73.6, lat: 45.515},
+    zoom: 12, layers: [{
+        source: {
+          type: "FeatureCollection",
+          features: [{
+              type: "Feature",
+              geometry: {
+                type: "MultiPolygon",
+                coordinates: [[[
+                      [-73.606352888, 45.507489991], [-73.606133883, 45.50687600],
+                      [-73.605905904, 45.506773980], [-73.603533905, 45.505698946],
+                      [-73.602475870, 45.506856969], [-73.600031904, 45.505696003],
+                      [-73.599379992, 45.505389066], [-73.599119902, 45.505632008],
+                      [-73.598896977, 45.505514039], [-73.598783894, 45.505617001],
+                      [-73.591308727, 45.516246185], [-73.591380782, 45.516280145],
+                      [-73.596778656, 45.518690062], [-73.602796770, 45.521348046],
+                      [-73.612239983, 45.525564037], [-73.612422919, 45.525642061],
+                      [-73.617229085, 45.527751983], [-73.617279234, 45.527774160],
+                      [-73.617304713, 45.527741334], [-73.617492052, 45.527498362],
+                      [-73.617533258, 45.527512253], [-73.618074188, 45.526759105],
+                      [-73.618271651, 45.526500673], [-73.618446320, 45.526287943],
+                      [-73.618968507, 45.525698560], [-73.619388002, 45.525216750],
+                      [-73.619532966, 45.525064183], [-73.619686662, 45.524889290],
+                      [-73.619787038, 45.524770086], [-73.619925742, 45.524584939],
+                      [-73.619954486, 45.524557690], [-73.620122362, 45.524377961],
+                      [-73.620201713, 45.524298907], [-73.620775593, 45.523650879]
+                    ]]]
+              }
+            }]
+        },
+        type: "fill", below: "water", color: "teal"
+      }]
+  },
+  height: 450, width: 700
+};
+
+var config = {mapboxAccessToken: "your access token"};
+
+Plotly.newPlot("graph", data, layout, config);

_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.html

@@ -0,0 +1,25 @@
+---
+name: Multiple Filled Areas with a Scattermapbox trace
+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("myDiv", data, layout)

_posts/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html

@@ -34,6 +34,6 @@
 			margin: { r: 0, t: 0, b: 0, l: 0 }
 		};
 
-		Plotly.newPlot('myDiv', data, layout);
+		Plotly.newPlot("myDiv", data, layout);
 	}
 );

_posts/plotly_js/maps/mapbox-layers/2019-08-16-white-bg.html

@@ -45,6 +45,6 @@
 	margin: { r: 0, t: 0, b: 0, l: 0 }
 };
 
-Plotly.newPlot('myDiv', data, layout);
+Plotly.newPlot("myDiv", data, layout);
 	}
 );

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

@@ -0,0 +1,30 @@
+---
+name: Set Marker Symbols
+language: plotly_js
+suite: scattermapbox
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+     This example uses [symbol attribute](https://plot.ly/javascript/reference/#scattermapbox-marker-symbol) to set the marker symbol.
+---
+var data = [
+	{
+		type: "scattermapbox",
+		mode: "markers+text+lines",
+		lon: [-75, -80, -50],
+		lat: [45, 20, -20],
+		marker: { size: 20, symbol: ["bus", "harbor", "airport"] },
+		text: ["Bus", "Harbor", "Airport"],
+		textposition: "bottom right"
+	}
+];
+
+var layout = {
+	mapbox: { style: "outdoors", zoom: 0.7 },
+	showlegend: false, height: 500, width: 700
+};
+
+var config = {mapboxAccessToken: "your access token"};
+
+Plotly.newPlot("myDiv", data, layout, config);