diff --git a/index.html b/index.html
index a9ec43c..d2ef210 100644
--- a/index.html
+++ b/index.html
@@ -135,20 +135,20 @@
             .marker {
                 border: 2px solid #004360;
                 /* background: #00A3BD; */
-                border-radius: 40px;
-                height: 40px;
+                border-radius: 26px;
+                height: 26px;
                 text-align: center;
-                width: 40px;
+                width: 26px;
             }
             .marker-inner {
                 background: #00A3BD;
-                border-radius: 40px;
-                height: 30px;
+                border-radius: 20px;
+                height: 20px;
                 left: 50%;
                 position: absolute;
                 top: 50%;
                 transform: translate(-50%, -50%);
-                width: 30px;
+                width: 20px;
             }
             .marker-inner-power {
                 background: transparent;
@@ -270,31 +270,63 @@
                     }
                 });  
 
-        fetch(window.app.config.closures)
-            .then(function (response) { return response.json(); })
-            .then(function (geojson) {
-                map.on('load', () => {
-                    map.addSource('closures', {
-                        "type": "geojson",
-                        "data": geojson
-                    });
-                    map.addLayer({
-                        'id': 'closures',
-                        'type': 'line',
-                        'source': 'closures',
-                        'layout': {
-                            'line-join': 'round',
-                            'line-cap': 'round'
-                        },
-                        'paint': {
-                            'line-color': 'rgb(230,81,0)',
-                            'line-width': 8
-                        }
+            fetch(window.app.config.closures)
+                .then(function (response) { return response.json(); })
+                .then(function (geojson) {
+                    map.on('load', () => {
+                        map.addSource('closures', {
+                            "type": "geojson",
+                            "data": geojson
+                        });
+                        map.addLayer({
+                            'id': 'closures',
+                            'type': 'line',
+                            'source': 'closures',
+                            'layout': {
+                                'line-join': 'round',
+                                'line-cap': 'round'
+                            },
+                            'paint': {
+                                'line-color': 'rgb(230,81,0)',
+                                'line-width': 8
+                            }
+                        });
                     });
                 });
-            });
-                
+                    
+
+            map.on('load', () => {
+                // 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', 'closures', (e) => {
+                    const coordinates = e.features[0].geometry.coordinates.slice();
+                    const Name = e.features[0].properties.Name;
+                    const 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 maplibregl.Popup()
+                        .setLngLat(coordinates[0])
+                        .setHTML(JSON.stringify(Name).replace(/"/g,"") + "</br>" + JSON.stringify(description).replace(/"/g,""))
+                        .addTo(map);
+                });
+
+                // Change the cursor to a pointer when the mouse is over the places layer.
+                map.on('mouseenter', 'closures', () => {
+                    map.getCanvas().style.cursor = 'pointer';
+                });
+
+                // Change it back to a pointer when it leaves.
+                map.on('mouseleave', 'closures', () => {
+                    map.getCanvas().style.cursor = '';
+                });
+
+            });
 
             // window.app.data.outage.forEach(function (point) {
             //         // create a DOM element for the marker