Site multiboardthe.com

Microsoft Bing Maps 3D (Virtual Earth 3D): A Complete Overview

Written by

admin-dfv33

in

Building Apps with Microsoft Bing Maps 3D (Virtual Earth 3D): A Beginner’s Guide

Overview

Microsoft Bing Maps 3D (formerly Virtual Earth 3D) provides a 3D mapping platform that lets developers render terrain, buildings, and textured imagery in a web or desktop application. This guide covers the basics to get you started building simple interactive 3D map apps, assumes familiarity with JavaScript and web development, and uses reasonable defaults so you can begin without extra setup.

What you’ll build

A simple web app that:

  • Displays a 3D globe or localized 3D scene.
  • Adds a 3D marker and popup.
  • Shows basic 3D camera controls (pan, tilt, zoom).
  • Loads a small GeoJSON dataset and visualizes it as 3D extruded shapes.

Prerequisites

  • Modern web browser with WebGL support.
  • Basic HTML, CSS, and JavaScript knowledge.
  • A Bing Maps key (sign up on Microsoft Azure Portal). Use a development key for testing.

Project structure

  • index.html — page and map container
  • styles.css — minimal layout
  • app.js — initialization and app logic
  • data/points.geojson — sample GeoJSON

index.html

html
<!doctype html>
<html>
<head>
<meta charset=“utf-8” />
  <title>Bing Maps 3D Demo</title>
  <link rel=“stylesheet” href=“styles.css” />
  <script src=“https://www.bing.com/api/maps/mapcontrol?callback=loadMap&key=YOUR_BING_MAPS_KEY” async defer></script>
  <script src=“app.js” defer></script>
</head>
<body>
  <div id=“mapContainer”></div>
</body>
</html>

styles.css

css
html,body,#mapContainer { height: 100%; margin: 0; padding: 0; }
#mapContainer { width: 100vw; height: 100vh; }

app.js

javascript
let map;

function loadMap() {
  map = new Microsoft.Maps.Map(’#mapContainer’, {
    credentials: ‘YOUR_BING_MAPS_KEY’,
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    enableClickableLogo: false
  });

  // Switch to 3D mode if supported
  if (Microsoft.Maps.MapTypeId && Microsoft.Maps.SpatialMath) {
    // Enable pitch and heading controls
    map.setView({ heading: 0, pitch: 45, zoom: 16 });
  }

  add3DMarker({ latitude: 47.640541, longitude: -122.129427 }, ‘Sample Marker’);
  loadGeoJSONAndExtrude(’/data/points.geojson’);
}

function add3DMarker(location, title) {
  const loc = new Microsoft.Maps.Location(location.latitude, location.longitude);

  const pin = new Microsoft.Maps.Pushpin(loc, {
    title: title,
    anchor: new Microsoft.Maps.Point(12, 12)
  });

  Microsoft.Maps.Events.addHandler(pin, ‘click’, () => {
    const infobox = new Microsoft.Maps.Infobox(loc, { title: title, visible: true });
    infobox.setMap(map);
  });

  map.entities.push(pin);
}

async function loadGeoJSONAndExtrude(url) {
  const res = await fetch(url);
  const geojson = await res.json();

  geojson.features.forEach(f => {
    if (f.geometry.type === ‘Polygon’) {
      const coords = f.geometry.coordinates[0].map(c => new Microsoft.Maps.Location(c[1], c[0]));
      const polygon = new Microsoft.Maps.Polygon(coords, {
        fillColor: ‘rgba(0,120,255,0.6)’,
        strokeColor: ‘rgba(0,0,0,0.6)’,
        strokeThickness: 1
      });

      // Simple extrusion: create a vertical line of polygons or use a 3D mesh API if available
      map.entities.push(polygon);
    }
  });
}

GeoJSON sample (data/points.geojson)

”`json { “type”: “FeatureCollection”, “features”: [ { “type”: “Feature”, “properties”: { “name”: “Building A”, “height”: 30 }, “geometry”: { “type”: “Polygon”, “coordinates”: [[ [-122.1296,47.6406], [-122.1292,47.6406], [-122.1292,47.6404], [-122.1296,47.6404], [-122.1296,47.6406] ]] }

Comments

Leave a Reply

More posts