example(SourceFileKML): add new kml raster file from official source

iTowns · May 4, 2023 · 58734ee · 58734ee
1 parent 6e2a98c
commit 58734ee
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 0 deletions.
diff --git a/examples/config.json b/examples/config.json
@@ -50,6 +50,7 @@
         "source_file_geojson_raster": "GeoJSON to raster",
         "source_file_geojson_3d": "GeoJSON to 3D objects",
         "source_file_kml_raster": "KML to raster",
+        "source_file_kml_raster_usgs": "USGS KML flux to raster",
         "source_file_gpx_raster": "GPX to raster",
         "source_file_gpx_3d": "GPX to 3D objects"
     },

diff --git a/examples/source_file_kml_raster_usgs.html b/examples/source_file_kml_raster_usgs.html
@@ -0,0 +1,94 @@
+<html>
+    <head>
+        <title>Itowns - Globe + color layers from vector data</title>
+        <meta charset="UTF-8">
+        <link rel="stylesheet" type="text/css" href="css/example.css">
+        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+    </head>
+    <body>
+        <div id="viewerDiv" class="viewer"></div>
+        <script src="js/GUI/GuiTools.js"></script>
+        <script src="../dist/itowns.js"></script>
+        <script src="../dist/debug.js"></script>
+        <script src="js/GUI/LoadingScreen.js"></script>
+        <script src="js/plugins/FeatureToolTip.js"></script>
+        <script type="text/javascript">
+            // # Simple Globe viewer
+            /* global itowns, setupLoadingScreen, GuiTools, ToolTip */
+
+            // Define initial camera position
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 6.8, 45.9),
+            }
+
+            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+            var viewerDiv = document.getElementById('viewerDiv');
+
+            // Instanciate iTowns GlobeView*
+            var view = new itowns.GlobeView(viewerDiv, placement);
+            var menuGlobe = new GuiTools('menuDiv', view);
+
+            setupLoadingScreen(viewerDiv, view);
+            FeatureToolTip.init(viewerDiv, view);
+
+            // Add one imagery layer to the scene
+            // This layer is defined in a json file but it could be defined as a plain js
+            // object. See Layer* for more info.
+            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                var layer = new itowns.ColorLayer('Ortho', config);
+                view.addLayer(layer).then(function _() {
+                    menuGlobe.addLayerGUI.bind(menuGlobe);
+                    itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
+                });
+            });
+            // Add two elevation layers.
+            // These will deform iTowns globe geometry to represent terrain elevation.
+            function addElevationLayerFromConfig(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                var layer = new itowns.ElevationLayer(config.id, config);
+                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
+            }
+            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
+
+            // Fetch, Parse and Convert by iTowns
+            var kmlSource = new itowns.FileSource({
+                url: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month_depth.kml',
+                crs: 'EPSG:4326',
+                format: 'application/kml',
+            });
+
+            function offset(properties) {
+                const sizeIcon = 64;
+                const scaleIcon = properties['icon-scale'];
+                return [ 0, -0.5 * scaleIcon * sizeIcon ];
+            }
+
+            var kmlStyle = new itowns.Style({
+                zoom: { min: 10, max: 20 },
+                text: {
+                    field: '{name}',
+                    haloColor: 'black',
+                    haloWidth: 1,
+                    color: 'white',
+                    offset: offset,
+                    anchor: 'bottom',
+                },
+            });
+
+            var kmlLayer = new itowns.ColorLayer('Kml', {
+                source: kmlSource,
+                style: kmlStyle,
+                addLabelLayer: true,
+            });
+
+            debug.createTileDebugUI(menuGlobe.gui, view);
+
+            view.addLayer(kmlLayer).then(FeatureToolTip.addLayer);
+        </script>
+    </body>
+</html>