diff --git a/.yarnrc.yml b/.yarnrc.yml index ac9160a..f1f1359 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -1 +1,5 @@ +npmScopes: + "here": + npmRegistryServer: "https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/" + yarnPath: .yarn/releases/yarn-4.0.2.cjs diff --git a/package.json b/package.json index abb54e7..90cdd5d 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@here/maps-api-for-javascript": "^1.49.1", "@snort/shared": "^1.0.10", "@snort/system": "^1.1.8", "@snort/system-react": "^1.1.8", diff --git a/src/element/map.tsx b/src/element/map.tsx new file mode 100644 index 0000000..c7a5a29 --- /dev/null +++ b/src/element/map.tsx @@ -0,0 +1,55 @@ +import H from '@here/maps-api-for-javascript'; +import { useEffect, useRef } from 'react'; + +export function HereMap(props: { zoom?: number, markers?: Array<{ lat: number, lng: number }>, center?: { lat: number, lng: number } }) { + const mapRef = useRef(null); + const map = useRef(null); + const platform = useRef(null) + + useEffect( + () => { + if (!map.current) { + platform.current = new H.service.Platform({ apikey: "5uZZsWJdVyMSDTjjNJNyUgKq_bKv2rVVZWAXnfmgttQ" }); + + const rasterTileService = platform.current.getRasterTileService({ + queryParams: { + style: "explore.night", + size: 512, + }, + }); + const rasterTileProvider = new H.service.rasterTile.Provider( + rasterTileService + ); + const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider); + + const newMap = new H.Map(mapRef.current!, rasterTileLayer, { + engineType: H.Map.EngineType.WEBGL, + pixelRatio: window.devicePixelRatio, + center: props.center ?? { lat: 0, lng: 0 }, + zoom: props.zoom ?? 2, + }); + + new H.mapevents.Behavior( + new H.mapevents.MapEvents(newMap) + ); + map.current = newMap; + } + }, [props] + ); + + useEffect(() => { + if (map.current) { + map.current.setCenter(props.center ?? { lat: 0, lng: 0 }); + map.current.setZoom(props.zoom ?? 2); + map.current.removeObjects(map.current.getObjects()); + for (const mrk of props.markers ?? []) { + const m = new H.map.Marker(mrk); + map.current.addObject(m); + } + } + }, [map, props]) + + // Return a div element to hold the map + return
; + +} \ No newline at end of file diff --git a/src/element/relay.tsx b/src/element/relay.tsx index 3bc1117..2ccb795 100644 --- a/src/element/relay.tsx +++ b/src/element/relay.tsx @@ -13,7 +13,9 @@ export default function RelayItem({ relay, index }: { relay: Relay, index: numbe const u = new URL(relay.url); return
{ - navigate(`/r/${encodeURIComponent(relay.url)}`); + navigate(`/r/${encodeURIComponent(relay.url)}`, { + state: relay + }); }}>
#{index + 1}
diff --git a/src/pages/relay-detail.tsx b/src/pages/relay-detail.tsx index abc1005..4d2bca5 100644 --- a/src/pages/relay-detail.tsx +++ b/src/pages/relay-detail.tsx @@ -1,40 +1,47 @@ import { NoteCollection, RequestBuilder } from "@snort/system"; import { SnortContext, useRequestBuilder } from "@snort/system-react"; import { useContext, useEffect, useMemo } from "react"; -import { useParams } from "react-router-dom" +import { useLocation } from "react-router-dom" import { SimpleEvent } from "../element/event"; import { sanitizeRelayUrl } from "@snort/shared"; +import { HereMap } from "../element/map"; +import { Relay } from "../api"; export function RelayDetailPage() { - const { relay } = useParams(); + const { state } = useLocation() as { state: Relay }; const system = useContext(SnortContext); useEffect(() => { - if (relay) { - system.ConnectToRelay(relay, { + if (state) { + system.ConnectToRelay(state.url, { read: true, write: false }); - return () => system.DisconnectRelay(relay); + return () => system.DisconnectRelay(state.url); } - }, [system, relay]); + }, [system, state]); const sub = useMemo(() => { - if (relay) { - const rb = new RequestBuilder(`events:${relay}`); + if (state) { + const rb = new RequestBuilder(`events:${state.url}`); rb.withOptions({ leaveOpen: true }) - rb.withFilter().limit(10).relay(relay); + rb.withFilter().limit(10).relay(state.url); return rb; } return null; - }, [relay]); + }, [state]); const events = useRequestBuilder(NoteCollection, sub); + const pos = { lat: state.lat ?? 0, lng: state.lon ?? 0 }; return
-

{relay}

+

{state.url}

+ 
-                {JSON.stringify(system.Sockets.find(a => a.address === sanitizeRelayUrl(relay!)!)?.info, undefined, 2)}
+                {JSON.stringify(system.Sockets.find(a => a.address === sanitizeRelayUrl(state.url!)!)?.info, undefined, 2)}

Latest Events

diff --git a/src/pages/relay-list.tsx b/src/pages/relay-list.tsx index 7f79f0d..ca7ba37 100644 --- a/src/pages/relay-list.tsx +++ b/src/pages/relay-list.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { Relay, SnortApi } from "../api"; import RelayItem from "../element/relay"; import { useLocation } from "react-router-dom"; +import { HereMap } from "../element/map"; export default function RelayListPage() { const { state } = useLocation(); @@ -19,6 +20,7 @@ export default function RelayListPage() { }, [state]); return
+ {relays && ({ lat: a.lat!, lng: a.lon! }))} />} {relays?.map((a, i) => )}
; } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 08c741e..4c50fca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -486,6 +486,13 @@ __metadata: languageName: node linkType: hard +"@here/maps-api-for-javascript@npm:^1.49.1": + version: 1.49.1 + resolution: "@here/maps-api-for-javascript@npm:1.49.1::__archiveUrl=https%3A%2F%2Frepo.platform.here.com%2Fartifactory%2Fapi%2Fnpm%2Fmaps-api-for-javascript%2F-%2F%40here%2Fmaps-api-for-javascript-1.49.1.tgz" + checksum: a7f76456b0556eb2421a8f4c0e7bdefdd1a22a2cb8b0811a0434d1ed1433138f86f4d606cfcc8bb55a964b53ed16c4d74de0b9f075b4df30ced2aec1698cd83d + languageName: node + linkType: hard + "@humanwhocodes/config-array@npm:^0.11.13": version: 0.11.13 resolution: "@humanwhocodes/config-array@npm:0.11.13" @@ -3009,6 +3016,7 @@ __metadata: version: 0.0.0-use.local resolution: "relays@workspace:." dependencies: + "@here/maps-api-for-javascript": "npm:^1.49.1" "@snort/shared": "npm:^1.0.10" "@snort/system": "npm:^1.1.8" "@snort/system-react": "npm:^1.1.8"