Skip to content

[WIP] Support of multiple layers. #126

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

Closed
emakarov wants to merge 3 commits into from
Closed

[WIP] Support of multiple layers. #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7dea177
multiple layers initial
Oct 1, 2018
587fe80
fix for records to filename
Oct 1, 2018
2e48b44
choropletch layers added
Oct 2, 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
1,475 changes: 1,462 additions & 13 deletions examples/notebooks/point-viz-categorical-example.ipynb
View file
Open in desktop

Large diffs are not rendered by default.

946 changes: 935 additions & 11 deletions examples/notebooks/point-viz-types-example.ipynb
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions mapboxgl/templates.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
)


def format(viz, **kwargs):
template = env.get_template('{}.html'.format(viz))
def format(viz, from_string=False, template_str=None, **kwargs):
if from_string:
template = env.from_string(template_str)
else:
template = env.get_template('{}.html'.format(viz))
return template.render(viz=viz, **kwargs)
123 changes: 2 additions & 121 deletions mapboxgl/templates/choropleth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{% endblock extra_css %}

{% block legend %}

{% if showLegend %}
{% if extrudeChoropleth %}
{% if colorStops and colorProperty and heightProperty %}
Expand All @@ -27,125 +27,6 @@

{% block map %}

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

{% block choropleth %}

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

// Add data layer
map.addLayer({
"id": "choropleth-fill",
"source": "data",
"type": "fill",
"paint": {
"fill-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
"fill-opacity": {{ opacity }}
}
}, "{{ belowLayer }}" );

// Add border layer
map.addLayer({
"id": "choropleth-line",
"source": "data",
"type": "line",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
{% if lineDashArray %}
"line-dasharray": {{ lineDashArray }},
{% endif %}
"line-color": "{{ lineColor }}",
"line-width": {{ lineWidth }},
"line-opacity": {{ opacity }}
}
}, "{{ belowLayer }}" );

// Add label layer
map.addLayer({
"id": "choropleth-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",
"text-halo-width": 1
}
}, "{{ belowLayer }}" );

// Optional extrusion layer
{% if extrudeChoropleth %}

map.addLayer({
id: "choropleth-extrusion",
type: "fill-extrusion",
source: "data",
paint: {
"fill-extrusion-opacity": {{ opacity }},
"fill-extrusion-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
"fill-extrusion-height": generatePropertyExpression("{{ heightType }}", "{{ heightProperty }}", {{ heightStops }}, {{ defaultHeight }}),
}
}, "{{ belowLayer }}");

{% endif %}


{% endblock choropleth %}

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

{% block choropleth_popup %}

// Show the popup on mouseover
map.on('mousemove', 'choropleth-fill', 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 choropleth_popup %}

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

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

});
{% include "choropleth_layers.html" %}

{% endblock map %}
120 changes: 120 additions & 0 deletions mapboxgl/templates/choropleth_layers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
map.on('style.load', function() {

{% block choropleth %}

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

// Add data layer
map.addLayer({
"id": "choropleth-fill" + "_" + "{{uid}}",
"source": "data" + "_" + "{{uid}}",
"type": "fill",
"paint": {
"fill-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
"fill-opacity": {{ opacity }}
}
}, "{{ belowLayer }}" );

// Add border layer
map.addLayer({
"id": "choropleth-line" + "_" + "{{uid}}",
"source": "data" + "_" + "{{uid}}",
"type": "line",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
{% if lineDashArray %}
"line-dasharray": {{ lineDashArray }},
{% endif %}
"line-color": "{{ lineColor }}",
"line-width": {{ lineWidth }},
"line-opacity": {{ opacity }}
}
}, "{{ belowLayer }}" );

// Add label layer
map.addLayer({
"id": "choropleth-label" + "_" + "{{uid}}",
"source": "data" + "_" + "{{uid}}",
"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",
"text-halo-width": 1
}
}, "{{ belowLayer }}" );

// Optional extrusion layer
{% if extrudeChoropleth %}

map.addLayer({
id: "choropleth-extrusion" + "_" + "{{uid}}",
type: "fill-extrusion",
source: "data" + "_" + "{{uid}}",
paint: {
"fill-extrusion-opacity": {{ opacity }},
"fill-extrusion-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}"),
"fill-extrusion-height": generatePropertyExpression("{{ heightType }}", "{{ heightProperty }}", {{ heightStops }}, {{ defaultHeight }}),
}
}, "{{ belowLayer }}");

{% endif %}


{% endblock choropleth %}

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

{% block choropleth_popup %}

// Show the popup on mouseover
map.on('mousemove', 'choropleth-fill' + "_" + "{{uid}}", 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 choropleth_popup %}

map.on('mouseleave', 'choropleth-fill' + "_" + "{{uid}}", function() {
map.getCanvas().style.cursor = '';
popup.remove();
});

// Fly to on click
map.on('click', 'choropleth-fill' + "_" + "{{uid}}", function(e) {
map.flyTo({
center: e.lngLat,
zoom: map.getZoom() + 1
});
});

});
89 changes: 2 additions & 87 deletions mapboxgl/templates/circle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,96 +14,11 @@
calcColorLegend({{ colorStops }} , "{{ colorProperty }}");
{% endif %}
{% endif %}

{% endblock legend %}

{% block map %}

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

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

map.addLayer({
"id": "label",
"source": "data",
"type": "symbol",
"maxzoom": {{ maxzoom }},
"minzoom": {{ minzoom }},
"layout": {
{% if labelProperty %}
"text-field": "{{ labelProperty }}",
{% endif %}
"text-size" : generateInterpolateExpression('zoom', [[0, {{ labelSize }}],[22, 3* {{ labelSize }}]] ),
"text-offset": [0,-1]
},
"paint": {
"text-halo-color": "{{ labelHaloColor }}",
"text-halo-width": generatePropertyExpression('interpolate', 'zoom', [[0,{{ labelHaloWidth }}], [18,5* {{ labelHaloWidth }}]]),
"text-color": "{{ labelColor }}"
}
}, "{{belowLayer}}" )

map.addLayer({
"id": "circle",
"source": "data",
"type": "circle",
"maxzoom": {{ maxzoom }},
"minzoom": {{ minzoom }},
"paint": {
{% if colorProperty %}
"circle-color": generatePropertyExpression("{{ colorType }}", "{{ colorProperty }}", {{ colorStops }}, "{{ defaultColor }}" ),
{% else %}
"circle-color": "{{ defaultColor }}",
{% endif %}
"circle-radius" : generatePropertyExpression('interpolate', 'zoom', [[0,{{ radius }}], [22,10 * {{ radius }}]]),
"circle-stroke-color": "{{ strokeColor }}",
"circle-stroke-width": generatePropertyExpression('interpolate', 'zoom', [[0,{{ strokeWidth }}], [18,5* {{ strokeWidth }}]]),
"circle-opacity" : {{ opacity }},
"circle-stroke-opacity" : {{ opacity }}
}
}, "label");

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

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

let f = e.features[0];
let popup_html = '<div><li><b>Location</b>: ' + f.geometry.coordinates[0].toPrecision(6) +
', ' + f.geometry.coordinates[1].toPrecision(6) + '</li>';

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

popup_html += '</div>'
popup.setLngLat(e.features[0].geometry.coordinates)
.setHTML(popup_html)
.addTo(map);
});

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

// Fly to on click
map.on('click', 'circle', function(e) {
map.easeTo({
center: e.features[0].geometry.coordinates,
zoom: map.getZoom() + 1
});
});
});
{% include 'circle_layers.html' %}

{% endblock map %}
Loading