Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
M
mhw
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Mitchell Harrop
mhw
Commits
b24ad7de
Commit
b24ad7de
authored
11 months ago
by
Mitchell Harrop
Browse files
Options
Downloads
Patches
Plain Diff
Update index.html
parent
7e14d754
Branches
Branches containing commit
No related tags found
No related merge requests found
Pipeline
#99234
passed
11 months ago
Stage: deploy
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
public/index.html
+279
-18
279 additions, 18 deletions
public/index.html
with
279 additions
and
18 deletions
public/index.html
+
279
−
18
View file @
b24ad7de
<!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
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment