Skip to content

Commit

Permalink
Merge a912f1d into b3bc6cd
Browse files Browse the repository at this point in the history
  • Loading branch information
@akacarlyann
akacarlyann committed Apr 22, 2018
2 parents b3bc6cd + a912f1d commit 4aad2e9
Show file tree
Hide file tree
Showing 8 changed files with 830 additions and 3 deletions.
179 changes: 179 additions & 0 deletions examples/notebooks/linestring-viz.ipynb
View file
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
}
132 changes: 132 additions & 0 deletions mapboxgl/templates/linestring.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
{% 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": "{{ labelHaloColor }}",
"text-halo-width": generatePropertyExpression('interpolate', 'zoom', [[0,{{ labelHaloWidth }}], [18,5* {{ labelHaloWidth }}]]),
"text-color": "{{ labelColor }}"
}
}, "{{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

0 comments on commit 4aad2e9

Please sign in to comment.