viewof Maine = { const container = html`

`; let resolve; container.value = new Promise(_ => resolve = _); yield container; var map = (container.value = new maplibregl.Map({ boxZoom: true, pitch: 0, bearing: 0, maplibreLogo: true, container, center: [-69, 45], zoom: 6, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", scrollZoom: true })); map.on("data", function () { map.addSource("CTE", { type: "geojson", data: CTEGeoJson }); map.addLayer({ id: "CTE-circles", type: "circle", source: "CTE", layout: {}, paint: { 'circle-color': 'red', 'circle-opacity': 0.75, 'circle-radius': 6, } }); // Create a popup, but don't add it to the map yet. var popup = new maplibregl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', 'CTE-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties.Name; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'CTE-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); map.addSource("companies", { type: "geojson", data: CompaniesGeoJson }); map.addLayer({ id: "company-circles", type: "circle", source: "companies", layout: {}, paint: { 'circle-color': 'blue', 'circle-opacity': 0.75, 'circle-radius': 6, } }); map.on('mouseenter', 'company-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties.Name; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'company-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); map.addSource("STEM", { type: "geojson", data: STEMGeoJson }); map.addLayer({ id: "STEM-circles", type: "circle", source: "STEM", layout: {}, paint: { 'circle-color': 'yellow', 'circle-opacity': 0.75, 'circle-radius': 6, } }); map.on('mouseenter', 'STEM-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties.Name; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'STEM-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); map.addSource("Academies", { type: "geojson", data: AcademiesGeoJson }); map.addLayer({ id: "Academies-circles", type: "circle", source: "Academies", layout: {}, paint: { 'circle-color': 'green', 'circle-opacity': 0.75, 'circle-radius': 6, } }); map.on('mouseenter', 'Academies-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties.Name; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'Academies-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); map.addSource("Colleges", { type: "geojson", data: CollegesGeoJson }); map.addLayer({ id: "Colleges-circles", type: "circle", source: "Colleges", layout: {}, paint: { 'circle-color': 'orange', 'circle-opacity': 0.75, 'circle-radius': 6, } }); map.on('mouseenter', 'Colleges-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties.Name; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'Colleges-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); map.addSource("CC", { type: "geojson", data: CCGeoJson }); map.addLayer({ id: "CC-circles", type: "circle", source: "CC", layout: {}, paint: { 'circle-color': 'purple', 'circle-opacity': 0.75, 'circle-radius': 6, } }); map.on('mouseenter', 'CC-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties.Name; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'CC-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); resolve(map); // Expose the Map instance as the view’s value. invalidation.then(() => map.remove()); }); map.addControl(new maplibregl.NavigationControl()); return map }