xxxxxxxxxx<!--[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>// https://c.tile.openstreetmap.org/16/17923/24475.pngmapboxgl.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> https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js