I'm trying to draw objects from Leaflet (Leaflet.draw) into a PostGIS database. From https://www.npmjs.com/package/leaflet-wfst it's the Flexberry one if I'm right
I enabled JSONP in GeoServer, I created a workspace that allowed complete WFS transactions linked to a specific PostGIS user created through
CREATE USER drafts;
ALTER USER drafts WITH PASSWORD 'whatever';
CREATE DATABASE drafts;
GRANT ALL PRIVILEGES ON DATABASE drafts TO drafts;
CREATE EXTENSION postgis;
\q
I started again using drafts account by psql -h localhost drafts drafts
CREATE TABLE public.sites
(
gid serial NOT NULL,
the_geom geometry(Point,4326),
CONSTRAINT sites_pkey PRIMARY KEY (gid )
);
CREATE INDEX sites_the_geom_gist ON public.sites
USING gist (the_geom );
I added sites in my workspace, allowed for any public user to modify this layer,
and created the following page from a Polygon example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.toolbar.js/0.3.0/leaflet.toolbar.css" />
<style>
html, body, #map {
margin: 0;
height: 100%;
width: 100%;
}
</style>
<title>Leaflet-WFST polygon demo</title>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<link rel="stylesheet" href="https://mappingforyou.eu/javascript/leaflet.draw.css" />
<script src="https://mappingforyou.eu/javascript/leaflet.draw-src.js"></script>
<link type="text/css" rel="stylesheet" href="https://mappingforyou.eu/javascript/leaflet-easybutton.css" />
<script type="text/javascript" src="https://mappingforyou.eu/javascript/leaflet-easybutton.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.js"></script>
<script src="https://mappingforyou.eu/javascript/leaflet-wfst.src.js"></script>
<script>
var map = L.map('map', {editable: true}).setView([48.5, 2], 10);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var wfstPoly = new L.WFST({
url: 'https://mappingforyou.eu/geoserver/ows',
typeNS: 'opendata',
typeName: 'sites',
crs: L.CRS.EPSG4326,
geometryField: 'the_geom',
forceMulti: true,
schema: 'https://mappingforyou.eu/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=opendata:sites',
style: {
color: 'blue',
weight: 2
}
}).addTo(map)
.once('load', function () {
map.fitBounds(wfstPoly);
});
////// draw and edit
var drawControl = new L.Control.Draw({
draw:{circle:false, circlemarker:false, rectangle:false,
},
edit:{featureGroup: wfstPoly } });
map.addControl(drawControl);
map.on('draw:created', function (e) {
var layer = e.layer;
wfstPoly.addLayer(layer)});
map.on('draw:edited', function (e) {
var layers = e.layers;
layers.eachLayer( function (layer) {
wfstPoly.editLayer(layer);
})
});
// Save button
L.easyButton('fa-save', function () {
wfstPoly.save();
}, 'Save changes').addTo(map);
</script>
</body>
</html>
But newly created points would not be saved. Only points created meanwhile on a PostGIS connection of QGIS are showing up.
Is there something I missed?
