Display a point cloud 3D building model on a map.

Use the MapTiler 3D JS module to display a point cloud 3D building model on a map. Thanks to the 3D JS module we can view the cloud point model and navigate inside the building.

This demonstration show a compact control interface that allows to modify diferent model parameters and observe their immediate impact on the model’s behavior.


npm install --save @maptiler/sdk @maptiler/3d lil-gui

main.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.DATAVIZ,
  zoom: 19.6,
  center: [-0.1765222, 51.4963662],
  pitch: 63,
  bearing: -24.8,
  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/hintze_hall_nhm_london_point_cloud.glb",
    {
      lngLat: [-0.17642900347709656, 51.496198574865645],
      heading: 83.6,
      scale: 1,
      visible: true,
      altitude: 0,
      altitudeReference: AltitudeReference.GROUND,
    }
  );

  const guiObj = {
    opacity: 1,
    pointSize: 1,
    fov: map.transform.fov,
  }

  gui.add( guiObj, 'opacity', 0, 1)
  .onChange((opacity) => {
    mesh.modify({opacity});
  });

  gui.add( guiObj, 'pointSize', 0, 20, 0.1 )
  .onChange((pointSize) => {
    mesh.modify({pointSize});
  });

  gui.add( guiObj, 'fov', 0, 60)
  .onChange((fov) => {
    map.transform.fov = fov;
    map.triggerRepaint();
  });

})()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Display a point cloud 3D building model on a map. | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
.lil-gui.autoPlace {
  right: inherit;
  left: 15px;
}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add a 3D model</title>
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
<!-- Importing MapTiler 3D js -->
<script src="https://cdn.maptiler.com/maptiler-3d/v4.0.1/maptiler-3d.umd.min.js"></script>
<style>
  body {margin: 0; padding: 0;}
  #map {position: absolute; top: 0; bottom: 0; width: 100%;}
  .lil-gui.autoPlace {
    right: inherit;
    left: 15px;
  }
</style>
</head>
<body>
<div id="map"></div>
<script>
  maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

  const map = new maptilersdk.Map({
    container: document.getElementById('map'),
    style: maptilersdk.MapStyle.DATAVIZ,
    zoom: 19.6,
    center: [-0.1765222, 51.4963662],
    pitch: 63,
    bearing: -24.8,
    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 maptiler3d.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 lil.GUI({ width: 200 });

    const meshId = "some-mesh";
    const mesh = await layer3D.addMeshFromURL(
      meshId,
      "https://docs-media.maptiler.com/docs/models/hintze_hall_nhm_london_point_cloud.glb",
      {
        lngLat: [-0.17642900347709656, 51.496198574865645],
        heading: 83.6,
        scale: 1,
        visible: true,
        altitude: 0,
        altitudeReference: maptiler3d.AltitudeReference.GROUND,
      }
    );

    const guiObj = {
      opacity: 1,
      pointSize: 1,
      fov: map.transform.fov,
    }

    gui.add( guiObj, 'opacity', 0, 1)
    .onChange((opacity) => {
      mesh.modify({opacity});
    });

    gui.add( guiObj, 'pointSize', 0, 20, 0.1 )
    .onChange((pointSize) => {
      mesh.modify({pointSize});
    });

    gui.add( guiObj, 'fov', 0, 60)
    .onChange((fov) => {
      map.transform.fov = fov;
      map.triggerRepaint();
    });

  })()

  </script>
</body>
</html>

Hintze Hall, NHM London [point cloud] by Thomas Flynn is licensed under Creative Commons Attribution ↩