2024-07-25 16:18:41 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>US Map | Shaun</title>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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/counties.js"></script>
|
2024-08-17 01:02:19 -04:00
|
|
|
<meta content="#e8e8e8" name="theme-color"/>
|
2024-07-25 16:18:41 -04:00
|
|
|
<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" />
|
2024-08-17 01:02:19 -04:00
|
|
|
<link href="https://cdn.jsdelivr.net/npm/halfmoon@2.0.1/css/halfmoon.min.css" rel="stylesheet">
|
|
|
|
|
<script>
|
|
|
|
|
// 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);
|
2024-07-25 16:18:41 -04:00
|
|
|
}
|
|
|
|
|
|
2024-08-17 01:02:19 -04:00
|
|
|
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>
|
2024-07-25 16:18:41 -04:00
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
attribution: '© OpenStreetMap'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var topo = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}g', {
|
|
|
|
|
maxZoom: 19
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var arcgissatellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
|
|
|
maxZoom: 19
|
|
|
|
|
});
|
|
|
|
|
|
2024-08-17 01:02:19 -04:00
|
|
|
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
|
|
|
|
|
});
|
|
|
|
|
|
2024-07-25 16:18:41 -04:00
|
|
|
var google = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var map = L.map('app', {
|
|
|
|
|
center: [37.8, -96],
|
|
|
|
|
zoom: 4,
|
|
|
|
|
layers: osm
|
|
|
|
|
});
|
|
|
|
|
var defaultStyle = {
|
|
|
|
|
color: "#5b85fc",
|
|
|
|
|
opacity: 0.7,
|
|
|
|
|
weight: 3,
|
|
|
|
|
fillColor: "White",
|
|
|
|
|
fillOpacity: 0.1,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var countiesL = L.geoJson(counties, {style: defaultStyle});
|
|
|
|
|
var statesL = L.geoJson(statesData, {style: defaultStyle});
|
|
|
|
|
var baseMaps = {"OpenStreetMap": osm,"Arcgis Satellite": arcgissatellite,"Topo": topo};
|
2024-08-17 01:02:19 -04:00
|
|
|
var overlayMaps = {"Counties": countiesL,"States": statesL, "Radar overlay": radaroverlay};
|
2024-07-25 16:18:41 -04:00
|
|
|
|
|
|
|
|
var layerControl = L.control.layers(baseMaps, overlayMaps, {collapsed: false});
|
|
|
|
|
layerControl.addTo(map);
|
|
|
|
|
|
|
|
|
|
// FeatureGroup is to store editable layers
|
|
|
|
|
var drawnItems = new L.FeatureGroup();
|
|
|
|
|
map.addLayer(drawnItems);
|
|
|
|
|
var drawControl = new L.Control.Draw({
|
|
|
|
|
edit: {
|
|
|
|
|
featureGroup: drawnItems
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
map.addControl(drawControl);
|
|
|
|
|
map.on(L.Draw.Event.CREATED, function (event) {
|
|
|
|
|
var layer = event.layer;
|
|
|
|
|
|
|
|
|
|
drawnItems.addLayer(layer);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
