Skip to content

Instantly share code, notes, and snippets.

@rfriberg

rfriberg/index.html

Last active March 16, 2021 20:11
Show Gist options
  • Save rfriberg/00eb1b5f98496bf8e3875ee8fa9c9152 to your computer and use it in GitHub Desktop.
Save rfriberg/00eb1b5f98496bf8e3875ee8fa9c9152 to your computer and use it in GitHub Desktop.
Download ZIP
San Juan Island - Interactivity Demo
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>San Juan Island Geology - Interactivity</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://mapzen.com/js/mapzen.css">
<script src="https://mapzen.com/js/mapzen.min.js"></script>
<style>
#map {
height: 100%;
width: 100%;
position: absolute;
}
.layer-control {
background: rgba(255, 255, 255, 0.85);
padding: 10px;
border-radius: 5px;
}
html,body{margin: 0; padding: 0}
</style>
</head>
<body>
<div id="map"></div>
<script>
var san_juan_island = [48.5326, -123.0879];
// Mapzen API key (replace key with your own)
// To generate your own key, go to https://mapzen.com/developers/
L.Mapzen.apiKey = 'mapzen-JA21Wes';
var map = L.Mapzen.map('map', {
center: san_juan_island,
zoom: 13,
scene: 'scene.yaml',
});
var popup = L.popup();
// Add attribution for NPS / geology data
map.attributionControl.addAttribution('Geology data &copy; <a href="https://www.nps.gov">NPS</a>');
// Mapzen Search box (replace key with your own)
// To generate your own key, go to https://mapzen.com/developers/
var geocoder = L.Mapzen.geocoder('mapzen-JA21Wes');
geocoder.addTo(map);
// ADD LAYER TOGGLE
var LayerToggleControl = L.Control.extend({
options: {
position: 'topright'
},
onAdd: function () {
var container = L.DomUtil.create('div', 'layer-control');
container.innerHTML = '<label><input id="layer_toggle" type="checkbox" checked> Geology layer</label>'
L.DomEvent.on(container, 'click', this.toggleOnClick);
return container;
},
toggleOnClick: function (e) {
var showLayer = document.getElementById('layer_toggle').checked;
if (scene) {
scene.config.layers._geology.visible = showLayer;
scene.updateConfig();
}
}
});
var toggleControl = new LayerToggleControl();
map.addControl(toggleControl);
// ADD SELECTION EVENTS
function onMapClick(selection) {
if (selection.feature) {
var latlng = selection.leaflet_event.latlng;
var label = selection.feature.properties.GLG_SYM;
showPopup(latlng, label);
highlightUnit(label);
} else {
highlightUnit(false);
}
}
function showPopup(latlng, label) {
popup
.setLatLng(latlng)
.setContent('<p>' + label + '</p>')
.openOn(map);
}
function onMapHover(selection) {
document.getElementById('map').style.cursor = selection.feature ? 'pointer' : '';
}
// ADD HIGHLIGHT
function highlightUnit(geology_symbol) {
scene.config.global._highlight = geology_symbol;
scene.updateConfig();
}
// ADD TANGRAMLOADED LISTENER
var scene;
map.on('tangramloaded', function(e) {
var tangramLayer = e.tangramLayer;
scene = tangramLayer.scene;
tangramLayer.setSelectionEvents({
click: onMapClick,
hover: onMapHover
});
});
</script>
</body>
</html>
Raw
scene.yaml
import: https://mapzen.com/carto/walkabout-style/3/walkabout-style.zip
global:
_highlight: false
styles:
_alpha_polygons:
base: polygons
blend: multiply
_dashed_lines:
base: lines
dash: [3, 1]
dash_background_color: rgb(149, 188, 141)
sources:
_nps_boundary:
type: GeoJSON
url: https://gist.githubusercontent.com/rfriberg/684645c22f495b4a46f29fb312b6d268/raw/843ed38a3920ed199082636fe198ba995f5cfc04/san_juan_nhp.geojson
_nps_geology:
type: GeoJSON
url: https://gist.githubusercontent.com/rfriberg/3c09fe3afd642224da7cd70aff1c1e70/raw/1f1df59f4cb4e82d7ea23452c789bc99c299a5cb/san_juan_nhp_geology.geojson
generate_label_centroids: true
layers:
_national_park:
data: { source: _nps_boundary }
draw:
_dashed_lines:
width: [[8, 0.5px], [18, 5px]]
color: '#518946'
order: global.sdk_order_over_everything_but_text_1
_geology:
data: { source: _nps_geology }
filter:
all:
- { $zoom: { min: 10 } }
- not: { GLG_SYM: water }
draw:
_alpha_polygons:
interactive: true
order: global.sdk_order_over_everything_but_text_0
color: |
function() {
// Note: this is a block of JavaScript so we can use JS comment syntax
var category = feature.GLG_SYM;
var color = category == 'Qa' ? '#FFF79A' :
category == 'Qb' ? '#FFF46E' :
category == 'Qd' ? '#fff377' :
category == 'Qf' ? '#dddddd' :
category == 'Qp' ? '#EAC88D' :
category == 'Qgdm' ? '#FCBB62' :
category == 'Qgdm(es)' ? '#FEE9BB' :
category == 'Qgdm(e)' ? '#E8A121' :
category == 'Qgom(e)' ? '#EAB564' :
category == 'Qgom' ? '#FECE7A' :
category == 'Qgd' ? '#FEDDA3' :
category == 'Qgt' ? '#FCBB62' :
category == 'KJmm(c)' ? '#86C879' :
category == 'KJm(ll)' ? '#9FD08A' :
category == 'JTRmc(o)' ? '#27BB9D' :
category == 'TRn' ? '#ED028C' :
category == 'TRPMv' ? '#F172AC' :
category == 'TRPv' ? '#F499C2' :
category == 'PDmt' ? '#40C7F4' :
category == 'pPsh' ? '#9BA5BE' :
category == 'pDi' ? '#848FC7' :
category == 'pDit(t)' ? '#B28ABF' :
'#000';
return color;
}
_geology_labels:
filter: { label_placement: true, $zoom: { min: 13 } }
draw:
text:
text_source: GLG_SYM
font:
fill: rgba(130, 84, 41, 0.9)
size: [[13, 10px], [20, 24px]]
weight: bold
stroke:
color: rgba(242, 218, 193, 0.3)
width: 3
_geology_highlight:
filter: { GLG_SYM: global._highlight }
draw:
lines:
width: 2px
color: yellow
order: global.sdk_order_over_everything_but_text_2
# Override Walkabout's layers
landuse:
visible: false
roads:
minor_road:
visible: false
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment