leaflet-geocoder-ban v1.0.7

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

You can either:

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

or

• clone the git repository

Usage

First, load the leaflet files as usual.

Then, load the two leaflet-geocoder-ban files : the js and the css.

They are located in the src folder and minified versions are provided in the dist folder. You can load them directly in your html page :

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

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)

Options

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

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

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

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;
}