You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
15 KiB
HTML
355 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright (c) 2019 Netsyms Technologies
|
|
License: Creative Commons Attribution-ShareAlike 4.0 International
|
|
https://creativecommons.org/licenses/by-sa/4.0/
|
|
Preservation of this notice shall satisfy the attribution requirement.
|
|
-->
|
|
<title>Netsyms Map Server</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" href="https://static.netsyms.net/images/netsyms/logo-flat-32.png">
|
|
<link rel="stylesheet" href="https://static.netsyms.net/bootstrap/4/bootstrap.flatly.min.css" />
|
|
<link rel="stylesheet" href="https://static.netsyms.net/fontawesome/5/css/all.min.css" />
|
|
|
|
<style>
|
|
.card-img-overlay {
|
|
padding: 0px;
|
|
}
|
|
|
|
.card-img-overlay div {
|
|
background: rgba(255,255,255,0.7);
|
|
padding: 1em;
|
|
}
|
|
|
|
.card-img-overlay div a {
|
|
color: inherit;
|
|
}
|
|
|
|
.card-img-overlay:hover div {
|
|
opacity: 0;
|
|
}
|
|
|
|
.card-img-overlay div:hover {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="/"><i class="fas fa-map"></i> Netsyms Map Server</a>
|
|
</nav>
|
|
|
|
<div class="container mt-4">
|
|
<div class="sticky-top my-3">
|
|
<div class="d-flex flex-wrap bg-white py-1">
|
|
<h1 class="display-4 mr-auto">Maps</h1>
|
|
<div>
|
|
Preview:
|
|
<ul class="nav nav-pills" id="preview-selector">
|
|
<li class="nav-item preview-select" data-preview="large">
|
|
<a class="nav-link active" href="#">Planet</a>
|
|
</li>
|
|
<li class="nav-item preview-select" data-preview="small">
|
|
<a class="nav-link" href="#">Urban</a>
|
|
</li>
|
|
<li class="nav-item preview-select" data-preview="rural">
|
|
<a class="nav-link" href="#">Rural</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4>Street</h4>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/osm-liberty-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/osm-liberty/#2/0/0">
|
|
OSM Liberty
|
|
</a>
|
|
<p class="card-text">Map with 3D buildings and Natural Earth terrain shading at low zoom</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/osm-liberty/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/klokantech-basic-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/klokantech-basic/#2/0/0">
|
|
Klokantech Basic
|
|
</a>
|
|
<p class="card-text">General-purpose map</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/klokantech-basic/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/klokantech-3d-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/klokantech-3d/#2/0/0">
|
|
Klokantech 3D
|
|
</a>
|
|
<p class="card-text">General-purpose map with 3D buildings</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/klokantech-3d/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/osm-liberty-printmaps-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/osm-liberty-printmaps/#2/0/0">
|
|
OSM Liberty: Print Mode
|
|
</a>
|
|
<p class="card-text">OSM Liberty with 2D buildings and larger labels, for small print maps (store at X intersection, etc)</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/osm-liberty-printmaps/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4>Topo</h4>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/osm-liberty-hillshading-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/osm-liberty-hillshading/#2/0/0">
|
|
OSM Liberty with hillshading
|
|
</a>
|
|
<p class="card-text">Map with 3D buildings, Natural Earth terrain shading at low zoom, and hillshading to zoom level 11</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/osm-liberty-hillshading/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/opentopomap-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/opentopomap/#2/0/0">
|
|
OpenTopoMap
|
|
</a>
|
|
<p class="card-text">Hillshading, contour lines, and easy readability.</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/opentopomap/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/klokantech-terrain-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/klokantech-terrain/#2/0/0">
|
|
Klokantech Terrain
|
|
</a>
|
|
<p class="card-text">Map with emphasis on terrain, with hillshading and contour lines (in US only)</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/klokantech-terrain/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/klokantech-terrain-freehills-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/klokantech-terrain-freehills/#2/0/0">
|
|
Klokantech Terrain with Free Hillshading
|
|
</a>
|
|
<p class="card-text">Map showcasing free hillshading data from <a href="https://netsyms.com/gis/hillshading">here</a></p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/klokantech-terrain-freehills/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4>Light</h4>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/positron-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/positron/#2/0/0">
|
|
Positron
|
|
</a>
|
|
<p class="card-text">Light, grey theme for overlays.</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/positron/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/toner-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/toner/#2/0/0">
|
|
Toner
|
|
</a>
|
|
<p class="card-text">Completely black and white theme.</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/toner/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/cassini-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/cassini/#2/0/0">
|
|
Cassini
|
|
</a>
|
|
<p class="card-text">Old parchment Middle Ages style</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/cassini/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4>Dark</h4>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/osm-liberty-dark-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/osm-liberty-dark/#2/0/0">
|
|
OSM Liberty Dark
|
|
</a>
|
|
<p class="card-text">Map with 3D buildings and Natural Earth terrain shading at low zoom, dark mode.</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/osm-liberty-dark/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/dark-matter-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/dark-matter/#2/0/0">
|
|
Dark Matter
|
|
</a>
|
|
<p class="card-text">Black, shadowy theme for overlays.</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/dark-matter/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/fiord-color-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/fiord-color/#2/0/0">
|
|
Fiord Color
|
|
</a>
|
|
<p class="card-text">Dark blue map theme</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/fiord-color/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/oled-black-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/oled-black/#2/0/0">
|
|
OLED Black
|
|
</a>
|
|
<p class="card-text">Theme with 100% black background, based on Fiord Color.</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/oled-black/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4>TerranQuest</h4>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/terranquest-3d-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/terranquest-3d/#2/0/0">
|
|
TerranQuest 3D
|
|
</a>
|
|
<p class="card-text">TerranQuest daytime theme with 3D buildings</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/terranquest-3d/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/terranquest-flat-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/terranquest-flat/#2/0/0">
|
|
TerranQuest Flat
|
|
</a>
|
|
<p class="card-text">TerranQuest daytime theme with flat buildings</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/terranquest-flat/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-4 mb-4">
|
|
<div class="card">
|
|
<img src="img/terranquest-simple-large.png" class="card-img" alt="">
|
|
<div class="card-img-overlay">
|
|
<div>
|
|
<a class="h5 card-title" href="/styles/terranquest-simple/#2/0/0">
|
|
TerranQuest Simple
|
|
</a>
|
|
<p class="card-text">TerranQuest daytime theme with solid colors instead of textures</p>
|
|
<code class="card-text">https://maps.netsyms.net/styles/terranquest-simple/style.json</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://static.netsyms.net/jquery/jquery.slim.min.js"></script>
|
|
|
|
<script>
|
|
$(".preview-select").click(function (evt) {
|
|
evt.preventDefault();
|
|
$(".preview-select .nav-link").removeClass("active");
|
|
$(".nav-link", this).addClass("active");
|
|
var preview = $(this).data("preview");
|
|
$("img.card-img").each(function () {
|
|
var src = $(this).attr("src");
|
|
console.log(src);
|
|
src = src.replace("large", "XXX");
|
|
src = src.replace("small", "XXX");
|
|
src = src.replace("rural", "XXX");
|
|
src = src.replace("XXX", preview);
|
|
console.log(src);
|
|
$(this).attr("src", src);
|
|
});
|
|
});
|
|
</script> |