f1a627d4af91444f3fca by ThomasG77

index.html

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""></script>
    <script src="https://unpkg.com/jsts@2.3.0/dist/jsts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.5/proj4.min.js"></script>
    <script src="bundle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* configure the size of the map */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // initialize Leaflet
      var map = L.map('map').setView({lon: 2.18, lat: 46}, 8);
      var epsg3857 = proj4.Proj("EPSG:3857");
      var crss = {
        "EPSG:3857": epsg3857
      };
      var pt = {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [2.18, 46]
        }
      };
      
      // Reproject geometry coordinates to EPSG 3857
      var point3857geometry = reproject.reproject(pt.geometry, proj4.WGS84, epsg3857, crss);

      // Convert GeoJSON geometry with EPSG 3857 coordinates to jsts geometry
      var geojsonReader = new jsts.io.GeoJSONReader();
      var ptJsts = geojsonReader.read(point3857geometry);
      // Create a 40000 meters buffer in "local" projection 3857
      var bufferPtJsts = ptJsts.buffer(40000);
      // Write back the generate buffer to GeoJSON
      var geojsonWriter = new jsts.io.GeoJSONWriter();
      var bufferGeoJSON = geojsonWriter.write(bufferPtJsts, 32);
      // Reproject geomtry of buffer to WGS84
      var bufferWGS84 = reproject.reproject(bufferGeoJSON, epsg3857, proj4.WGS84, crss);
      console.log(bufferWGS84);
      // Copy input feature and change geometry to polygon buffer
      var bufferFeature = JSON.parse(JSON.stringify(pt));
      bufferFeature.geometry = bufferWGS84;
      // Add GeoJSON as a Leaflet layer
      var myLayer = L.geoJSON().addTo(map);
      myLayer.addData(bufferFeature);

      // add the OpenStreetMap tiles
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
      }).addTo(map);

      // show the scale bar on the lower left corner
      L.control.scale().addTo(map);

      // show a marker on the map
      L.marker({lon: 0, lat: 0}).bindPopup('The center of the world').addTo(map);
    </script>
  </body>
</html>

bundle.js

var reproject=function(e,r){"use strict";var t=r.hasOwnProperty("default")?r.default:r;function n(e,r){return(t=e).length>=2&&"number"==typeof t[0]&&"number"==typeof t[1]?r(e):e.map((function(e){return n(e,r)}));var t}function o(e,r,t){if(null==t)return t;var n=function(e){if(null==e||"object"!=typeof e)return e;var r=e.constructor();for(var t in e)e.hasOwnProperty(t)&&(r[t]=e[t]);return r}(t),i=o.bind(this,e,r);switch(t.type){case"Feature":n.geometry=i(t.geometry);break;case"FeatureCollection":n.features=n.features.map(i);break;case"GeometryCollection":n.geometries=n.geometries.map(i);break;default:e(n)}return r&&r(n),n}function i(e,r){var t,n=e.crs;if(void 0===n)throw new Error('Unable to detect CRS, GeoJSON has no "crs" property.');if("name"===n.type?t=r[n.properties.name]:"EPSG"===n.type&&(t=r["EPSG:"+n.properties.code]),!t)throw new Error("CRS defined in crs section could not be identified: "+JSON.stringify(n));return t}function u(e,r){return"string"==typeof e||e instanceof String?r[e]||t.Proj(e):e}function c(e,r,c,a){a=a||{},r=r?u(r,a):i(e,a),c=u(c,a);var s=t(r,c).forward.bind(s);function f(e){var r=s(e);return 3===e.length&&void 0!==e[2]&&void 0===r[2]&&(r[2]=e[2]),r}return o((function(e){e.crs&&delete e.crs,e.coordinates=n(e.coordinates,f)}),(function(e){e.bbox&&(e.bbox=function(e){var r=[Number.MAX_VALUE,Number.MAX_VALUE],t=[-Number.MAX_VALUE,-Number.MAX_VALUE];return o((function(e){n(e.coordinates,(function(e){r[0]=Math.min(r[0],e[0]),r[1]=Math.min(r[1],e[1]),t[0]=Math.max(t[0],e[0]),t[1]=Math.max(t[1],e[1])}))}),null,e),[r[0],r[1],t[0],t[1]]}(e))}),e)}var a={detectCrs:i,reproject:c,reverse:function(e){return o((function(e){e.coordinates=n(e.coordinates,(function(e){return[e[1],e[0]]}))}),null,e)},toWgs84:function(e,r,n){return c(e,r,t.WGS84,n)}},s=a.detectCrs,f=a.reproject,d=a.reverse,p=a.toWgs84;return e.default=a,e.detectCrs=s,e.reproject=f,e.reverse=d,e.toWgs84=p,e}({},proj4);