Commit 3a0d66f2 authored by nuntius35's avatar nuntius35

Add demo website

parent d19e66c7
Pipeline #28296853 passed with stage
in 57 seconds
pages:
stage: deploy
script:
- echo 'Nothing to do...'
artifacts:
paths:
- public
only:
- master
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Extremal Peaks</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
<script src="res/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
</head>
<style>
.content {
max-width: 500px;
margin: 1em;
}
</style>
<body>
<div class="content">
<h1>Extremal Peaks</h1>
<div id="mapid" style="width: 80vw; height: 80vh;"></div>
<script src="res/extremals-geojson.js" type="text/javascript"></script>
<script>
var mymap = L.map('mapid').setView([46, 14], 7);
L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'SRTM | Imagery © <a href="https://opentopomap.org/">OpenTopoMap</a> ' +
'(<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
}).addTo(mymap);
var myRenderer = L.canvas({padding: 0.5});
function onEachFeature(feature, layer) {
var popupContent = "";
if (feature["properties"]["name"]) {
popupContent += feature["properties"]["name"] + "";
}
if (feature["properties"]["name:en"]) {
popupContent += " / "
+ feature["properties"]["name:en"]
+ "";
}
if (feature["properties"]["ele"]) {
popupContent += "<br> Elevation: "
+ feature.properties.ele + " m";
}
if (feature["properties"]["wikipedia"]) {
var wiki = encodeURIComponent(feature["properties"]["wikipedia"]);
popupContent += "<br> Wikipedia: <a href=https://en.wikipedia.org/wiki/"
+ wiki
+ ">" + feature["properties"]["wikipedia"]
+ "</a>";
}
layer.bindPopup(popupContent);
}
L.geoJSON(peaks, {
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
renderer: myRenderer,
radius: 5,
fillColor: "#1E90FF",
color: "#000",
weight: 2,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(mymap);
</script>
</div>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment