Leaflet – Pass GeoPackage Layer Attributes to Marker Popup Without Click

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?

Answer 1

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: