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.