// map.on('load', function () {
//         map.addSource('radar', {
//                     'type': 'image',
//                     'url': '../data/flood_depth_raster.png',
//                     'coordinates': [
//                     [-95.7167853758765119, 29.7957042639456091],
//                     [-95.2351955788307976, 29.7957042639456091],
//                     [-95.2351955788307976, 29.5831271579661497],
//                     [-95.7167853758765119, 29.5831271579661497]
//                     ]
//                     });

//         map.addSource('flooded_roads', {
//                     type: 'geojson',
//                     // Use a URL for the value for the `data` property.
//                     data: '../data/flooded_roads.geojson'
//                     });

//         map.addSource('mobility', {
//                     type: 'geojson',
//                     // Use a URL for the value for the `data` property.
//                     data: '../data/mobility.geojson'
//                     });


//         map.addLayer({
//                     id: 'Inundation Depth',
//                     'type': 'raster',
//                     'source': 'radar',
//                     'paint': {
//                     'raster-fade-duration': 0
//                     }
//                     });

//         // Add a new layer to visualize the polygon.
//         //https://coolors.co/palettes/popular
//         map.addLayer({
//                     'id': 'Accessibility Measures (Fire Stations)',
//                     'type': 'fill',
//                     'source': 'mobility', // reference the data source
//                     'layout': {},
//                     'paint': {
//                     'fill-color': [
//                     'interpolate',
//                     ['linear'],
//                     ['get', 'CL_Fire_stations_max_Depth (26SEP2020 08 00 00)_mean'],
//                     0.0,
//                     '#1b7837',
//                     0.1,
//                     '#5aae61',
//                     0.3,
//                     '#d9f0d3',
//                     0.5,
//                     '#fc9272',
//                     0.7,
//                     '#fb6a4a',
//                     0.8,
//                     '#ef3b2c',
//                     0.9,
//                     '#cb181d',
//                     1.0,
//                     '#99000d'
//                     ],

//                     'fill-opacity': 0.5

//                     }
//                     });
//         // Add a black outline around the polygon.
//         map.addLayer({
//         'id': 'outline',
//         'type': 'line',
//         'source': 'mobility',
//         'layout': {},
//         'paint': {
//         'line-color': '#000',
//         'line-width': 1,
//         'line-opacity':0.1
//         }
//         });

//         map.addLayer({
//         'id': 'Flooded roads',
//         'type': 'line',
//         'source': 'flooded_roads',
//         'paint': {
//         'line-width': 1,
//         'line-color': 'red'
//         }
//         });

//         map.setLayoutProperty('Flooded roads', 'visibility', 'none')
//         map.setLayoutProperty('Accessibility Measures (Fire Stations)', 'visibility', 'none')

//     })


//      // After the last frame rendered before the map enters an "idle" state.
// map.on('idle', () => {
//     // If these two layers were not added to the map, abort
//     // if (!map.getLayer('radar') || !map.getLayer('flooded_roads') || !map.getLayer('mobility')) {
//     // return;
//     // }

//     // Enumerate ids of the layers.
//     const toggleableLayerIds = ['Inundation Depth', 'Flooded roads', 'Accessibility Measures (Fire Stations)'];

//     // Set up the corresponding toggle button for each layer.
//     for (const id of toggleableLayerIds) {
//         // Skip layers that already have a button set up.
//         if (document.getElementById(id)) {
//         continue;
//         }

//         // Create a link.
//         const link = document.createElement('a');
//         link.id = id;
//         link.href = '#';
//         link.textContent = id;
//         link.className = 'active';

//         if (id=='Flooded roads') {
//         link.className = '';
//         }

//         if (id=='Accessibility Measures (Fire Stations)') {
//         link.className = '';
//         }

//         // Show or hide layer when the toggle is clicked.
//         link.onclick = function (e) {
//         const clickedLayer = this.textContent;
//         e.preventDefault();
//         e.stopPropagation();

//         const visibility = map.getLayoutProperty(clickedLayer,'visibility');

//         // Toggle layer visibility by changing the layout object's visibility property.
//         if (visibility === 'visible') {
//         map.setLayoutProperty(clickedLayer, 'visibility', 'none');
//         this.className = '';
//         } else {
//         this.className = 'active';
//         map.setLayoutProperty(
//         clickedLayer,
//         'visibility',
//         'visible'
//         );
//         }
//         };

//         const layers = document.getElementById('menu');
//         layers.appendChild(link);
//     }
//     });