Pass GeoPackage layer attributes to marker popup in leaflet without click on the marker

Question

I am working on querying a GeoPackage layer based on leaflet and leaflet-geosearch.

Here is the plain js code.

import './style.css'
import 'leaflet/dist/leaflet.css'
import 'leaflet-geosearch/dist/geosearch.css';


import L from 'leaflet'

import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';

import '@ngageoint/leaflet-geopackage';

let provider = new OpenStreetMapProvider();

const searchControl = new GeoSearchControl({
  provider: provider,
  autoComplete: true, // optional: true|false  - default true
  autoCompleteDelay: 250,
  style: 'bar'
});


const map = L.map('map', {
  center: [15.50, 75],
  zoom: 5
});
map.addControl(searchControl);


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

  L.geoPackageFeatureLayer([], {
    geoPackageUrl: 'mycustomgeopackage.gpkg',
    layerName: 'temm',
    style: function(feature) {
      return {
        color: '#F00',
        weight: 1,
        opacity: 0.5,
      };
    },
    onEachFeature: function( feature, layer){
          var name = feature.properties.city_served;
          layer.bindPopup('Name: ' + name ).openPopup();
      }
  }).addTo(map);

I was able to load the geopackage as well as perform the geosearch using the above code. I have added so that I can display the properties of cities served.

onEachFeature: function( feature, layer){
          var name = feature.properties.city_served;
          layer.bindPopup('Name: ' + name ).openPopup();
      }

But, I see the city information only 'click' event on the feature class. How can I pass this information to marker popup and display the popup without the click event?

If I understand you correctly you want to have permanently opened/shown label on feature? — TomazicM
– TomazicM, Commented Feb 27, 2023 at 11:29
leaflet geosearch plugin generates only 1 marker. For each new search the old marker is replaced by a new one. — darthvaderlives
– darthvaderlives, Commented Feb 28, 2023 at 1:03
And you want info about Geopackage layer feature under search marker to be displayed in search marker popup? — TomazicM
– TomazicM, Commented Feb 28, 2023 at 10:21

TomazicM · Accepted Answer · 2023-03-02 13:48:59Z

There's probably no other solution than to search in GeoPackage layer for feature that contains search result coordinate (using turf.js library) and use GeoSearchControl popupFormat option to add that info to search result popup.

Relevant part of the code could then look something like this:

var geoPackageLayer = L.geoPackageFeatureLayer([], {
  geoPackageUrl: 'mycustomgeopackage.gpkg',
  layerName: 'temm',
  style: function(feature) {
    return {
      color: '#F00',
      weight: 1,
      opacity: 0.5,
    };
  },
  onEachFeature: function( feature, layer){
    var name = feature.properties.city_served;
    layer.bindPopup('Name: ' + name ).openPopup();
  }
}).addTo(map);
  
function popupFormat(search) {
  var point = turf.point([search.result.x, search.result.y]);
  var layers = geoPackageLayer.getLayers();
  var featureInfo = '';
  for (var i = 0; i < layers.length; i++) {
    if (turf.booleanPointInPolygon(point, layers[i].feature)) {
      featureInfo = '<br>Name: ' + layers[i].feature.properties.city_served;
      break;
    }
  };
  return(search.result.label + featureInfo);
}

const searchControl = new GeoSearchControl({
  provider: provider,
  autoComplete: true
  autoCompleteDelay: 250,
  style: 'bar',
  popupFormat: popupFormat
});

Below is an example of search result popup, where info second line comes from GeoPackage feature under result marker:

Thank you very much. I was avoiding to use turf so that I can save some computing time, but it looks like there is no avoiding this. this solution works perfectly. — darthvaderlives
– darthvaderlives, Commented Mar 3, 2023 at 1:33

Stack Exchange Network

Pass GeoPackage layer attributes to marker popup in leaflet without click on the marker

1 Answer 1

Your Answer

Hot Network Questions

Pass GeoPackage layer attributes to marker popup in leaflet without click on the marker

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions