From b9fb16d9c89717f665c7065ccc5d5953da63c6ce Mon Sep 17 00:00:00 2001 From: mahdis-z Date: Tue, 3 Sep 2019 09:22:11 -0400 Subject: [PATCH 01/10] define line and area on mapbox --- .../2019-09-02-fill-area-basic.html | 35 +++++++++++ .../2019-09-02-fill-area_plotly_js_index.html | 14 +++++ .../2019-09-02-line-mapbox.html | 52 ++++++++++++++++ ...019-09-02-multi-layers-with-fill-area.html | 60 +++++++++++++++++++ .../2019-09-02-symbols.html | 31 ++++++++++ 5 files changed, 192 insertions(+) create mode 100644 _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area-basic.html create mode 100644 _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area_plotly_js_index.html create mode 100644 _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-line-mapbox.html create mode 100644 _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-multi-layers-with-fill-area.html create mode 100644 _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-symbols.html diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area-basic.html b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area-basic.html new file mode 100644 index 000000000000..11a76da354ea --- /dev/null +++ b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area-basic.html @@ -0,0 +1,35 @@ +--- +name: Stamen-terrain Tile, no Token is Needed +plot_url: https://codepen.io/plotly/embed/WNepqgo/?height=510&theme-id=15263&default-tab=result +language: plotly_js +suite: lines-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://studio.mapbox.com). See our [Mapbox Map Layers](https://plot.ly/javascript/mapbox-layers/) documentation for more information. + The following example uses [fill](https://plot.ly/javascript/reference/#scatter-fill) attribute, which sets an area to fill with orange. +--- +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); \ No newline at end of file diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area_plotly_js_index.html b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area_plotly_js_index.html new file mode 100644 index 000000000000..8c4620168601 --- /dev/null +++ b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area_plotly_js_index.html @@ -0,0 +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. +layout: user-guide +thumbnail: thumbnail/fill-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" %} +{% include auto_examples.html examples=examples %} diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-line-mapbox.html b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-line-mapbox.html new file mode 100644 index 000000000000..d21408a4317a --- /dev/null +++ b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-line-mapbox.html @@ -0,0 +1,52 @@ +--- +name: Light Tile, Free Token is Needed +plot_url: https://codepen.io/plotly/embed/jONGeZY/?height=510&theme-id=15263&default-tab=result +language: plotly_js +suite: lines-on-mapbox +order: 5 +sitemap: false +arrangement: horizontal +markdown_content: | +--- +Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/c34aaa0b1b3cddad335173cb7bc0181897201ee6/2011_february_aa_flight_paths.csv', function(err, rows){ + function unpack(rows, key) { + return rows.map(function(row) { return row[key]; });} + + function getMaxOfArray(numArray) { + return Math.max.apply(null, numArray); + } + var data = []; + var count = unpack(rows, 'cnt'); + var startLongitude = unpack(rows, 'start_lon'); + var endLongitude = unpack(rows, 'end_lon'); + var startLat = unpack(rows, 'start_lat'); + var endLat = unpack(rows, 'end_lat'); + + for ( var i = 0 ; i < count.length; i++ ) { + var opacityValue = count[i]/getMaxOfArray(count); + var result2 = { + type: 'scattermapbox', + lon: [ startLongitude[i] , endLongitude[i] ], + lat: [ startLat[i] , endLat[i] ], + mode: 'lines', + line: { + width: 1, + color: 'blue' + }, + opacity: opacityValue + }; + data.push(result2); + + }; +console.log(JSON.stringify(data,null,2)) + +var layout = { + title: 'Feb. 2011 American Airline flight paths', + showlegend: false, + mapbox: { style: "light", center: { lon: -100, lat: 30 }, zoom: 2 }, + showland: true + }; +var config = {mapboxAccessToken: "add-your-token-here"}; +Plotly.plot(myDiv, data, layout, config); + +}); \ No newline at end of file diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-multi-layers-with-fill-area.html b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-multi-layers-with-fill-area.html new file mode 100644 index 000000000000..e94a4ff314d5 --- /dev/null +++ b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-multi-layers-with-fill-area.html @@ -0,0 +1,60 @@ +--- +name: Dark tile, Free Token is required +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 +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: "add-your-token-here"}; + +Plotly.newPlot("graph", data, layout, config); diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-symbols.html b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-symbols.html new file mode 100644 index 000000000000..6aacba17dbc1 --- /dev/null +++ b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-symbols.html @@ -0,0 +1,31 @@ +--- +name: Set Marker Symbols +plot_url: https://codepen.io/plotly/embed/PoYjYMy/?height=510&theme-id=15263&default-tab=result +language: plotly_js +suite: lines-on-mapbox +order: 3 +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: "add-your-token-here"}; + +Plotly.newPlot("gd", data, layout, config); From b844f539f099e78a4213dbfe8db88fd28bd1106e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Thu, 19 Sep 2019 15:05:30 -0400 Subject: [PATCH 02/10] move symbols to scattermapbox --- .../scattermapbox/2019-09-02-symbols.html | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 _posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html diff --git a/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html b/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html new file mode 100644 index 000000000000..397e82285178 --- /dev/null +++ b/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html @@ -0,0 +1,31 @@ +--- +name: Set Marker Symbols +plot_url: https://codepen.io/plotly/embed/PoYjYMy/?height=510&theme-id=15263&default-tab=result +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: "add-your-token-here"}; + +Plotly.newPlot("gd", data, layout, config); From 25cd2502b784a40b39ca77ea0d33a5efb785d3a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Thu, 19 Sep 2019 15:24:38 -0400 Subject: [PATCH 03/10] move symbol example to scattermapbox --- .../2019-09-02-symbols.html | 31 ------------------- 1 file changed, 31 deletions(-) delete mode 100644 _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-symbols.html diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-symbols.html b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-symbols.html deleted file mode 100644 index 6aacba17dbc1..000000000000 --- a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-symbols.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -name: Set Marker Symbols -plot_url: https://codepen.io/plotly/embed/PoYjYMy/?height=510&theme-id=15263&default-tab=result -language: plotly_js -suite: lines-on-mapbox -order: 3 -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: "add-your-token-here"}; - -Plotly.newPlot("gd", data, layout, config); From d94e58b8575b1812f5243d1510cb0f8b805ac861 Mon Sep 17 00:00:00 2001 From: mahdis-z Date: Fri, 6 Dec 2019 16:28:59 -0500 Subject: [PATCH 04/10] changes based on py tutorial --- .../2019-09-02-fill-area-basic.html | 35 ------------- .../2019-09-02-line-mapbox.html | 52 ------------------- .../2019-09-02-access-token.html | 41 +++++++++++++++ .../2019-09-02-fill-area_plotly_js_index.html | 10 ++-- .../2019-09-02-geojson_layers.html} | 6 +-- .../2019-09-02-multi-filled-area.html | 26 ++++++++++ 6 files changed, 75 insertions(+), 95 deletions(-) delete mode 100644 _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area-basic.html delete mode 100644 _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-line-mapbox.html create mode 100644 _posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.html rename _posts/plotly_js/maps/{fill-area-and-symbols-on-mapbox => fill-area-on-mapbox}/2019-09-02-fill-area_plotly_js_index.html (52%) rename _posts/plotly_js/maps/{fill-area-and-symbols-on-mapbox/2019-09-02-multi-layers-with-fill-area.html => fill-area-on-mapbox/2019-09-02-geojson_layers.html} (97%) create mode 100644 _posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.html diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area-basic.html b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area-basic.html deleted file mode 100644 index 11a76da354ea..000000000000 --- a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area-basic.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -name: Stamen-terrain Tile, no Token is Needed -plot_url: https://codepen.io/plotly/embed/WNepqgo/?height=510&theme-id=15263&default-tab=result -language: plotly_js -suite: lines-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://studio.mapbox.com). See our [Mapbox Map Layers](https://plot.ly/javascript/mapbox-layers/) documentation for more information. - The following example uses [fill](https://plot.ly/javascript/reference/#scatter-fill) attribute, which sets an area to fill with orange. ---- -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); \ No newline at end of file diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-line-mapbox.html b/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-line-mapbox.html deleted file mode 100644 index d21408a4317a..000000000000 --- a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-line-mapbox.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -name: Light Tile, Free Token is Needed -plot_url: https://codepen.io/plotly/embed/jONGeZY/?height=510&theme-id=15263&default-tab=result -language: plotly_js -suite: lines-on-mapbox -order: 5 -sitemap: false -arrangement: horizontal -markdown_content: | ---- -Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/c34aaa0b1b3cddad335173cb7bc0181897201ee6/2011_february_aa_flight_paths.csv', function(err, rows){ - function unpack(rows, key) { - return rows.map(function(row) { return row[key]; });} - - function getMaxOfArray(numArray) { - return Math.max.apply(null, numArray); - } - var data = []; - var count = unpack(rows, 'cnt'); - var startLongitude = unpack(rows, 'start_lon'); - var endLongitude = unpack(rows, 'end_lon'); - var startLat = unpack(rows, 'start_lat'); - var endLat = unpack(rows, 'end_lat'); - - for ( var i = 0 ; i < count.length; i++ ) { - var opacityValue = count[i]/getMaxOfArray(count); - var result2 = { - type: 'scattermapbox', - lon: [ startLongitude[i] , endLongitude[i] ], - lat: [ startLat[i] , endLat[i] ], - mode: 'lines', - line: { - width: 1, - color: 'blue' - }, - opacity: opacityValue - }; - data.push(result2); - - }; -console.log(JSON.stringify(data,null,2)) - -var layout = { - title: 'Feb. 2011 American Airline flight paths', - showlegend: false, - mapbox: { style: "light", center: { lon: -100, lat: 30 }, zoom: 2 }, - showland: true - }; -var config = {mapboxAccessToken: "add-your-token-here"}; -Plotly.plot(myDiv, data, layout, config); - -}); \ No newline at end of file diff --git a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.html new file mode 100644 index 000000000000..2f31e19e1d6e --- /dev/null +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.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. +
    +
  1. Use a [scattermapbox](https://plot.ly/javascript/reference/#scattermapbox) trace and set `fill` attribute to 'toself'
    2. +
  2. Use a Mapbox layout (i.e. by minimally using an empty Scattermapbox trace) and add a GeoJSON layer
    3. +
  3. Use the [Choroplethmapbox](https://plot.ly/javascript/mapbox-county-choropleth/) trace type
    4. +
+
Filled `Scattermapbox` Trace
+ 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); diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area_plotly_js_index.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html similarity index 52% rename from _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area_plotly_js_index.html rename to _posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html index 8c4620168601..0b4efedaa545 100644 --- a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-fill-area_plotly_js_index.html +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.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 %} diff --git a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-multi-layers-with-fill-area.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-geojson_layers.html similarity index 97% rename from _posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-multi-layers-with-fill-area.html rename to _posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-geojson_layers.html index e94a4ff314d5..12c6c0d0b18f 100644 --- a/_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-multi-layers-with-fill-area.html +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-geojson_layers.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: | diff --git a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.html new file mode 100644 index 000000000000..dfca8724d5c6 --- /dev/null +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.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) From f3f2e5ee5b6729b64def125ec11d05bb379d17c8 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Fri, 20 Dec 2019 01:04:13 -0500 Subject: [PATCH 05/10] map examples updated to have inline charts once branch hits master --- .../maps/fill-area-on-mapbox/2019-09-02-access-token.html | 3 +-- .../fill-area-on-mapbox/2019-09-02-multi-filled-area.html | 3 +-- .../maps/mapbox-layers/2019-08-16-Open-street-map.html | 4 ++++ _posts/plotly_js/maps/mapbox-layers/2019-08-16-white-bg.html | 2 +- _posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html | 3 +-- 5 files changed, 8 insertions(+), 7 deletions(-) diff --git a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.html index 2f31e19e1d6e..f76efe7ec7d2 100644 --- a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.html +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.html @@ -1,6 +1,5 @@ --- 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 @@ -38,4 +37,4 @@
Filled `Scattermapbox` Trace
width: 600 }; -Plotly.newPlot("gd", data, layout); +Plotly.newPlot("myDiv", data, layout); diff --git a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.html index dfca8724d5c6..15babf1ef7cc 100644 --- a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.html +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.html @@ -1,6 +1,5 @@ --- 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 @@ -23,4 +22,4 @@ showlegend: false, width:700, height: 700} -Plotly.newPlot("gd", data, layout) +Plotly.newPlot("myDiv", data, layout) diff --git a/_posts/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html b/_posts/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html index 813856cdaa71..35adfefbcbce 100644 --- a/_posts/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html +++ b/_posts/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html @@ -34,6 +34,10 @@ margin: { r: 0, t: 0, b: 0, l: 0 } }; +<<<<<<< HEAD Plotly.newPlot('myDiv', data, layout); +======= + Plotly.newPlot("myDiv", data, layout); +>>>>>>> map examples updated to have inline charts once branch hits master } ); diff --git a/_posts/plotly_js/maps/mapbox-layers/2019-08-16-white-bg.html b/_posts/plotly_js/maps/mapbox-layers/2019-08-16-white-bg.html index f09772e8c492..7bb5032b00f6 100644 --- a/_posts/plotly_js/maps/mapbox-layers/2019-08-16-white-bg.html +++ b/_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); } ); diff --git a/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html b/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html index 397e82285178..792a88ab5947 100644 --- a/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html +++ b/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html @@ -1,6 +1,5 @@ --- name: Set Marker Symbols -plot_url: https://codepen.io/plotly/embed/PoYjYMy/?height=510&theme-id=15263&default-tab=result language: plotly_js suite: scattermapbox order: 5 @@ -28,4 +27,4 @@ var config = {mapboxAccessToken: "add-your-token-here"}; -Plotly.newPlot("gd", data, layout, config); +Plotly.newPlot("myDiv", data, layout, config); From c847dc8cbeab2079a3ffd671de1284adab2b0588 Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Wed, 8 Jan 2020 16:09:26 -0500 Subject: [PATCH 06/10] fixup --- .../maps/mapbox-layers/2019-08-16-Open-street-map.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/_posts/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html b/_posts/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html index 35adfefbcbce..71d805ca7728 100644 --- a/_posts/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html +++ b/_posts/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html @@ -34,10 +34,6 @@ margin: { r: 0, t: 0, b: 0, l: 0 } }; -<<<<<<< HEAD - Plotly.newPlot('myDiv', data, layout); -======= Plotly.newPlot("myDiv", data, layout); ->>>>>>> map examples updated to have inline charts once branch hits master } ); From aca5f341724984286a056e0cfa854f4570db71c4 Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Wed, 8 Jan 2020 16:11:26 -0500 Subject: [PATCH 07/10] tokens --- .../maps/fill-area-on-mapbox/2019-09-02-geojson_layers.html | 2 +- _posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-geojson_layers.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-geojson_layers.html index 12c6c0d0b18f..035098013950 100644 --- a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-geojson_layers.html +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-geojson_layers.html @@ -55,6 +55,6 @@ height: 450, width: 700 }; -var config = {mapboxAccessToken: "add-your-token-here"}; +var config = {mapboxAccessToken: "your access token"}; Plotly.newPlot("graph", data, layout, config); diff --git a/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html b/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html index 792a88ab5947..5621baaa39a5 100644 --- a/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html +++ b/_posts/plotly_js/maps/scattermapbox/2019-09-02-symbols.html @@ -25,6 +25,6 @@ showlegend: false, height: 500, width: 700 }; -var config = {mapboxAccessToken: "add-your-token-here"}; +var config = {mapboxAccessToken: "your access token"}; Plotly.newPlot("myDiv", data, layout, config); From df85a9bc78d3d285f6be2acfa85786a6db1064dd Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Wed, 8 Jan 2020 16:21:00 -0500 Subject: [PATCH 08/10] fix ci --- .../2019-09-02-fill-area_plotly_js_index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html index 0b4efedaa545..c5cf3520725d 100644 --- a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html @@ -1,5 +1,4 @@ --- -title: JavaScript Graphing Library D3.js-based Fill Area Mapbox | Examples | Plotly 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. From 167cdc3b9cb5d6ab8eb33c518db3a9887a49931c Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Wed, 8 Jan 2020 16:31:40 -0500 Subject: [PATCH 09/10] fix ci --- .../2019-09-02-fill-area_plotly_js_index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html index c5cf3520725d..852c01b32a4d 100644 --- a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html @@ -7,7 +7,7 @@ language: plotly_js has_thumbnail: true display_as: maps -order: 8 +order: 10 --- {% assign examples = site.posts | where:"language","plotly_js" | where:"suite","filled-area-on-mapbox" | sort: "order" %} {% include auto_examples.html examples=examples %} From 88425b7c8cfa9f649e0218a2cd86c2ee317e66fe Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Wed, 8 Jan 2020 16:36:47 -0500 Subject: [PATCH 10/10] fix ci --- .../2019-09-02-fill-area_plotly_js_index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html index 852c01b32a4d..16f2c3ed7a07 100644 --- a/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html +++ b/_posts/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html @@ -10,4 +10,4 @@ order: 10 --- {% assign examples = site.posts | where:"language","plotly_js" | where:"suite","filled-area-on-mapbox" | sort: "order" %} -{% include auto_examples.html examples=examples %} +{% include posts/auto_examples.html examples=examples %}