Leaflet WFS by ThomasG77

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('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="//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>