1

The following JSFiddle uses Leaflet and leaflet geocoder control search plugin.

Code below

HTML:

<div id="map"></div>

CSS:

        #map {
        height: 100%;
        position: absolute;
        left:0;
        bottom:0;
        right: 0;
    }

JS:

var areaOne = "geojson";
var areaTwo = "geojson";

function clickZoom(e) {
    map.setView(e.target.getLatLng(),4.5);
}

const areaOneGeo = L.geoJson(areaOne, {style: styleAlberta, onEachFeature: infoWindow});
const areaTwoGeo = L.geoJson(areaTwo, {style: styleAlberta, onEachFeature: infoWindow});
/* Step 1 + 2 */

/* Step 3 */
const map = L.map('map', {
    center: [50.8, -110],
    zoom: 4.5,
    layers: [areaOneGeo, areaTwoGeo]   
});

/* tile Layer */
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(map);

/* geocoder */          
L.Control.geocoder({collapsed: false, placeholder:"Search Any ZipCode, Address, City, or County"}).addTo(map);

/* geojson Style */
function styleAlberta(feature, layer) {
    return {
        fillColor: feature.properties.COLOR,
        weight: 1,
        opacity: 1,
        color: feature.properties.COLOR,
        dashArray: '0',
        fillOpacity: 0.8
    };
}

/* InfoWindow Content */

  function infoWindow(feature, layer) {
    var infoWindowBubble = layer.bindPopup(
        "<b>COLOR:</b> " + feature.properties.COLOR + "<br />" +
        "<b>INCOME:</b> " + feature.properties.INCOME + "<br />"
            );
  }

If you search "Calgary" the marker lands and popup opens Nominatim based results containing:

Calgary
Alberta Canada

enter image description here

But if you click on the polygon on which the marker has landed another popup opens taking data from GeoJSON containing:

COLOR: #09cb97
INCOME: 140668

enter image description here

How can I make the search marker open the GeoJSON-based popup, So that it looks like this: enter image description here

I can't find any examples or support threads addressing this in any way.

0

1 Answer 1

0

There are a few things to be taken care of to achieve desired result of opening default GeoJSON layer popup at the location of Geocoder search result:

  • Default Geocoder result marker has to be turned off with the defaultMarkGeocode: false.
  • Custom event processing function for processing Geocoder 'markgeocode' search result event has to be defined. Function receives search location center in the evt.geocode.center event property.
  • Click event has to be fired on feature/layer in GeoJSON layers. This has to be exact feature/layer that contains search location. This feature can be found with the help of leaflet-pip plugin.

So relevant part of the code could finally look something like this:

var geocoder = L.Control.geocoder({
  defaultMarkGeocode: false,
  collapsed: false,
  placeholder:"Search Any ZipCode, Address, City, or County"
}).addTo(map);

geocoder.on('markgeocode', function(evt) {
  var latLng = L.latLng([evt.geocode.center.lat, evt.geocode.center.lng]);
  var layers = leafletPip.pointInLayer(latLng, areaOneGeo);
  if (layers.length == 0) {
    layers = leafletPip.pointInLayer(latLng, areaTwoGeo);
  }
  if (layers.length > 0) {
    layers[0].fire('click', {
      latlng: latLng
    });
  }
});

Sample of code in action:

enter image description here

1
  • Wow! Ty so much, this works!
    – Discover
    Commented Apr 2 at 15:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.