Basic nominatim lookups.

src/map.js

@@ -1,10 +1,10 @@
-// TODO https://leafletjs.com/examples/quick-start/
-
 import React, { useEffect, useState } from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 
+import { SearchBar } from './searchbar.js';
+
 import "leaflet/dist/leaflet.css"
 
 import L from 'leaflet';
@@ -45,7 +45,25 @@ export function MapView(props) {
                 updateCamera();
             });
         }
-    }, [ map ])
+    }, [map])
+
+    function showNominatimResult(result) {
+        var corner1 = L.latLng(result.boundingbox[0], result.boundingbox[2]);
+        var corner2 = L.latLng(result.boundingbox[1], result.boundingbox[3]);
+        var bounds = L.latLngBounds(corner1, corner2);
+        map.flyToBounds(bounds);
+    }
+
+    function onSearch(query) {
+        fetch("http://nominatim.openstreetmap.org/search?polygon_geojson=1&polygon_threshold=0.001&format=json&limit=5&q=" + query)
+            .then(res => res.json())
+            .then(jsonres => {
+                console.log(jsonres);
+                if (Array.isArray(jsonres) && jsonres.length > 0) {
+                    showNominatimResult(jsonres[0]);
+                }
+            });
+    }
 
     const style = {
         width: "100%",
@@ -53,8 +71,13 @@ export function MapView(props) {
     };
 
     return (
-        <Box>
+        <>
-            <div id={id} style={style}></div>
+            <Box>
-        </Box>
+                <SearchBar onSubmit={onSearch} />
+            </Box>
+            <Box>
+                <div id={id} style={style}></div>
+            </Box>
+        </>
     );
 }

src/searchbar.js

@@ -1,24 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import TextField from '@material-ui/core/TextField';
 
-export class SearchBar extends React.Component {
+export function SearchBar(props) {
-    state = {
+    const [ textValue, setTextValue ] = useState(false);
-        text_value: false,
+    const { onSubmit } = props;
-    }
 
-    onSubmitHandler = () => { this.props.onSubmit(this.state.text_value); }
+    function onSubmitHandler() { onSubmit(textValue); }
-    onChangeHandler = (e) => { this.setState({ text_value: e.target.value }); }
+    function onChangeHandler(e) { setTextValue(e.target.value); }
-    keyDownHandler = (e) => {
+    function keyDownHandler(e) {
         if (e.key === 'Enter') {
-            this.onSubmitHandler();
+            onSubmitHandler();
         }
     }
 
-    render() {
+    return (
-        return (
+        <>
-            <>
+            <TextField variant="outlined" fullWidth label="Search" type="text" onChange={onChangeHandler} onKeyDown={keyDownHandler} />
-                <TextField variant="outlined" fullWidth label="Search" type="text" onChange={this.onChangeHandler} onKeyDown={this.keyDownHandler} />
+        </>
-            </>
+    );
-        );
-    }
 }