search bar start

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "ol": "^10.5.0",
+        "ol-ext": "^4.0.31",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router-dom": "^7.5.0",
@@ -2523,6 +2524,14 @@
         "url": "https://opencollective.com/openlayers"
       }
     },
+    "node_modules/ol-ext": {
+      "version": "4.0.31",
+      "resolved": "https://registry.npmjs.org/ol-ext/-/ol-ext-4.0.31.tgz",
+      "integrity": "sha512-byh26JcXZggkLUY79+c29cxf2ovkkwz5niWJzOIN+dLPDJ+ogSn0y4Wl8fIS9O2JtQff5/cInHRImgZBvl+N1g==",
+      "peerDependencies": {
+        "ol": ">= 5.3.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "ol": "^10.5.0",
+    "ol-ext": "^4.0.31",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.5.0",

src/App.css

@@ -29,3 +29,14 @@
   width: 220px;
   color: black;
 };
+
+.input {
+  margin-bottom: 30px;
+  padding: 5px 15px;
+  width: 300px;
+}
+
+.btn {
+  padding: 5px 10px;
+  cursor: pointer;
+}

src/components/OpenLayerMap.tsx

@@ -7,7 +7,9 @@ import Overlay from 'ol/Overlay'
 //import Popup from 'ol/Popup'
 //import {tile as tileStrategy} from 'ol/loadingstrategy';
 //import {createXYZ} from 'ol/tilegrid';
+import {Search} from 'ol-ext/control/SearchFeature';
 import { OSM } from 'ol/source';
+import {Select} from 'ol/interaction/Select';
 import { Coordinate } from 'ol/coordinate';
 import VectorLayer from "ol/layer/Vector"
 import VectorSource from "ol/source/Vector"
@@ -16,6 +18,15 @@ import GeoJSON from "ol/format/GeoJSON"
 import {Style, Icon, Fill, Circle, Stroke} from "ol/style"
 
 const OpenLayersMap = () => {
+  const [term, setTerm] = useState('');
+
+  const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
+    // Preventing the page from reloading
+    event.preventDefault();
+
+    // Do something 
+    alert(term);
+  }
 	const [data,setData] = useState({});
     const mapDivRef = useRef<HTMLDivElement>(null);
     const popupRef = useRef<HTMLDivElement>(null);
@@ -104,6 +115,15 @@ view: new View({
   }),
   overlays: [overlay],
 	});
+	 // Control Select 
+  var select = new Select({});
+  map.addInteraction(select);
+
+	var search = new Search ({
+		source:vectorsource_offset,
+
+
+	})
 
         map.on('click', (e) => {
             setClickedCoordinate(e.coordinate);
@@ -118,16 +138,19 @@ const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) {
       // Show popup at clicked position
       overlay.setPosition(coordinate);
       if(feature)
-      console.log("feature " + JSON.stringify(feature));
+      console.log("feature " + JSON.stringify(feature,null,'\t'));
 
   if(feature && feature.get("subname")){
       if (popupRef.current) {
-        popupRef.current.innerHTML = `<p>You clicked here:</p><code>` +
-		`<p>Parcel</p>` + 
-
-		`<p>${feature.get('subname')}</p>` + 
+        popupRef.current.innerHTML = `<p>Parcel</p><code>` +
+		`<p>Parcel ID ${feature.get('parcelid')}</p>` + 
+		`<p>APN ${feature.get('apn')}</p>` + 
+		`<p>Legldesc ${feature.get('legldesc')}</p>` + 
+		`<p>x \& y coord${feature.get('x_coord')} / ${feature.get('y_coord')}</p>` + 
+		`<p>${feature.get('situs_address')} ${feature.get('situs_street')}  ${feature.get('situs_suffix')} ${feature.get('situs_community')} ${feature.get('situs_zip')}</p>` + 
 		`<p> Unit Qty ${feature.get('unitqty')}</p>` + 
-		`<p>${feature.get('situs_community')} ${feature.get('situs_zip')}</p>` + 
+		`<p> Usable sq ft. ${feature.get('usable_sq_feet')}</p>` + 
+		`<p> total lvg area ${feature.get('total_lvg_area')}</p>` + 
 		`<p>bedrooms ${feature.get('bedrooms')} Baths ${feature.get('baths')}</p>` + 
 		 `</code>`;
       }
@@ -166,6 +189,18 @@ const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) {
     return (
         <>
             <div ref={mapDivRef} className='map'>
+    <div className="container">
+      <form onSubmit={submitForm}>
+        <input
+          value={term}
+          onChange={(e) => setTerm(e.target.value)}
+          type="text"
+          placeholder="Enter a term"
+          className="input"
+        />
+        <button type="submit" className="btn">Submit</button>
+      </form>
+    </div>
 <div ref={popupRef} className="ol-popup"/>
 	    </div>
             {clickedCoordinate && (

src/components/SearchBar.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+
+const SearchBar = () => {
+  const [term, setTerm] = useState('');
+
+  const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
+    // Preventing the page from reloading
+    event.preventDefault();
+
+    // Do something 
+    alert(term);
+  }
+
+  return (
+    <div className="container">
+      <form onSubmit={submitForm}>
+        <input
+          value={term}
+          onChange={(e) => setTerm(e.target.value)}
+          type="text"
+          placeholder="Enter a term"
+          className="input"
+        />
+        <button type="submit" className="btn">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default SearchBar;