From 2f16083c8c7bd535f0223f3a431ca1c39c7646b9 Mon Sep 17 00:00:00 2001 From: Francis Date: Wed, 26 Sep 2018 16:07:42 +0200 Subject: [PATCH] add the possibility to display the control as a search bar as well --- README.md | 25 +++++++++++-- demo/{index.html => demo_control.html} | 10 ++--- demo/demo_search_bar.html | 41 ++++++++++++++++++++ src/leaflet-geocoder-ban.css | 10 +++++ src/leaflet-geocoder-ban.js | 52 +++++++++++++++++--------- 5 files changed, 113 insertions(+), 25 deletions(-) rename demo/{index.html => demo_control.html} (91%) create mode 100644 demo/demo_search_bar.html diff --git a/README.md b/README.md index d68e17e..8b12206 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # leaflet-geocoder-ban [![NPM version](https://img.shields.io/npm/v/leaflet-geocoder-ban.svg)](https://www.npmjs.com/package/leaflet-geocoder-ban) ![Leaflet 1.0.0 compatible!](https://img.shields.io/badge/Leaflet%201.0.0-%E2%9C%93-1EB300.svg?style=flat) 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. -Check the online [demo](https://entrepreneur-interet-general.github.io/leaflet-geocoder-ban/demo/). +Check the online demos : [demo1](https://entrepreneur-interet-general.github.io/leaflet-geocoder-ban/demo/demo_control.html) and [demo2](https://entrepreneur-interet-general.github.io/leaflet-geocoder-ban/demo/demo_search_bar.html). # Installation @@ -15,7 +15,10 @@ or # Usage First, load the leaflet files as usual. -Then, load the two leaflet-geocoder-ban files located in the src folder : +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 : + ```html @@ -46,6 +49,7 @@ You can pass some options to the `geocoderBAN()` function: | 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 @@ -78,12 +82,17 @@ geocoder.markGeocode = function (feature) { # 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 | -| remove() | removes the geocoder | ## example @@ -94,3 +103,13 @@ 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 : + +```css +.searchBar { + border: 1px solid red !important; + max-width: 500px; +} +``` diff --git a/demo/index.html b/demo/demo_control.html similarity index 91% rename from demo/index.html rename to demo/demo_control.html index cc9be5f..1de953b 100644 --- a/demo/index.html +++ b/demo/demo_control.html @@ -1,4 +1,4 @@ - +_ @@ -50,10 +50,10 @@ } */ - map.on('contextmenu', function () { - // a right click on the map toggles the geocoder - geocoder.toggle() - }) + // map.on('contextmenu', function () { + // // a right click on the map toggles the geocoder + // geocoder.toggle() + // }) diff --git a/demo/demo_search_bar.html b/demo/demo_search_bar.html new file mode 100644 index 0000000..d5c80a8 --- /dev/null +++ b/demo/demo_search_bar.html @@ -0,0 +1,41 @@ +_ + + + + + + Leaflet.BAN.geocoder demo + + + + + + + + + +
+ + + + diff --git a/src/leaflet-geocoder-ban.css b/src/leaflet-geocoder-ban.css index 32a99cb..8b94827 100644 --- a/src/leaflet-geocoder-ban.css +++ b/src/leaflet-geocoder-ban.css @@ -92,4 +92,14 @@ .leaflet-control-geocoder-ban-selected { background-color: rgba(0,0,255,0.2); +} +.hidden { + display: none; +} + +.searchBar { + z-index: 1000; + position: relative; + max-width: 400px; + margin: 10px auto 0; } \ No newline at end of file diff --git a/src/leaflet-geocoder-ban.js b/src/leaflet-geocoder-ban.js index 93b801a..b4ada03 100644 --- a/src/leaflet-geocoder-ban.js +++ b/src/leaflet-geocoder-ban.js @@ -20,6 +20,7 @@ const factory = function factoryFunc (L) { L.GeocoderBAN = L.Control.extend({ options: { position: 'topleft', + style: 'control', placeholder: 'adresse', resultsNumber: 7, collapsed: true, @@ -41,42 +42,59 @@ const factory = function factoryFunc (L) { var icon = this.icon = L.DomUtil.create('button', className + '-icon', container) var form = this.form = L.DomUtil.create('div', className + '-form', container) var input - + map.on('click', this.collapseHack, this) - + icon.innerHTML = ' ' icon.type = 'button' - + input = this.input = L.DomUtil.create('input', '', form) input.type = 'text' input.placeholder = this.options.placeholder - + this.alts = L.DomUtil.create('ul', - className + '-alternatives ' + className + '-alternatives-minimized', - container) - + className + '-alternatives ' + className + '-alternatives-minimized', + container) + L.DomEvent.on(icon, 'click', function (e) { this.toggle() L.DomEvent.preventDefault(e) }, this) L.DomEvent.addListener(input, 'keyup', this.keyup, this) - + L.DomEvent.disableScrollPropagation(container) L.DomEvent.disableClickPropagation(container) - + if (!this.options.collapsed) { this.expand() if (this.options.autofocus) { setTimeout(function () { input.focus() }, 250) } } - return container + if (this.options.style === 'searchBar') { + L.DomUtil.addClass(container, 'searchBar') + var rootEl = document.getElementsByClassName('leaflet-control-container')[0] + rootEl.appendChild(container) + return L.DomUtil.create('div', 'hidden') + } else { + return container + } }, - toggle: function () { - if (L.DomUtil.hasClass(this.container, 'leaflet-control-geocoder-ban-expanded')) { + minimizeControl() { + if (this.options.style === 'control') { this.collapse() } else { - this.expand() + // for the searchBar: only hide results, not the bar + L.DomUtil.addClass(this.alts, 'leaflet-control-geocoder-ban-alternatives-minimized') + } + }, + toggle: function () { + if (this.style != 'searchBar') { + if (L.DomUtil.hasClass(this.container, 'leaflet-control-geocoder-ban-expanded')) { + this.collapse() + } else { + this.expand() + } } }, expand: function () { @@ -94,7 +112,7 @@ const factory = function factoryFunc (L) { collapseHack: function (e) { // leaflet bug (see #5507) before v1.1.0 that converted enter keypress to click. if (e.originalEvent instanceof MouseEvent) { - this.collapse() + this.minimizeControl() } }, moveSelection: function (direction) { @@ -120,7 +138,7 @@ const factory = function factoryFunc (L) { switch (e.keyCode) { case 27: // escape - this.collapse() + this.minimizeControl() L.DomEvent.preventDefault(e) break case 38: @@ -182,7 +200,7 @@ const factory = function factoryFunc (L) { a.innerHTML = '' + feature.properties.label + ', ' + feature.properties.context li.geocodedFeatures = feature var clickHandler = function (e) { - this.collapse() + this.minimizeControl() this.geocodeResult(feature) } var mouseOverHandler = function (e) { @@ -201,7 +219,7 @@ const factory = function factoryFunc (L) { return li }, geocodeResult: function (feature) { - this.collapse() + this.minimizeControl() this.markGeocode(feature) }, markGeocode: function (feature) {