Skip to content

Commit b89a3b4

Browse files
Mahdis-zJoseph Damibanicolaskruchten
committed
define line and area on mapbox [JS] (#1490)
* define line and area on mapbox * move symbols to scattermapbox * move symbol example to scattermapbox * changes based on py tutorial * map examples updated to have inline charts once branch hits master * fixup * tokens * fix ci * fix ci * fix ci Co-authored-by: Joseph Damiba <[email protected]> Co-authored-by: Nicolas Kruchten <[email protected]>
1 parent 442da95 commit b89a3b4

7 files changed

+170
-2
lines changed

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
name: Mapbox Access Token
3+
language: plotly_js
4+
suite: filled-area-on-mapbox
5+
order: 1
6+
sitemap: false
7+
arrangement: horizontal
8+
markdown_content: |
9+
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.
10+
There are three different ways to show a filled area in a Mapbox map.
11+
<ol>
12+
<li> Use a [scattermapbox](https://plot.ly/javascript/reference/#scattermapbox) trace and set `fill` attribute to 'toself' </li>
13+
<li> Use a Mapbox layout (i.e. by minimally using an empty Scattermapbox trace) and add a GeoJSON layer </li>
14+
<li> Use the [Choroplethmapbox](https://plot.ly/javascript/mapbox-county-choropleth/) trace type </li>
15+
</ol>
16+
<h6> Filled `Scattermapbox` Trace </h6>
17+
The following example uses `Scattermapbox` and sets `fill = 'toself'`.
18+
---
19+
var data = [
20+
{
21+
type: "scattermapbox",
22+
fill: "toself",
23+
lon: [-74, -70, -70, -74],
24+
lat: [47, 47, 45, 45],
25+
marker: { size: 10, color: "orange" }
26+
}
27+
];
28+
29+
var layout = {
30+
mapbox: {
31+
style: "stamen-terrain",
32+
center: { lon: -73, lat: 46 },
33+
zoom: 5
34+
},
35+
showlegend: false,
36+
height: 450,
37+
width: 600
38+
};
39+
40+
Plotly.newPlot("myDiv", data, layout);

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
name: Filled Area on Maps
3+
permalink: javascript/filled-area-on-mapbox/
4+
description: How to make an area on Map using a D3.js-based scattermapbox.
5+
layout: user-guide
6+
thumbnail: thumbnail/area.jpg
7+
language: plotly_js
8+
has_thumbnail: true
9+
display_as: maps
10+
order: 10
11+
---
12+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","filled-area-on-mapbox" | sort: "order" %}
13+
{% include posts/auto_examples.html examples=examples %}

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

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
name: GeoJSON Layers
3+
plot_url: https://codepen.io/plotly/embed/zYOZVWW/?height=510&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: filled-area-on-mapbox
6+
order: 3
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
11+
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).
12+
---
13+
var data = [{
14+
type: "scattermapbox", mode: "markers",
15+
lon: [-73.605], lat: [45.51],
16+
marker: { size: 20, color: ["cyan"] }
17+
}];
18+
19+
var layout = {
20+
mapbox: {
21+
style: "dark",
22+
center: { lon: -73.6, lat: 45.515},
23+
zoom: 12, layers: [{
24+
source: {
25+
type: "FeatureCollection",
26+
features: [{
27+
type: "Feature",
28+
geometry: {
29+
type: "MultiPolygon",
30+
coordinates: [[[
31+
[-73.606352888, 45.507489991], [-73.606133883, 45.50687600],
32+
[-73.605905904, 45.506773980], [-73.603533905, 45.505698946],
33+
[-73.602475870, 45.506856969], [-73.600031904, 45.505696003],
34+
[-73.599379992, 45.505389066], [-73.599119902, 45.505632008],
35+
[-73.598896977, 45.505514039], [-73.598783894, 45.505617001],
36+
[-73.591308727, 45.516246185], [-73.591380782, 45.516280145],
37+
[-73.596778656, 45.518690062], [-73.602796770, 45.521348046],
38+
[-73.612239983, 45.525564037], [-73.612422919, 45.525642061],
39+
[-73.617229085, 45.527751983], [-73.617279234, 45.527774160],
40+
[-73.617304713, 45.527741334], [-73.617492052, 45.527498362],
41+
[-73.617533258, 45.527512253], [-73.618074188, 45.526759105],
42+
[-73.618271651, 45.526500673], [-73.618446320, 45.526287943],
43+
[-73.618968507, 45.525698560], [-73.619388002, 45.525216750],
44+
[-73.619532966, 45.525064183], [-73.619686662, 45.524889290],
45+
[-73.619787038, 45.524770086], [-73.619925742, 45.524584939],
46+
[-73.619954486, 45.524557690], [-73.620122362, 45.524377961],
47+
[-73.620201713, 45.524298907], [-73.620775593, 45.523650879]
48+
]]]
49+
}
50+
}]
51+
},
52+
type: "fill", below: "water", color: "teal"
53+
}]
54+
},
55+
height: 450, width: 700
56+
};
57+
58+
var config = {mapboxAccessToken: "your access token"};
59+
60+
Plotly.newPlot("graph", data, layout, config);

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
name: Multiple Filled Areas with a Scattermapbox trace
3+
language: plotly_js
4+
suite: filled-area-on-mapbox
5+
order: 2
6+
sitemap: false
7+
arrangement: horizontal
8+
markdown_content: |
9+
10+
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.
11+
---
12+
var data = [{
13+
type: "scattermapbox",
14+
mode: "lines",
15+
fill: "toself",
16+
lon: [-10, -10, 8, 8, -10, null, 30, 30, 50, 50, 30, null, 100, 100, 80, 80, 100],
17+
lat: [30, 6, 6, 30, 30, null, 20, 30, 30, 20, 20, null, 40, 50, 50, 40, 40]
18+
}]
19+
20+
var layout = {
21+
mapbox: {style: "stamen-terrain", center: {lon: 40, lat: 20}, 'zoom': 1.5},
22+
showlegend: false,
23+
width:700, height: 700}
24+
25+
Plotly.newPlot("myDiv", data, layout)

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,6 @@
3434
margin: { r: 0, t: 0, b: 0, l: 0 }
3535
};
3636

37-
Plotly.newPlot('myDiv', data, layout);
37+
Plotly.newPlot("myDiv", data, layout);
3838
}
3939
);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,6 @@
4545
margin: { r: 0, t: 0, b: 0, l: 0 }
4646
};
4747

48-
Plotly.newPlot('myDiv', data, layout);
48+
Plotly.newPlot("myDiv", data, layout);
4949
}
5050
);

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

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
name: Set Marker Symbols
3+
language: plotly_js
4+
suite: scattermapbox
5+
order: 5
6+
sitemap: false
7+
arrangement: horizontal
8+
markdown_content: |
9+
This example uses [symbol attribute](https://plot.ly/javascript/reference/#scattermapbox-marker-symbol) to set the marker symbol.
10+
---
11+
var data = [
12+
{
13+
type: "scattermapbox",
14+
mode: "markers+text+lines",
15+
lon: [-75, -80, -50],
16+
lat: [45, 20, -20],
17+
marker: { size: 20, symbol: ["bus", "harbor", "airport"] },
18+
text: ["Bus", "Harbor", "Airport"],
19+
textposition: "bottom right"
20+
}
21+
];
22+
23+
var layout = {
24+
mapbox: { style: "outdoors", zoom: 0.7 },
25+
showlegend: false, height: 500, width: 700
26+
};
27+
28+
var config = {mapboxAccessToken: "your access token"};
29+
30+
Plotly.newPlot("myDiv", data, layout, config);

0 commit comments

Comments
 (0)