Odd square around markers
logicguy1 opened this issue · 2 comments
Heyo!!
I have this really odd issue with the router
All the waypoints have a little box around them, trying to remove them using css seems unsuccessfull
img {border:none; outline: none;}
Also the icons are missing, it seems its trying to access the wrong URI for it. Its attempting to use https://unpkg.com/leaflet@1.6.0/distmarker-icon.png
and not https://unpkg.com/leaflet@1.6.0/images/distmarker-icon.png
Any help would be nice :)
Forgot to link my code, that would likely help.
Map.jsx
import React, { useEffect, useRef } from 'react';
import { MapContainer, TileLayer, useMap, SVGOverlay } from 'react-leaflet';
import RoutineMachine from "./RoutineMachine";
const MyMap = () => {
const cords = [46.933, 13.197]
const bounds = [
[cords[0]-0.01, cords[1]-0.01],
[cords[0]+0.01, cords[1]+0.01],
]
return (
<MapContainer id="mapId" center={cords} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<SVGOverlay attributes={{ stroke: 'red' }} bounds={bounds}>
<circle r="5" cx="10" cy="10" fill="red" />
</SVGOverlay>
<RoutineMachine />
</MapContainer>
);
};
export default MyMap;
RoutineMachine.jsx
import L from "leaflet";
import { createControlComponent } from "@react-leaflet/core";
import "leaflet-routing-machine";
const createRoutineMachineLayer = (props) => {
const instance = L.Routing.control({
waypoints: [
L.latLng(46.93553,13.16028),
L.latLng(46.9290,13.2114)
],
lineOptions: {
styles: [{ color: "#6FA1EC", weight: 4 }]
},
show: false,
addWaypoints: false,
routeWhileDragging: true,
draggableWaypoints: true,
fitSelectedRoutes: false,
showAlternatives: false
});
return instance;
};
const RoutingMachine = createControlComponent(createRoutineMachineLayer);
export default RoutingMachine;
If you need any other files please ask
This is likely a weird combination of Leaflet path inconsistencies and unpkg. Is it possible for you to try a newer version of Leaflet? They adjusted the path finding algorithm in 1.8.0 so anything up to 1.9.3 would be interesting.
LRM itself relies on Leaflet for marker generation, so there's nothing much I can do apart from that unfortunately