diff options
Diffstat (limited to 'storymap')
| -rw-r--r-- | storymap/hackmap.css | 18 | ||||
| -rw-r--r-- | storymap/index.html | 125 |
2 files changed, 143 insertions, 0 deletions
diff --git a/storymap/hackmap.css b/storymap/hackmap.css new file mode 100644 index 0000000..bad62d8 --- /dev/null +++ b/storymap/hackmap.css @@ -0,0 +1,18 @@ + + +html, body { + margin: 0; +} + + +#demo { + display: block; + width: 100%; + height: 50vh; +} + +iframe { + width:100%; + height:100%; + border: none; +} diff --git a/storymap/index.html b/storymap/index.html new file mode 100644 index 0000000..0e1ae87 --- /dev/null +++ b/storymap/index.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> + <head> + <meta charset="utf-8"> + <title></title> + <link rel="stylesheet" href="hackmap.css"> + <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" + integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" + crossorigin=""/> + <!-- Make sure you put this AFTER Leaflet's CSS --> + <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" + crossorigin=""></script> + </head> + <body> + <div id="map" style="width:100vw; height:50vh"> + + </div> + <div id="story" style=""> + + <div> first station / starting from hcklabxl + <loc position="50.87286710651607, 4.377062022686005"> </loc> + in north-western direction, moving towards + the harbour + Lorem ipsum dolor sit amet consectetur adipiscing elit molestie ultricies, purus tempus cum torquent in ultrices donec maecenas enim phasellus, sodales ullamcorper lacinia inceptos integer conubia fames urna. Ligula aenean tempor facilisis senectus porttitor blandit mus class felis, parturient venenatis hac nisi sociosqu gravida sodales mi. Mus rutrum augue ridiculus sociosqu sollicitudin fringilla blandit viverra scelerisque, nisi mauris sociis cras metus enim id habitasse montes pellentesque, nec eget potenti commodo natoque a at maecenas. Installing this solar pump to power your fountain is super easy and doesn’t require any special expertise or knowledge, and it features a sleek design that’s backed by efficient performance. In fact, this solar pump will start collecting sunlight within three seconds of installation, provided it’s exposed to full sunlight that is.Installing this solar pump to power your fountain is super easy and doesn’t require any special expertise or knowledge, and it features a sleek design that’s backed by efficient performance. In fact, this solar pump will start collecting sunlight within three seconds of installation, provided it’s exposed to full sunlight that is. + </div> + <div> second station / visiting boats at bryc <loc position="50.884365143500744, 4.3793392181396475"> </loc> to check general state and have a chat with Abu + Iaculis primis imperdiet blandit potenti dictumst torquent gravida curae facilisis, vulputate massa per fusce netus cras quam elementum. Id felis senectus class pulvinar odio vivamus eleifend dui placerat turpis, mus primis sollicitudin iaculis fringilla lacinia potenti tortor ultrices elementum in, lectus dignissim curabitur natoque ad parturient integer nibh cum. Dis convallis varius curabitur pulvinar eros, iaculis duis ligula pretium torquent nascetur, ultricies turpis eleifend + Installing this solar pump to power your fountain is super easy and doesn’t require any special expertise or knowledge, and it features a sleek design that’s backed by efficient performance. In fact, this solar pump will start collecting sunlight within three seconds of installation, provided it’s exposed to full sunlight that is. erat. Lacus mi faucibus sociis vitae mus eleifend suscipit tempus molestie enim integer, vulputate potenti metus facilisis tellus commodo fringilla nunc habitant in. + </div> + + </div> + </body> + <script type="text/javascript"> + + + +///https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling#488073 + +function Utils() { + +} + +Utils.prototype = { + constructor: Utils, + isElementInView: function (element, fullyInView) { + var pageTop = $(window).scrollTop(); + var pageBottom = pageTop + $(window).height(); + var elementTop = $(element).offset().top; + var elementBottom = elementTop + $(element).height(); + + if (fullyInView === true) { + return ((pageTop < elementTop) && (pageBottom > elementBottom)); + } else { + return ((elementTop <= pageBottom) && (elementBottom >= pageTop)); + } + } +}; + +var Utils = new Utils(); + +/////////////////// + +L.MyMap = L.Map.extend({ +openPopup: function (popup, latlng, options) { +document.getElementById("demo").innerHTML = popup.getContent(); +console.log("meeeh"); +return this; +} +}); + +L.myMap = function (m) { +return new L.MyMap(m); +}; +var map = L.myMap('map').setView([isi sociosqu gravida sodales mi. Mus rutrum augue ridiculus sociosqu sollicitudin fringilla blandit viverra scelerisque, nisi mauris sociis cras metus enim id habitasse montes pellentesque, nec eget potenti commodo natoque a at maecenas. Installing this solar pump to power your fountain is super easy and doesn’t require any special expertise or knowledge, and it features a sleek design that’s backed by efficient performance. In fact, this solar pump will start collecting sunlight within three seconds of installation, provided it’s exposed t50.87287, 4.377], 17); + +/* L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { +attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' +}).addTo(map);*/ + +var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', { +attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', +subdomains: 'abcd', +minZoom: 0, +maxZoom: 20, +ext: 'png' +}).addTo(map) ; + +var elementScrolled = function(evt){ + console.log("meh"); + console.log(evt.target); +} +//var a = document.querySelector("div#story"); +var a = document.querySelector("html"); +a.addEventListener("scroll", elementScrolled); + +var locations = document.querySelectorAll("loc"); +console.log(locations); +var locationLength=locations.length; +for(var i=0;i<locationLength; i++) { + position = locations[i].getAttribute("position").split(","); + console.log(position); + L.marker(position).addTo(map); + console.log(locations[i].parentNode); + +} + +var circle = L.circle([50.87286710651607, 4.377062022686005], { +color: 'orangered', +fillColor: 'orangered', +fillOpacity: 1 , +radius: 2 +}).addTo(map); +circle.bindPopup('<iframe src="https://hacklab.brussels"></iframe>'); + + + + /*L.marker([50.87287, 4.377], { color:"blue" }).addTo(map) + .bindPopup('<a href="https://hacklab.brussels/" target="_self" >hacklab.brussels</a>');*/ + + </script> + + + + +</html> |