Skip to content

Plugin to add gecoding to your Leaflet map, powered by the french BAN (Base Adresse Nationale) API.

Notifications You must be signed in to change notification settings

entrepreneur-interet-general/leaflet-geocoder-ban

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

leaflet-geocoder-ban NPM version Leaflet 1.0.0 compatible!

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.

About

Plugin to add gecoding to your Leaflet map, powered by the french BAN (Base Adresse Nationale) API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published