diff --git a/frontend/src/components/map.tsx b/frontend/src/components/map.tsx index c88f90a3dface7cd2565809eb92dcb61f152886e..bd863572c4ef6af30186b17f74f5bedf0f380492 100644 --- a/frontend/src/components/map.tsx +++ b/frontend/src/components/map.tsx @@ -3,12 +3,13 @@ import { latLng } from 'leaflet'; import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; import Data from './dataInteface'; +import stringAvatar from './stringToColor'; +import { Avatar } from '@mui/material'; +//const markerImage = require('./leaf-green.png'); const icon = new L.Icon({ iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png', - className: 'color-marker', - html: '', iconSize: [32, 32], }); @@ -37,7 +38,7 @@ const Map = (coords: PageProps) => { } const center = latLng([63.15391166185023, 29.87943304958616]); - + const size = 1; return ( <MapContainer center={center} zoom={18} scrollWheelZoom={false} style={{ height: '100%', width: '100%' }}> <TileLayer @@ -48,7 +49,20 @@ const Map = (coords: PageProps) => { <Circle center={center} radius={0.2} color={'red'} fillColor={'red'} /> {newData.map((item: { position: [number, number]; name: string }) => { - return <Marker key={item.name} position={item.position} icon={icon}></Marker>; + return ( + <Marker + key={item.name} + position={item.position} + icon={L.divIcon({ + iconSize: [size, size], + iconAnchor: [size / 2, size + 9], + className: 'mymarker', + //html: "<Avatar {...stringAvatar(item.name)} />" + //<!-- prettier-ignore-start --> + html: '<h1>ðŸš</h1>', + //<!-- prettier-ignore-end --> + })}></Marker> + ); })} </MapContainer> );