bozdoz / wp-plugin-leaflet-map

Add leaflet maps to Wordpress with shortcodes
https://wordpress.org/plugins/leaflet-map/
GNU General Public License v2.0
140 stars 71 forks source link

Expose Filter options for GeoJson #172

Open GaryHeaven opened 1 year ago

GaryHeaven commented 1 year ago

It would be really nice to be able to impose a filter from the geojson shortcode, something like [leaflet-geojson src="...." filter_json="{property}='..some value..'"]{PopupText}[/leaflet-geojson]. (where the expression in the filter_json is evaluated by the filter: function call from Leaflet GeoJson.)

I have had a wee tinker and with my limited javascript skills can get something to work if I use the feature.properties.Property syntax and this is OK but verbose and think that the curly braces syntax would be better.

bozdoz commented 1 year ago

I don't understand the proposal. Could you give an example?

GaryHeaven commented 1 year ago

I have two cases where currently I generate multiple small geojson files instead of one bigger.

The first is visualisation of project stages for a trail construction project where we have Stage1, then Stage1 and Stage2 (i.e. Stage 1 is complete and now we do Stage2) so the same data gets repeated in each file.

The second is where there are points that need to be as standard markers or as circle markers. These require their own files as the circlemarker can't be applied on a per point basis from the shortcode.

I have modded your shortcode code like this.. var layer = L.ajaxGeoJson(src, { type: '<?php echo $this->type; ?>', style : layerStyle, onEachFeature : onEachFeature, pointToLayer: pointToLayer, **filter: function(feature) {return (<?php echo $filter_json; ?>); }** }); and it seems to do a good enough job.

bozdoz commented 1 year ago

What kind of filters are you thinking? Maybe something like this [leaflet-geojson filter="a:123,b:456"]?

Then the filter function can be:

var filteredProps = filterString.split(',').reduce(function(a, b) {
  var parts = b.split(':');
  a[parts[0]] = parts[1];
  return a;
}, {});
var filter = function (feature) {
  for (var key in filteredProps) {
    if (feature.properties[key] !== filteredProps[key]) {
      return false
    }
  }

  return true
};
GaryHeaven commented 1 year ago

something like that but I have a list of values for each property i.e.[leaflet-geojson filter="a:{123,789},b:456"]

bozdoz commented 1 year ago

So, like (a===123 || a===789) && b===456?

GaryHeaven commented 1 year ago

Yes, that is the idea. Otherwise I think we drop into intepreting code or passing a javascript expression with all its validation headaches.

gmbo commented 1 year ago

I think I was going to ask a similar question. I am looking for a way to use the iconurl that is in the geojson file. At each featcher is a url, it could also for example size and distance. [leaflet-geojson src="../../../wp-content/uploads/test/test1.geojson" iconurl=../../../wp-content/uploads/test/k14.svg= iconAnchor="8,12" iconsize="32,32"] {name}<hr />{description}<hr />{iconurl}[/leaflet-geojson] This is what currently works {iconurl} is cleanly recognized as a variable and can be displayed in the popup text. It would be super nice if you could use this variable in the icon definition as well. [leaflet-geojson src="../../../wp-content/uploads/test/test1.geojson" iconurl={iconurl} iconAnchor={iconAnchor} iconsize={iconAnchor}] {name}<hr />{description}[/leaflet-geojson] Or is there something I might have overlooked for this.

Translated with www.DeepL.com/Translator (free version) from

Ich glaube ich wollte eine änliche Frage stellen. Ich suche nach einer Möglichkeit die Iconurl , die im geojson File eingetragen ist zu benutzen. An jedem featcher steht eine url, es könnte auch zum Beispiel Größe und Abstand. [leaflet-geojson src="../../../../wp-content/uploads/test/test1.geojson" iconurl=../../../../wp-content/uploads/test/k14.svg= iconAnchor="8,12" iconsize="32,32"] {name}<hr />{description}<hr />{iconurl}[/leaflet-geojson] Das ist das was zur Zeit funktioniert {iconurl} wird sauber als Variable erkannt und kann im Popuptext dargestellt werden. Es wäre super schön wenn man diese Variable auch in der Icon definition nutzen könnte. [leaflet-geojson src="../../../../wp-content/uploads/test/test1.geojson" iconurl={iconurl} iconAnchor={iconAnchor} iconsize={iconAnchor}] {name}<hr />{description}[/leaflet-geojson] oder gibt es dafür etwas was ich übersehen haben könnte.

hupe13 commented 1 year ago

It may be not what you want, but have a look at [geojsonmarker] or [leaflet-featuregroup] from Extensions for Leaflet Map.