From 9bb2f48d4aa43604f6c54a979b35e381afb9cd30 Mon Sep 17 00:00:00 2001 From: evlist Date: Tue, 11 Oct 2022 22:15:21 +0200 Subject: [PATCH] Pretty nice (IMHO) version of avatars for locations... --- src/components/map/AvatarForLocation.tsx | 30 +++++------ src/components/map/LocationInfo.tsx | 69 +++++++++++++++--------- src/theme/map.css | 5 ++ 3 files changed, 61 insertions(+), 43 deletions(-) diff --git a/src/components/map/AvatarForLocation.tsx b/src/components/map/AvatarForLocation.tsx index 8140ed4..5afa0cd 100644 --- a/src/components/map/AvatarForLocation.tsx +++ b/src/components/map/AvatarForLocation.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import { locationOutline } from 'ionicons/icons'; +import React, { useId } from 'react'; import { useSelector } from 'react-redux'; import { geoPoint, lat2tile, lon2tile, Point } from '../../lib/geo'; @@ -12,17 +13,15 @@ interface AvatarForLocationProps { zoom?: number; tileProvider?: string; size?: number; - name?: string; } const AvatarForLocation: React.FC = ( props: AvatarForLocationProps ) => { - const size = props.size ? props.size : 42; + const size = props.size !== undefined ? props.size : 42; const zoom = props.zoom ? Math.round(props.zoom) : 16; const tileProvider = props.tileProvider ? props.tileProvider : 'osm'; const location = props.location; - const name = props.name ? props.name : '???'; const tilesLocation: Point = { x: lon2tile(location.lon, zoom), @@ -34,10 +33,10 @@ const AvatarForLocation: React.FC = ( y: 256 * (tilesLocation.y - Math.floor(tilesLocation.y)), }; - const eastTileNeeded = locationWithinTile.x > 256 - size; - const westTileNeeded = locationWithinTile.x < size; - const southTileNeeded = locationWithinTile.y > 256 - size; - const northTileNeeded = locationWithinTile.y < size; + const eastTileNeeded = locationWithinTile.x > 256 - size / 2; + const westTileNeeded = locationWithinTile.x < size / 2; + const southTileNeeded = locationWithinTile.y > 256 - size / 2; + const northTileNeeded = locationWithinTile.y < size / 2; const getImage = (stepX: number, stepY: number) => ( = ( )} height='256' width={256} - x={-locationWithinTile.x + stepX * 256} - y={-locationWithinTile.y + stepY * 256} + x={-locationWithinTile.x + size / 2 + stepX * 256} + y={-locationWithinTile.y + size / 2 + stepY * 256} /> ); @@ -81,19 +80,16 @@ const AvatarForLocation: React.FC = ( console.log(`${images.length} images: ${images}`); + const id = useId(); + return ( - + - - {[images]} - - {name} - - + {[images]} ); }; diff --git a/src/components/map/LocationInfo.tsx b/src/components/map/LocationInfo.tsx index 3a146b0..def0ea0 100644 --- a/src/components/map/LocationInfo.tsx +++ b/src/components/map/LocationInfo.tsx @@ -78,7 +78,7 @@ const LocationInfo: React.FC<{}> = () => { setNoteIndex(0); const metresPerDegree = 111111 * Math.cos((scope.center.lat * Math.PI) / 180); - const deltaDegrees = 2000 / metresPerDegree; + const deltaDegrees = 5000 / metresPerDegree; const response = await fetch( `https://api.openstreetmap.org/api/0.6/notes.json?bbox=${ scope.center.lon - deltaDegrees @@ -89,6 +89,17 @@ const LocationInfo: React.FC<{}> = () => { ); const data = await response.json(); console.log(`notes: ${JSON.stringify(data)}`); + data.features.sort( + (first: any, second: any) => + roughDistance(scope.center, { + lon: first.geometry.coordinates[0], + lat: first.geometry.coordinates[1], + }) > + roughDistance(scope.center, { + lon: second.geometry.coordinates[0], + lat: second.geometry.coordinates[1], + }) + ); setNotes(data); }; @@ -121,24 +132,23 @@ const LocationInfo: React.FC<{}> = () => { setNoteIndex(index); }; - const AvatarForFeature: React.FC<{ feature: any; as: any }> = (props: { + const AvatarForFeature: React.FC<{ feature: any; + size: number; as: any; - }) => { + }> = (props: { feature: any; size: number; as: any }) => { const distance = roughDistance(scope.center, { lon: props.feature.geometry.coordinates[0], lat: props.feature.geometry.coordinates[1], }); - const distDark = (255 * distance) / 3000; - const distLight = 1 - distDark; return ( - + ); @@ -205,25 +215,36 @@ const LocationInfo: React.FC<{}> = () => { - {notes.features!.map((feature: any, index: number) => ( - - - - ))} + {notes + .features!.slice(0, 5) + .map((feature: any, index: number) => ( + + + + ))} + = () => { )} - {noteIndex < notes.features.length && diff --git a/src/theme/map.css b/src/theme/map.css index 65c8ebe..58aaaad 100644 --- a/src/theme/map.css +++ b/src/theme/map.css @@ -97,3 +97,8 @@ ion-modal ion-content { display: block; } } + +.cs-conversation-header__avatar { + height: auto !important; + width:auto !important; +}