Reputation: 7249
I use some markers on react-leaflet map to show various text.
But I can not find a flag for the autoOpen tooltip.
I get (position, children, onOpen, onClose) as available attributes.
render() {
return (
<div className={'ShapeLayer'}>
{
this.shapes.map(shape => {
return (
<Marker key={shape['id']} position={shape['coordinates']} draggable={false} opacity={1}>
<Popup>
<span>{shape['text']}</span>
</Popup>
</Marker>
);
})
}
</div>
)
}
This is done with this code on native leaflet
var marker = L.marker(shapess[i]['coordinates'], {
opacity: 0.01
}).bindTooltip(shapess[i]['text'],
{
permanent: true,
className: "shapesText" + i,
offset: [0, 0],
direction: "center"
}
).openTooltip().addTo(mymap);
How can I do the same on react_leflet
Upvotes: 4
Views: 6411
Reputation: 1
Update: 2023, Use setTimeout to access the openPopup() in the marker.
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { useRef } from 'react';
const Location = () => {
const position = [6.632264, 124.597816];
const laptopMarker = L.icon({
iconUrl: './icons/laptop.gif',
iconSize: [40, 40],
popupAnchor: [0, -20],
})
const marker = useRef(null);
return (
<MapContainer whenReady={() => {
setTimeout(() => {
marker.current.openPopup();
}, 3000);
}} center={position} zoom={9} scrollWheelZoom={false} >
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker ref={marker} position={position} icon={laptopMarker}>
<Popup maxWidth={250}>
Hi! <img src='./icons/wave.gif' width='15' height='15' className='inline-block mb-1 mr-1' /> are you interested where I live?
You can find me here!
</Popup>
</Marker>
</MapContainer >
)
}
export default Location;
Upvotes: 0
Reputation: 1286
You can use Tooltip instead of a Popup if it's just for text and then use permanent
attribute on the Tooltip.
<Marker key={shape['id']} position={shape['coordinates']} draggable={false} opacity={1}>
<Tooltip permanent>
<span>{shape['text']}</span>
</Tooltip>
</Marker>
Here is the source for more examples :
react-leaflet/example/components/tooltip.js
Upvotes: 8