'leaflet-3d-marker' is an npm package designed to enhance your Leaflet maps within React by adding the capability to effortlessly integrate visually appealing 3D markers. This package is fully compatible with TypeScript.
3D markers 😎 | Old plain markers 😢 |
---|---|
Check out the live demo of: Interactive Leaflet Rotated Marker.
Install with npm
npm install leaflet-3d-marker
import "leaflet-3d-marker";
Adjust the perspective of the MapContainer component to add a 3D effect
<MapContainer
center={position}
zoom={5}
style={{
height: 500,
width: "100%",
perspective: "250px",
}}
>
Use the rotation3d property to set the rotation angle for your Marker component
<Marker position={position} icon={exampleIcon} rotation3d={[1, 0, 0, 320]} />
Feel free to adjust the perspective value and rotation3d as needed to achieve the desired visual effect for your Leaflet map with 3D markers.
rotate3d(x, y, z, a)
-
x, y, z: Are describing the coordinates of the vector denoting the axis of rotation which can be a positive or negative number.
-
a: Is an representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
perspective
The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
This project is based on the work and inspiration of the leaflet-rotatedmarker by Benjamin Becquet. We appreciate their contribution and the community backing their project.