Fixed mars example

openglobus · Jun 27, 2024 · 1acbc77 · 1acbc77
1 parent 335d8d2
commit 1acbc77
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 71 deletions.
diff --git a/examples/mars/mars.html b/examples/mars/mars.html
@@ -9,91 +9,42 @@
 </html>
 
 <body>
-<div id="globus"></div>
-    <script type="module" id="og-sandbox-script">
+<div id="globus" style="width:100%;height:100%;"></div>
+<script type="module" id="og-sandbox-script">
 
     'use strict';
 
     import {
         Globe,
-        EmptyTerrain,
         XYZ,
         control,
-        quadTreeStrategyType,
-        CanvasTiles
+        RgbTerrain,
+        quadTreeStrategyType
     } from "../../external/og/lib/@openglobus/og.esm.js";
 
-    const tg = new CanvasTiles("Tile grid", {
-        visibility: true,
-        isBaseLayer: false,
-        drawTile: function (material, applyCanvas) {
-
-            //
-            // This is important create canvas here!
-            //
-            let cnv = document.createElement("canvas");
-            let ctx = cnv.getContext("2d");
-            cnv.width = 256;
-            cnv.height = 256;
-
-            //Clear canvas
-            ctx.clearRect(0, 0, cnv.width, cnv.height);
-
-            //Draw border
-            ctx.beginPath();
-            ctx.rect(0, 0, cnv.width, cnv.height);
-            ctx.lineWidth = 2;
-            ctx.strokeStyle = 'black';
-            ctx.stroke();
-
-            let size;
-
-            if (material.segment.isPole) {
-                let ext = material.segment.getExtentLonLat();
-
-                ctx.fillStyle = 'white';
-                ctx.font = 'normal ' + 29 + 'px Verdana';
-
-                ctx.textAlign = 'center';
-                ctx.fillText(`${ext.northEast.lon.toFixed(3)} ${ext.northEast.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 + 20);
-                ctx.fillText(`${ext.southWest.lon.toFixed(3)} ${ext.southWest.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 - 20);
-            } else {
-                //Draw text
-                if (material.segment.tileZoom > 14) {
-                    size = "26";
-                } else {
-                    size = "32";
-                }
-                ctx.fillStyle = 'white';
-                ctx.font = 'normal ' + size + 'px Verdana';
-                ctx.textAlign = 'center';
-                ctx.fillText(material.segment.tileX + "," + material.segment.tileY + "," + material.segment.tileZoom, cnv.width / 2, cnv.height / 2);
-            }
-
-            //Draw canvas tile
-            applyCanvas(cnv);
-        }
-    });
-
-
     const osm = new XYZ("OSM", {
         'isBaseLayer': true,
-        'url': "https://astro.arcgis.com/arcgis/rest/services/OnMars/MDIM/MapServer/tile/{z}/{y}/{x}?blankTile=false",
+        //'url': "https://astro.arcgis.com/arcgis/rest/services/OnMars/MDIM/MapServer/tile/{z}/{y}/{x}?blankTile=false",
+        url: "https://terrain.openglobus.org/public/mars/sat/{z}/{x}/{y}.png",
         'visibility': true,
-        'attribution': 'Data @ USGS Astrogeology Science Center, NASA, JPL, Esri'
+        maxNativeZoom: 8,
+    });
+
+    var highResTerrain = new RgbTerrain(null, {
+        geoid: null,
+        maxZoom: 6,
+        url: "https://{s}.terrain.openglobus.org/public/mars/elv/{z}/{x}/{y}.png",
+        heightFactor: 7
     });
 
     window.globe = new Globe({
         name: "mars",
         quadTreeStrategyPrototype: quadTreeStrategyType.mars,
         target: "globus",
-        terrain: new EmptyTerrain(),
+        terrain: highResTerrain,
         layers: [osm],
-        sun: {
-            active: false
-        },
         nightTextureSrc: null,
-        specularTextureSrc: null
+        specularTextureSrc: null,
     });
 
 </script>

diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
@@ -56,14 +56,15 @@ function Editor({examplesUrl, onRun, onRaw, code, id}) {
                 <Tab eventKey="html" title="Head">
                     <div className="og-examples__code">
                         <CodeEditor
+                            data-color-mode="dark"
                             value={head}
                             language="html"
                             placeholder="<head>...</head>"
                             onChange={handleHeadChange}
                             padding={15}
                             style={{
-                                fontSize: 12,
-                                backgroundColor: "#f5f5f5",
+                                fontSize: 14,
+                                //backgroundColor: "#f5f5f5",
                                 fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
                             }}
                         />
@@ -73,14 +74,15 @@ function Editor({examplesUrl, onRun, onRaw, code, id}) {
                 <Tab eventKey="body" title="HTML">
                     <div className="og-examples__code">
                         <CodeEditor
+                            data-color-mode="dark"
                             value={body}
                             language="html"
                             placeholder="<body>...</body>"
                             onChange={handleBodyChange}
                             padding={15}
                             style={{
-                                fontSize: 12,
-                                backgroundColor: "#f5f5f5",
+                                fontSize: 14,
+                                //backgroundColor: "#f5f5f5",
                                 fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
                             }}
                         />
@@ -90,14 +92,15 @@ function Editor({examplesUrl, onRun, onRaw, code, id}) {
                 <Tab eventKey="script" title="Script">
                     <div className="og-examples__code">
                         <CodeEditor
+                            data-color-mode="dark"
                             value={script}
                             language="js"
                             placeholder="<script>...</script>"
                             onChange={handleScriptChange}
                             padding={15}
                             style={{
-                                fontSize: 12,
-                                backgroundColor: "#f5f5f5",
+                                fontSize: 14,
+                                //backgroundColor: "#f5f5f5",
                                 fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
                             }}
                         />