Skip to content
Snippets Groups Projects
Commit b24ad7de authored by Mitchell Harrop's avatar Mitchell Harrop
Browse files

Update index.html

parent 7e14d754
Branches
No related tags found
No related merge requests found
Pipeline #99234 passed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Plain HTML site using GitLab Pages</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
<a href="https://gitlab.com/pages/plain-html/">Repository</a>
<a href="https://gitlab.com/pages/">Other Examples</a>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><!-- https://fonts.google.com/icons -->
<style>
#MapLocation {
height: 99vh;
position: relative;
}
#transparencySlider {
width: 100px;
}
#legend {
display: block;
position: absolute;
bottom: 70px;
left: 10px;
background-color: white;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
z-index: 1000;
}
.legend-item {
display: block;
margin-bottom: 5px;
}
.legend-marker {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
}
.leaflet-popup-content {
max-height: 300px;
max-width: 290px;
overflow-y: auto;
}
.custom-div-icon .material-icons {
background-color: white;
border: 2px solid black;
border-radius: 50%;
color: inherit; /* This will inherit the text color for the icon */
display: inline-block;
padding: 2px; /* Adjust padding to control the size of the icon inside the border */
}
</style>
</head>
<body>
<div id="MapLocation"></div>
<div id="legend">
<div class="legend-item">
<input type="range" min="0" max="1" step="0.1" value="1" id="transparencySlider">
</div>
<div id="annotationsFilters"></div>
</div>
<h1>Hello World!</h1>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="configPROV.js"></script>
<script src="annotations4215.json"></script>
<script src="annotations4327.json"></script>
<script src="annotations4331.json"></script>
<script src="annotations5236.json"></script>
<script src="annotations5507.json"></script>
<script src="annotations7252.json"></script>
<script src="annotations7316.json"></script>
<script src="annotations7323.json"></script>
<script src="annotations7981.json"></script>
<script src="annotations11383.json"></script>
<script>
// Helper function to convert plain text to HTML
function convertTextToHTML(text) {
// Convert URLs to hyperlinks
const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
text = text.replace(urlRegex, '<a href="$1" target="_blank">$1</a>');
// Convert line breaks to <br>
text = text.replace(/\n/g, '<br>');
return text;
}
var annotationsData = {"data": [...annotationsData4215.data,
...annotationsData4327.data,
...annotationsData4331.data,
...annotationsData5236.data,
...annotationsData5507.data,
...annotationsData7252.data,
...annotationsData7316.data,
...annotationsData7323.data,
...annotationsData7981.data,
...annotationsData11383.data]};
function getUrlParameter(name, defaultValue) {
const params = new URLSearchParams(window.location.search);
return params.get(name) || defaultValue;
}
var config = configPROV;
var plzLoad = getUrlParameter("map", "PROV");
var mapwarperProvIDs = config['mapwarperProvIDs'];
var mapwarperProvLabels = config['mapwarperProvLabels'];
var mapZoom = config['mapZoom'];
var mapCentre = config['mapCentre'].split(",");
var map;
var baseLayer;
var mapWarperLayers = new Array();
map = L.map('MapLocation', {
center: mapCentre,
zoom: mapZoom,
layers: [
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
]
});
var overlayMaps = {};
if (mapwarperProvIDs) {
for (var i = 0; i < mapwarperProvIDs.length; i++) {
if (mapwarperProvIDs[i] != "") {
var label = mapwarperProvLabels[i];
overlayMaps[label] = L.tileLayer('https://mapwarper.prov.vic.gov.au/maps/tile/' + mapwarperProvIDs[i] + '/{z}/{x}/{y}.png', {
attribution: '<a href="https://mapwarper.prov.vic.gov.au/" >Public Record Office Victoria (PROV) MapWarper</a>',
tms: false
});
}
}
}
L.control.layers(null, overlayMaps, { collapsed: false }).addTo(map);
document.getElementById('transparencySlider').addEventListener('input', function () {
var opacity = this.value;
for (var label in overlayMaps) {
if (overlayMaps.hasOwnProperty(label)) {
overlayMaps[label].setOpacity(opacity);
}
}
});
const hashtagColors = {};
const colors = ["red", "blue", "green", "purple", "orange", "yellow", "brown"];
let colorIndex = 0;
const annotations = [];
const hashtagAnnotations = {};
const uniqueHashtags = new Set();
annotationsData.data.forEach(annotation => {
const geom = annotation.attributes.geom;
const coords = geom.match(/POINT \(([^)]+)\)/)[1].split(" ");
const lat = parseFloat(coords[1]);
const lng = parseFloat(coords[0]);
// Extract the title and remove it from the body
const title = annotation.attributes.body.split("\n")[0];
const bodyWithoutTitle = annotation.attributes.body.split("\n").slice(1).join("\n");
// Convert body to HTML
const body = convertTextToHTML(bodyWithoutTitle);
const hashtags = body.match(/#[a-zA-Z0-9]+/g);
if (hashtags && hashtags.some(tag => tag.toLowerCase() === "#melbournehistoryworkshop")) {
// Only use annotations that have been tagged as for this project with the hashtag #melbournehistoryworkshop
let pinColor = "gray"; // default colour
let iconName = config["mapIcons"]["default"]; // default icon
hashtags.forEach(tag => {
const lowerTag = tag.toLowerCase();
uniqueHashtags.add(lowerTag);
if (!isNaN(lowerTag.substring(1))) {
// The hashtag is a number
const year = parseInt(lowerTag.substring(1), 10);
iconName = config["mapIcons"][""+year];
} else {
// The hashtag is not a number, so use it to set a colour so long as it is not "#melbournehistoryworkshop"
if (lowerTag != "#melbournehistoryworkshop") {
if (!hashtagColors[lowerTag]) {
hashtagColors[lowerTag] = colors[colorIndex % colors.length];
colorIndex++;
}
pinColor = hashtagColors[lowerTag];
}
}
if (!hashtagAnnotations[lowerTag]) {
hashtagAnnotations[lowerTag] = [];
}
});
const marker = L.marker([lat, lng], {
icon: L.divIcon({
className: 'custom-div-icon',
html: `<div class="material-icons" style="color:${pinColor};">${iconName}</div>`,
iconSize: [10, 10],
iconAnchor: [5, 5]
})
});
marker.bindPopup(`<strong>${title}</strong><br>${body}`);
hashtags.forEach(tag => {
const lowerTag = tag.toLowerCase();
if (!hashtagAnnotations[lowerTag]) {
hashtagAnnotations[lowerTag] = [];
}
hashtagAnnotations[lowerTag].push(marker);
});
}
});
const annotationsLayers = {};
uniqueHashtags.forEach(tag => {
const layerGroup = L.layerGroup(hashtagAnnotations[tag]);
annotationsLayers[tag] = layerGroup;
});
function toggleAnnotations(tag, checked) {
if (checked) {
map.addLayer(annotationsLayers[tag]);
} else {
map.removeLayer(annotationsLayers[tag]);
}
}
const annotationsFilters = document.getElementById('annotationsFilters');
// Convert uniqueHashtags to an array and sort it, but keep #melbournehistoryworkshop first
const sortedHashtags = Array.from(uniqueHashtags).sort((a, b) => {
if (a === "#melbournehistoryworkshop") return -1;
if (b === "#melbournehistoryworkshop") return 1;
return a.localeCompare(b);
});
sortedHashtags.forEach(tag => {
const filterItem = document.createElement('div');
filterItem.className = 'legend-item';
if (config["mapIcons"][tag.substring(1)]) {
filterItem.innerHTML = `<input type="checkbox" id="filter-${tag}" checked>
<span style="color:${hashtagColors[tag] || 'black'}">${tag}</span> <span class="custom-div-icon"><span class="material-icons" style="color:black">${config["mapIcons"][tag.substring(1)]}</span></span>`;
} else {
filterItem.innerHTML = `<input type="checkbox" id="filter-${tag}" checked>
<span style="color:${hashtagColors[tag] || 'black'}">${tag}</span> `;
}
filterItem.querySelector('input').addEventListener('change', function () {
toggleAnnotations(tag, this.checked);
});
annotationsFilters.appendChild(filterItem);
});
<p>
This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
</p>
</body>
</html>
// Initialize all annotations layers as checked
for (const tag in annotationsLayers) {
if (annotationsLayers.hasOwnProperty(tag)) {
map.addLayer(annotationsLayers[tag]);
}
}
</script>
</body>
</html>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment