example(SourceFileGeoJson): geojson raster file -> add new example fo…

…r planarView
iTowns · May 4, 2023 · 2d6abcd · 2d6abcd
1 parent 58734ee
commit 2d6abcd
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 0 deletions.
diff --git a/examples/config.json b/examples/config.json
@@ -48,6 +48,7 @@
 
     "FileSource": {
         "source_file_geojson_raster": "GeoJSON to raster",
+        "source_file_geojson_raster_2": "USGS GeoJSON flux to raster (planar view)",
         "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",

diff --git a/examples/source_file_geojson_raster_2.html b/examples/source_file_geojson_raster_2.html
@@ -0,0 +1,119 @@
+<html>
+    <head>
+        <title>Itowns - Planar + 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">
+            // # Orthographic viewer with one geojson layer and a TMS background layer
+
+            // Define geographic extent: CRS, min/max X, min/max Y
+            var extent = new itowns.Extent(
+                'EPSG:3857',
+                -20037508.34, 20037508.34,
+                -20048966.1, 20048966.1);
+
+            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+            var viewerDiv = document.getElementById('viewerDiv');
+
+            // Instanciate PlanarView (with ortho camera)
+            // By default itowns' tiles geometry have a "skirt" (ie they have a height),
+            // but in case of orthographic we don't need this feature, so disable it
+            var view = new itowns.PlanarView(viewerDiv, extent, {
+                disableSkirt: true,
+                maxSubdivisionLevel: 10,
+                camera: { type: itowns.CAMERA_TYPE.ORTHOGRAPHIC },
+                placement: new itowns.Extent('EPSG:3857', -20000000, 20000000, -20000000, 20000000),
+                controls: {
+                    // Faster zoom in/out speed
+                    zoomFactor: 3,
+                    // prevent from zooming in too much
+                    maxResolution: 0.005  // a pixel shall not represent a metric size smaller than 5 mm
+                },
+            });
+
+            var menuGlobe = new GuiTools('menuDiv', view, 300);
+
+            setupLoadingScreen(viewerDiv, view);
+            FeatureToolTip.init(viewerDiv, view);
+
+            // Add a TMS layer to have a background (OpenStreetMap)
+            // -> TMS imagery source
+            var opensmSource = new itowns.TMSSource({
+                isInverted: true,
+                url: 'https://tile.openstreetmap.org/${z}/${x}/${y}.png',
+                networkOptions: { crossOrigin: 'anonymous' },
+                extent,
+                crs: 'EPSG:3857',
+                attribution: {
+                    name: 'OpenStreetMap',
+                    url: 'http://www.openstreetmap.org/',
+                },
+            });
+            // -> TMS imagery layer
+            var opensmLayer = new itowns.ColorLayer('OPENSM', {
+                updateStrategy: {
+                    type: itowns.STRATEGY_DICHOTOMY,
+                },
+                source: opensmSource,
+            });
+            view.addLayer(opensmLayer);
+
+            // Display the content of the GeoJSON file with ColorLayer and FileSource.
+            // The GeoJSON are loaded from url, set in FileSource
+
+            // Declare the source for the earthquakes data
+            const earthquakeSource = new itowns.FileSource({
+                url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/' +
+                        'geojson/Earthquakes_3857.geojson',
+                crs: 'EPSG:3857',
+                format: 'application/json',
+            });
+
+            function offset(properties) {
+                const radius = properties.mag;
+                return [ 0, -radius ];
+            }
+
+            // Create a ColorLayer with the earthquake information
+            const earthquakeLayer = new itowns.ColorLayer('earthquakes', {
+                source: earthquakeSource,
+                style: new itowns.Style({
+                    point: {
+                        color: function (p) { return p.alert; },
+                        radius: function (p) { return p.mag; },
+                        line: 'black',
+                        width: 0.5,
+                    },
+                    text: {
+                        field: '{title}',
+                        haloColor: 'black',
+                        haloWidth: 1,
+                        anchor: 'bottom',
+                        offset: offset,
+                    },
+                }),
+                addLabelLayer: true,
+            });
+
+            // Add the earthquakes ColorLayer to the view and grant it a tooltip
+            view.addLayer(earthquakeLayer).then(FeatureToolTip.addLayer);
+
+            // Request redraw
+            view.notifyChange(true);
+
+            debug.createTileDebugUI(menuGlobe.gui, view);
+        </script>
+    </body>
+</html>