Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support linestring #92

Merged
merged 22 commits into from
Apr 26, 2018
+901 −4
Merged

Support linestring #92

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
2f6fbdf
Add LinestringViz class with associated geojson and vector-based temp…
Mar 29, 2018
b1fe48c
Add data-driven styling to vector linestring viz
Apr 2, 2018
07bf51e
Example linestring viz and vector linestring viz
Apr 2, 2018
116cb05
Merge https://github.com/mapbox/mapboxgl-jupyter
Apr 14, 2018
d6014e1
Merge branch 'master' into support-linestring
Apr 14, 2018
3d6b878
Refine linestring iz with data-driven styles for line width; update v…
Apr 15, 2018
03db8aa
Testing linestring viz examples (further refinements pending)
Apr 15, 2018
e40d776
Add tests for numeric_map, LinestringViz
Apr 16, 2018
70032a3
Delete out.geojson
ryanbaumann Apr 4, 2018
013daae
Fix link to example data (#91)
bnaul Apr 7, 2018
be7d60a
Refine linestring iz with data-driven styles for line width; update v…
Apr 15, 2018
7743631
Testing linestring viz examples (further refinements pending)
Apr 15, 2018
02bca0e
Add tests for numeric_map, LinestringViz
Apr 16, 2018
c97cd13
Merge https://github.com/mapbox/mapboxgl-jupyter
akacarlyann Apr 17, 2018
39de386
Merge branch 'master' into support-linestring
akacarlyann Apr 17, 2018
0ada922
Fix utils import for test_utils.py
akacarlyann Apr 17, 2018
4d3be20
Merge remote-tracking branch 'remotes/origin/support-linestring' into…
akacarlyann Apr 17, 2018
c39306b
Update linestring viz notebook
akacarlyann Apr 17, 2018
370933f
Add line_width_property to vector LinestringViz test
akacarlyann Apr 17, 2018
3e9fac4
Update label style to match CircleViz properties
akacarlyann Apr 22, 2018
a912f1d
Merge branch 'master' into support-linestring
akacarlyann Apr 22, 2018
9bf8311
Add linestring viz docs
akacarlyann Apr 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 179 additions & 0 deletions examples/notebooks/linestring-viz.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Mapboxgl Python Library for location data visualizaiton\n",
"\n",
"https://github.com/mapbox/mapboxgl-jupyter\n",
"\n",
"\n",
"# Linestring Visualizations"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import random\n",
"import os\n",
"\n",
"from mapboxgl.viz import LinestringViz\n",
"from mapboxgl.utils import create_color_stops, create_numeric_stops\n",
"\n",
"# Must be a public token, starting with `pk`\n",
"token = os.getenv('MAPBOX_ACCESS_TOKEN')\n",
"\n",
"# JSON join-data object\n",
"data = [{\"elevation\": x, \"weight\": random.randint(0,100)} for x in range(0, 21000, 10)]\n",
"\n",
"# GeoJSON data object\n",
"geojson = {\n",
" \"type\": \"FeatureCollection\",\n",
" \"features\": [{\n",
" \"type\": \"Feature\",\n",
" \"id\": \"01\", \n",
" \"properties\": {\"sample\": 50, \"weight\": 1}, \n",
" \"geometry\": {\n",
" \"type\": \"LineString\",\n",
" \"coordinates\": [\n",
" [-122.4833858013153, 37.829607404976734],\n",
" [-122.4830961227417, 37.82932776098012],\n",
" [-122.4830746650696, 37.82932776098012],\n",
" [-122.48218417167662, 37.82889558180985],\n",
" [-122.48218417167662, 37.82890193740421],\n",
" [-122.48221099376678, 37.82868372835086],\n",
" [-122.4822163581848, 37.82868372835086],\n",
" [-122.48205006122589, 37.82801003030873]\n",
" ]\n",
" }\n",
" }, {\n",
" \"type\": \"Feature\",\n",
" \"id\": \"02\",\n",
" \"properties\": {\"sample\": 500, \"weight\": 2},\n",
" \"geometry\": {\n",
" \"type\": \"LineString\",\n",
" \"coordinates\": [\n",
" [-122.4833858013153, 37.929607404976734],\n",
" [-122.4830961227417, 37.83]\n",
" ]\n",
" }\n",
" }, {\n",
" \"type\": \"Feature\",\n",
" \"properties\": {\"sample\": 5000, \"weight\": 1},\n",
" \"geometry\": {\n",
" \"type\": \"LineString\",\n",
" \"coordinates\": [\n",
" [-122.48369693756104, 37.83381888486939],\n",
" [-122.48348236083984, 37.83317489144141],\n",
" [-122.48339653015138, 37.83270036637107],\n",
" [-122.48356819152832, 37.832056363179625],\n",
" [-122.48404026031496, 37.83114119107971],\n",
" [-122.48404026031496, 37.83049717427869],\n",
" [-122.48348236083984, 37.829920943955045],\n",
" [-122.48356819152832, 37.82954808664175],\n",
" [-122.48507022857666, 37.82944639795659],\n",
" [-122.48610019683838, 37.82880236636284],\n",
" [-122.48695850372314, 37.82931081282506],\n",
" [-122.48700141906738, 37.83080223556934],\n",
" [-122.48751640319824, 37.83168351665737],\n",
" [-122.48803138732912, 37.832158048267786],\n",
" [-122.48888969421387, 37.83297152392784],\n",
" [-122.48987674713133, 37.83263257682617],\n",
" [-122.49043464660643, 37.832937629287755],\n",
" [-122.49125003814696, 37.832429207817725],\n",
" [-122.49163627624512, 37.832564787218985],\n",
" [-122.49223709106445, 37.83337825839438],\n",
" [-122.49378204345702, 37.83368330777276]\n",
" ]\n",
" }\n",
" }]\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## GeoJSON Test Linestring Source"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"scrolled": false
},
"outputs": [],
"source": [
"# make viz with GeoJSON source\n",
"viz = LinestringViz(geojson, \n",
" color_property='sample',\n",
" color_stops=create_color_stops([0, 50, 100, 500, 1500], colors='Blues'),\n",
" line_stroke='--',\n",
" line_width_property='weight',\n",
" line_width_stops=create_numeric_stops([0, 1, 2, 3, 4, 5], 0, 10),\n",
" opacity=0.8,\n",
" center=(-122.48, 37.83),\n",
" zoom=16,\n",
" below_layer='waterway-label'\n",
" )\n",
"viz.show()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Vector Linestring Source (Topography)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"viz = LinestringViz(data, \n",
" vector_url='mapbox://mapbox.mapbox-terrain-v2',\n",
" vector_layer_name='contour',\n",
" vector_join_property='ele',\n",
" data_join_property='elevation',\n",
" color_property='elevation',\n",
" color_stops=create_color_stops([0, 25, 50, 75, 100], colors='YlOrRd'),\n",
" line_stroke='-',\n",
" line_width_default=2,\n",
" opacity=0.8,\n",
" center=(-122.48, 37.83),\n",
" zoom=16,\n",
" below_layer='waterway-label'\n",
" )\n",
"viz.show()"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.1"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
131 changes: 131 additions & 0 deletions mapboxgl/templates/linestring.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
{% extends "base.html" %}

<!-- update legend item key style -->
{% block extra_css %}
<style type='text/css'>
.legend div span { border-radius: 20%; height: 4px; margin-bottom: 3px; }
</style>
{% endblock extra_css %}

{% block legend %}

var legend = document.getElementById('legend');

{% if colorStops and colorProperty and widthProperty %}
{% if colorProperty != widthProperty %}
calcCircleColorLegend({{ colorStops }}, "{{ colorProperty }} vs. {{ widthProperty }}");
{% else %}
calcCircleColorLegend({{ colorStops }}, "{{ colorProperty }}");
{% endif %}
{% elif colorStops and colorProperty %}
calcCircleColorLegend({{ colorStops }}, "{{ colorProperty }}");
{% else %}
document.getElementById('legend').style.visibility='hidden';
{% endif %}

{% endblock legend %}

{% block map %}

map.on('style.load', function() {

{% block linestring %}

// Add geojson data source
map.addSource("data", {
"type": "geojson",
"data": {{ geojson_data }},
"buffer": 1,
"maxzoom": 14
});

// Add data layer
map.addLayer({
"id": "linestring",
"source": "data",
"type": "line",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
{% if lineDashArray %}
"line-dasharray": {{ lineDashArray }},
{% endif %}
{% if colorProperty %}
"line-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
{% else %}
"line-color": "{{ defaultColor }}",
{% endif %}
{% if widthProperty %}
"line-width": generatePropertyExpression("{{ widthType }}", "{{ widthProperty }}", {{ widthStops }}, "{{ defaultWidth }}"),
{% else %}
"line-width": {{ defaultWidth }},
{% endif %}
"line-opacity": {{ opacity }}
}
}, "{{ belowLayer }}" );

// Add label layer
map.addLayer({
"id": "linestring-label",
"source": "data",
"type": "symbol",
"layout": {
{% if labelProperty %}
"text-field": "{{ labelProperty }}",
{% endif %}
"text-size" : generateInterpolateExpression('zoom', [[0,8],[22,16]] ),
"text-offset": [0,-1]
},
"paint": {
"text-halo-color": "white",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make text-color, halo-color, halo-width, and text-size adjustable to math other visuals labels. https://github.com/mapbox/mapboxgl-jupyter/blob/master/mapboxgl/templates/circle.html#L38

"text-halo-width": 1
}
}, "{{belowLayer}}" );

{% endblock linestring %}

// Create a popup
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});

{% block linestring_popup %}

// Show the popup on mouseover
map.on('mousemove', 'linestring', function(e) {
map.getCanvas().style.cursor = 'pointer';

let f = e.features[0];
let popup_html = '<div>';

for (key in f.properties) {
popup_html += '<li><b> ' + key + '</b>: ' + f.properties[key] + ' </li>'
}

popup_html += '</div>'
popup.setLngLat(e.lngLat)
.setHTML(popup_html)
.addTo(map);
});

{% endblock linestring_popup %}

map.on('mouseleave', 'linestring', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});

// Fly to on click
map.on('click', 'linestring', function(e) {
map.flyTo({
center: e.lngLat,
zoom: map.getZoom() + 1
});
});

});

{% endblock map %}
Loading