Added search bar fixing #16

README.md

@@ -29,7 +29,7 @@ This utility helps simulate the color schemes quickly, along with clipping & map
     - [ ] Copy color in different format - HEX, RGBA, HSLA (JSON)
     - [ ] Download color format for ASE, GIMP/Inscape color scheme
 - [ ] Mobile version 
-- [ ] Search bar to search places 
+- [X] Search bar to search places 
 - [ ] Go to current location
 
 ## Installation

package.json

@@ -11,6 +11,7 @@
     "loadash": "^1.0.0",
     "node-sass": "^4.14.1",
     "ol": "^6.4.3",
+    "ol-geocoder": "^4.1.1",
     "query-string": "^6.13.7",
     "rainbowvis.js": "^1.0.1",
     "react": "^17.0.1",

src/components/main-app/ol/main.js

@@ -1,6 +1,6 @@
 import { clipRasterLayer, dragMap, initMap, loadRasterLayer } from './';
 import { getColorsArray, getRgbColorsArray } from 'utils';
-
+import * as geocoder from 'ol-geocoder';
 let map = null;
 let rasterSource = null;
 let rasterColorSource = null;
@@ -40,6 +40,17 @@ export default function olMain({ shape, tiles, colors, opacity }) {
   shapeSource = clipRaster.shapeSource;
 
   map = initMap({ rasterLayer, clipLayer, boundaryLayer });
+  const geocoderControl = new geocoder('nominatim', {
+  provider: 'mapquest',
+  key: 'A4fno8k38K7azCA4OEkMuVYUNm6mdl4G',
+  lang: 'en-US', //en-US, fr-FR
+  placeholder: 'Search for ...',
+  targetType: 'text-input',
+  limit: 5,
+  keepOpen: true
+});
+map.addControl(geocoderControl);
+
   dragMap(map);
   return { map, rasterSource, rasterLayer, shapeSource, rasterColorSource };
 }

src/sass/_global.sass

@@ -1,9 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;700&display=swap');
-@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
+@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;700&display=swap')
+@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css')
 
 *
     outline: none
-    font-family: 'Jost', sans-serif;
+    font-family: 'Jost', sans-serif
 
 body, html
     padding: 0
@@ -18,6 +18,72 @@ body, html
     right: 8px
     left: inherit !important
 
+.ol-geocoder
+    position: absolute
+    right: 48px
+    top: 10px
+    width: 280px
+
+
+.gcd-txt-result li
+    list-style: none
+    cursor: pointer
+    padding: 15px
+    border-bottom: 1px solid #7c96b93b
+    background: #ffffffb8
+    box-shadow: 0 13px 27px -5px rgba(50,50,93,.1), 0 8px 16px -8px rgba(0,0,0,.1), 0 -6px 16px -6px rgba(0,0,0,.01)
+    a
+        color: #7c96b9
+    &:hover
+        background: #7c96b9
+
+        a
+            color: #edeeee
+
+.gcd-txt-control
+    margin: 0
+    padding: 0
+
+.gcd-txt-input
+    box-sizing: border-box   
+    width: 100%
+    color: #727272
+    font-size: 16px
+    padding: 15px
+    background: #eee
+    border: 1px solid #859ec0
+
+.gcd-txt-result
+    padding: 0
+    margin: 0  
+
+.gcd-txt-reset 
+    border: none
+    position: absolute
+    width: 25px
+    height: 25px
+    right: 10px
+    top: 15px
+    &:after
+       content: '✕'
+       cursor: pointer
+
+.gcd-hidden
+    display: none
+
+.gcd-pseudo-rotate
+    animation: rotate 1.5s linear infinite
+
+@keyframes rotate
+    100% 
+        transform: rotate(360deg)
+
+.gcd-city
+    font-weight: 400
+.gcd-country
+    font-weight: 500   
+.gcd-road
+    font-style: italic
 p
     margin: 0