Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
UGL
website
Commits
77deaf6c
Commit
77deaf6c
authored
May 29, 2023
by
Rushikesh Padsala
Browse files
Added Chart.js to Leaflet.js
parent
c1e9b3d2
Pipeline
#7517
passed with stage
in 15 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/leaflet-stoeckach-heatdemand/index.html
View file @
77deaf6c
<html>
<head>
<title>
Building - Heat Demand
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
...
...
@@ -10,11 +8,11 @@
crossorigin=
""
>
<script
src=
"https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity=
"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=
""
></script>
<script
src=
"https://cdn.jsdelivr.net/npm/chart.js"
></script>
<script
src=
"building_data.js"
></script>
crossorigin=
""
></script>
<script
src=
"https://cdn.jsdelivr.net/npm/chart.js"
></script>
<script
src=
"building_data.js"
></script>
<link
rel=
"stylesheet"
href=
"index.css"
>
<style>
<style>
body
{
display
:
flex
;
flex-direction
:
row
;
...
...
@@ -33,12 +31,17 @@
justify-content
:
center
;
}
</style>
</head>
<body>
<div
id=
"mapid"
></div>
<script>
<div
id=
"map-container"
>
<div
id=
"mapid"
></div>
</div>
<div
id=
"chart-container"
>
<canvas
id=
"yocChart"
></canvas>
</div>
<script>
var
mymap
=
L
.
map
(
'
mapid
'
).
setView
([
48.79205
,
9.20758
],
16
);
var
OpenStreetMap_DE
=
L
.
tileLayer
(
'
https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png
'
,
{
maxZoom
:
18
,
...
...
@@ -68,7 +71,7 @@
d
>
100
?
'
#F6EC00
'
:
d
>
75
?
'
#D1E023
'
:
d
>
50
?
'
#B2D531
'
:
d
>
5
0
?
'
#A4C711
'
:
d
>
2
5
?
'
#A4C711
'
:
d
>
0
?
'
#61B949
'
:
'
#FFEDA0
'
;
}
...
...
@@ -87,8 +90,10 @@
onEachFeature
:
onEachFeature
,
style
:
style
,
}).
addTo
(
mymap
);
// Retrieve the building year of construction data from the GeoJSON
// Retrieve the building year of construction data from the GeoJSON
var
buildingYoc
=
building_data
.
features
.
map
(
function
(
feature
)
{
return
feature
.
properties
.
Year_of_co
;
});
...
...
@@ -143,13 +148,6 @@ var yocChart = new Chart(ctx, {
}
});
</script>
</script>
</body>
</html>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment