Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ubezi
web-ausstellung-virtuell.de
Commits
b905063a
Commit
b905063a
authored
Jan 05, 2018
by
Jonas Heinrich
Browse files
load external exhibits geojson file
parent
53006643
Changes
3
Hide whitespace changes
Inline
Side-by-side
exhibits.json
0 → 100644
View file @
b905063a
{
"type"
:
"FeatureCollection"
,
"features"
:
[{
"type"
:
"Feature"
,
"properties"
:
{
"description"
:
"<strong>Take a long break I, II</strong><p>von Marijke van Warmerdam (2006), ZKM</p>"
,
"icon"
:
"theatre"
,
"link"
:
"video/video1.html"
},
"geometry"
:
{
"type"
:
"Point"
,
"coordinates"
:
[
8.40444
,
49.01445
]
}
},
{
"type"
:
"Feature"
,
"properties"
:
{
"description"
:
"<strong>Großes Stillleben mit Kerzen und Spiegel</strong><p>von Max Beckmann (1930), Orangerie</p>"
,
"icon"
:
"music"
,
"link"
:
"video/video2.html"
},
"geometry"
:
{
"type"
:
"Point"
,
"coordinates"
:
[
8.40454
,
49.01455
]
}
}]
}
js/map.js
View file @
b905063a
...
...
@@ -46,36 +46,12 @@ map.on('load', function() {
}
}
// Add a layer showing the places.
map
.
addLayer
({
"
id
"
:
"
place
s
"
,
"
id
"
:
"
exhibit
s
"
,
"
type
"
:
"
symbol
"
,
"
source
"
:
{
"
type
"
:
"
geojson
"
,
"
data
"
:
{
"
type
"
:
"
FeatureCollection
"
,
"
features
"
:
[{
"
type
"
:
"
Feature
"
,
"
properties
"
:
{
"
description
"
:
"
<strong>Take a long break I, II</strong><p>von Marijke van Warmerdam (2006), ZKM</p>
"
,
"
icon
"
:
"
theatre
"
},
"
geometry
"
:
{
"
type
"
:
"
Point
"
,
"
coordinates
"
:
[
8.40444
,
49.01445
]
}
},
{
"
type
"
:
"
Feature
"
,
"
properties
"
:
{
"
description
"
:
"
<strong>Großes Stillleben mit Kerzen und Spiegel</strong><p>von Max Beckmann (1930), Orangerie</p>
"
,
"
icon
"
:
"
music
"
},
"
geometry
"
:
{
"
type
"
:
"
Point
"
,
"
coordinates
"
:
[
8.40454
,
49.01455
]
}
}]
}
"
data
"
:
"
exhibits.json
"
},
"
layout
"
:
{
"
icon-image
"
:
"
{icon}-15
"
,
...
...
@@ -83,28 +59,29 @@ map.on('load', function() {
}
});
// Create a popup, but don't add it to the map yet.
var
popup
=
new
mapboxgl
.
Popup
({
closeButton
:
false
,
closeOnClick
:
false
});
map
.
on
(
'
mouseenter
'
,
'
places
'
,
function
(
e
)
{
// Change the cursor style as a UI indicator.
map
.
on
(
'
mouseenter
'
,
'
exhibits
'
,
function
(
e
)
{
map
.
getCanvas
().
style
.
cursor
=
'
pointer
'
;
// Populate the popup and set its coordinates
// based on the feature found.
popup
.
setLngLat
(
e
.
features
[
0
].
geometry
.
coordinates
)
.
setHTML
(
e
.
features
[
0
].
properties
.
description
)
.
addTo
(
map
);
});
map
.
on
(
'
mouseleave
'
,
'
place
s
'
,
function
()
{
map
.
on
(
'
mouseleave
'
,
'
exhibit
s
'
,
function
()
{
map
.
getCanvas
().
style
.
cursor
=
''
;
popup
.
remove
();
});
map
.
on
(
'
click
'
,
'
exhibits
'
,
function
(
e
)
{
var
link
=
e
.
features
[
0
].
properties
.
link
;
$
(
"
content
"
).
empty
();
$
(
"
content
"
).
load
(
link
);
});
map
.
addLayer
({
'
id
'
:
'
3d-buildings
'
,
'
source
'
:
'
composite
'
,
...
...
video/video1.html
0 → 100644
View file @
b905063a
<html>
<body>
<div
id=
"video-container"
>
<div
class=
"overlay"
></div>
<video
id=
"video"
width=
"100%"
height=
"100%"
poster=
"images/video1_poster.png"
>
<source
src=
"https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4"
type=
"video/mp4"
>
<p>
Error: your browser doesn't support HTML5 video.
</p>
</video>
<div
id=
"video-controls"
>
<div
class=
"controls"
>
<button
type=
"button"
id=
"play-pause"
class=
"icon play"
><span
class=
"icon-play"
aria-hidden=
"true"
></span></button>
<p
id=
"timeDisplay"
class=
"time"
><span
id=
"timeCurrent"
class=
"current"
>
00:00:00
</span>
/
<span
id=
"timeDuration"
class=
"duration"
>
00:00:00
</span></p>
<div
class=
"seek-bar-wrapper"
id=
"seek-bar-wrapper"
>
<input
id=
"seek-bar"
type=
"range"
value=
"0"
step=
"0.001"
>
</div>
<button
type=
"button"
id=
"mute"
class=
"text mute"
>
100
</button>
<input
type=
"range"
id=
"volume-bar"
value=
"100"
>
<button
type=
"button"
class=
"icon full-screen"
id=
"fullscreen"
>
<img
class=
"icon-screen"
src=
images/icon_fullscreen.png
>
<!-- <span class="icon-screen" aria-hidden="true"></span> -->
</button>
<div
class=
"clearfix"
></div>
</div>
</div>
</div>
<div
class=
"description"
>
<h2>
Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)
</h2>
<p
class=
"prose-big"
>
Bla bla
</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
</div>
</content>
</div>
</body>
</html>
Write
Preview
Supports
Markdown
0%
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!
Cancel
Please
register
or
sign in
to comment