Skip to content

Commit 7fe5942

Browse files
mahdis-z“mahdis-z”
mahdis-z
authored and
“mahdis-z”
committed
define line and area on mapbox
1 parent adeade5 commit 7fe5942

File tree

5 files changed

+192
-0
lines changed

5 files changed

+192
-0
lines changed

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
name: Stamen-terrain Tile, no Token is Needed
3+
plot_url: https://codepen.io/plotly/embed/WNepqgo/?height=510&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: lines-on-mapbox
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
11+
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.
12+
The following example uses [fill](https://plot.ly/javascript/reference/#scatter-fill) attribute, which sets an area to fill with orange.
13+
---
14+
var data = [
15+
{
16+
type: "scattermapbox",
17+
fill: "toself",
18+
lon: [-74, -70, -70, -74],
19+
lat: [47, 47, 45, 45],
20+
marker: { size: 10, color: "orange" }
21+
}
22+
];
23+
24+
var layout = {
25+
mapbox: {
26+
style: "stamen-terrain",
27+
center: { lon: -73, lat: 46 },
28+
zoom: 5
29+
},
30+
showlegend: false,
31+
height: 450,
32+
width: 600
33+
};
34+
35+
Plotly.newPlot("gd", data, layout);

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: JavaScript Graphing Library D3.js-based Fill Area Mapbox | Examples | Plotly
3+
name: Show an Area, line, or a Symbol on Map
4+
permalink: javascript/lines-on-mapbox/
5+
description: How to define a region or a symbol in map using a D3.js-based scattermapbox.
6+
layout: user-guide
7+
thumbnail: thumbnail/fill-area.jpg
8+
language: plotly_js
9+
has_thumbnail: true
10+
display_as: maps
11+
order: 8
12+
---
13+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","lines-on-mapbox" | sort: "order" %}
14+
{% include auto_examples.html examples=examples %}

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

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
name: Light Tile, Free Token is Needed
3+
plot_url: https://codepen.io/plotly/embed/jONGeZY/?height=510&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: lines-on-mapbox
6+
order: 5
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
---
11+
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/c34aaa0b1b3cddad335173cb7bc0181897201ee6/2011_february_aa_flight_paths.csv', function(err, rows){
12+
function unpack(rows, key) {
13+
return rows.map(function(row) { return row[key]; });}
14+
15+
function getMaxOfArray(numArray) {
16+
return Math.max.apply(null, numArray);
17+
}
18+
var data = [];
19+
var count = unpack(rows, 'cnt');
20+
var startLongitude = unpack(rows, 'start_lon');
21+
var endLongitude = unpack(rows, 'end_lon');
22+
var startLat = unpack(rows, 'start_lat');
23+
var endLat = unpack(rows, 'end_lat');
24+
25+
for ( var i = 0 ; i < count.length; i++ ) {
26+
var opacityValue = count[i]/getMaxOfArray(count);
27+
var result2 = {
28+
type: 'scattermapbox',
29+
lon: [ startLongitude[i] , endLongitude[i] ],
30+
lat: [ startLat[i] , endLat[i] ],
31+
mode: 'lines',
32+
line: {
33+
width: 1,
34+
color: 'blue'
35+
},
36+
opacity: opacityValue
37+
};
38+
data.push(result2);
39+
40+
};
41+
console.log(JSON.stringify(data,null,2))
42+
43+
var layout = {
44+
title: 'Feb. 2011 American Airline flight paths',
45+
showlegend: false,
46+
mapbox: { style: "light", center: { lon: -100, lat: 30 }, zoom: 2 },
47+
showland: true
48+
};
49+
var config = {mapboxAccessToken: "add-your-token-here"};
50+
Plotly.plot(myDiv, data, layout, config);
51+
52+
});

‎_posts/plotly_js/maps/fill-area-and-symbols-on-mapbox/2019-09-02-multi-layers-with-fill-area.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
name: Dark tile, Free Token is required
3+
plot_url: https://codepen.io/plotly/embed/zYOZVWW/?height=510&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: lines-on-mapbox
6+
order: 2
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: "add-your-token-here"};
59+
60+
Plotly.newPlot("graph", data, layout, config);

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

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

0 commit comments

Comments
 (0)