- added boostrap and prism.js

- added title, text and code snippet
ogcincubator · Jan 4, 2024 · cb1c991 · cb1c991
1 parent 3f5d8b3
commit cb1c991
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 15 deletions.
diff --git a/bundle.js b/bundle.js
diff --git a/index.html b/index.html
@@ -2,22 +2,54 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="./prism.css">
     <title>OGC API - Tiles Demo</title>
     <style>
       html, body {
         margin: 0;
         height: 100%;
       }
       #map {
-        position: absolute;
-        top: 0;
-        bottom: 0;
         width: 100%;
+        height: 50vh;;
       }
     </style>
   </head>
   <body>
-    <div id="map"></div>
+    <div class="container">
+      <div class="jumbotron jumbotron-fluid">
+        <div class="container">
+          <h1 class="display-4">OGC API - Tiles Demo</h1>
+          <p class="lead">This map shows a bunch of OGC API - Tiles layers (e.g.: map tiles, vector tiles).
+            They are easily integrated, using the <a href="https://openlayers.org/">OpenLayers</a> library, which supports the <a href="https://docs.ogc.org/is/20-057/20-057.html">standard</a> out-of-the-box 
+            using the <a href="https://openlayers.org/en/latest/apidoc/module-ol_source_OGCMapTile-OGCMapTile.html">OGCMapTile</a> 
+            and <a href="https://openlayers.org/en/latest/apidoc/module-ol_source_OGCVectorTile-OGCVectorTile.html">OGCVectorTile</a> classes (see code sample bellow).
+          </p>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="overflow-x-scroll">
+        <pre><code class="language-css">
+          layers: [
+          new TileLayer({
+              source: new OGCMapTile({
+                url: 'https://maps.gnosis.earth/ogcapi/collections/blueMarble/map/tiles/WebMercatorQuad',
+              }),
+            }),
+            new VectorTileLayer({
+              source: new OGCVectorTile({
+                url: 'https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:cultural:' + 
+                'ne_10m_admin_0_countries/tiles/WebMercatorQuad',
+                format: new MVT(),
+              })
+            })
+      ]
+        </code></pre>
+      </div>
+    </div>
     <script src="./bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="./prism.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -29,6 +29,19 @@ var map = new Map({
                     source: new OSM()
                 }),
                 new TileLayer({
+                    title: 'Esri Nat Geo World Map',
+                    type: 'base',
+                    visible: true,
+                    source: new XYZ({
+                      attributions:
+                        'Tiles &copy; Esri &mdash; National Geographic, Esri, ' +
+                        'DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
+                      url:
+                        'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+                        'NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}',
+                    }),
+                  }),
+/*                 new TileLayer({
                     title: 'Esri Tile Layer',
                     type: 'base',
                     visible: true,
@@ -41,7 +54,7 @@ var map = new Map({
                         'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
                     }),
                   })
-            ]
+ */            ]
         }),
          new LayerGroup({
             title: 'OGC API - Tiles',
@@ -66,15 +79,7 @@ var map = new Map({
                       'stroke-color': '#8c8b8b',
                       'fill-color': '#f7f7e9',
                     },
-                  }),
-                  new VectorTileLayer({
-                    title: 'Daara',
-                    visible: false,
-                    source: new OGCVectorTile({
-                      url: 'https://demo.ldproxy.net/daraa/tiles/WebMercatorQuad',
-                      format: new MVT(),
-                    })
-                  }),
+                  })
             ]
         })
     ],

diff --git a/prism.css b/prism.css