0

the marker icon can be a curved arrow. It is necessary that the tooltip is shown when you hover over the arrow, and not when hovering over the transparent area of ​​the picture.

I marked the location of the cursor with a blue dot

https://github.com/iatkin/leaflet-svgicon - this library does not solve the problem

enter image description here

enter image description here

{!!events.length && events.map(el => {
if (!!excludedTypes && excludedTypes.includes(el.type)) return null;
const iconPerson = new L.Icon({
  iconUrl: el.iconUrl,
  iconRetinaUrl: el.iconUrl,
  iconSize: [10 * zoom * 0.5, 12 * zoom * 0.5],
  className: 'Map-Event'
});

return (
  <Marker onclick={() => {
    setInfoblocks(el);
    setInfoblockId(el._id);
  }} key={el._id} icon={iconPerson} position={el.position}>
    <Tooltip direction='top' >
      <div>{el.title}</div>
    </Tooltip>
  </Marker>
)

})}

kroken react
  • 49
  • 5
  • Does this answer your question? [custom marker icon with react-leaflet](https://stackoverflow.com/questions/47723812/custom-marker-icon-with-react-leaflet) – Grzegorz T. Nov 25 '20 at 22:49
  • Unfortunately no – kroken react Nov 26 '20 at 05:39
  • I'm afraid you won't find such a solution for a simple reason: - 2 variables are given everywhere that represent width and height. - the second most important is that the tactile elements should be `45px x 45px`. Of course, nothing stands in the way of extending `L.Icon.extend` with additional elements, once in the inhabited times the map area was used, you can look at it - [map area](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) Take a look at this `L.divIcon` too, I think it will be better to use than `L.Icon`. – Grzegorz T. Nov 26 '20 at 09:24
  • 1
    If you are specifically trying to create an icon which is an arrow, you could try using [leaflet-arrowheads](https://github.com/slutske22/leaflet-arrowheads) instead. you can create an arrow with a polyline, and a tooltip will behave the way you want with that. It may not scale the same as as an svg icon, but its an option if you are not so concerned with map scale. – Seth Lutske Nov 28 '20 at 20:01

0 Answers0