Open logicguy1 opened 1 year ago
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
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
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 nothttps://unpkg.com/leaflet@1.6.0/images/distmarker-icon.png
Any help would be nice :)