---
title: "Display a LIDAR data 3D city model | 3D JS | JavaScript maps SDK"
description: "Render LIDAR-based 3D city models on interactive maps."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Display a LIDAR data 3D city model
Utilize the [MapTiler 3D JS module](https://docs.maptiler.com/sdk-js/modules/3d/) to render LIDAR-based 3D urban visualizations on maps. The 3D JS module enables exploration of LIDAR point cloud data and detailed model examination. Users can view existing city structures and visualize proposed urban development concepts through interactive modeling.
This demonstration showcases a small control interface that allows to adjust various model parameters and instantly see their effects on the model’s behavior.
[Model credit](#fn:1)
### NPM module setup
```bash
npm install --save @maptiler/sdk @maptiler/3d lil-gui
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { Layer3D, AltitudeReference } from '@maptiler/3d';
import { GUI } from 'lil-gui';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: document.getElementById('map'),
style: MapStyle.STREETS,
zoom: 15.5,
center: [-74.076273, 40.58592],
pitch: 60,
maxPitch: 85,
terrainControl: true,
terrain: true,
maptilerLogo: true,
});
(async () => {
await map.onReadyAsync();
map.setSky({
"sky-color": "#b2ddfa",
"horizon-color": "#FFFFFF",
"fog-color": "#FFFFFF",
"fog-ground-blend": 0.8,
"horizon-fog-blend": 0.1,
"sky-horizon-blend": 0.6,
"atmosphere-blend": 0.5,
})
const layer3D = new Layer3D("custom-3D-layer");
map.addLayer(layer3D);
// Increasing the intensity of the ambient light
layer3D.setAmbientLight({intensity: 2});
// Adding a point light
layer3D.addPointLight("point-light", {intensity: 30});
const gui = new GUI({ width: 200 });
const meshId = "some-mesh";
const mesh = await layer3D.addMeshFromURL(
meshId,
"https://docs-media.maptiler.com/docs/models/parque_copan_design_proposal.glb",
{
lngLat: [-74.0839886924465, 40.5804232016599],
scale: 1,
visible: true,
altitude: -752,
altitudeReference: AltitudeReference.GROUND,
}
);
const guiObj = {
opacity: 1,
pointSize: 1,
}
gui.add( guiObj, 'opacity', 0, 1)
.onChange((opacity) => {
mesh.modify({opacity});
});
gui.add( guiObj, 'pointSize', 0, 20, 0.1 )
.onChange((pointSize) => {
mesh.modify({pointSize});
});
})()
```
#### index.html
```html
Display a LIDAR data 3D city model | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
.lil-gui.autoPlace {
right: inherit;
left: 15px;
}
```
### Basic JavaScript setup
```html
Add a 3D model
```
[Parque Copan (design proposal)](https://skfb.ly/o8qrG) by Philipp Urech (Topostudio) is licensed under [Creative Commons Attribution](https://creativecommons.org/licenses/by/4.0/) [↩](#fnref:1)
## Related examples
### [Display a 3D photogrammetry building model](https://docs.maptiler.com/sdk-js/examples/3d-js-point-cloud-dundee/)
Examples
Show 3D photogrammetry building models using MapTiler 3D module.
### [Start with AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control/)
Examples
Add an AR control button to map 3D viewports.
### [Animate a 3D plane flight](https://docs.maptiler.com/sdk-js/examples/3d-js-flight/)
Examples
Simulate and animate a 3D plane flight between cities.
### [Display a building model](https://docs.maptiler.com/sdk-js/examples/3d-js-point-cad/)
Examples
Display wireframe 3D building models from point cloud data.