Solve issue [#198](#198) Add option for HTML label #198

README.md

@@ -1,9 +1,3 @@
-# Maintenance takeover
-While [@jonataswalker](https://github.com/jonataswalker) & [@kirtan-desai](https://github.com/kirtan-desai)
-ask for a new maintainer, I will assume the ol-geocoder support.
-I would like to thank them and the entire development team for the fantastic work done so far.
-[@dominque](https://github.com/Dominique92).
-
 # OpenLayers Control Geocoder
 <p align="center">
   <a href="https://www.npmjs.com/package/ol-geocoder">
@@ -47,21 +41,6 @@ Custom providers must implement the following methods:
 
 #### `handleResponse(results)`
 * `results` `{Object}` Parsed JSON response from API call
-
-## What's new in 4.3.0 ?
-* search form outside map [#87](https://github.com/Dominique92/ol-geocoder/issues/87)
-* Geocoder does not zoom to the location correctly [#228](https://github.com/Dominique92/ol-geocoder/issues/228)
-* ol-geocoder results are too much zoomed -in [#235](https://github.com/Dominique92/ol-geocoder/issues/235)
-* Toggle Marker in Options [#239](https://github.com/Dominique92/ol-geocoder/issues/239)
-* Using Search Function Outside Div [#247](https://github.com/Dominique92/ol-geocoder/issues/247)
-* Search Button - search does not work from smartphone if there is another text field [#255](https://github.com/Dominique92/ol-geocoder/issues/255)
-* Remove search layer from legend [#256](https://github.com/Dominique92/ol-geocoder/issues/256)
-* Limit search result to extent [#260](https://github.com/Dominique92/ol-geocoder/issues/260)
-* Allow custom URL for osm provider [#266](https://github.com/Dominique92/ol-geocoder/issues/266)
-* Init error on 4.2.0 [#270](https://github.com/Dominique92/ol-geocoder/issues/270)
-* src/nominating.js better import on 4.2.0 [#271](https://github.com/Dominique92/ol-geocoder/issues/271)
-* Error on bbox returned by nominatim.js 4.2.0 on Openlayers 7.4.0+ [#272](https://github.com/Dominique92/ol-geocoder/issues/272)
-* fix(examples): map height and width were 0px for custom provider [#276](https://github.com/Dominique92/ol-geocoder/issues/276)
 
 ##### NPM
 `npm install ol-geocoder`
@@ -128,6 +107,7 @@ geocoder.on('addresschosen', (evt) => {
   * `provider`             : `'osm'` (default), `'mapquest'`, `'photon'`, `'pelias'`, `'bing'`, `'opencage'`, custom provider instance; Your preferable provider;
   * `url`                  : `'https://nominatim.openstreetmap.org/search''`; API provider url;
   * `key`                  : `''`; API Key if required;
+  * `label`                : `label to be display in the top of the input div;
   * `placeholder`          : `'Search for an address'`; Placeholder for text input;
   * `targetType`           : `'glass-button'`; Can also be `'text-input'`;
   * `featureStyle`         : `ol.style.Style`; Feature style;
@@ -172,3 +152,8 @@ geocoder.on('addresschosen', function(evt) {
   console.info(evt);
 });
 ```
+
+# Maintenance takeover
+I would like to thank you @jonataswalker & @kirtandesai and the entire development team for the fantastic work done so far creating and maintaining this project.
+As they request a new maintainer, I will assume it within the core goals and values of the project.
+@Dominque92

dist/ol-geocoder.css

@@ -1,8 +1,8 @@
 /*!
- * ol-geocoder - v4.3.0
+ * ol-geocoder - v4.3.1-dev
  * A geocoder extension compatible with OpenLayers v7+ & v8+
  * https://github.com/Dominique92/ol-geocoder
- * Built: Tue Sep 05 2023 21:03:57 GMT+0200 (heure d’été d’Europe centrale)
+ * Built: Wed Sep 13 2023 11:09:17 GMT+0200 (heure d’été d’Europe centrale)
  */
 
  .ol-touch .ol-control.gcd-gl-control button {
@@ -137,6 +137,11 @@
   background-color: #fff;
   overflow: hidden; }
 
+.ol-geocoder .gcd-txt-label {
+  display: inline-block;
+  width: 100%;
+  text-align: center; }
+
 .ol-geocoder .gcd-txt-input {
   position: absolute;
   z-index: 99;

examples/control-nominatim.js

@@ -21,6 +21,7 @@
     provider: 'osm',
     targetType: 'text-input',
     lang: 'en',
+    label: 'Find a location by name',
     placeholder: 'Search for ...',
     limit: 5,
     keepOpen: false,

examples/index.js

@@ -10,6 +10,18 @@ const geocoderGlass = new Geocoder('nominatim', {
   keepOpen: false,
 });
 
+// Instantiate with nominatim, outside of the map
+const geocoderDirect = new Geocoder('nominatim', {
+  provider: 'osm',
+  targetType: 'text-input',
+  lang: 'en',
+  label: 'Direct access to the first found',
+  placeholder: 'Search in nominatim/OSM',
+  limit: 1,
+  keepOpen: false,
+  target: document.body, // Attach this control out of the map
+});
+
 // Instantiate with nominatim, outside of the map
 const geocoder = new Geocoder('nominatim', {
   provider: 'osm',
@@ -21,15 +33,15 @@ const geocoder = new Geocoder('nominatim', {
   target: document.body, // Attach this control out of the map
 });
 
+const popup = new ol.Overlay.Popup();
+
 // Listen when an address is chosen
 geocoder.on('addresschosen', (evt) => {
   window.setTimeout(() => {
     popup.show(evt.coordinate, evt.address.formatted);
   }, 1000);
 });
 
-const popup = new ol.Overlay.Popup();
-
 new ol.Map({
   target: document.querySelector('#map'),
   view: new ol.View({
@@ -39,6 +51,7 @@ new ol.Map({
   controls: [
     new ol.control.Zoom(),
     geocoderGlass,
+    geocoderDirect,
     geocoder,
   ],
   layers: [

examples/nodejs.html

@@ -4,20 +4,31 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css">
+
+  <link rel="stylesheet" href="../node_modules/ol/ol.css">
+  <script src="../node_modules/ol/dist/ol.js"></script>
+
   <link rel="stylesheet" href="https://unpkg.com/ol-popup@5.0.0/src/ol-popup.css">
-  <link rel="stylesheet" href="index.css">
-  <script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
   <script src="https://unpkg.com/ol-popup@5.0.0/dist/ol-popup.js"></script>
+
   <script type="module">
     import '../dist/ol-geocoder.css';
     import Geocoder from '../src/base';
     window.Geocoder = Geocoder;
   </script>
+
+  <link rel="stylesheet" href="index.css">
   <script src="index.js" defer></script>
 </head>
 
 <body>
+  <p>
+    Other demos :
+    <a href="control-nominatim.html">control-nominatim</a> &nbsp;
+    <a href="control-glass.html">control-glass</a> &nbsp;
+    <a href="custom-provider.html">custom-provider</a> &nbsp;
+  </p>
+
   <div id="map">
     This example needs to be run on <a href="https://nodejs.org/">nodejs</a> environment.
   </div>

konstants/index.js

@@ -28,6 +28,7 @@ export const PROVIDERS = {
 
 export const DEFAULT_OPTIONS = {
   provider: PROVIDERS.OSM,
+  label: '',
   placeholder: 'Search for an address',
   featureStyle: null,
   targetType: TARGET_TYPE.GLASS,

konstants/vars.json

@@ -2,6 +2,7 @@
   "containerId": "gcd-container",
   "buttonControlId": "gcd-button-control",
   "inputQueryId": "gcd-input-query",
+  "inputLabelId": "gcd-input-label",
   "inputSearchId": "gcd-input-search",
   "cssClasses": {
     "namespace": "ol-geocoder",
@@ -24,6 +25,7 @@
     "inputText": {
       "container": "gcd-txt-container",
       "control": "gcd-txt-control",
+      "label": "gcd-txt-label",
       "input": "gcd-txt-input",
       "search": "gcd-txt-search",
       "icon": "gcd-txt-glass",