From 68bb753e9813799d93d33f7d559fb592c5baef4b Mon Sep 17 00:00:00 2001 From: gman Date: Sat, 28 Oct 2023 13:45:54 +0300 Subject: [PATCH] add zoom control with custom icons --- src/KartaPage.tsx | 50 +++++++++++++++++++++++++++++++------------ src/assets/minus.png | Bin 0 -> 3909 bytes src/assets/plus.png | Bin 0 -> 4044 bytes 3 files changed, 36 insertions(+), 14 deletions(-) create mode 100644 src/assets/minus.png create mode 100644 src/assets/plus.png diff --git a/src/KartaPage.tsx b/src/KartaPage.tsx index b7fca7c..e929180 100644 --- a/src/KartaPage.tsx +++ b/src/KartaPage.tsx @@ -7,6 +7,8 @@ import Fuse from 'fuse.js' // import mapstyle from './assets/basemap.json'; import mapstyle from './assets/basemap-mapbox.json'; import pin from './assets/pin.png' +import plus from './assets/plus.png' +import minus from './assets/minus.png' export function KartaPage() { const mapRef = useRef(null); @@ -18,6 +20,7 @@ export function KartaPage() { const host = "http://strapi.litmusmap.ru" + // Load icons const handleMapLoad = (e) => { if (mapRef.current) { const pinImage = new Image(); @@ -26,18 +29,12 @@ export function KartaPage() { mapRef.current.addImage('pin-marker', pinImage); } } - pinImage.src = pin; // pin is your svg import + pinImage.src = pin; } } + // Load articles useEffect(() => { - mapRef.current?.loadImage(pin, (error, image) => { - if (error) throw error - mapRef.current?.addImage('pin-marker', image as HTMLImageElement) - }) - - - // let initialArticles fetch(`${host}/api/articles?populate=*`) .then(r => r.json()) .then(d => { @@ -46,13 +43,13 @@ export function KartaPage() { }) }, []) - const fuseOptions = { + + // Search + const fuse = initial !== null && new Fuse(initial, { keys: [ "attributes.tags.value" ] - }; - - const fuse = initial !== null && new Fuse(initial, fuseOptions); + }); useEffect(() => { const foundArticles = fuse && fuse.search(search).map(e => e.item) @@ -60,12 +57,35 @@ export function KartaPage() { setArticles(updatedArticles) }, [search]) + + // List-map interaction const handleAddressClick = (id) => { setSelected(id) const { longitude, latitude } = articles.find(e => e.id == id).attributes id > 0 && articles && mapRef.current?.flyTo({ center: [longitude, latitude] }) } + // Zoom + const ZoomControl = () => { + const zoomIn = () => { + mapRef.current.zoomTo(mapRef.current.getZoom() + 1) + } + const zoomOut = () => { + mapRef.current.zoomTo(mapRef.current.getZoom() - 1) + } + return ( + + + + + + ) + } + return (
- + + + 5m7{_lm4zI&q+ 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 literal 0 HcmV?d00001 diff --git a/src/assets/plus.png b/src/assets/plus.png new file mode 100644 index 0000000000000000000000000000000000000000..ec0a0980a55b753ffe31a45613874bdcef3786fd GIT binary patch literal 4044 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 literal 0 HcmV?d00001