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:


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');

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.


2 Answers 2


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>
 <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>     
    <style> #map {width: 100%;height: 100%; }   </style>

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

//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);


  • 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. Jul 30, 2018 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... Jul 30, 2018 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. Jul 31, 2018 at 13:54

Using the geocoding control to search for addresses and center the map.

  var map = L.map('map').setView([-28.4792625, 24.6727135], 4);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'

  var searchControl = L.esri.Geocoding.geosearch().addTo(map);

  var results = L.layerGroup().addTo(map);

  searchControl.on('results', function (data) {
    for (var i = data.results.length - 1; i >= 0; i--) {
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  <meta charset="utf-8" />
  <title>Geocoding Control</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.4.1/dist/esri-leaflet.js"

  <!-- Load Esri Leaflet Geocoder from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.css"
  <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"


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


Source: http://esri.github.io/esri-leaflet/examples/geocoding-control.html

  • 1
    This is a great resource thanks for sharing! Jun 6, 2021 at 13:52
  • @ErichPurpur Happy to share 🙂 Jun 8, 2021 at 8:27
  • Does ESRI require paid account to have a map on a public site?
    – Bayu
    Dec 6, 2021 at 10:25
  • 1
    @Bayu If you're using Esri content and services, you'll need to license your usage with an API key or an ArcGIS identity. If you display an ArcGIS Online service in any Leaflet application, they require that you include Esri attribution and recognize data providers. github.com/esri/esri-leaflet#terms Dec 7, 2021 at 21:56

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.