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..f76efe7ec7d2 --- /dev/null +++ b/_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. +
    +
  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("myDiv", data, layout); 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 new file mode 100644 index 000000000000..16f2c3ed7a07 --- /dev/null +++ b/_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 %} 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 new file mode 100644 index 000000000000..035098013950 --- /dev/null +++ b/_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); 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..15babf1ef7cc --- /dev/null +++ b/_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) 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..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,6 +34,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/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 new file mode 100644 index 000000000000..5621baaa39a5 --- /dev/null +++ b/_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);