leaflet-geocoder-ban

A simple Leaflet Plugin to add a geocoding control to your map, powered by the french BAN (Base Adresse Nationale) API. This API only covers French addresses.

Check the online demos : demo1 and demo2.

Installation

With NPM

Install with npm npm install --save leaflet-geocoder-ban

and import the files :

import 'leaflet-geocoder-ban/dist/leaflet-geocoder-ban.min.css'
import 'leaflet-geocoder-ban/dist/leaflet-geocoder-ban.js'

Manually

Clone the git repository or manually download the js and css files from the dist folder and load them :

<script src="leaflet-geocoder-ban.min.js"></script>
<link rel="stylesheet" href="leaflet-geocoder-ban.css">

Usage

In your javascript code, create a Leaflet map:

var map = L.map('mapid').setView([45.853459, 2.349312], 6)

L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
attribution: 'map attribution'}).addTo(map)

And add the geocoder:

var geocoder = L.geocoderBAN().addTo(map)

That's it !

Options

You can pass some options to the geocoderBAN() function:

option	type	default	description
position	string	'topleft'	Control position
placeholder	string	'adresse'	Placeholder of the text input
resultsNumber	integer	7	Default number of address results suggested
collapsed	boolean	true	Initial state of the control, collapsed or expanded
autofocus	boolean	true	If the initial state of the control is expanded, choose wether the input is autofocused on page load
serviceUrl	string	'https://api-adresse.data.gouv.fr/search/'	API of the url
minIntervalBetweenRequests	integer	250	delay in milliseconds between two API calls made by the geocoder
style	string	'control'	style of the geocoder, either 'control' or 'searchBar'. See the two demos page.

example

var options = {
  position: 'topright',
  collapsed: 'false'
}

var geocoder = L.geocoderBAN(options).addTo(map)

Custom markgeocode function

When you select a result on the geocoder, it calls a default markGeocode function. If you want to call a custom function, override it. It receives as argument the result given by the BAN API as described here

var geocoder = L.geocoderBAN({
    collapsed: true
}).addTo(map)

geocoder.markGeocode = function(feature) {
    var latlng = [feature.geometry.coordinates[1], feature.geometry.coordinates[0]]
    map.setView(latlng, 14)

    var popup = L.popup()
        .setLatLng(latlng)
        .setContent(feature.properties.label)
        .openOn(map)
}

Methods

method	description
remove()	removes the geocoder

Those methods are only available for the 'control' style (and not for the 'searchBar' style):

method	description
collapse()	collapses the geocoder
expand()	expands the geocoder
toggle()	toggles between expanded and collapsed state

example

var geocoder = L.geocoderBAN().addTo(map)

map.on('contextmenu', function () {
  geocoder.toggle()
})

Customize the search bar look

Customization of the search bar CSS is available through the searchBar class. For example :

.searchBar {
  border: 1px solid red !important;
  max-width: 500px;
}

Have a look at the demo2 code for a more complete customization example.