Still working on avatars for locations.

package-lock.json

@@ -37,7 +37,6 @@
         "@types/react-dom": "^18.0.6",
         "@types/react-router": "^5.1.11",
         "@types/react-router-dom": "^5.1.7",
-        "avatar-initials": "^5.0.0",
         "buffer": "^6.0.3",
         "cordova-plugin-geolocation": "^4.1.0",
         "crypto-browserify": "^3.12.0",
@@ -5634,14 +5633,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/avatar-initials": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/avatar-initials/-/avatar-initials-5.0.0.tgz",
-      "integrity": "sha512-4fgzwu70faLzVIAXguRryGjJhfIz9XmXwTQTXUNTg1E+6Pf9dfuhr/1Hvs6mOrw7p0yEGnYKkBjniECxhXSbxw==",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/axe-core": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
@@ -23880,11 +23871,6 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
-    "avatar-initials": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/avatar-initials/-/avatar-initials-5.0.0.tgz",
-      "integrity": "sha512-4fgzwu70faLzVIAXguRryGjJhfIz9XmXwTQTXUNTg1E+6Pf9dfuhr/1Hvs6mOrw7p0yEGnYKkBjniECxhXSbxw=="
-    },
     "axe-core": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",

package.json

@@ -32,7 +32,6 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
-    "avatar-initials": "^5.0.0",
     "buffer": "^6.0.3",
     "cordova-plugin-geolocation": "^4.1.0",
     "crypto-browserify": "^3.12.0",

src/components/map/AvatarForLocation.tsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import { geoPoint, lat2tile, lon2tile, Point } from '../../lib/geo';
 
 import { MapState } from '../../store/map';
+import { getSTile } from './Reticle';
 import { tileProviders } from './tile';
 
 interface AvatarForLocationProps {
@@ -28,6 +29,57 @@ const AvatarForLocation: React.FC<AvatarForLocationProps> = (
     y: lat2tile(location.lat, zoom),
   };
 
+  const locationWithinTile: Point = {
+    x: 256 * (tilesLocation.x - Math.floor(tilesLocation.x)),
+    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 getImage = (stepX: number, stepY: number) => (
+    <image
+      href={tileProviders[tileProvider].getTileUrl(
+        zoom,
+        Math.floor(tilesLocation.x) + stepX,
+        Math.floor(tilesLocation.y) + stepY
+      )}
+      height='256'
+      width={256}
+      x={-locationWithinTile.x + stepX * 256}
+      y={-locationWithinTile.y + stepY * 256}
+    />
+  );
+
+  var images = [getImage(0, 0)];
+  if (eastTileNeeded) {
+    images.push(getImage(1, 0));
+  }
+  if (westTileNeeded) {
+    images.push(getImage(-1, 0));
+  }
+  if (southTileNeeded) {
+    images.push(getImage(0, 1));
+  }
+  if (northTileNeeded) {
+    images.push(getImage(0, -1));
+  }
+  if (northTileNeeded && eastTileNeeded) {
+    images.push(getImage(1, -1));
+  }
+  if (northTileNeeded && westTileNeeded) {
+    images.push(getImage(-1, -1));
+  }
+  if (southTileNeeded && eastTileNeeded) {
+    images.push(getImage(1, 1));
+  }
+  if (southTileNeeded && westTileNeeded) {
+    images.push(getImage(-1, 1));
+  }
+
+  console.log(`${images.length} images: ${images}`);
 
   return (
     <svg width={size} height={size}>
@@ -37,8 +89,8 @@ const AvatarForLocation: React.FC<AvatarForLocationProps> = (
         </clipPath>
       </defs>
       <g clip-path='url(#cut-off)'>
-        <image href={tileProviders[tileProvider].getTileUrl(zoom, Math.floor(tilesLocation.x), Math.floor(tilesLocation.y))} />
+        {[images]}
-        <text x='2' y={size / 2 + 5}>
+        <text x='2' y={size / 2 + 5} visibility='hidden'>
           {name}
         </text>
       </g>

src/components/map/LocationInfo.tsx

@@ -10,8 +10,6 @@ import {
   IonListHeader,
   IonItem,
   IonSpinner,
-  IonAccordionGroup,
-  IonAccordion,
 } from '@ionic/react';
 import React, { Fragment, useRef, useState } from 'react';
 import {
@@ -26,14 +24,12 @@ import {
   Avatar,
 } from '@chatscope/chat-ui-kit-react';
 import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
-import AvatarInitial from 'avatar-initials';
 
 import { useSelector } from 'react-redux';
 import i18n from '../../i18n';
 import { geoPoint } from '../../lib/geo';
 import { MapState } from '../../store/map';
 import AvatarForLocation from './AvatarForLocation';
-import { round } from 'lodash';
 
 const LocationInfo: React.FC<{}> = () => {
   const scope = useSelector((state: { map: MapState }) => state.map.scope);
@@ -268,21 +264,9 @@ const LocationInfo: React.FC<{}> = () => {
                               sentTime={comment.date}
                             />
                             <Message.Footer sentTime={comment.action} />
-                            <Avatar
+                            <Avatar>
-                              src={AvatarInitial.initialAvatar({
+                              {comment.user ? comment.user : '??'}
-                                size: 100,
+                            </Avatar>
-                                initials: comment.user ? comment.user : '??',
-                                initial_fg: comment.user
-                                  ? 'darkblue'
-                                  : 'lightgrey',
-                                initial_bg: comment.user ? 'ivory' : 'darkred',
-                                initial_size: 0, // Defaults to height / 2
-                                initial_weight: 1000,
-                                initial_font_family:
-                                  "'Lato', 'Lato-Regular', 'Helvetica Neue'",
-                              })}
-                              name={comment.user ? comment.user : 'anonymous'}
-                            />
                           </Message>
                         )
                       )}