Leaflet-Geoman – Checking Validity of Polygon Drawn with Leaflet-Geoman Plugin

invalid-layerleafletleaflet-plugins

We are using Leaflet.js to allow our users to draw polygons and save them to their GIS server. We do this by converting the geometry from Leaflet into WFS format and making an Insert Transaction via WFS.

We are having problems where users are drawing polygons that intersect themselves and saving them. These are then showing up as invalid in PostGIS.

Is there any way to check for validity in JavaScript before we insert them?

We are using Leaflet.Geoman for drawing:

map.on('pm:create', function (e) {
  var layerToDraw = e.layer;            
  //want to check here whether the layerToDraw is valid
  features.addLayer(layerToDraw);
});

Best Answer

If you look at the docs for Leaflet-Geoman at https://github.com/geoman-io/leaflet-geoman#draw-mode you'll see there is allowSelfIntersection option that can prevent drawing kinked polygons.

All you have to do is to set a global option:

map.pm.setGlobalOptions({
  allowSelfIntersection: false
});

Related Solutions

Leaflet – Using L.Control.Opacity Plugin with GeoJSON Layer

As you correctly figured it out, vector layers in Leaflet do not have opacity option to set layer opacity, since opacity is regulated through layer style option. That's the reason why Leaflet.Control.Opacity plugin does not work on these layers.

One possible solution for this is to slightly modify Leaflet.Control.Opacity plugin so that for vector layers function is called which can change vector layer opacity through it's style.

There are only two lines to be added to the plugin internal _addItem method. Below is relevant part of the code where lines have to be inserted:

input.addEventListener('input', (event) => {
  const rgValue = event.target.value;
  const layer = this._getLayer(input.layerId).layer;
  if (this.options.vectorLayerOpacity) {                    // added line
    this.options.vectorLayerOpacity(layer, rgValue / 100);  // added line
  } else if (typeof layer._url === 'undefined') {
  } else {
    layer.setOpacity(Number(rgValue / 100));
  }
});

As a consequence function specified in newly introduced vectorLayerOpacity option will be called at each slider change, with two parameters: layer and opacity.

Below is an example of modified plugin used (only relevant part of code included):

var initLayerOpacity = 0.4;

var initLineOpacity = 1;
var initFillOpacity = 0.7;

var lineOpacity = initLineOpacity * initLayerOpacity;
var fillOpacity = initFillOpacity * initLayerOpacity;

function style(feature) {
  return {
    weight: 2,
    opacity: lineOpacity,
    color: 'white',
    dashArray: '3',
    fillOpacity: fillOpacity,
    fillColor: getColor(feature.properties.density)
  };
}

var geojson = L.geoJson(statesData, {
  style: style,
  opacity: initLayerOpacity
}).addTo(map);

  var layers = {
   'OSM': osmLayer,
   'GeoJSON': geojson
  }
  
function vectorLayerOpacity(layer, opacity) {
  lineOpacity = opacity * initLineOpacity;
  fillOpacity = opacity * initFillOpacity;
  geojson.setStyle(style);
}

L.control.opacity(layers, {
  label: 'Layers Opacity',
  vectorLayerOpacity: vectorLayerOpacity
}).addTo(map);

Leaflet TimeDimension Plugin – Moving Leaflet.TimeDimension Plugin Slider with Keyboard

Since Leaflet.TimeDimension plugin has no native keyboard support, you have to catch keyboard events with standard keydown event listener and then use plugin .nextTime and .previousTime methods to move the slider.

Code for this could look something like this:

function handleKeyDown(evt) {
  if (evt.keyCode == 39)
    timeDimension.nextTime(1);
  else if (evt.keyCode == 37) {
    timeDimension.previousTime(1);
  }
}

document.addEventListener('keydown', handleKeyDown);

Best Answer

Related Solutions

Leaflet – Using L.Control.Opacity Plugin with GeoJSON Layer

Leaflet TimeDimension Plugin – Moving Leaflet.TimeDimension Plugin Slider with Keyboard

Related Question