3D view

Show the neighbourhood in volume: a tilted camera, buildings extruded to their real height, trees on parks and gardens, points of interest standing on poles, the property’s own building in your accent colour, and a sunlight simulation that casts the real shadows of the neighbourhood for any month and hour.

What it does

The 3D view is a rendering mode of the same map. Nothing changes in your integration except three options: the points of interest, travel times, isochrones, favourite addresses and search modules all keep working, in 2D and in 3D.

• Buildings in volume, light grey, from the building heights of the map data.
• Trees on woods, parks, gardens and cemeteries. They are generated from the map’s green areas, so they appear everywhere, not only where someone mapped individual trees.
• Points of interest on poles, so an icon stays readable in front of the buildings while its foot shows the exact location.
• The property’s building, found under the map centre, drawn in your accentColor.
• A 3D / 2D button in the map controls, if you want visitors to switch.
• A sunlight simulation: a sun button opens a small panel (month, hour) and the map shows where the sun stands and the shadows the buildings cast on the streets, on the facades and on the property, from sunrise to sunset.

Live demo

Paris, Notre-Dame. Drag to pan, scroll to zoom, click a point of interest. The button in the top-right corner switches back to 2D; the sun button under it opens the sunlight panel.

Sunlight and shadows

With view3dSun: true a sun button joins the map controls. It opens a panel at the bottom of the map: a month, an hour slider that runs from sunrise to sunset at the property, and East / South / West marks (East / North / West in the southern hemisphere). The map then shows the neighbourhood under that sun: lit and shaded facades, the shadow of every building and tree on the streets, on the lower roofs and on the property itself. The visitor sees whether the garden gets the evening sun in June, or whether the tower across the street shades the flat all afternoon in December.

• Real sun. The position is computed for the 15th of the chosen month, at the property’s coordinates, in the local time of the country, with the usual astronomical formulas. Sunrise and sunset bound the slider. At its two ends the sun is drawn just above the horizon, so the first and last minutes of the day show the long grazing shadows rather than nothing.
• Nothing else changes. Buildings keep their grey, trees their green, the property its accent colour: only the light and the shadows move. Shadows come from the same building heights as the 3D view.
• From 2D. Pressing the sun button on the flat map switches to 3D first. Closing the panel restores the standard lighting; the 2D button closes it too.

From your own code, once the map is loaded: YatmoMapSetSun(true) opens the simulation, YatmoMapSetSun(false) closes it.

How to enable

All three options are off by default, so existing maps are unchanged. Add them to your yatmoConfig:

yatmoConfig = {
    licenseKey: '...',
    language: 'EN',
    country: 'FR',
    container: 'map',
    center: [2.3499, 48.8530],
    zoom: 17,
    view3dButton: true,    // 3D / 2D toggle in the map controls
    view3dDefault: true,   // open the map in 3D
    view3dSun: true        // sun button and sunlight panel
};

The useful combinations:

You can also switch from your own code: YatmoMapSetView3d(true) or YatmoMapSetView3d(false), once the map is loaded, and open or close the sunlight simulation with YatmoMapSetSun(true) / YatmoMapSetSun(false).

Parameters

Iframe plugin

The iframe plugin takes the same options as query parameters, view3dButton=1, view3dDefault=1, view3dSun=1 and view3dSunDefault=1. With marker=circle no building is highlighted, since the circle is there to hide the exact address.

<iframe
    width="100%"
    height="560"
    src="https://map.yatmo.com/plugin.html?licenseKey=YOUR_KEY&country=FR&language=EN&latitude=48.8530&longitude=2.3499&mode=map&zoom=17&view3dDefault=1&view3dButton=1&view3dSun=1"
    frameborder="0"
    allowfullscreen
    loading="lazy">
</iframe>

Things to know

• Zoom. Buildings appear from zoom 13 and trees from zoom 14. Below that the 3D view is simply a tilted map. Zoom 16 to 18 gives the best result on a listing page.
• Building heights come from the map data. Where a height is unknown the building is drawn 5 m high, so some streets show uniform low blocks. Large cities are well covered, small towns less so.
• Map styles. The 3D view works with every map style and survives a style change.
• Performance. 3D rendering asks more of the graphics card than the flat map, especially on older phones. The tree count is capped and nothing is recomputed while the visitor drags the map. Keep view3dButton: true so visitors can switch back if their device struggles.
• Sunlight and graphics. While the panel is open the shadows are rendered by the graphics card from a depth map refreshed at every frame, over the area around the map centre (300 m to 2.5 km depending on the zoom). Where the browser cannot provide that depth map, the buildings still follow the sun’s light but cast no shadow. Closing the panel stops all of it.
• Shadows are as good as the heights. A building drawn 5 m high for lack of data casts a 5 m shadow. In well-mapped cities the result is faithful; in a small town compare with the street before drawing conclusions for a buyer.
• Pins stay on top. Points of interest and the property pin are drawn above the buildings, so an icon behind a tall building stays visible. Trees, on the other hand, are hidden by the buildings in front of them.