Friday 27 September 2019

Address searching/geocoding using Leaflet


I am pretty new to coding.


I have been using Leaflet to create an interactive map, I have managed to pull in some data from a PostGIS database and have points on the map, downloaded some plugins from GitHub which enabled me to change basemap, turn on and off layers etc. So I have some experience of using plugins.


However I want the users to be able to enter an address and the map take them to that address. I have tried a few different ones which I have found around the web but I have struggled to implement it into my map, I got one sort of working, but the address search wasn't the best, mainly going to US addresses, and I need UK.



Anyway, a good address search is probably this one:


https://github.com/smeijer/leaflet-geosearch


But honestly I don't really know where to start. It mentions npm, which I don't properly understand and there is a ton of files.


I just find it all a bit overwhelming, in the Leaflet example is mentions code such as:


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

const provider = new OpenStreetMapProvider();

const searchControl = new GeoSearchControl({

provider: provider,
});

const map = new L.Map('map');
map.addControl(searchControl);

Is it just a case of downloading all the files then adding that code into my existing JS code?


I think I have basically tried that and had no luck so I presume the answer is no.



Answer



I tried too and failed. Here is an option that uses OSM and has other options. https://github.com/perliedman/leaflet-control-geocoder



and a HTML page that works using it.




Leaflet















No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...