Revision history [back]

To apply tilt in ngx-leaflet, you can make use of the Leaflet-THREE plugin. The Leaflet-THREE plugin allows you to create WebGL 3D maps with Leaflet and THREE.js.

Here are the steps to apply tilt in ngx-leaflet using Leaflet-THREE plugin:

1. Install Leaflet-THREE plugin using npm:

npm install leaflet-three

1. Import the plugin in your component:

import * as LTHREE from 'leaflet-three';

1. Create a new map object:

const map = L.map('map').setView([51.505, -0.09], 13);

1. Create a new TileLayer object and add it to the map:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

1. Create a new Scene object using the LTHREE plugin and add it to the map:

const scene = LTHREE.Scene();

map.addLayer(scene);

1. Create a new Mesh object using THREE.SphereGeometry() and THREE.MeshBasicMaterial():

const geometry = new THREE.SphereGeometry(10, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });

const mesh = new THREE.Mesh(geometry, material);

1. Add the Mesh object to the Scene object:

scene.add(mesh);

1. Apply tilt to the Mesh object using THREE.Matrix4():

const matrix = new THREE.Matrix4().makeRotationX(Math.PI / 2);

mesh.applyMatrix(matrix);

1. Call the render() method on the scene to see the updated view:

scene.render();

By following these steps, you can apply tilt to your ngx-leaflet map using the Leaflet-THREE plugin.