improved app htmls

nlextract · Mar 6, 2015 · dfd991e · dfd991e
1 parent 27bb0bc
commit dfd991e
Show file tree

Hide file tree

Showing 12 changed files with 251 additions and 119 deletions.
diff --git a/3d/app/index.html b/3d/app/index.html
@@ -1,60 +1,74 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>Top10NL3D and other 3D stuff</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-    <meta charset="utf-8"/>
-    <meta name="author" content="Just van den Broecke">
-
-    <style>
-        html, body {
-            height: 100%;
-            padding: 10px;
-            margin: 6px;
-            font-family: sans-serif;
-        }
-
-    </style>
+    <title>OpenTopo - Apps - 3D</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
-<h2>3D Apps with Dutch Open GeoData</h2>
-by: <a href="http://justobjects.nl">Just van den Broecke</a>
-
-<p>Various web apps to demonstrate and use 3D web mapping. Sources
-    for these apps in <a href="https://github.com/opengeogroep/NLExtract/tree/master/3d/app">NLExtract GitHub</a>.
-
-<h3>OpenTopo with CesiumJS</h3>
-<hr/>
-
-<p>
-    <a href="opentopo.html">OpenTopo in Cesium Viewer</a> - viewer with OpenTopo 800px/km tiles as imagery layer in CesiumJS
-
-</p>
-<p>
-    <a href="opentopo-bing.html">Ditto with Bing background</a> - viewer with OpenTopo 800px/km tiles as imagery layer in CesiumJS
-
-</p>
-<hr/>
-
-
-<h3>Top10NL3D with CesiumJS</h3>
-Dutch topography 3D vector. Transformed from ESRI FGDB to GeoJSON.
-See <a href="https://github.com/opengeogroep/NLExtract/tree/master/3d/top10nl3d">conversion tools</a>.
-<hr/>
-<p>
-    <a href="top10nl3d-1.html">Top10NL3D on OpenTopo in Cesium Viewer</a> - viewer with OpenTopo 800px/km and 3DBuildings from Top10NL3D (Valkenburg)
-
-</p>
-<p>
-    <a href="sidebyside.html">Top10NL3D on OpenTopo in OpenLayers3+Cesium Integrated</a> - ditto, but using OL3-Cesium integration
-
-</p>
-<hr/>
-
-
-<p>
-    Navigation in examples:
-</p>
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="../">NLExtract Apps</a>
+        </div>
+        <div>
+            <ul class="nav navbar-nav">
+                <li><a href="../ot">OpenTopo</a></li>
+                <li class="active"><a href="../3d">3D Apps</a></li>
+                <li><a href="http://nlextract.nl">NLExtract</a></li>
+            </ul>
+        </div>
+    </div>
+</nav>
+<div class="container-fluid">
+
+    <h2>3D Apps with Dutch Open GeoData</h2>
+    by: <a href="http://justobjects.nl">Just van den Broecke</a>
+
+    <p>Various web apps to demonstrate and use 3D web mapping. Sources
+        for these apps in <a href="https://github.com/opengeogroep/NLExtract/tree/master/3d/app">NLExtract GitHub</a>.
+
+    <h3>OpenTopo with CesiumJS</h3>
+    <hr/>
+
+    <p>
+        <a href="opentopo.html">OpenTopo in Cesium Viewer</a> - viewer with OpenTopo 800px/km tiles as imagery layer in
+        CesiumJS
+
+    </p>
+
+    <p>
+        <a href="opentopo-bing.html">Ditto with Bing background</a> - viewer with OpenTopo 800px/km tiles as imagery
+        layer in CesiumJS
+
+    </p>
+    <hr/>
+
+
+    <h3>Top10NL3D with CesiumJS</h3>
+    Dutch topography 3D vector. Transformed from ESRI FGDB to GeoJSON.
+    See <a href="https://github.com/opengeogroep/NLExtract/tree/master/3d/top10nl3d">conversion tools</a>.
+    <hr/>
+    <p>
+        <a href="top10nl3d-1.html">Top10NL3D on OpenTopo in Cesium Viewer</a> - viewer with OpenTopo 800px/km and
+        3DBuildings from Top10NL3D (Valkenburg)
+
+    </p>
+
+    <p>
+        <a href="sidebyside.html">Top10NL3D on OpenTopo in OpenLayers3+Cesium Integrated</a> - ditto, but using
+        OL3-Cesium integration
+
+    </p>
+    <hr/>
+
+
+    <p>
+        Navigation in examples:
+    </p>
    <pre>
 
     Panning
@@ -69,6 +83,7 @@ <h3>Top10NL3D with CesiumJS</h3>
     CTRL + Left click-hold + drag
 
     </pre>
+</div>
 
 </body>
 </html>

diff --git a/opentopo/app/build.xml b/opentopo/app/build.xml
@@ -0,0 +1,25 @@
+<!--
+
+ANT Build file for OpenTopo Apps web site and resources.
+
+$Id: build.xml 99 2013-08-20 12:11:38Z just $
+-->
+<project name="OpenTopo Apps" default="sync-site" basedir=".">
+
+    <!-- Directory locations -->
+    <property name="home.dir" value="${basedir}"/>
+
+    <target name="sync-site">
+        <exec executable="rsync">
+            <arg line="-alzvx --exclude .svn/"/>
+            <arg line="${home.dir}/"/>
+            <arg line="kadmin@app.nlextract.nl:/var/www/nlextract.nl/app/ot/"/>
+        </exec>
+
+        <exec executable="scp">
+            <arg line="${home.dir}/index-m.html"/>
+            <arg line="kadmin@app.nlextract.nl:/var/www/nlextract.nl/app/index.html"/>
+        </exec>
+    </target>
+
+</project>
diff --git a/opentopo/app/images/screenshots/opentopo-gigapan-s.png b/opentopo/app/images/screenshots/opentopo-gigapan-s.png
diff --git a/opentopo/app/images/screenshots/opentopo-hiking-s.png b/opentopo/app/images/screenshots/opentopo-hiking-s.png
diff --git a/opentopo/app/images/screenshots/opentopo-kadviewer-s.png b/opentopo/app/images/screenshots/opentopo-kadviewer-s.png
diff --git a/opentopo/app/images/screenshots/opentopo-osm-s.png b/opentopo/app/images/screenshots/opentopo-osm-s.png
diff --git a/opentopo/app/images/screenshots/opentopo-rd-s.png b/opentopo/app/images/screenshots/opentopo-rd-s.png
diff --git a/opentopo/app/index-m.html b/opentopo/app/index-m.html
@@ -1,31 +1,53 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <title>NLExtract - Apps</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta charset="utf-8" />
-     <style>
-    html, body {
-        height: 100%;
-        padding: 10px;
-        margin: 10px;
-        font-family: sans-serif;
-    }
-
-    </style>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
-<h2>NLExtract Apps</h2>
-<p>Various web apps to demonstrate and use <a href="http://www.nlextract.nl">NLExtract</a> results.</p>
-
-<p>
-  <a href="ot">OpenTopo Results</a> - various Map Viewers for OpenTopo
-</p>
-
-<p>
-  <a href="3d">3D Experiments</a> - various 3D Web Demo's and Apps
-</p>
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="../">NLExtract Apps</a>
+        </div>
+        <div>
+            <ul class="nav navbar-nav">
+                <li><a href="../ot">OpenTopo</a></li>
+                <li><a href="../3d">3D Apps</a></li>
+                <li><a href="http://nlextract.nl">NLExtract</a></li>
+            </ul>
+        </div>
+    </div>
+</nav>
+<div class="container-fluid">
+    <h2>NLExtract Apps</h2>
 
+    <p>
+        Web apps that demonstrate and use results from data
+        that is processed/transformed by <a href="http://www.nlextract.nl">NLExtract</a> tools.
+    </p>
+    <table class="table table-bordered">
+        <!--<thead>-->
+        <!--<tr>-->
+        <!--<th>Firstname</th>-->
+        <!--<th>Lastname</th>-->
+        <!--<th>Email</th>-->
+        <!--</tr>-->
+        <!--</thead>-->
+        <tbody>
+        <tr>
+            <td><a href="ot">OpenTopo</a> - Mapping webapps for <a href="http://opentopo.nl">OpenTopo</a> raster maps</td>
+        </tr>
+        <tr>
+            <td><a href="3d">3D Experiments</a> - various 3D Web Demo's and Apps</td>
+        </tr>
+        </tbody>
+    </table>
+</div>
 
 </body>
 </html>
diff --git a/opentopo/app/index.html b/opentopo/app/index.html
@@ -1,54 +1,124 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <title>OpenTopo - Apps</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-    <meta charset="utf-8"/>
-    <meta name="author" content="Just van den Broecke">
-
-    <style>
-        html, body {
-            height: 100%;
-            padding: 10px;
-            margin: 10px;
-            font-family: sans-serif;
-        }
-
-    </style>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
-<h2>OpenTopo Apps</h2>
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="../">NLExtract Apps</a>
+        </div>
+        <div>
+            <ul class="nav navbar-nav">
+                <li class="active"><a href="#">OpenTopo</a></li>
+                <li><a href="../3d">3D Apps</a></li>
+                <li><a href="http://nlextract.nl">NLExtract</a></li>
+            </ul>
+        </div>
+    </div>
+</nav>
+<div class="container-fluid">
+    <h2>OpenTopo Apps</h2>
 
-<p>Various web apps to demonstrate and use <a href="http://www.opentopo.nl">OpenTopo</a> map results. See also some <a href="../3d">3D demos</a></p>
+    <p>Deze webapps demonstreren <a href="http://www.opentopo.nl">OpenTopo</a> kaartdiensten.
+        De originele OpenTopo rasters op resoluties 37.5/200/400/800/1600pix/km <br>zijn zodanig gecombineerd
+        dat iedere resolutie binnen een schaalgebied zichtbaar wordt. Bovendien zijn de plaatjes "getegeld" (tiled).
+        <br>De meeste apps zijn mobiel te gebruiken. OpenTopo versie: feb 2015.
+    </p>
+    <table class="table table-bordered">
+        <!--<thead>-->
+        <!--<tr>-->
+        <!--<th>Naam</th>-->
+        <!--<th>Afbeelding</th>-->
+        <!--<th>Maker</th>-->
+        <!--</tr>-->
+        <!--</thead>-->
+        <tbody>
+        <tr>
+            <td>
+                <a href="opentopo.html">
+                    <img src="images/screenshots/opentopo-osm-s.png" class="img-rounded" alt="OpenTopo OSM">
+                </a>
 
-<h3>Mobile</h3>
+                <p>
+                    <a href="opentopo.html">OpenTopo Mobile Map Viewer (OSM)</a><br>
+                    Basis map viewer met OpenTopo tiles in OpenStreetMap (OSM)/Google schema.
+                    Gemaakt met Leaflet. Maker: Just van den Broecke.
+                </p>
+            </td>
 
-<p>
-    <a href="opentopo.html">OpenTopo Mobile Map Viewer - EPSG:900913</a> - basic map viewer with OpenTopo 800px/km tiles
-    by Just van den Broecke
-</p>
+            <td>
+                <a href="opentopord.html">
+                    <img src="images/screenshots/opentopo-rd-s.png" class="img-rounded" alt="OpenTopo RD">
+                </a><br>
 
-<p>
-    <a href="opentopord.html">OpenTopo Mobile Map Viewer - EPSG:28992</a> - basic map viewer with OpenTopo 800px/km tiles (Dutch Projection)
-    by Just van den Broecke
-</p>
+                <p>
+                    <a href="opentopord.html">OpenTopo Mobile Map Viewer (RD)</a><br>
+                    Basis map viewer met OpenTopo tiles in Nederlands PDOK-schema.
+                    Gemaakt met Leaflet. Maker: Just van den Broecke.
+                </p>
+            </td>
 
-<p>
-    <a href="wandel.html">OpenTopo Mobile Hiking App - EPSG:900913</a> - handy GPS hiking with OSM hiking trails overlay by Just van
-    den Broecke
-</p>
+        </tr>
+        <tr>
+            <td>
+                <a href="wandel.html">
+                    <img src="images/screenshots/opentopo-hiking-s.png" class="img-rounded" alt="OpenTopo Hiking">
+                </a><br>
 
-<h3>Desktop</h3>
+                <p>De <a href="wandel.html">Wandel App (OSM) </a>
+                    is een basis map viewer gemaakt met Leaflet met daarin OpenTopo tiles
+                    gecombineerd met OSM wandelpaden. Er is GPS-lokatie-ondersteuning zodat je een pad kunt volgen.
+                    Maker: Just van den Broecke.</p>
 
-<p>
-    <a href="http://kadviewer.kademo.nl">KadViewer - kadviewer.kademo.nl</a> - Prototype Heron Viewer (EPSG:28992) with
-    OpenTopo 800px/km tiles- Just van den Broecke
-</p>
+            </td>
+            <td>
+                <a href="http://kadviewer.kademo.nl">
+                    <img src="images/screenshots/opentopo-kadviewer-s.png" class="img-rounded" alt="OpenTopo KadViewer">
+                </a>
 
-<p>
-    <a href="http://www.gigapan.com/gigapans/156993">Gigapan Viewer</a> - by Frank Steggink
-</p>
+                <p><a href="http://kadviewer.kademo.nl">De KadViewer</a>
+                    is een op het <a href="http://heron-mc.org">Heron viewer framework</a>
+                    gebaseerde web-desktop app met daarin OpenTopo en veel
+                    andere interessante kaartlagen. Mogelijkheid tot kaartlagen over elkaar heen leggen
+                    en doorzichtigheid daarbij aan te passen, plus vele andere "tools" bijv tekenen (redlining),
+                    WFS queries en upload/download van vector data.
+                    Maker: Just van den Broecke. </p>
 
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <a href="http://www.gigapan.com/gigapans/156993">
+                    <img src="images/screenshots/opentopo-gigapan-s.png" class="img-rounded" alt="OpenTopo GigaPan">
+                </a>
+
+                <p><a href="http://www.gigapan.com/gigapans/156993">OpenTopo in Gigapan</a><br>
+                    Basis map viewer met OpenTopo tiles in OSM schema met OSM wandelpaden en locatie ondersteuning via
+                    GPS.
+                    Maker: Frank Steggink. </p>
+
+            </td>
+            <td>
+                (hier jouw app?)
+            </td>
+        </tr>
+
+        </tbody>
+    </table>
+    <p>
+        Zie verder ook de <a href="../3d">3D demos</a>. heb je ook een leuke/mooie app met OpenTopo,
+        laat ons weten.
+
+    </p>
+</div>
 
 </body>
 </html>