Created
January 8, 2020 09:34
-
-
Save mapsmania/ff6159dc472a7ab0578814cea5552842 to your computer and use it in GitHub Desktop.
Calle
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> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title>Calle</title> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <meta name="robots" content="noindex, nofollow"> | |
| <meta name="googlebot" content="noindex, nofollow"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" type="text/css" href="/css/result-light.css"> | |
| <script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js"></script> | |
| <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css"> | |
| <style id="compiled-css" type="text/css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body, #map { | |
| height: 100%; | |
| } | |
| .map-overlay { | |
| background-color: #fff; | |
| border-radius: 3px; | |
| box-shadow:0 1px 2px rgba(0, 0, 0, 0.10); | |
| font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; | |
| margin: 10px 0 0 10px; | |
| padding: 10px; | |
| position: absolute; | |
| top: 0; | |
| width: 200px; | |
| } | |
| .map-overlay fieldset { | |
| border: none; | |
| padding: 0; | |
| } | |
| .map-overlay select { | |
| margin-bottom: 5px; | |
| width: 100%; | |
| } | |
| .map-overlay label { | |
| display: block; | |
| font-weight: bold; | |
| margin: 0 0 5px; | |
| } | |
| .map-overlay div { | |
| color: white; | |
| margin-bottom: 5px; | |
| padding: 5px; | |
| text-align: center; | |
| } | |
| #intro { | |
| color: black; | |
| font-weight: bold; | |
| margin-bottom: 0; | |
| } | |
| #keys { | |
| padding: 0; | |
| } | |
| .map-overlay div:last-of-type { | |
| margin-bottom: 0; | |
| } | |
| </style> | |
| <!-- TODO: Missing CoffeeScript 2 --> | |
| <script type="text/javascript">//<![CDATA[ | |
| window.onload=function(){ | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiZ21hcHNtYW5pYSIsImEiOiJOYnlnSFpvIn0.5f62d0cnrWCA1KioxzXtqg'; | |
| // inspired by https://erdavis.com/2019/07/27/the-beautiful-hidden-logic-of-cities/ | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/light-v10', | |
| center: [-3.7036849, 40.4167782], | |
| zoom: 12 | |
| }); | |
| var cities = { | |
| 'madrid': { | |
| 'center': [-3.7036849, 40.4167782], | |
| 'zoom': 12 | |
| }, | |
| 'valencia': { | |
| 'center': [-0.377, 39.47], | |
| 'zoom': 11 | |
| }, | |
| 'seville': { | |
| 'center': [-5.973, 37.383], | |
| 'zoom': 11 | |
| }, | |
| 'zaragoza': { | |
| 'center': [-0.877, 41.656], | |
| 'zoom': 11 | |
| }, | |
| 'malaga': { | |
| 'center': [-4.42, 36.72], | |
| 'zoom': 11 | |
| }, | |
| 'murcia': { | |
| 'center': [-1.13, 37.987], | |
| 'zoom': 11 | |
| }, | |
| 'palma': { | |
| 'center': [2.65, 39.569], | |
| 'zoom': 12 | |
| } | |
| }; | |
| var citySelect = document.getElementById('city'); | |
| citySelect.addEventListener('change', function (event) { | |
| var city = event.target.value; | |
| map.flyTo(cities[city]); | |
| }); | |
| var keys = document.getElementById('keys'); | |
| var colors = { | |
| 'Calle': '#4cbde9', | |
| 'Carretera': '#1165b2', | |
| 'Plaza': '#288679', | |
| 'Avenida': '#fec828', | |
| 'Paseo': '#fd7f1c', | |
| 'Camino': '#fb3252', | |
| 'Bulevar': '#fb8a95', | |
| // fallback color | |
| 'Other': '#F8F3F3' | |
| }; | |
| var caseExpression = ['case']; | |
| for (var key in colors) { | |
| // don't create an `in` expression for the fallback color | |
| if (key !== 'Other') { | |
| // 'name' is a property of the road layers, e.g. 'Mission St' | |
| caseExpression.push(['in', key, ['get', 'name']]); | |
| } | |
| // build up a `case` expression to allow us to conditionally color lines | |
| // final expression will look like: | |
| // [ | |
| // 'case', | |
| // ['in', 'Ave', ['get', 'name']], '#4cbde9', | |
| // . ... | |
| // . '#bcbcbc' | |
| // ] | |
| caseExpression.push(colors[key]); | |
| // create a key for the map | |
| var swatch = document.createElement('div'); | |
| swatch.style.backgroundColor = colors[key]; | |
| swatch.innerHTML = key; | |
| keys.appendChild(swatch); | |
| } | |
| map.on('load', function() { | |
| // iterate over all the style layers to find road layers | |
| map.getStyle().layers.forEach(function (layer) { | |
| // filter out the road label layer | |
| if (layer.id.indexOf('road-') > -1 && layer.id !== 'road-label') { | |
| // update the `line-color` property with our expression | |
| map.setPaintProperty(layer.id, 'line-color', caseExpression); | |
| } | |
| }); | |
| }); | |
| } | |
| //]]></script> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <div class='map-overlay'> | |
| <fieldset> | |
| <div id="intro">Calle</div> | |
| <label>Fly to City</label> | |
| <select id='city' name='city'> | |
| <option value='madrid'>Madrid</option> | |
| <option value='valencia'>Valencia</option> | |
| <option value='seville'>Seville</option> | |
| <option value='zaragoza'>Zaragoza</option> | |
| <option value='malaga'>Malaga</option> | |
| <option value='murcia'>Murcia</option> | |
| </select> | |
| <label>Type of Road</label> | |
| <div id='keys'></div> | |
| </fieldset> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment