Still working on avatars for locations.

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))} />
-        <text x='2' y={size / 2 + 5}>
+        {[images]}
+        <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
-                              src={AvatarInitial.initialAvatar({
-                                size: 100,
-                                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'}
-                            />
+                            <Avatar>
+                              {comment.user ? comment.user : '??'}
+                            </Avatar>
                           </Message>
                         )
                       )}