Odd square around markers

[logicguy1]

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 :)

[logicguy1]

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='&copy; <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

[curtisy1]

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