Last active
May 6, 2020 13:20
-
-
Save skorasaurus/47dd9ec8b8ca859b56f52eb7ffa271f2 to your computer and use it in GitHub Desktop.
ocations-gl.html example that I showed to mike and david and also used for measuring performance when comparing mapbox-gl vs mapbox.js for cpl 2020, april
This file contains hidden or 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> | |
| <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> | |
| <script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script> | |
| <link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" /> | |
| </head> | |
| <style> | |
| #mapid { | |
| width: 80%; | |
| height: 320px; | |
| position: relative; | |
| margin-bottom: 3em; | |
| } | |
| </style> | |
| <body> | |
| <!--[if lt IE 7]> | |
| <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> | |
| <![endif]--> | |
| <div id="mapid"></div> | |
| <script> | |
| // http://c.tile.openstreetmap.org/16/17923/24475.png | |
| mapboxgl.accessToken = 'pk.eyJ1Ijoic2tvcmFzYXVydXMiLCJhIjoiY2s5dmRjbnZpMDVlZzNlcjN3MHowYzVrbSJ9.AcSdcVS034Hhl0RhBHoC2A'; | |
| var myMap = new mapboxgl.Map({ | |
| container: 'mapid', | |
| center: [-81.68334960937501, 41.51783221717116], | |
| zoom: 11, | |
| style: 'mapbox://styles/skorasaurus/ck2ew6z291ct01cnmjc5lz50b?optimize=true', | |
| hash: true, | |
| }); | |
| myMap.on('load', function() { | |
| myMap.addSource('libraries-points', { | |
| 'type': 'geojson', | |
| 'data': { | |
| "type": "FeatureCollection", | |
| "features": [ { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -81.66675, | |
| 41.49756 | |
| ] | |
| }, | |
| "properties": { | |
| "city": "Cleveland", | |
| "housenumber": 2200, | |
| "postcode": 44115, | |
| "state": "OH", | |
| "street": "East 30th Street", | |
| "amenity": "library", | |
| "internet_access": "wlan", | |
| "internet_access:fee": "no", | |
| "name": "Sterling Branch", | |
| "opening_hours": "Mo, Tu, Th 10:00-19:00; We, Fr, Sa 10:00-18:00; PH off", | |
| "operator": "Cleveland Public Library", | |
| "phone": "216-623-7074", | |
| "shortlink": "sterling" | |
| }, | |
| "id": "node/368152695" | |
| }, | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -81.57576, | |
| 41.556 | |
| ] | |
| }, | |
| "properties": { | |
| "city": "Cleveland", | |
| "housenumber": 856, | |
| "postcode": 44110, | |
| "state": "OH", | |
| "street": "East 152nd Street", | |
| "amenity": "library", | |
| "internet_access": "wlan", | |
| "internet_access:fee": "no", | |
| "name": "Collinwood Branch", | |
| "opening_hours": "Mo, Tu, Th 10:00-19:00; We, Fr, Sa 10:00-18:00; PH off", | |
| "operator": "Cleveland Public Library", | |
| "phone": "216-623-6934", | |
| "shortlink": "collinwood" | |
| }, | |
| "id": "node/368152918" | |
| }, | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -81.58444, | |
| 41.46417 | |
| ] | |
| }, | |
| "properties": { | |
| "city": "Cleveland", | |
| "housenumber": 14000, | |
| "postcode": 44120, | |
| "state": "OH", | |
| "street": "Kinsman Road", | |
| "amenity": "library", | |
| "internet_access": "wlan", | |
| "internet_access:fee": "no", | |
| "name": "Mount Pleasant Branch", | |
| "opening_hours": "Mo, Tu, Th 10:00-19:00; We, Fr, Sa 10:00-18:00; PH off", | |
| "operator": "Cleveland Public Library", | |
| "phone": "216-623-7032", | |
| "shortlink": "mtpleasant" | |
| }, | |
| "id": "node/368153278" | |
| }] | |
| } | |
| }); | |
| console.log('success'); | |
| myMap.addLayer({ | |
| id: 'libraries', | |
| type: 'circle', | |
| source: 'libraries-points', | |
| paint: { | |
| // Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step) | |
| 'circle-opacity': 0.98, | |
| 'circle-color': '#fc8d62', | |
| 'circle-radius': 10 | |
| } | |
| }); | |
| }); | |
| myMap.on('click', 'libraries', function(e) { | |
| new mapboxgl.Popup() | |
| .setLngLat(e.lngLat) | |
| .setHTML('<a href="'+e.features[0].properties.shortlink+'">'+e.features[0].properties.name +'</a><br>' + e.features[0].properties.housenumber + ' ' + e.features[0].properties.street+ '<br>' + | |
| '<a href="https://www.google.com/maps/search/'+e.features[0].properties.housenumber + ' ' + e.features[0].properties.street+ " Cleveland" + ' ' + e.features[0].properties.postcode + '">'+' Get directions </a>') | |
| .addTo(myMap); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment