initial commit

entrepreneur-interet-general · Oct 11, 2017 · 447ac95 · 447ac95
commit 447ac95
Show file tree

Hide file tree

Showing 4 changed files with 303 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.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.BAN.geocoder.js"></script>
+  <link rel="stylesheet" href="../src/leaflet.BAN.geocoder.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);
+
+      L.geocoderBAN({ position: 'topleft' }).addTo(map);
+
+  </script>
+</body>
+</html>
diff --git a/images/geocoder.png b/images/geocoder.png
diff --git a/src/leaflet.BAN.geocoder.css b/src/leaflet.BAN.geocoder.css
@@ -0,0 +1,66 @@
+.leaflet-control-geocoder-ban {
+    border-radius: 4px;
+    background: white;
+    min-width: 26px;
+    min-height: 26px;
+}
+
+.leaflet-control-geocoder-ban-icon {
+    border-radius: 4px;
+    width: 26px;
+    height: 26px;
+    border: none;
+    background-color: white;
+    background-image: url(../images/geocoder.png);
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.leaflet-control-geocoder-ban-form {
+    display: none;
+    vertical-align: middle;
+}
+
+.leaflet-control-geocoder-ban-expanded .leaflet-control-geocoder-ban-form {
+    display: inline-block;
+}
+
+.leaflet-control-geocoder-ban-form input {
+    font-size: 120%;
+    border: 0;
+    background-color: transparent;
+    width: 246px;
+}
+
+.leaflet-control-geocoder-ban-alternatives {
+    display: block;
+    width: inherit;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.leaflet-control-geocoder-ban-alternatives-minimized {
+    display: none;
+    height: 0;
+}
+
+.leaflet-control-geocoder-ban .leaflet-control-geocoder-ban-alternatives a {
+    width: inherit;
+    height: inherit;
+    line-height: inherit;
+    background-color: transparent;
+    text-align: left;
+    padding: 3px 0 3px 6px;
+}
+
+.leaflet-control-geocoder-ban .leaflet-control-geocoder-ban-alternatives li {
+    width: inherit;
+    height: inherit;
+    cursor: pointer;
+    border-top: 1px solid #d0d0d0;
+}
+
+.leaflet-control-geocoder-ban-selected {
+    background-color: rgba(0,0,255,0.2);
+}
diff --git a/src/leaflet.BAN.geocoder.js b/src/leaflet.BAN.geocoder.js
@@ -0,0 +1,196 @@
+L.GeocoderBAN = L.Control.extend({
+  options: {
+    position: 'topleft',
+    placeholder: 'adresse',
+    resultsNumber: 5,
+    collapsed: false,
+    serviceUrl: 'https://api-adresse.data.gouv.fr/search/',
+    minIntervalBetweenRequests: 250,
+    defaultMarkgeocode: true
+  },
+  includes: L.Evented.prototype || L.Mixin.Events,
+  initialize: function(options) {
+    L.Util.setOptions(this, options);
+  },
+  onAdd: function(map) {
+    var className = 'leaflet-control-geocoder-ban',
+    container = this._container = L.DomUtil.create('div', className + ' leaflet-bar'),
+    icon = this._icon = L.DomUtil.create('button', className + '-icon', container),
+    form = this._form = L.DomUtil.create('div', className + '-form', container),
+    input;
+
+    this._map = map;
+    map.on('click', this._collapse, 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);
+
+    L.DomEvent.on(icon, 'click', this._toggle, this);
+    L.DomEvent.addListener(input, 'keyup', this._keyup, this);
+    if (this.options.defaultMarkgeocode) {
+      this.on('markgeocode', this.markGeocode, this);
+    }
+
+    L.DomEvent.disableScrollPropagation(container)
+    L.DomEvent.disableClickPropagation(container)
+
+    if (!this.options.collapsed) { this._expand(); }
+
+    return container;
+  },
+  _toggle: function () {
+    if (this._container.classList.contains('leaflet-control-geocoder-ban-expanded')) {
+      this._collapse();
+    } else {
+      this._expand();
+    }
+  },
+  _expand: function () {
+    L.DomUtil.addClass(this._container, 'leaflet-control-geocoder-ban-expanded');
+    if (this._geocodeMarker) {
+      this._map.removeLayer(this._geocodeMarker);
+    }
+    this._input.select();
+  },
+  _collapse: function () {
+    L.DomUtil.removeClass(this._container, 'leaflet-control-geocoder-ban-expanded');
+    L.DomUtil.addClass(this._alts, 'leaflet-control-geocoder-ban-alternatives-minimized');
+    this._input.blur();
+  },
+  _moveSelection: function(direction) {
+    var s = document.getElementsByClassName('leaflet-control-geocoder-ban-selected');
+    var el;
+    if (!s.length) {
+        el = this._alts[direction < 0 ? 'firstChild' : 'lastChild'];
+        L.DomUtil.addClass(el, 'leaflet-control-geocoder-ban-selected');
+    } else {
+        var currentSelection = s[0]
+        L.DomUtil.removeClass(currentSelection, 'leaflet-control-geocoder-ban-selected');
+        el = direction > 0 ? currentSelection.previousElementSibling : currentSelection.nextElementSibling;
+    }
+    if (el) {
+      L.DomUtil.addClass(el, 'leaflet-control-geocoder-ban-selected');
+    }
+  },
+  _keyup: function(e) {
+    switch (e.keyCode) {
+      case 27:
+        // escape
+        this._collapse();
+        break;
+      case 38:
+        // down
+        this._moveSelection(1);
+        L.DomEvent.preventDefault(e);
+        break;
+      case 40:
+        // up
+        this._moveSelection(-1);
+        L.DomEvent.preventDefault(e);
+        break;
+      case 13:
+        // enter
+        var s = document.getElementsByClassName('leaflet-control-geocoder-ban-selected')
+        if (s.length) {
+          this._geocodeResult(s[0]._geocodedFeatures);
+        }
+        break;
+      default:
+        if (this._input.value) {
+          var params = {q: this._input.value, limit: this.options.resultsNumber};
+          var t = this;
+          if (this._setTimeout) {
+            clearTimeout(this._setTimeout);
+          }
+          //avoid responses collision if typing quickly
+          this._setTimeout = setTimeout(function () {
+            getJSON(t.options.serviceUrl, params, t._displayResults(t));
+          }, this.options.minIntervalBetweenRequests);
+        } else {
+          this._clearResults();
+        }
+    }
+  },
+  _clearResults () {
+    while (this._alts.firstChild) {
+      this._alts.removeChild(this._alts.firstChild);
+    }
+  },
+  _displayResults: function (t) {
+    t._clearResults();
+    return function (res) {
+      var features = res.features;
+      L.DomUtil.removeClass(t._alts, 'leaflet-control-geocoder-ban-alternatives-minimized');
+      for (var i = 0; i < Math.min(features.length, t.options.resultsNumber); i++) {
+        t._alts.appendChild(t._createAlt(features[i], i));
+      }
+    }
+  },
+  _createAlt: function (feature, index) {
+    var li = L.DomUtil.create('li', ''),
+      a = L.DomUtil.create('a', '', li);
+    li.setAttribute('data-result-index', index);
+    a.innerHTML = feature.properties.label;
+    li._geocodedFeatures = feature
+    clickHandler = function (e) {
+        this._collapse();
+        this._geocodeResult(feature);
+    }
+    mouseOverHandler = function (e) {
+        var s = document.getElementsByClassName('leaflet-control-geocoder-ban-selected');
+        if (s.length) {
+          L.DomUtil.removeClass(s[0], 'leaflet-control-geocoder-ban-selected');
+        }
+        L.DomUtil.addClass(li, 'leaflet-control-geocoder-ban-selected');
+    }
+    mouseOutHandler = function (e) {
+        L.DomUtil.removeClass(li, 'leaflet-control-geocoder-ban-selected');
+    }
+    L.DomEvent.on(li, 'click', clickHandler, this);
+    L.DomEvent.on(li, 'mouseover', mouseOverHandler, this);
+    L.DomEvent.on(li, 'mouseout', mouseOutHandler, this);
+    return li;
+  },
+  _geocodeResult: function (feature) {
+    this._collapse();
+    this.fire('markgeocode', {geocode: feature});
+  },
+  markGeocode: function (result) {
+    var f = result.geocode;
+    var latlng = [f.geometry.coordinates[1], f.geometry.coordinates[0]]
+    this._map.setView(latlng, 14)
+    this._geocodeMarker = new L.Marker(latlng)
+      .bindPopup(f.properties.label)
+      .addTo(this._map)
+      .openPopup();
+  }
+});
+
+L.geocoderBAN = function (options) {
+  return new L.GeocoderBAN(options);
+};
+
+function getJSON (url, params, callback) {
+  var xmlHttp = new XMLHttpRequest();
+  xmlHttp.onreadystatechange = function () {
+    if (xmlHttp.readyState !== 4){
+      return;
+    }
+    if (xmlHttp.status !== 200 && xmlHttp.status !== 304){
+      callback('');
+      return;
+    }
+    callback(JSON.parse(xmlHttp.response));
+  };
+  xmlHttp.open('GET', url + L.Util.getParamString(params), true);
+  xmlHttp.setRequestHeader('Accept', 'application/json');
+  xmlHttp.send(null);
+}