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

Address filter refocus map #154

Closed shaneonabike closed 5 months ago

shaneonabike commented 2 years ago

Hey there,

This is more of a question then a bug, but I was curious if others had implemented a address box whereby the address would be geocoded and then the map moved within range of points.

I see that in the API of this plugin you create a geocoder for addresses through Google Maps, but I wasn't sure if others had done some fancy JS or something else to make a filter like this work. I think it's an awesome addition really.

Thanks!

bozdoz commented 2 years ago

I'm sure there's some simple PHP to do it; might be worth adding to the FAQ; but I have not implemented this.

bozdoz commented 1 year ago

I suppose this is a question of whether we can use the geocoder via Ajax. Seems worth trying.

shaneonabike commented 5 months ago

I actually found https://github.com/smeijer/leaflet-geosearch which can be integrated into the Leaflat map and this extension.

hupe13 commented 5 months ago

Do you know this example?

shaneonabike commented 4 months ago

Wow @hupe13 that totally helped me. Just for reference for other folks. I'll dd the code here to make it easier when discovering this issue.

const search = new GeoSearch.GeoSearchControl({
    provider: new GeoSearch.OpenStreetMapProvider({
        params: {
            // email: "john@example.com", // auth for large number of requests
            "accept-language": "de", // render results in German
            countrycodes: "de", // limit search results to Germany
            addressdetails: 1, // include additional address detail parts
        },
    }),
    //more options see https://github.com/smeijer/leaflet-geosearch, search "Show result"
    updateMap: false,
});
map.addControl(search);
map.on("geosearch/showlocation", function(event){
    map.setView([event.location.y, event.location.x], 17);
});

The key here being that we want to turn off updating the map via updateMap: false. Then we set the view based on the geosearch/showlocation action.

hupe13 commented 4 months ago

I have just seen that my example did not work, now it works again. Thank you.