Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Last active January 4, 2023 13:42
Show Gist options
  • Save ThomasG77/ca2496faeca7b908ef88435a8d195c92 to your computer and use it in GitHub Desktop.
Save ThomasG77/ca2496faeca7b908ef88435a8d195c92 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet WFS
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" /> -->
<title></title>
<style>
html,
body,
#map {
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script> -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.js"></script>
<script src="https://flexberry.github.io/Leaflet-WFST/dist/leaflet-wfst.src.js"></script>
<script>
var map = L.map('map').setView([43.457818, -80.0298962], 12);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var objWfst = {
url: 'https://ahocevar.com/geoserver/wfs',
typeNS: 'osm',
typeName: 'water_areas',
crs: L.CRS.EPSG3857,
geometryField: 'the_geom',
filter: new L.Filter.BBox('the_geom', map.getBounds(), L.CRS.EPSG3857),
style: {
color: 'blue',
weight: 2
}
};
var wfst = new L.WFST(objWfst).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment