diff options
| author | Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com> | 2025-03-03 22:57:47 +0100 |
|---|---|---|
| committer | Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com> | 2025-03-03 22:57:47 +0100 |
| commit | 647e69e9c3afb317885fbc04e609e9b3b945941a (patch) | |
| tree | 4ec5c2e30fedbb1131b419a335bfcaf24247a81f /src/pages/Map.tsx | |
| parent | 2e90c813d0cf924bb9e8b383c1202aae15b14684 (diff) | |
Manually add pin icon
Diffstat (limited to 'src/pages/Map.tsx')
| -rw-r--r-- | src/pages/Map.tsx | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx index 9b960be..3368e09 100644 --- a/src/pages/Map.tsx +++ b/src/pages/Map.tsx @@ -8,7 +8,15 @@ import LineIcon from '../components/LineIcon'; import { Link } from 'react-router'; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import MarkerClusterGroup from "react-leaflet-markercluster"; -import { LatLngTuple } from "leaflet"; +import { Icon, LatLngTuple } from "leaflet"; + +const icon = new Icon({ + iconUrl: '/map-pin-icon.png', + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowSize: [41, 41] +}); const sdp = new StopDataProvider(); @@ -28,7 +36,7 @@ export function StopMap() { /> <MarkerClusterGroup> {stops.map((stop) => ( - <Marker key={stop.stopId} position={[stop.latitude, stop.longitude] as LatLngTuple}> + <Marker key={stop.stopId} position={[stop.latitude, stop.longitude] as LatLngTuple} icon={icon}> <Popup> <Link to={`/estimates/${stop.stopId}`}>{stop.name}</Link> <br /> |