From 1fc35b33eacf0f06370fc14798f65f5ec0972195 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Thu, 31 Oct 2024 17:11:55 +0800 Subject: feat: patch 7ee1ad6 * add spinning circle for Networking UX * display marker for each results --- src/MenuItem.mjs | 75 +++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 58 insertions(+), 17 deletions(-) (limited to 'src/MenuItem.mjs') diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs index 84a1405..464dd2d 100644 --- a/src/MenuItem.mjs +++ b/src/MenuItem.mjs @@ -1,7 +1,7 @@ import { shiftByWindow } from './utils.mjs' import { addMarkerByPoint } from './dumbyUtils.mjs' /* eslint-disable-next-line no-unused-vars */ -import { GeoLink, getMarkersFromMaps, removeLeaderLines } from './Link.mjs' +import { GeoLink, getMarkersFromMaps, getMarkersByGeoLink, removeLeaderLines, updateMapCameraByMarker } from './Link.mjs' import * as markers from './marker.mjs' import { parseConfigsFromYaml } from 'mapclay' @@ -587,25 +587,66 @@ export const editMap = (map, dumbymap) => { }) } -export const addLinkbyNominatim = (range) => { +/** + * addLinkbyGeocoding. + * + * @param {Range} range + */ +export const addLinkbyGeocoding = (range) => { return Item({ text: 'Add Link by Geocoding', + className: ['keep-menu'], + onclick: async (e) => { + /** Add spinning circle for Network */ + e.target.classList.add('with-spinning-circle') + const menu = e.target.closest('.dumby-menu') + + if (!menu) return + /** Geocoding by Nominatim */ + // TODO Add more params like limit: + // https://nominatim.org/release-docs/latest/api/Search/ + const query = range.toString() + const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${query.toString()}&format=json`) + const places = await response.json() + menu.replaceChildren() + + // Show Message if no result found + if (places.length === 0) { + menu.appendChild(Item({ text: 'No Result Found' })) + return + } + + // Add items for each results + const items = places.map(geocodingResult((a) => { + a.className = 'not-geolink from-geocoding' + a.textContent = query + range.deleteContents() + range.insertNode(a) + })) + menu.replaceChildren(...items) + }, + }) +} + +export const geocodingResult = (callback) => (result) => { + const item = Item({ + text: result.display_name, onclick: () => { - const place = range.toString() - fetch(`https://nominatim.openstreetmap.org/search?q=${place.toString()}&format=json`) - .then(res => res.json()) - .then(places => { - if (places.length === 0) return - console.log('nomiatim', places) - range.deleteContents() - places.forEach(p => { - const a = document.createElement('a') - a.className = 'not-geolink from-geocoding' - a.href = `geo:${p.lat},${p.lon}?name=${p.name}&osm=${p.osm_type}/${p.osm_id}` - a.textContent = place - range.insertNode(a) - }) - }) + const a = document.createElement('a') + a.href = `geo:${result.lat},${result.lon}?name=${result.name}&osm=${result.osm_type}/${result.osm_id}` + a.title = result.display_name + callback(a) }, }) + item.onmouseover = () => { + const markers = getMarkersFromMaps( + [result.lon, result.lat], + { type: 'circle', title: result.display_name }, + ) + markers.forEach(updateMapCameraByMarker([result.lon, result.lat])) + item.onmouseout = () => { + markers.forEach(m => m.remove()) + } + } + return item } -- cgit v1.2.3-70-g09d2