ssp6904/usmap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated layout

Browse Source
This commit is contained in:
Shaun Hoffer 2024-08-17 01:02:19 -04:00
parent 94840e5cb3
commit 3f4c4adc11
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -8,20 +8,32 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="//files.shaunhoffer.cc/states.js"></script> <script src="//files.shaunhoffer.cc/states.js"></script>
<script src="//files.shaunhoffer.cc/counties.js"></script> <script src="//files.shaunhoffer.cc/counties.js"></script>
<meta content="#e8e8e8" name="theme-color"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style> <link href="https://cdn.jsdelivr.net/npm/halfmoon@2.0.1/css/halfmoon.min.css" rel="stylesheet">
* { <script>
margin: 0; // Set theme to the user's preferred color scheme
function updateTheme() {
const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
"dark" :
"light";
document.querySelector("html").setAttribute("data-bs-theme", colorMode);
} }
html, body {
height: 100%;
}
</style>
</head>
<body>
<div id="app" style="height: 100%;">
updateTheme()
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
</script>
</head>
<body style="min-height: 100vh">
<div class="container-fluid p-2">
<div class="card">
<div class="card-header">Simple map with leaflet</div>
<div class="card-body p-0">
<div id="app" style="height: 600px;"></div>
</div>
</div>
</div> </div>
<script> <script>
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@ -37,6 +49,10 @@ var arcgissatellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/s
maxZoom: 19 maxZoom: 19
}); });
var radaroverlay = L.tileLayer('https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/ridge::USCOMP-N0Q-0/{z}/{x}/{y}.png', {
maxZoom: 19
});
var google = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', { var google = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 19, maxZoom: 19,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'] subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
@ -58,7 +74,7 @@ var defaultStyle = {
var countiesL = L.geoJson(counties, {style: defaultStyle}); var countiesL = L.geoJson(counties, {style: defaultStyle});
var statesL = L.geoJson(statesData, {style: defaultStyle}); var statesL = L.geoJson(statesData, {style: defaultStyle});
var baseMaps = {"OpenStreetMap": osm,"Arcgis Satellite": arcgissatellite,"Topo": topo}; var baseMaps = {"OpenStreetMap": osm,"Arcgis Satellite": arcgissatellite,"Topo": topo};
var overlayMaps = {"Counties": countiesL,"States": statesL}; var overlayMaps = {"Counties": countiesL,"States": statesL, "Radar overlay": radaroverlay};
var layerControl = L.control.layers(baseMaps, overlayMaps, {collapsed: false}); var layerControl = L.control.layers(baseMaps, overlayMaps, {collapsed: false});
layerControl.addTo(map); layerControl.addTo(map);