Last active
February 28, 2017 18:34
-
-
Save rfriberg/a33746362b414929bf701c5dd7f39bad to your computer and use it in GitHub Desktop.
Dot mapping in Tangram - interactive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Dot Mapping</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> | |
| html,body{margin: 0; padding: 0} | |
| #map { | |
| height: 100%; | |
| width: 100%; | |
| position: absolute; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| var popup = L.popup(); | |
| var treeList = [ | |
| 'Acacia baileyana', 'Ginko biloba', 'Melaleuca quinquenervia', | |
| 'Prunus serrulata', 'Arbutus unedo', 'Ligustrum lucidum', | |
| 'Metrosideros excelsus', 'Pyrus calleryana', 'Dodonea viscosa', | |
| 'Lophostemon confertus', 'Olea europaea', 'Rhaphiolepsis', | |
| 'Eriobotrya baileyana', 'Magnolia grandiflora', 'Pittosporum undulatum', | |
| 'Tristaniopsis laurina', 'Ficus microcarpa', 'Maytenus boaria', | |
| 'Prunus cerasifera']; | |
| // 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: [37.7443, -122.4229], | |
| zoom: 18, | |
| debugTangram: true, | |
| scene: 'scene.yaml' | |
| }); | |
| // add lat/lon hash | |
| L.Mapzen.hash({ | |
| map: map | |
| }); | |
| // qSpecies: | |
| // "Ficus microcarpa nitida 'Green Gem' :: Indian Laurel Fig Tree 'Green Gem'" | |
| function getTreeContent(props) { | |
| var commonName = props.qSpecies.split(' :: ')[1]; | |
| var latinName = props.qSpecies.split(' :: ')[0]; | |
| if (!commonName) { | |
| return '<p>Unknown</p>'; | |
| } | |
| // Get photo if available | |
| var photo = getTreePhoto(latinName); | |
| return '<p>' + commonName + '</p>' + photo; | |
| } | |
| function getTreePhoto(latinName) { | |
| var photo = ''; | |
| if (treeList.indexOf(latinName) >= 0) { | |
| photo = '<div style="width:200px">' | |
| + '<img src="https://s3.amazonaws.com/mapzen-assets/images/dot-mapping/trees/' + latinName + '.jpg" width="200" />' | |
| + '</div>'; | |
| } | |
| return photo; | |
| } | |
| function showPopup(latlng, content) { | |
| popup | |
| .setLatLng(latlng) | |
| .setContent(content) | |
| .openOn(map); | |
| } | |
| function onMapHover(selection) { | |
| document.getElementById('map').style.cursor = selection.feature ? 'pointer' : ''; | |
| if (selection.feature) { | |
| var content, | |
| props = selection.feature.properties; | |
| if (props.qSpecies) { | |
| content = getTreeContent(props); | |
| } else { | |
| return; | |
| } | |
| showPopup(selection.leaflet_event.latlng, content); | |
| } | |
| } | |
| // Add a Tangram event listener | |
| map.on('tangramloaded', function(e) { | |
| e.tangramLayer.setSelectionEvents({ | |
| hover: onMapHover | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import: https://mapzen.com/carto/refill-style/refill-style.yaml | |
| sources: | |
| trees: | |
| type: GeoJSON | |
| url: https://s3.amazonaws.com/mapzen-assets/images/dot-mapping/trees_min.geojson | |
| styles: | |
| _tree_icons_style: | |
| base: points | |
| blend_order: 1 | |
| texture: https://s3.amazonaws.com/mapzen-assets/images/dot-mapping/tree_white.png | |
| layers: | |
| _trees_layer: | |
| data: { source: trees } | |
| filter: { $zoom: { min: 12 } } | |
| draw: | |
| points: | |
| color: [[12, [0.290, 0.604, 0.290, 0.30]], [18, [0.165, 0.478, 0.165, 0.85]]] | |
| size: [[12, 1px], [15, 5px], [18, 14px], [18, 20px], [22, 52px]] | |
| collide: false | |
| interactive: true | |
| _trees_icon_sublayer: | |
| filter: { $zoom: { min: 18 } } | |
| draw: | |
| _tree_icons_style: | |
| size: [[18, 14px], [22, 40px]] | |
| collide: false | |
| points: | |
| text: | |
| text_source: | | |
| function () { | |
| return feature.qSpecies.split(':: ')[1]; | |
| } | |
| font: | |
| fill: forestgreen | |
| size: 10pt | |
| stroke: | |
| width: 5px | |
| color: white | |
| optional: true | |
| roads: | |
| filter: { $zoom: { min: 18} } | |
| draw: | |
| lines: | |
| interactive: false |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment