0

First off I am pretty new to coding so apologies for the newby questions.

Basically 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. Do I need all the 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);

So 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.

  • where am i loosing it guys i tried everything i even copied and pasted the above code as is it never worked never not even showing up anything – silvester Sep 21 '18 at 18:21
  • clear your cache or open it up in incognito window – ziggy Sep 21 '18 at 19:19
6

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.

<!DOCTYPE html>
<html>
<head><title>Leaflet</title>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>     
</head>
<body>
    <style> #map {width: 100%;height: 100%; }   </style>

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

<script>
//Example from https://github.com/perliedman/leaflet-control-geocoder  
    var map = L.map('map').setView([42.697765, -73.108005], 3);  

    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

    L.Control.geocoder().addTo(map);

</script>
</body>
</html>
  • Thanks Bill - I will give this a go. Did you manage to get it working? – ohh_danielson Jul 30 '18 at 9:49
  • Just an update, I have managed to get this code working in a bog standard Leaflet map, so that's fantastic thank you. I now need to just incorporate this code into my main map/code that I have been working on in the last few weeks. Fingers crossed. – ohh_danielson Jul 30 '18 at 11:29
  • Shouldn't be too bad, grab the two script tags and the L.Control line in the JavaScript. I didn't play with the options on the linked page but they looked easy enough. Good Luck... – Bill Chappell Jul 30 '18 at 12:36
  • Yeah I think I will be able to incorporate it into my code easily enough. I did try some of the options, one in particular shows you a polygon of the search result, so a postcode would display a polygon showing the extent. I couldn't quite get it to work mind, even though the code looked simple enough, but had no luck. – ohh_danielson Jul 31 '18 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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