{ let container = html`

`; yield container; mapboxgl.accessToken = 'pk.eyJ1IjoiY3J5c3RhbHBlbmFsb3NhIiwiYSI6ImNqcmt4ZnpobzAweWM0OW1sdGJ3cjYweDQifQ.2jfSIUMSAx0ikaI4FXl6XA'; let map = new mapboxgl.Map({ container, style: 'mapbox://styles/mapbox/streets-v9', center: [-122.43816375732422, 37.76637243960179], zoom: 11 }); map.on('load', function () { // Add a layer showing the places. map.addLayer({ "id": "places", "type": "symbol", "source": { "type": "geojson", "data": { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "description": "

6/25/14, 5:15PM.

Parklet: Simple Pleasures Cafe

This cafe seems to be stamping ground for a number of people who used to live nearby,
but although they are living another neighborhood they come to this meeting place to drink and hang out

", "icon": "circle" }, "geometry": { "type": "Point", "coordinates": [-122.495785, 37.776066] } }, { "type": "Feature", "properties": { "description": "

7/12/14, 12:00PM

Parklet: Excelsior Action Group

Parklet here is dirty and smell. As dustman working here said,
this parklet is a disaster. Many illegal activities happened here a lot.

", "icon": "circle" }, "geometry": { "type": "Point", "coordinates": [-122.440441, 37.716409] } }, { "type": "Feature", "properties": { "description": "

6/14/14, 11:50AM

Parklet: Haight Street Market

The parklet appeared well utilized. most of the permanent seating
as well as the mobile cafe furniture was used.

", "icon": "circle" }, "geometry": { "type": "Point", "coordinates": [-122.447632, 37.770057] } }, { "type": "Feature", "properties": { "description": "

6/14/14, 1:05PM

Parklet: International School of Pizza

Pizza customers using the parklet to eat. 2 guitar players on the sidewalk.
1 man holding up newspaper street sheet.

", "icon": "circle" }, "geometry": { "type": "Point", "coordinates": [-122.408997, 37.800144] } }, { "type": "Feature", "properties": { "description": "

7/19/14, 12:00PM

Parklet: Trouble Coffee Co. (Judah)

Parklet buzzing with people who have come to dine or grab a cup
of coffee/coconut; and hang out either alone or with friends.

", "icon": "circle" }, "geometry": { "type": "Point", "coordinates": [-122.505549, 37.760668] } }, ] } }, "layout": { "icon-image": "{icon}-15", "icon-allow-overlap": true } }); // When a click event occurs on a feature in the places layer, open a popup at the // location of the feature, with description HTML from its properties. map.on('click', 'places', function (e) { var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.description; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(description) .addTo(map); }); // Change the cursor to a pointer when the mouse is over the places layer. map.on('mouseenter', 'places', function () { map.getCanvas().style.cursor = 'pointer'; }); // Change it back to a pointer when it leaves. map.on('mouseleave', 'places', function () { map.getCanvas().style.cursor = ''; }); }); invalidation.then(() => map.remove()); }