add the possibility to display the control as a search bar as well

entrepreneur-interet-general · Sep 26, 2018 · 2f16083 · 2f16083
1 parent 2ee3fc2
commit 2f16083
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 25 deletions.
diff --git 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
 <script src="leaflet-geocoder-ban.js"></script>
 <link rel="stylesheet" href="leaflet-geocoder-ban.css">
@@ -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 → demo/demo_control.html b/demo/index.html → demo/demo_control.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+_<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
@@ -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()
+      // })
 
     </script>
   </body>

diff --git a/demo/demo_search_bar.html b/demo/demo_search_bar.html
@@ -0,0 +1,41 @@
+_<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Leaflet.BAN.geocoder demo</title>
+
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+  integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+  crossorigin=""/>
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+  integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
+  crossorigin=""></script>
+  <script src="../src/leaflet-geocoder-ban.js"></script>
+  <link rel="stylesheet" href="../src/leaflet-geocoder-ban.css">
+</head>
+<body>
+  <style>
+    html, body {
+      height: 100%;
+      width: 100%;
+      margin: 0px;
+    }
+
+    #mapid { height: 100%; }
+  </style>
+
+  <div id="mapid"></div>
+
+  <script>
+    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 data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(map)
+
+      var geocoder = L.geocoderBAN({ collapsed: false, style: 'searchBar' }).addTo(map)
+
+    </script>
+  </body>
+  </html>
diff --git 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;
 }
diff --git 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 = '&nbsp;'
       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 = '<strong>' + feature.properties.label + '</strong>, ' + 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) {