سيتوفّر تصميم الخريطة الجديد قريبًا على "منصة خرائط Google". يتضمن هذا التحديث على تصميم الخريطة لوحة ألوان تلقائية جديدة وتحسينات على تجارب الخرائط وسهولة الاستخدام. سيتم تعديل جميع أنماط الخرائط تلقائيًا في آذار (مارس) 2025. للمزيد من المعلومات عن مدى التوفّر وكيفية تفعيل الميزة في وقت سابق، يُرجى الاطّلاع على نمط الخريطة الجديد في "منصة خرائط Google".

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

العمل مع عارض ثلاثي الأبعاد للمربّعات

تكون مربّعات الصور الواقعية ثلاثية الأبعاد بتنسيق glTF العادي من OGC، ما يعني أنّه يمكنك استخدام أي عارض يتوافق مع مواصفات OGC 3D Tiles لإنشاء مرئيات ثلاثية الأبعاد. على سبيل المثال، Cesium هي مكتبة أساسية مفتوحة المصدر لعرض العروض المرئية الثلاثية الأبعاد.

استخدام CelsiumJS

CesiumJS هي مكتبة JavaScript مفتوحة المصدر للعرض الثلاثي الأبعاد على الويب. لمزيد من المعلومات حول استخدام CesiumJS، يُرجى الاطّلاع على مقالة التعرّف على CesiumJS.

عناصر تحكم المستخدم

يتضمّن عارض مربّعات CelsiumJS مجموعة عادية من عناصر تحكُّم المستخدم.

الإجراء	الوصف
العرض الشامل	النقر بزر الماوس الأيسر والسحب
عرض التكبير أو التصغير	النقر بزر الماوس الأيمن والسحب أو تدوير عجلة الماوس
تدوير العرض	Ctrl + النقر واسحب لليسار/اليمين أو النقر بالوسط واسحب

أفضل الممارسات

تتوفر طرق متعددة لخفض أوقات تحميل CelsiumJS ثلاثية الأبعاد. على سبيل المثال:

يمكنك تفعيل الطلبات المتزامنة من خلال إضافة العبارة التالية إلى رمز HTML المعروض:
```
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = <REQUEST_COUNT>
```
وكلما زاد REQUEST_COUNT، زادت سرعةتحميل المربّعات. ومع ذلك، عند التحميل في متصفّح Chrome الذي يحتوي على REQUEST_COUNT عدد صفحات أكبر من 10 وذاكرة التخزين المؤقت غير مفعّلة، قد تواجه أحد مشاكل Chrome المعروفة. بالنسبة إلى معظم حالات الاستخدام، ننصح باستخدام قيمة REQUEST_COUNT من 18 لتحقيق الأداء الأمثل.
تفعيل تخطي مستويات التفاصيل لمزيد من المعلومات، يُرجى الاطّلاع على مشكلة Cesium هذه.

احرص على عرض عمليات تحديد المصدر للبيانات بشكل صحيح من خلال تفعيل showCreditsOnScreen: true. لمزيد من المعلومات، يُرجى الاطّلاع على السياسات.

مقاييس العرض

للعثور على عدد اللقطات في الثانية، اطّلِع على عدد المرات التي يتم فيها استدعاء الأسلوب requestAnimationFrame في الثانية.

للاطّلاع على كيفية احتساب وقت استجابة الإطار، يمكنك الاطّلاع على فئة PerformanceDisplay.

أمثلة على عارض CesiumJS

يمكنك استخدام أداة التقديم CesiumJS مع "الشرائح الثلاثية الأبعاد" في Map Tiles API من خلال إدخال عنوان URL لشريحة التنقّل الجذر.

مثال بسيط

يُنشئ المثال التالي أداة عرض CesiumJS، ثم يحمِّل مجموعة العلامات الأساسية .

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>CesiumJS 3D Tiles Simple Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
  <link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>

    // Enable simultaneous requests.
    Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

    // Create the viewer.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: false,
      baseLayerPicker: false,
      geocoder: false,
      globe: false,
      // https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/#enabling-request-render-mode
      requestRenderMode: true,
    });

    // Add 3D Tiles tileset.
    const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
      url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
      // This property is needed to appropriately display attributions
      // as required.
      showCreditsOnScreen: true,
    }));
  </script>
</body>

للحصول على معلومات حول requestRenderMode، يمكنك الاطّلاع على تفعيل وضع عرض الطلب.

يتم عرض صفحة HTML كما هو موضّح هنا.

دمج واجهة برمجة تطبيقات الأماكن

يمكنك استخدام SesiumJS مع واجهة برمجة تطبيقات الأماكن لاسترداد مزيد من المعلومات. يمكنك استخدام أداة الإكمال التلقائي للانتقال إلى إطار عرض الأماكن. يستخدِم هذا المثال واجهة برمجة التطبيقات Places Autocomplete API، التي يتم تفعيلها من خلال اتّباع هذه التعليمات، وواجهة برمجة التطبيقات Maps JavaScript API، التي يتم تفعيلها من خلال اتّباع هذه التعليمات.

<!DOCTYPE html>
<head>
 <meta charset="utf-8" />
 <title>CesiumJS 3D Tiles Places API Integration Demo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
 <link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
 <label for="pacViewPlace">Go to a place: </label>
 <input
   type="text"
   id="pacViewPlace"
   name="pacViewPlace"
   placeholder="Enter a location..."
   style="width: 300px"
 />
 <div id="cesiumContainer"></div>
 <script>
   // Enable simultaneous requests.
   Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

   // Create the viewer.
   const viewer = new Cesium.Viewer("cesiumContainer", {
     imageryProvider: false,
     baseLayerPicker: false,
     requestRenderMode: true,
     geocoder: false,
     globe: false,
   });

   // Add 3D Tiles tileset.
   const tileset = viewer.scene.primitives.add(
     new Cesium.Cesium3DTileset({
       url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
       // This property is required to display attributions as required.
       showCreditsOnScreen: true,
     })
   );

   const zoomToViewport = (viewport) => {
     viewer.entities.add({
       polyline: {
         positions: Cesium.Cartesian3.fromDegreesArray([
           viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
           viewport.getSouthWest().lng(), viewport.getNorthEast().lat(),
           viewport.getSouthWest().lng(), viewport.getSouthWest().lat(),
           viewport.getNorthEast().lng(), viewport.getSouthWest().lat(),
           viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
         ]),
         width: 10,
         clampToGround: true,
         material: Cesium.Color.RED,
       },
     });
     viewer.flyTo(viewer.entities);
   };

   function initAutocomplete() {
     const autocomplete = new google.maps.places.Autocomplete(
       document.getElementById("pacViewPlace"),
       {
         fields: [
           "geometry",
           "name",
         ],
       }
     );
     autocomplete.addListener("place_changed", () => {
       viewer.entities.removeAll();
       const place = autocomplete.getPlace();
       if (!place.geometry || !place.geometry.viewport) {
         window.alert("No viewport for input: " + place.name);
         return;
       }
       zoomToViewport(place.geometry.viewport);
     });
   }
 </script>
 <script
   async=""
   src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
 ></script>
</body>

عرض طائرة تصوير دوّارة

يمكنك التحكّم في الكاميرا لتحريكها من خلال مجموعة المربّعات. وعند دمج هذه الصورة المتحركة مع Places API وElevation API، تحاكي حركة طائرة تفاعلية بدون طيار لأي نقطة اهتمام.

تنقلك هذه العينة من الرمز البرمجي حول المكان الذي اخترته في ملف برمجي أداة الإكمال التلقائي.

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>CesiumJS 3D Tiles Rotating Drone View Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
  <link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <label for="pacViewPlace">Go to a place: </label>
  <input type="text" id="pacViewPlace" name="pacViewPlace" placeholder="Enter a location..." style="width: 300px" />
  <div id="cesiumContainer"></div>
  <script>
    // Enable simultaneous requests.
    Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

    // Create the viewer and remove unneeded options.
    const viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: false,
      baseLayerPicker: false,
      homeButton: false,
      fullscreenButton: false,
      navigationHelpButton: false,
      vrButton: false,
      sceneModePicker: false,
      geocoder: false,
      globe: false,
      infobox: false,
      selectionIndicator: false,
      timeline: false,
      projectionPicker: false,
      clockViewModel: null,
      animation: false,
      requestRenderMode: true,
    });

    // Add 3D Tile set.
    const tileset = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
        // This property is required to display attributions.
        showCreditsOnScreen: true,
      })
    );

    // Point the camera at a location and elevation, at a viewport-appropriate distance.
    function pointCameraAt(location, viewport, elevation) {
      const distance = Cesium.Cartesian3.distance(
        Cesium.Cartesian3.fromDegrees(
          viewport.getSouthWest().lng(), viewport.getSouthWest().lat(), elevation),
        Cesium.Cartesian3.fromDegrees(
          viewport.getNorthEast().lng(), viewport.getNorthEast().lat(), elevation)
      ) / 2;
      const target = new Cesium.Cartesian3.fromDegrees(location.lng(), location.lat(), elevation);
      const pitch = -Math.PI / 4;
      const heading = 0;
      viewer.camera.lookAt(target, new Cesium.HeadingPitchRange(heading, pitch, distance));
    }

    // Rotate the camera around a location and elevation, at a viewport-appropriate distance.
    let unsubscribe = null;
    function rotateCameraAround(location, viewport, elevation) {
      if(unsubscribe) unsubscribe();
      pointCameraAt(location, viewport, elevation);
      unsubscribe = viewer.clock.onTick.addEventListener(() => {
        viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z);
      });
    }

    function initAutocomplete() {
      const autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("pacViewPlace"), {
          fields: [
            "geometry",
            "name",
          ],
        }
      );
      
      autocomplete.addListener("place_changed", async () => {
        const place = autocomplete.getPlace();
        
        if (!(place.geometry && place.geometry.viewport && place.geometry.location)) {
          window.alert(`Insufficient geometry data for place: ${place.name}`);
          return;
        }
        // Get place elevation using the ElevationService.
        const elevatorService = new google.maps.ElevationService();
        const elevationResponse =  await elevatorService.getElevationForLocations({
          locations: [place.geometry.location],
        });

        if(!(elevationResponse.results && elevationResponse.results.length)){
          window.alert(`Insufficient elevation data for place: ${place.name}`);
          return;
        }
        const elevation = elevationResponse.results[0].elevation || 10;

        rotateCameraAround(
          place.geometry.location,
          place.geometry.viewport,
          elevation
        );
      });
    }
  </script>
  <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"></script>
</body>

رسم الخطوط المتعددة والتصنيفات

يوضح نموذج التعليمات البرمجية هذا كيفية إضافة الخطوط المتعددة والتسميات إلى خريطة. يمكنك إضافة خطوط متعددة إلى خريطة لعرض اتجاهات القيادة والمشي، أو لعرض حدود العقارات، أو لاحتساب مدّة القيادة والمشي. يمكنك أيضًا الحصول على سمات بدون عرض المشهد في الواقع.

يمكنك أخذ المستخدمين في جولة منظمة في أحد الأحياء، أو يمكنك عرض العقارات المجاورة المعروضة للبيع حاليًا، وبعد ذلك يمكنك إضافة كائنات ثلاثية الأبعاد مثل اللوحات الإعلانية إلى المشهد.

يمكنك تلخيص رحلة، مع إدراج الخصائص التي اطّلعت عليها، مع عرض هذه التفاصيل في العناصر الافتراضية.

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>CesiumJS 3D Tiles Polyline and Label Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
  <link 
    href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css"
    rel="stylesheet"
  />
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Enable simultaneous requests.
    Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

    // Create the viewer.
    const viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: false,
      baseLayerPicker: false,
      requestRenderMode: true,
      geocoder: false,
      globe: false,
    });

    // Add 3D Tiles tileset.
    const tileset = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",

        // This property is required to display attributions as required.
        showCreditsOnScreen: true,
      })
    );

    // Draws a circle at the position, and a line from the previous position.
    const drawPointAndLine = (position, prevPosition) => {
      viewer.entities.removeAll();
      if (prevPosition) {
        viewer.entities.add({
          polyline: {
            positions: [prevPosition, position],
            width: 3,
            material: Cesium.Color.WHITE,
            clampToGround: true,
            classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
          },
        });
      }
      viewer.entities.add({
        position: position,
        ellipsoid: {
          radii: new Cesium.Cartesian3(1, 1, 1),
          material: Cesium.Color.RED,
        },
      });
    };

    // Compute, draw, and display the position's height relative to the previous position.
    var prevPosition;
    const processHeights = (newPosition) => {
      drawPointAndLine(newPosition, prevPosition);

      const newHeight = Cesium.Cartographic.fromCartesian(newPosition).height;
      let labelText = "Current altitude (meters above sea level):\n\t" + newHeight;
      if (prevPosition) {
        const prevHeight =
          Cesium.Cartographic.fromCartesian(prevPosition).height;
        labelText += "\nHeight from previous point (meters):\n\t" + Math.abs(newHeight - prevHeight);
      }
      viewer.entities.add({
        position: newPosition,
        label: {
          text: labelText,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          pixelOffset: new Cesium.Cartesian2(0, -10),
          showBackground: true,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        }
      });

      prevPosition = newPosition;
    };

    const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (event) {
      const earthPosition = viewer.scene.pickPosition(event.position);
      if (Cesium.defined(earthPosition)) {
        processHeights(earthPosition);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  </script>
</body>

مدار الكاميرا

في Celsium، يمكنك الدوران في الكاميرا حول نقطة اهتمام لتجنب الاصطدامات بالمباني. يمكنك بدلاً من ذلك جعل المباني شفافة عندما تتحرك الكاميرا خلالها.

أولاً، اقفل الكاميرا على نقطة، ثم يمكنك إنشاء مدار كاميرا لإظهار مادة العرض التي لديك. يمكنك إجراء ذلك باستخدام دالة lookAtTransform الكاميرا مع مستمع أحداث، كما هو موضّح في نموذج الرموز البرمجية هذا.

// Lock the camera onto a point.
const center = Cesium.Cartesian3.fromRadians(
  2.4213211833389243,
  0.6171926869414084,
  3626.0426275055174
);

const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

viewer.scene.camera.lookAtTransform(
  transform,
  new Cesium.HeadingPitchRange(0, -Math.PI / 8, 2900)
);

// Orbit around this point.
viewer.clock.onTick.addEventListener(function (clock) {
  viewer.scene.camera.rotateRight(0.005);
});

لمزيد من المعلومات عن التحكّم في الكاميرا، يُرجى الاطّلاع على مقالة التحكّم في الكاميرا.

استعِن بأداة Sesium for Unreal.

لاستخدام المكوّن الإضافي Cesium for Unreal مع واجهة برمجة التطبيقات 3D Tiles API، اتّبِع الخطوات التالية:

تثبيت المكوّن الإضافي Celsium for Unreal.
أنشِئ مشروع Unreal جديد.
الربط بواجهة برمجة تطبيقات الصور الواقعية ثلاثية الأبعاد من Google
1. افتح نافذة Celsium من خلال اختيار Cesium > Cesium من القائمة.
2. اختَر مجموعة مربّعات فارغة ثلاثية الأبعاد.
3. في مخطط العالم، افتح لوحة التفاصيل من خلال اختيار Cesium3DTileset هذا.
4. غيِّر المصدر من من Celsium Ion إلى من عنوان URL.
5. اضبط عنوان URL ليكون عنوان URL الخاص بـ "الشرائح الثلاثية الأبعاد من Google".
```
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
```
1. فعِّل إظهار المساهمين على الشاشة لعرض المساهمين بشكل صحيح.
يؤدي ذلك إلى تحميل العالم. للانتقال إلى أيّ خطّ عرض/خطّ طول، اختَر العنصر CesiumGeoreference في لوحة المخطّط، ثمّ عدِّل خطّ عرض/خطّ طول/ارتفاع نقطة المصدر في لوحة التفاصيل.

العمل مع Cesium for Unity

لاستخدام مربّعات الصور الواقعية مع Celsium for Unity، يجب اتّباع الخطوات التالية.

أنشئ مشروعًا جديدًا في Unity.
أضِف سجلًّا جديدًا على مستوى النطاق في قسم "مدير الحِزم" (من خلال المحرِّر > إعدادات المشروع).
- الاسم: السيزيوم
- عنوان URL: https://unity.pkg.cesium.com
- النطاقات: com.cesium.unity
تثبيت حزمة Celsium for Unity.
ربط تطبيقك بواجهة برمجة التطبيقات Google Photorealistic 3D Tiles API
1. افتح نافذة Cesium من خلال اختيار Cesium > Cesium من القائمة.
2. انقر على مجموعة مربّعات ثلاثية الأبعاد فارغة.
3. في اللوحة اليمنى، ضمن خيار مصدر مجموعة الوحدات ضمن المصدر، اختَر من عنوان URL (بدلاً من "من Cesium Ion").
4. اضبط عنوان URL على عنوان URL لـ Google 3D Tiles.
```
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
```
1. فعِّل إظهار المساهمين على الشاشة لعرض المساهمين بشكل صحيح.
يؤدي ذلك إلى تحميل العالم. للانتقال إلى أي خط طول خط الطول، اختَر العنصر CesiumGeoreference في التسلسل الهرمي للمشهد، ثم عدِّل خط العرض/خط الطول/الارتفاع للمنشأ في أداة الفحص.

العمل مع deck.gl

‫deck.gl هو إطار عمل JavaScript مفتوح المصدر لإنشاء رسوم بيانية عالية الأداء على نطاق واسع للبيانات، وهو مستند إلى WebGL.

تحديد المصدر

تأكَّد من عرض الإسنادات إلى البيانات بشكل صحيح من خلال استخراج الحقل copyright من gltf asset، ثم عرضه في العرض المعروض. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة عرض مصادر البيانات.

أمثلة على عارض deck.gl

مثال بسيط

يؤدي المثال التالي إلى تهيئة عارض deck.gl، ثم تحميل مكان بتنسيق ثلاثي الأبعاد. في الرمز البرمجي، تأكَّد من استبدال YOUR_API_KEY بمفتاح واجهة برمجة التطبيقات الفعلي.

<!DOCTYPE html>
<html>
 <head>
   <title>deck.gl Photorealistic 3D Tiles example</title>
   <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
   <style>
     body { margin: 0; padding: 0;}
     #map { position: absolute; top: 0;bottom: 0;width: 100%;}
     #credits { position: absolute; bottom: 0; right: 0; padding: 2px; font-size: 15px; color: white;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
   </style>
 </head>

 <body>
   <div id="map"></div>
   <div id="credits"></div>
   <script>
     const GOOGLE_API_KEY = YOUR_API_KEY;
     const TILESET_URL = `https://tile.googleapis.com/v1/3dtiles/root.json`;
     const creditsElement = document.getElementById('credits');
     new deck.DeckGL({
       container: 'map',
       initialViewState: {
         latitude: 50.0890,
         longitude: 14.4196,
         zoom: 16,
         bearing: 90,
         pitch: 60,
         height: 200
       },
       controller: {minZoom: 8},
       layers: [
         new deck.Tile3DLayer({
           id: 'google-3d-tiles',
           data: TILESET_URL,
           loadOptions: {
            fetch: {
              headers: {
                'X-GOOG-API-KEY': GOOGLE_API_KEY
              }
            }
          },
           onTilesetLoad: tileset3d => {
             tileset3d.options.onTraversalComplete = selectedTiles => {
               const credits = new Set();
               selectedTiles.forEach(tile => {
                 const {copyright} = tile.content.gltf.asset;
                 copyright.split(';').forEach(credits.add, credits);
                 creditsElement.innerHTML = [...credits].join('; ');
               });
               return selectedTiles;
             }
           }
         })
       ]
     });
   </script>
 </body>
</html>

عرض الطبقات ثنائية الأبعاد فوق "المربّعات الثلاثية الأبعاد لصور واقعية" من Google

تعرِض دالة deck.gl TerrainExtension البيانات ثنائية الأبعاد على سطح ثلاثي الأبعاد. على سبيل المثال، يمكنك عرض ملف GeoJSON الخاص بمساحة أرضية مبنى فوق هندسة "المربّعات الثلاثية الأبعاد لصور واقعية".

في المثال التالي، يتم تمثيل طبقة من المباني بشكل مرئي مع مضلّعات تتوافق مع سطح البلاطات الثلاثية الأبعاد ذات الصور الواقعية.

<!DOCTYPE html>
<html>
 <head>
   <title>Google 3D tiles example</title>
   <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
   <style>
     body { margin: 0; padding: 0;}
     #map { position: absolute; top: 0;bottom: 0;width: 100%;}
     #credits { position: absolute; bottom: 0; right: 0; padding: 2px; font-size: 15px; color: white;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
   </style>
 </head>

 <body>
   <div id="map"></div>
   <div id="credits"></div>
   <script>
     const GOOGLE_API_KEY = YOUR_API_KEY;
     const TILESET_URL = `https://tile.googleapis.com/v1/3dtiles/root.json`;
     const BUILDINGS_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson'
     const creditsElement = document.getElementById('credits');
     const deckgl = new deck.DeckGL({
       container: 'map',
       initialViewState: {
         latitude: 50.0890,
         longitude: 14.4196,
         zoom: 16,
         bearing: 90,
         pitch: 60,
         height: 200
       },
       controller: true,
       layers: [
         new deck.Tile3DLayer({
           id: 'google-3d-tiles',
           data: TILESET_URL,
           loadOptions: {
            fetch: {
              headers: {
                'X-GOOG-API-KEY': GOOGLE_API_KEY
              }
            }
          },
          onTilesetLoad: tileset3d => {
             tileset3d.options.onTraversalComplete = selectedTiles => {
               const credits = new Set();
               selectedTiles.forEach(tile => {
                 const {copyright} = tile.content.gltf.asset;
                 copyright.split(';').forEach(credits.add, credits);
                 creditsElement.innerHTML = [...credits].join('; ');
               });
               return selectedTiles;
             }
           },
           operation: 'terrain+draw'
         }),
         new deck.GeoJsonLayer({
           id: 'buildings',
           // This dataset is created by CARTO, using other Open Datasets available. More info at: https://3dtiles.carto.com/#about.
           data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson',
           stroked: false,
           filled: true,
           getFillColor: ({properties}) => {
             const {tpp} = properties;
             // quantiles break
             if (tpp < 0.6249)
               return [254, 246, 181]
             else if (tpp < 0.6780)
               return [255, 194, 133]
             else if (tpp < 0.8594)
               return [250, 138, 118]
             return [225, 83, 131]
           },
           opacity: 0.2,
           extensions: [new deck._TerrainExtension()]
         })
       ]
     });
   </script>
 </body>
</html>