2c:T6a4,mapRender = { // Create the \`map\` object with the mapboxgl.Map constructor, referencing let map = new mapboxgl.Map({ container, center: [ -88.9879, 44.5844 ], style: 'mapbox://styles/erincaughey/cjixn8el980g72sohum0gpi99', zoom: 5.8, bearing: 0, pitch: 0, scrollZoom: false }); var nav = new mapboxgl.NavigationControl(); map.addControl(nav, 'top-right'); map.on('click', 'beer-near-geo', function (e) { var coordinates = e.features[0].geometry.coordinates.slice(); var brewery = e.features[0].properties.brewery; var website = e.features[0].properties.websiteUrl; // 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('' + '

' + brewery + '

' + '') .addTo(map); }); // Change the cursor to a pointer when the mouse is over the packers-data layer. map.on('mouseenter', 'beer-near-geo', function () { map.getCanvas().style.cursor = 'pointer'; }); // Change it back to a pointer when it leaves. map.on('mouseleave', 'beer-near-geo', function () { map.getCanvas().style.cursor = ''; }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. try { yield map; yield invalidation; } finally { map.remove(); } }2d:[] 2a:{"title":"Wisconsin Breweries with Mapbox GL tooltip","cells":[{"id":0,"value":"md`# Wisconsin Breweries with Mapbox GL tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`Based on jsonline.com/beernear data curated by reporter Kathy Flanigan.
Updated Nov. 1, 2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`Using Mapbox GL starter from Tom MacWright`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoiZXJpbmNhdWdoZXkiLCJhIjoiY2lnd2x5ZWkwMHNqMzY1bTAyMmJ5aTlkbyJ9.iQD_-2TgQLMx5CDlVytksA';\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"mapboxgl_css = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2d","stdlib":"1","titling":"auto"}