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.
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'
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">
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 !
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. |
var options = {
position: 'topright',
collapsed: 'false'
}
var geocoder = L.geocoderBAN(options).addTo(map)
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)
}
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 |
var geocoder = L.geocoderBAN().addTo(map)
map.on('contextmenu', function () {
geocoder.toggle()
})
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.