diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 54668da..b934615 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -7,8 +7,8 @@
-
+
@@ -83,7 +83,8 @@
-
+
+
diff --git a/api/click.js b/api/click.js
index 3203b14..5481d89 100644
--- a/api/click.js
+++ b/api/click.js
@@ -1,9 +1,22 @@
-const getArgs=(s)=>s.split('@@')
+import {post} from "../src/Networking";
export default function handler(req,res){
- const {body}=req;
- res.status(200).json({
- log: `Method: click\nArgs: ${body}\nStatus: returned the raw polylines`,
- multipolyline: body,
+ const pts=JSON.parse(req.body);
+ const latRange=pts.map((row)=>row[0]),
+ lonRange=pts.map((row)=>row[1]);
+ const minlon=Math.min(...lonRange),minlat=Math.min(...latRange),
+ maxlon=Math.max(...lonRange),maxlat=Math.max(...latRange);
+ const request_uri=`https://www.overpass-api.de/api/interpreter?data=[out:json];node[highway](${minlat},${minlon},${maxlat},${maxlon});out;`;
+ const fetch_debug_response= fetch(request_uri).then((response)=>{
+ return response.json();
});
+ fetch_debug_response.then((debug_response)=>{
+ res.status(200).json({
+ log: `Method: click\nArgs: ${pts}\nStatus: requested "${request_uri}", got response ${JSON.stringify(debug_response.elements)}`,
+ multipolyline: JSON.stringify(pts),
+ });
+ }).catch(e=>{
+ res.status(500);
+ });
+
}
\ No newline at end of file
diff --git a/src/Networking.js b/src/Networking.js
index 6e6f2ce..9caf9b8 100644
--- a/src/Networking.js
+++ b/src/Networking.js
@@ -1,5 +1,4 @@
export function post(type,method,args) {
- let res = '';
let ft = async () => {
let response;
if(type==='GET'){
diff --git a/src/SimulateClick.js b/src/SimulateClick.js
index 69e6249..661ed86 100644
--- a/src/SimulateClick.js
+++ b/src/SimulateClick.js
@@ -1,11 +1,12 @@
import {Button, IconButton, ButtonGroup, Menu, MenuItem, Stack} from "@mui/joy";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import React from "react";
-import {Add} from "@mui/icons-material";
+import {Add, LocationOn} from "@mui/icons-material";
-export default function SimulateClick({isCandEmpty}) {
+export default function SimulateClick({isLocated,isCandEmpty,relocator}) {
return (
+ } onClick={relocator}>Relocate
}>Add
);
diff --git a/src/UMap.js b/src/UMap.js
index 3e76601..2e5059d 100644
--- a/src/UMap.js
+++ b/src/UMap.js
@@ -5,26 +5,31 @@ import {useMapEvents} from 'react-leaflet/hooks';
import {post} from './Networking';
import {Autocomplete, CircularProgress, Sheet} from "@mui/joy";
import SimulateClick from "./SimulateClick";
+import {NearMe} from "@mui/icons-material";
+
+const defaultZoomLevel=16;
+const defaultLocationName = 'Apple Park';
+const defaultLocation = [37.334835049999995, -122.01139165956805];
-const AppleParkLoc=[37.334835049999995,-122.01139165956805];
class Markers extends Component {
+ // A location is a [lat,lon] pair.
constructor(props) {
super(props);
this.state = {markers: [], candMarkers: [], candEmpty: true, polylines: []};
}
render() {
- const fillBlueOptions = { fillColor: 'blue' };
- const pl=this.state.polylines;
- const mks=this.state.markers.map((p, i) => (
-
+ const fillBlueOptions = {fillColor: 'blue'};
+ const pl = this.state.polylines;
+ const mks = this.state.markers.map((p, i) => (
+
));
- const cmks=this.state.candMarkers.map((p, i) => (
-
+ const cmks = this.state.candMarkers.map((p, i) => (
+
));
return [
...mks.concat(cmks),
- pl&&pl.length>1?:
+ pl && pl.length > 1 ? :
];
}
@@ -45,7 +50,7 @@ class Markers extends Component {
candEmpty: false,
polylines: prev.polylines,
}));
- this.getFocus();
+ this.getFocus(true);
}
clearMarkers() {
@@ -58,7 +63,7 @@ class Markers extends Component {
this.getFocus();
}
- clearCandMarkers(){
+ clearCandMarkers() {
this.setState((prev) => ({
markers: prev.markers,
candMarkers: [],
@@ -68,20 +73,23 @@ class Markers extends Component {
this.getFocus();
}
- getFocus() {
- let currentFocus=[];
+ getFocus(virtual=false) {
+ let currentFocus = [];
if (this.state.candMarkers.length) {
- currentFocus=this.state.candMarkers.at(-1);
+ currentFocus = this.state.candMarkers.at(-1);
} else if (this.state.markers.length) {
- currentFocus=this.state.markers.at(-1);
+ currentFocus = this.state.markers.at(-1);
} else {
- currentFocus=AppleParkLoc;
+ currentFocus = defaultLocation;
}
this.props.focusUpdater(currentFocus);
+ if(virtual){
+ this.props.locator(currentFocus);
+ }
}
- flushPolylines(pl){
- this.setState((prev)=>({
+ flushPolylines(pl) {
+ this.setState((prev) => ({
markers: prev.markers,
candMarkers: prev.candMarkers,
candEmpty: prev.candEmpty,
@@ -91,18 +99,21 @@ class Markers extends Component {
}
}
-function MapClickHandler({mks}) {
+function MapClickHandler({mks,focusUpdater,locator,locker}) {
const map = useMapEvents({
click: (e) => {
map.locate();
- const lat = e.latlng.lat, lng = e.latlng.lng;
+ const {lat,lng}=e.latlng;
console.info(`Clicking on ${lat} ${lng}`);
mks.current.addMarker(lat, lng);
- post('POST','click', mks.current.state.markers).then((response)=>{
+ post('POST', 'click', mks.current.state.markers).then((response) => {
// TODO: real functionality
- const pl=JSON.parse(response.multipolyline);
+ const pl = JSON.parse(response.multipolyline);
mks.current.flushPolylines(pl);
- }).catch((e)=>{
+ focusUpdater([lat,lng]);
+ locator([lat,lng]);
+ locker(true);
+ }).catch((e) => {
console.error(e);
// location.reload();
});
@@ -115,11 +126,21 @@ function MapClickHandler({mks}) {
return null;
}
-const LocationSearch = ({mks}) => {
+const LocationSearch = ({mks, focus, nb}) => {
const [query, setQuery] = useState('');
const [loading, setLoading] = useState(false);
const [suggestedLocations, setSuggestedLocations] = useState([]);
const [controller, setController] = useState(new AbortController());
+ const [everywhere,setEverywhere]=useState(false);
+
+ const SearchLogo=()=>{
+ const cf=()=>setEverywhere(!everywhere);
+ if(everywhere){
+ return ;
+ } else{
+ return ;
+ }
+ };
useEffect(() => {
return () => controller.abort();
@@ -137,7 +158,7 @@ const LocationSearch = ({mks}) => {
return;
}
const response = await fetch(
- `https://nominatim.openstreetmap.org/search?format=json&q=${v}`,
+ `https://nominatim.openstreetmap.org/search?format=json&q=${v}${everywhere?'':' '+focus[0]+','+focus[1]}`,
{signal: newController.signal}
);
if (response.ok) {
@@ -164,40 +185,69 @@ const LocationSearch = ({mks}) => {
}
};
- return }
- placeholder={'Find a location...'} onInputChange={handleSearch}
- options={suggestedLocations} isOptionEqualToValue={(option, value) => option.value === value.value} endDecorator={
+ return }
+ placeholder={everywhere?'Search everywhere...':`Search near${nb}`} onInputChange={handleSearch}
+ options={suggestedLocations}
+ isOptionEqualToValue={(option, value) => option.value === value.value} endDecorator={
loading ? (
) : null
}/>;
};
-function ChangeView({center,zoom}){
- const map=useMap();
- map.setView(center,zoom);
+function ChangeView({center, zoom}) {
+ const map = useMap();
+ map.setView(center, zoom);
}
export default function UMap() {
const markersRef = useRef(null);
- const [focus, setFocus]=useState(AppleParkLoc);
- const zoom=16;
- const sf=(a)=>{setFocus(a);console.log(`triggered focus update, new focus is ${focus}`);};
+ const [focus, setFocus] = useState(defaultLocation);
+ const [located,setLocated]=useState(true);
+ const [locatedFocus,setLocatedFocus]=useState(defaultLocation);
+ const [nearbyName, setNearbyName] = useState(' ' + defaultLocationName);
+ const [zoom,setZoom] = useState(defaultZoomLevel);
+ const sf = (a) => {
+ setFocus(a);
+ console.log(`triggered focus update, new focus is ${focus}`);
+ const ft = fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${a[0]}&lon=${a[1]}&zoom=${zoom}&addressdetails=0`).then(response => response.json());
+ ft.then((response) => setNearbyName(' ' + response.name)).catch(() => setNearbyName('by'));
+ };
+ const relo=()=> {
+ sf(locatedFocus);
+ setLocated(true);
+ };
+ const ViewportChange = () => {
+ const map = useMapEvents({
+ dragend: (e) => {
+ const center = e.target.getCenter();
+ sf([center.lat, center.lng]);
+ setLocated(false);
+ },
+ zoomend: (e)=>{
+ setZoom(e.target.getZoom());
+ sf(focus);
+ }
+ });
+ return null;
+ };
return (
-
-
-
+
+
+
-
-
+
+
);