Static tileserver site

osmus · Jun 3, 2024 · 9c9598f · 9c9598f
1 parent bbddbff
commit 9c9598f
Show file tree

Hide file tree

Showing 10 changed files with 418 additions and 0 deletions.
diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/index.css b/static/index.css
@@ -0,0 +1,210 @@
+@font-face {
+  font-family: 'OpenSans';
+  src: url('/fonts/OpenSans-Regular.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'OpenSans';
+  src: url('/fonts/OpenSans-Italic.ttf');
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'OpenSans';
+  src: url('/fonts/OpenSans-Bold.ttf');
+  font-weight: bold;
+  font-style: normal;
+}
+
+body{
+  background-color: #fff;
+  color: #212121;
+  font-family:'OpenSans', sans-serif, Arial;
+  font-size: 14px;
+  margin:0;
+  background-repeat:no-repeat !important;
+  background-size: contain !important;
+  background-image: url(/images/header-map-1280px.png);
+}
+a{
+  color: #499DCE;
+  transition: color .2s;
+}
+a:hover {
+  color: #395D73;
+}
+.title {
+  font-weight: bold;
+  font-size: 32px;
+  text-align:center;
+  margin:20px 0 0 0;
+  position:relative;
+}
+.title.light:after {
+  content: "light";
+  display: block;
+  position: absolute;
+  left: 50%;
+  bottom: -5px;
+  color: #499DCE;
+  font-size:.8em;
+}
+section {
+  margin: 15px auto;
+  width: 930px;
+  padding: 30px 0;
+}
+.title img {
+  width: 290px;
+}
+.subtitle {
+  font-size: 20px;
+  font-style: italic;
+  font-weight:normal;
+  text-align:center;
+  margin:10px 0 10px 0;
+}
+.box-header {
+  text-align:left;
+  text-transform:uppercase;
+  border:1px solid #ededed;
+  margin:25px 0 0 0;
+  padding:12px 30px;
+  font-size:20px;
+  background:#fff;
+}
+.item {
+  background:#fff;
+  height: 191px;
+  border: 1px solid #ededed;
+  border-top:none;
+}
+.item:nth-child(odd) {
+  background-color:#fbfbfb;
+}
+.item img {
+  position: absolute;
+  display: block;
+  margin: 30px;
+  width: 128px;
+  height: 128px;
+  border: 1px solid #ccc;
+}
+.icon img {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  display: inline;
+  margin: 0 3px -3px 0;
+  border: 0;
+  padding: 0;
+}
+.details {
+  float:left;
+  height: 128px;
+  padding: 20px 30px 20px 188px;
+}
+.details h3 {
+  font-size:18px;
+  margin-top: 25px;
+}
+.details p {
+  padding:0;
+  margin:18px 0;
+}
+.viewers {
+  float:right;
+  text-align:center;
+  width: 120px;
+  margin-top: 25px;
+  padding-right: 30px;
+}
+.btn {
+  display:block;
+  margin: 0;
+  line-height: 36px;
+}
+.btn:first-child {
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+  border-radius:4px;
+  background-color: #499DCE;
+  background: linear-gradient(90deg, #5aaad8, #4a9ecf);
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+}
+.btn:first-child:hover {
+  background: #395D73;
+}
+footer {
+  width:100%;
+  border-top:1px solid #ededed;
+  text-align:center;
+  color:#b3b3b3;
+  padding-top:10px;
+  font-size:12px;
+}
+footer img {
+  width: 113px;
+  height: 31px;
+}
+footer .t {
+  display:none;
+}
+footer p {
+  margin-top:0;
+}
+footer a {
+  text-decoration: none;
+}
+.details h3, .identifier {
+  max-width: 550px;
+  word-break: break-all;
+}
+
+/* Responsive */
+@media (max-width: 950px) {
+  section{
+    margin: 0;
+    width: 96%;
+    padding: 2%;
+  }
+}
+@media (max-width: 600px) {
+  .title{
+    margin: 25px 0 0 0;
+  }
+  .title.light:after {
+    font-size:.6em;
+  }
+  .title img {
+    width: 200px;
+  }
+  .subtitle {
+    font-size: 20px;
+    margin: 0 0 35px 0;
+  }
+  .item {
+    height: 245px;
+  }
+  .viewers {
+    float: left;
+    text-align: left;
+    width: 100%;
+    margin-left: 30px;
+    margin-top: 15px;
+  }
+  .viewers a {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .btn {
+    margin: 0 20px 0 0;
+  }
+  .btn:first-child {
+    padding: 0 20px;
+  }
+}
diff --git a/static/index.html b/static/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>OpenMapTiles Community Vector Tile Server</title>
+  <link rel="stylesheet" type="text/css" href="index.css" />
+  <link rel="alternate" type="application/rss+xml" title="Build status" href="rss.xml" />
+  <script>
+    function toggle_xyz(id) {
+      var el = document.getElementById(id);
+      var s = el.style;
+      s.display = s.display == 'none' ? 'inline-block' : 'none';
+      el.setSelectionRange(0, el.value.length);
+      return false;
+    }
+  </script>
+</head>
+<body>
+  <section>
+    <h1 class="title">
+      <a href="https://github.com/ZeLonewolf/openstreetmap-americana"><img src="osm-americana-logo.png" alt="OSM Americana Logo" /></a><br/>
+      Community Vector Tile Server
+    </h1>
+    <h2 class="subtitle">Part of the OSM Americana project</h2>
+    <div style="text-align:center; margin-bottom:70px"><a href="usage.html">Usage policy and CORS white list</a></div>
+      <h2 class="box-header">OpenMapTiles</h2>
+      <div class="box">
+        <div class="item">
+            <img src="openmaptiles-logo.png" alt=" preview" />
+          <div class="details">
+            <h3></h3>
+            <p class="identifier">OpenMapTiles vector tiles as used by OSM Americana.
+              <br>Rendered on servers provided by <a href="https://openstreetmap.us/">OSMUS</a>.
+              <br>Zoom 13 building merge is disabled, additional languages from <a href="https://wikidata.org/">Wikidata</a>.
+              <br>Schema <a href="https://openmaptiles.org/">&copy; OpenMapTiles</a>, map data <a href="https://openstreetmap.org/copyright">&copy; OpenStreetMap contributors</a>.</p>
+            <p class="services">
+              services: <a href="https://dwuxtsziek7cf.cloudfront.net/planet.json">TileJSON</a> | <a href="rss.xml" class="icon"><img src="rss.png" description="RSS icon" />Build Status</a>
+            </p>
+          </div>
+          <div class="viewers">
+            <a class="btn" href="/inspect.html">Inspect</a>
+          </div>
+        </div>
+      </div>
+  </section>
+  <footer>
+    <p>
+      Rendering by <a href="https://github.com/onthegomap/planetiler" target="_blank">Planetiler</a>, an open-source product by <a href="https://twitter.com/msb5014" target="_blank">Mike Barry</a>.
+    </p>
+    <p>
+      Tiles are stored in <a href="https://protomaps.com/docs/pmtiles" target="_blank">PMTiles</a> format, a vector tile format for server-less hosting, by <a href="https://protomaps.com/" target="_blank">Protomaps</a> creator <a href="https://twitter.com/bdon" target="_blank">Brandon Liu</a>.
+    </p>
+    <p>
+      This page is derived from <a href="https://github.com/maptiler/tileserver-gl" target="_blank">TileServer GL (tileserver-gl-light v4.4.0)</a> – an open-source project from <a href="https://www.maptiler.com/" target="_blank">MapTiler</a>.
+    </p>
+  </footer>
+</body>
+</html>
diff --git a/static/inspect.html b/static/inspect.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Raw Vector Tile Data View</title>
+  <link rel="stylesheet" type="text/css" href="/maplibre-gl.css" />
+  <link rel="stylesheet" type="text/css" href="/maplibre-gl-inspect.css" />
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"><\/script>'); } else { document.write('<script src="/maplibre-gl-compat.js"><\/script>'); }</script>
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="https://github.com/acalcutt/maplibre-gl-inspect/releases/download/v1.4.6/maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="/maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
+  <style>
+    body {background:#fff;color:#333;font-family:Arial, sans-serif;}
+    #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
+    h1 {position:absolute;top:5px;right:0;width:240px;margin:0;line-height:20px;font-size:20px;}
+    #layerList {position:absolute;top:35px;right:0;bottom:0;width:240px;overflow:auto;}
+    #layerList div div {width:15px;height:15px;display:inline-block;}
+  </style>
+</head>
+<body>
+  <h1></h1>
+  <div id="map"></div>
+  <div id="layerList"></div>
+  <pre id="propertyList"></pre>
+  <script>
+  var map = new maplibregl.Map({
+    container: 'map',
+    hash: true,
+    maplibreLogo: true,
+    style: {
+      version: 8,
+      sources: {
+        'vector_layer_': {
+          type: 'vector',
+          url: 'https://dwuxtsziek7cf.cloudfront.net/planet.json'
+        }
+      },
+      layers: []
+    }
+  });
+  map.addControl(new maplibregl.NavigationControl());
+  var inspect = new MaplibreInspect({
+    showInspectMap: true,
+    showInspectButton: false
+  });
+  map.addControl(inspect);
+  map.on('styledata', function() {
+    var layerList = document.getElementById('layerList');
+    layerList.innerHTML = '';
+    Object.keys(inspect.sources).forEach(function(sourceId) {
+      var layerIds = inspect.sources[sourceId];
+      layerIds.forEach(function(layerId) {
+        var item = document.createElement('div');
+        item.innerHTML = '<div style="' +
+          'background:' + inspect.assignLayerColor(layerId) + ';' +
+        '"></div> ' + layerId;
+        layerList.appendChild(item);
+      });
+    })
+  });
+  </script>
+</body>
+</html>
diff --git a/static/maplibre-gl-compat.js b/static/maplibre-gl-compat.js
diff --git a/static/maplibre-gl-inspect-compat.min.js b/static/maplibre-gl-inspect-compat.min.js
diff --git a/static/maplibre-gl-inspect.css b/static/maplibre-gl-inspect.css
@@ -0,0 +1,40 @@
+.maplibregl-inspect_popup {
+  color: #333;
+  display: table;
+}
+
+.maplibregl-inspect_feature:not(:last-child) {
+  border-bottom: 1px solid #ccc;
+}
+
+.maplibregl-inspect_layer:before {
+  content: '#';
+}
+
+.maplibregl-inspect_layer {
+  display: block;
+  font-weight: bold;
+}
+
+.maplibregl-inspect_property {
+  display: table-row;
+}
+
+.maplibregl-inspect_property-value {
+  display: table-cell;
+  word-break: break-all;
+}
+
+.maplibregl-inspect_property-name {
+  display: table-cell;
+  padding-right: 10px;
+  word-break: break-all;
+}
+
+.maplibregl-ctrl-inspect {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' preserveAspectRatio='xMidYMid meet' viewBox='-10 -10 60 60'%3E%3Cg%3E%3Cpath d='m15 21.6q0-2 1.5-3.5t3.5-1.5 3.5 1.5 1.5 3.5-1.5 3.6-3.5 1.4-3.5-1.4-1.5-3.6z m18.4 11.1l-6.4-6.5q1.4-2.1 1.4-4.6 0-3.4-2.5-5.8t-5.9-2.4-5.9 2.4-2.5 5.8 2.5 5.9 5.9 2.5q2.4 0 4.6-1.4l7.4 7.4q-0.9 0.6-2 0.6h-20q-1.3 0-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3 1-2.3t2.3-0.9h13.4l10 10v19.3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+}
+
+.maplibregl-ctrl-map {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='-10 -10 60 60' preserveAspectRatio='xMidYMid meet'%3E%3Cg%3E%3Cpath d='m25 31.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z m9.140000000000008-26.640000000000004q0.8599999999999923 0 0.8599999999999923 0.8600000000000003v25.156666666666666q0 0.625-0.625 0.783333333333335l-9.375 3.1999999999999993-10-3.5133333333333354-8.906666666666668 3.4383333333333326-0.2333333333333334 0.07833333333333314q-0.8616666666666664 0-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625 0.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334 10 3.5133333333333336 8.905000000000001-3.4383333333333344z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+}
diff --git a/static/maplibre-gl.css b/static/maplibre-gl.css
diff --git a/static/openmaptiles-logo.png b/static/openmaptiles-logo.png
diff --git a/static/osm-americana-logo.png b/static/osm-americana-logo.png