Socket
Socket
Sign inDemoInstall

leaflet-geocoder-ban

Package Overview
Dependencies
1
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

leaflet-geocoder-ban

A simple Leaflet Plugin to add a geocoding control to your map, powered by the french [BAN](https://adresse.data.gouv.fr/) (Base Adresse Nationale) API. This API only covers French addresses.


Version published
Weekly downloads
436
decreased by-35.69%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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

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:

optiontypedefaultdescription
positionstring'topleft'Control position
placeholderstring'adresse'Placeholder of the text input
resultsNumberinteger7Default number of address results suggested
collapsedbooleantrueInitial state of the control, collapsed or expanded
autofocusbooleantrueIf the initial state of the control is expanded, choose wether the input is autofocused on page load
serviceUrlstring'https://api-adresse.data.gouv.fr/search/'API of the url
minIntervalBetweenRequestsinteger250delay in milliseconds between two API calls made by the geocoder
stylestring'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

methoddescription
remove()removes the geocoder

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

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

FAQs

Package last updated on 26 Sep 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc