mirror of
https://github.com/flatgeobuf/flatgeobuf.git
synced 2025-12-08 19:06:03 +00:00
97 lines
3.5 KiB
HTML
97 lines
3.5 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="/examples/site.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/flatgeobuf@4.3.3/dist/flatgeobuf-geojson.min.js"></script>
|
|
<script src="https://unpkg.com/json-formatter-js@2.5.23/dist/json-formatter.umd.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
<ul class="primary-navigation">
|
|
<li class="active">
|
|
Leaflet Example
|
|
</li>
|
|
<li>
|
|
<a href="/examples/openlayers/">OpenLayers Example</a>
|
|
</li>
|
|
<li>
|
|
<a href="/examples/maplibre/">MapLibre Example</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="secondary-navigation">
|
|
<li class="active">Basic Example</li>
|
|
<li><a href="/examples/leaflet/filtered.html">Filter By Rect</a></li>
|
|
<li><a href="/examples/leaflet/large.html">Filtering a Large Dataset</a></li>
|
|
</ul>
|
|
|
|
<style>
|
|
#map { height: 480px; }
|
|
</style>
|
|
<div id="map"></div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
// basic OSM Leaflet map
|
|
const map = L.map('map').setView([39, -98], 4);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
// optionally show some meta-data about the FGB file
|
|
function handleHeaderMeta(headerMeta) {
|
|
const header = document.getElementById('header')
|
|
const formatter = new JSONFormatter(headerMeta, 10)
|
|
header.appendChild(formatter.render())
|
|
}
|
|
|
|
const response = await fetch('/test/data/UScounties.fgb');
|
|
for await (const feature of flatgeobuf.deserialize(response.body, undefined, handleHeaderMeta)) {
|
|
// Leaflet styling
|
|
const defaultStyle = {
|
|
color: 'blue',
|
|
weight: 2,
|
|
fillOpacity: 0.2,
|
|
};
|
|
|
|
// Add the feature to the map
|
|
L.geoJSON(feature, {
|
|
style: defaultStyle
|
|
}).on({
|
|
// highlight on hover
|
|
'mouseover': (e) => {
|
|
const layer = e.target;
|
|
layer.setStyle({
|
|
color: 'blue',
|
|
weight: 4,
|
|
fillOpacity: 0.7,
|
|
});
|
|
layer.bringToFront();
|
|
},
|
|
// remove highlight when hover stops
|
|
'mouseout': (e) => {
|
|
const layer = e.target;
|
|
layer.setStyle(defaultStyle);
|
|
}
|
|
})
|
|
// show some per-feature properties when clicking on the feature
|
|
.bindPopup(`<h1>${feature.properties.NAME} ${feature.properties.LSAD}, ${feature.properties.STATE}</h1>`)
|
|
.addTo(map);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<p>
|
|
This basic example shows how to render all the features in a FlatGeobuf
|
|
onto a <a href="https://leafletjs.com">Leaflet</a> map. It shows
|
|
per-feature properties when you click on each feature.
|
|
</p>
|
|
|
|
<div id="header">
|
|
<h3>Parsed header content</h3>
|
|
</div>
|
|
</body>
|
|
</html>
|