Add custom 3D Maps to your website

Embed with iFrame

To embed the 3D map into your own website, you will get a ready-made code snippet with instructions and some examples. The 3D map can easily be embedded via iFrame.

 

All the settings made in the preview will be saved in the code and the 3D map will appear on your website in the exact same manner. The user is able to drag, zoom and rotate the 3D map.

 

You should be a little skilled in basics of website programming or ask a programmer to embed the map correctly.

 

How to embed 3D map in WordPress

3D Map Setting Options

  • Map height
  • Map position
  • Rotation speed
  • Mesh resolution
  • Light
  • Water level and waves
  • Map edge texture and color
  • Background

Map Location: Minaret Bay, Wanaka

 

Coord. (lat, lng): -44.440666, 169.074402

Zoom level: 14z

 

Attribution

Map texture: MapTiler

 

Image size (high-res): 3584 x 2560 px

 

Water level: 1.1

Background: Sunset

Rotation: 0

Embed with a 3D model viewer

Another easy way to present the 3D map on your own website is with the aid of a 3D model viewer. The 3D map is used here as a glTF file (3D file). There are a few free viewers online available for download. In the following example we use the Babylon.js viewer.

 

However not all map settings can be displayed. Position, rotation, background and water are not saved in a glTF file.

 

You should be a little skilled in basics of website programming or ask a programmer to embed the map correctly.

 

How to embed 3D map as glTF (3D file)

3D Map Setting Options

  • Map height
  • Mesh resolution
  • Map edge and edge color
Babylon.js Viewer - Display a 3D model

Map Location: Minaret Bay, Wanaka

 

Coord. (lat, lng): -44.440666, 169.074402

Zoom level: 14z

 

Attribution

Map texture: MapTiler

 

Image size (high-res): 3584 x 2560 px

 

Background: Viewer settings

Rotation: Viewer settings