Skip to content

Commit

Permalink
Add gages to map (#60)
Browse files Browse the repository at this point in the history 
* update map, add gages

* update map style url
  • Loading branch information
@JoshCu
JoshCu authored Nov 20, 2024
1 parent 4bb0417 commit 87183db
Show file tree
Hide file tree
Showing 5 changed files with 217 additions and 74 deletions.
21 changes: 20 additions & 1 deletion modules/map_app/static/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,26 @@
display: grid;
gap: 24px;
}


#toggle-button {
position: relative;
top: 20px;
left: 20px;
background-color: rgb(87, 27, 98);
color: #f0ead6;
font-size: 1.2rem;
min-width: 70px;
border-radius: 5px;
border: none;
padding: 5px 10px;
transition: 0.3s;
z-index: 1;
}
#toggle-button:hover {
scale: 1.1;
box-shadow: 0 0 4px 4px gray;
}

/* Ensure padding doesn't interfere with width calculations */
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
Expand Down
49 changes: 0 additions & 49 deletions modules/map_app/static/js/legend.js
View file

This file was deleted.

50 changes: 50 additions & 0 deletions modules/map_app/static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,53 @@ map.on('click', 'catchments', (e) => {
cat_id = e.features[0].properties.divide_id;
update_map(cat_id, e);
});

// Create a popup, but don't add it to the map yet.
const popup = new maplibregl.Popup({
closeButton: false,
closeOnClick: false
});

map.on('mouseenter', 'conus_gages', (e) => {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';

const coordinates = e.features[0].geometry.coordinates.slice();
const description = e.features[0].properties.hl_uri + "<br> click for more info";

// 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;
}

// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(coordinates).setHTML(description).addTo(map);
});

map.on('mouseleave', 'conus_gages', () => {
map.getCanvas().style.cursor = '';
popup.remove();
});

map.on('click', 'conus_gages', (e) => {
// https://waterdata.usgs.gov/monitoring-location/02465000
window.open("https://waterdata.usgs.gov/monitoring-location/" + e.features[0].properties.hl_link, '_blank');
}
);
show = true;
const toggleButton = document.querySelector('#toggle-button');
toggleButton.addEventListener('click', () => {
if (show) {
map.setFilter('conus_gages', ['any', ['==', 'hl_uri', ""]])
toggleButton.innerText = 'Show gages';
show = false;
} else {
map.setFilter('conus_gages', null)
toggleButton.innerText = 'Hide gages';
show = true;
}
});

160 changes: 143 additions & 17 deletions modules/map_app/static/resources/style.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,16 @@
"type": "vector",
"url": "pmtiles://https://communityhydrofabric.s3.us-east-1.amazonaws.com/basemap.pmtiles"
},
"conus": {
"hydrofabric": {
"type": "vector",
"url": "pmtiles://https://communityhydrofabric.s3.us-east-1.amazonaws.com/conus.pmtiles",
"attribution": "Community Hydrofabric Based on hf2.2 ODbL <a href=\"https://lynker-spatial.s3-us-west-2.amazonaws.com/copyright.html\">lynker-spatial</a>"
}
"url": "pmtiles://https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/merged.pmtiles",
"attribution": "Community Hydrofabric Based on hf2.2 ODbL <a href=\"https://lynker-spatial.s3-us-west-2.amazonaws.com/copyright.html\">lynker-spatial</a>",
"maxzoom":10
},
"conus_vpu": {
"type": "vector",
"url": "pmtiles://https://communityhydrofabric.s3.us-east-1.amazonaws.com/conus.pmtiles"
}
},
"sprite": "https://openmaptiles.github.io/maptiler-basic-gl-style/sprite",
"layers": [
Expand Down Expand Up @@ -570,7 +575,7 @@
{
"id": "vpu",
"type": "line",
"source": "conus",
"source": "conus_vpu",
"source-layer": "vpu",
"layout": {},
"paint": {
Expand All @@ -579,10 +584,10 @@
}
},
{
"id": "flowpaths",
"id": "ak_flowpaths",
"type": "line",
"source": "conus",
"source-layer": "flowpaths",
"source": "hydrofabric",
"source-layer": "ak_flowpaths",
"layout": {},
"paint": {
"line-color": ["rgba", 0, 119, 187, 1],
Expand All @@ -591,22 +596,118 @@
}
},
{
"id": "catchments",
"id": "ak_catchments",
"type": "fill",
"source": "conus",
"source-layer": "catchments",
"source": "hydrofabric",
"source-layer": "ak_divides",
"layout": {},
"paint": {
"fill-color": ["rgba", 0, 0, 0, 0],
"fill-outline-color": ["rgba", 1, 1, 1, 0.5],
"fill-opacity": { "stops": [[7, 0], [11, 1]] }
}
},
{
"id": "gl_flowpaths",
"type": "line",
"source": "hydrofabric",
"source-layer": "gl_flowpaths",
"layout": {},
"paint": {
"line-color": ["rgba", 0, 119, 187, 1],
"line-width": { "stops": [[7, 1], [10, 2]] },
"line-opacity": { "stops": [[7, 0], [11, 1]] }
}
},
{
"id": "gl_catchments",
"type": "fill",
"source": "hydrofabric",
"source-layer": "gl_divides",
"layout": {},
"paint": {
"fill-color": ["rgba", 0, 0, 0, 0],
"fill-outline-color": ["rgba", 1, 1, 1, 0.5],
"fill-opacity": { "stops": [[7, 0], [11, 1]] }
}
},
{
"id": "hi_flowpaths",
"type": "line",
"source": "hydrofabric",
"source-layer": "hi_flowpaths",
"layout": {},
"paint": {
"line-color": ["rgba", 0, 119, 187, 1],
"line-width": { "stops": [[7, 1], [10, 2]] },
"line-opacity": { "stops": [[7, 0], [11, 1]] }
}
},
{
"id": "hi_catchments",
"type": "fill",
"source": "hydrofabric",
"source-layer": "hi_divides",
"layout": {},
"paint": {
"fill-color": ["rgba", 0, 0, 0, 0],
"fill-outline-color": ["rgba", 1, 1, 1, 0.5],
"fill-opacity": { "stops": [[7, 0], [11, 1]] }
}
},
{
"id": "prvi_flowpaths",
"type": "line",
"source": "hydrofabric",
"source-layer": "prvi_flowpaths",
"layout": {},
"paint": {
"line-color": ["rgba", 0, 119, 187, 1],
"line-width": { "stops": [[7, 1], [10, 2]] },
"line-opacity": { "stops": [[7, 0], [11, 1]] }
}
},
{
"id": "prvi_catchments",
"type": "fill",
"source": "hydrofabric",
"source-layer": "prvi_divides",
"layout": {},
"paint": {
"fill-color": ["rgba", 0, 0, 0, 0],
"fill-outline-color": ["rgba", 1, 1, 1, 0.5],
"fill-opacity": { "stops": [[7, 0], [11, 1]] }
}
},
{
"id": "flowpaths",
"type": "line",
"source": "hydrofabric",
"source-layer": "conus_flowpaths",
"layout": {},
"paint": {
"line-color": ["rgba", 0, 119, 187, 1],
"line-width": { "stops": [[7, 1], [10, 2]] },
"line-opacity": { "stops": [[7, 0], [11, 1]] }
}
},
{
"id": "catchments",
"type": "fill",
"source": "hydrofabric",
"source-layer": "conus_divides",
"layout": {},
"paint": {
"fill-color": ["rgba", 0, 0, 0, 0],
"fill-outline-color": ["rgba", 1, 1, 1, 0.5],
"fill-opacity": { "stops": [[7, 0], [11, 1]] }
}
},
{
"id": "selected-flowpaths",
"type": "line",
"source": "conus",
"source-layer": "flowpaths",
"source": "hydrofabric",
"source-layer": "conus_flowpaths",
"layout": {},
"paint": {
"line-color": ["rgba", 0, 119, 187, 1],
Expand All @@ -618,8 +719,8 @@
{
"id": "selected-catchments",
"type": "fill",
"source": "conus",
"source-layer": "catchments",
"source": "hydrofabric",
"source-layer": "conus_divides",
"layout": {},
"paint": {
"fill-color": ["rgba", 238, 51, 119, 0.316],
Expand All @@ -631,15 +732,40 @@
{
"id": "upstream-catchments",
"type": "fill",
"source": "conus",
"source-layer": "catchments",
"source": "hydrofabric",
"source-layer": "conus_divides",
"layout": {},
"paint": {
"fill-color": ["rgba", 238, 119, 51, 0.278],
"fill-outline-color": ["rgba", 238, 119, 51, 0.7],
"fill-opacity": { "stops": [[7, 0], [11, 1]] }
},
"filter": ["any",["in", "divide_id", ""]]
},
{
"id": "conus_gages",
"type": "circle",
"source": "hydrofabric",
"source-layer": "conus_gages",
"layout": {},
"filter": ["any",["==", "hl_reference", "gages"]],
"paint": {
"circle-color": ["rgba", 153, 0, 17, 1],
"circle-opacity": { "stops": [[3, 0], [11, 1]] }
}

},
{
"id": "gl_gages",
"type": "circle",
"source": "hydrofabric",
"source-layer": "gl_gages",
"layout": {},
"paint": {
"circle-color": ["rgba", 153, 0, 17, 1],
"circle-opacity": { "stops": [[3, 0], [11, 1]] }
}

}
],
"id": "basic"
Expand Down
11 changes: 4 additions & 7 deletions modules/map_app/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map Application</title>
<!-- Leaflet CSS -->
<!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" /> -->

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/legend.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/map.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://unpkg.com/maplibre-gl@^4.7.1/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/[email protected]/dist/pmtiles.js"></script>
Expand All @@ -25,10 +21,11 @@ <h1>Select catchments by clicking!</h1>

<main>
<section id="map-container">
<div id="map"></div>
<div id="map"><button id="toggle-button">Hide gages</button></div>

<div class="command-container">
<div class="command-header">
<span>Command - copy up to and include the operation you want to perform</span>
<span>Command</span>
<button id="copy-to-clip" class="copy-button" aria-label="Copy to clipboard">
<svg class="copy-icon" viewBox="0 0 16 16" width="16" height="16">
<path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
Expand Down

0 comments on commit 87183db

Please sign in to comment.