Leaflet 3D Marker

'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.

Example

| 3D markers 😎 | Old plain markers 😢 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | | |

Check out the live demo of: Interactive Leaflet Rotated Marker.

Installation

Install with npm

  npm install leaflet-3d-marker

Usage

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.

Documentation

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.

Acknowledgements

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.