Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
419 lines (340 sloc) 13.6 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Story Map Template</title>
<!-- Load Leaflet from a https CDN, not http. Look for updates at http://leafletjs.com/download.html -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.2/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- load Font-Awesome used for some page elements like fa-chevron-down (down arrow) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- Load leaflet.extra-markers from local directory -->
<script src="markers/leaflet.extra-markers.min.js"></script>
<link rel="stylesheet" href="markers/leaflet.extra-markers.min.css">
<style>
body {
padding: 0px;
margin: 0px;
font-family: "Helvetica", sans-serif;
overflow: hidden;
}
#map {
position: absolute;
left: 0;
width: 70vw;
height: 100vh;
z-index: 1;
}
#narration {
position: absolute;
width: 30vw;
min-width: 300px;
right: 0px;
height: 100vh;
overflow: auto;
z-index: 99;
background: rgba(254,254,254, 1.0); /* to apply opacity background only. */
}
#contents {
padding: 0%;
width: 100%;
margin-top: 0px; /*Adjust if Title header needs more space */
height: 100%; /* Adjust to fit max Description length, one setting for all; alternative is 100% */
overflow-y: scroll;
overflow-x: hidden;
}
#contents .space-at-the-top {
height: 30px;
margin: 0px;
}
#contents .space-at-the-bottom {
height: 600px;
margin: 0px;
text-align: center;
padding-top: 70px;
}
#chapter {
position: absolute;
z-index: 999;
margin: 10px;
display: block;
text-align: center;
color: #fff;
}
#title {
position: absolute;
right: 0px;
top:0px;
background-color: white;
width: 30vw;
min-width: 300px;
z-index: 100;
margin: 0px;
padding: 0px;
padding-bottom:10px
}
h3 {
margin-bottom: 0px;
}
.image-container {
/* margin + padding = imageContainerMargin in script.js */
/* Important for scrolling! */
margin: 25px 0 0 0;
padding: 25px 0 0 0;
text-align: center;
}
.image-container img {
height: auto;
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
/* Use EXIF data from the image */
image-orientation: from-image;
/* Three lines that center vertically */
position: relative;
}
.img-holder {
display:inline-block;
padding:10px;
width: 100%;
}
.title-text {
font-weight: bold;
text-align: center;
margin: 10px;
}
.chapter-header {
display: block;
text-align: center;
font-size: 150%;
font-weight:bold;
margin-top:15px
}
.caption {
font-size: 9pt;
padding:0 10px 0 10px;
}
.description {
text-align: justify;
font-size: 11pt;
padding: 30px;
position: relative;
}
.inFocus {
opacity: 1.0;
background-color: #f0f0f0;
}
.outFocus {
opacity: 0.3;
background-color: white;
}
/* Resize and position page elements and force collapse for Mobile and tablets */
@media (max-width: 768px) {
::-webkit-scrollbar {
display: none;
}
#map {
width: 100%;
height:50%;
}
#title {
position:fixed;
top:35%;
width: 100%;
}
#title > h3 {
font-size: 20px;
}
#narration {
position:fixed;
width: 100%;
top:35%;
min-width: 0;
padding-top:0;
padding:4px;
bottom:0;
}
.description {
padding: 10px;
}
}
</style>
</head>
<body>
<div id="title" class="title-text">
<h3>Ashbridge’s Bay Watershed Walk</h3>
<small>Scroll down to view stops along the tour path <i class="fa fa-chevron-down"></i></small>
</div>
<!--scrollable side panel container -->
<div id="narration">
<div id="contents">
<div id="space-at-the-top" class="space-at-the-top"></div>
</div>
</div>
<!-- Map container -->
<div id="map">
</div>
<script>
// Value must match Margin + padding set in css for .image-container
var imageContainerMargin = 50;
// This watches for the scrollable container
var scrollPosition = 0;
$('div#contents').scroll(function() {
scrollPosition = $(this).scrollTop();
});
function initMap() {
// This creates the Leaflet map with a generic start point, because code at bottom automatically fits bounds to all markers
var map = L.map('map', {
center: [0, 0],
zoom: 5,
maxZoom: 17,
minZoom: 14
});
// This displays a base layer map (other options available)
// Using Carto Positron basemap
// https://leaflet-extras.github.io/leaflet-providers/preview/
//var lightAll = new L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
//attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> //contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
//}).addTo(map);
var OpenStreetMap_HOT = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}).addTo(map);;
// This customizes link to view source code; add your own GitHub repository
map.attributionControl
.setPrefix('View <a href="http://github.com/jackdougherty/leaflet-storymap" target="_blank">code on GitHub</a>, created with <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
// This loads the point GeoJSON map data file from a local folder
// jQuery getJSON() method - http://api.jquery.com/jquery.getjson/
$.getJSON('data/AB_Watershed_Points_WGS.geojson', function(data) {
var points = L.geoJson(data, {
onEachFeature: function (feature, layer) {
(function(layer, properties) {
// This creates numerical icons to match the attribute NUMBER numbers
// Setting icon using leaflet.extra-markers https://github.com/coryasilva/Leaflet.ExtraMarkers
var numericMarker = L.ExtraMarkers.icon({
icon: 'fa-number',
number: feature.properties['NUMBER'],
markerColor: 'orange-dark'
});
layer.setIcon(numericMarker);
// Sets the title text from the geojson property Name
var chapter = $('<p></p>', {
text: feature.properties['Name'],
class: 'chapter-header'
});
// Sets the first image from the geojson property PIC_URL
var image = $('<img>', {
src: feature.properties['PIC_URL'],
});
// The image is placed inside an anchor that allows a user to click and display the picture in a new tab
var imgHolder = $('<a>', {
href: feature.properties['PIC_URL'],
class: 'img-holder',
target: "_blank",
});
imgHolder.append(image);
// Sets the image caption content from the geojson property SHORT_DESC
var caption = $('<p></p>', {
text: feature.properties['SHORT_DESC'],
class: 'caption'
});
// Sets the text content for the longer discription from the geojson property DESCRIPTION
var description = $('<p></p>', {
text: feature.properties['DESCRIPTION'],
class: 'description'
});
// controls behaviour for second image
// if the json feature has a property 'pic_url_2' then display it
if (feature.properties['PIC_URL_2']){
var image2 = $('<img>', {
src: feature.properties['PIC_URL_2'],
});
var imgHolder2 = $('<a>', {
href: feature.properties['PIC_URL_2'],
class: 'img-holder',
target: "_blank",
});
imgHolder2.append(image2);
};
// controls behaviour for second description
// if the json feature has a property 'DESC2' value then display it
// if not using an if statement then a placeholder div is invluded in the contents
if (feature.properties['DESC2']){
// Sets the text content for the second discription from the geojson property DESC2
var description2 = $('<p></p>', {
text: feature.properties['DESC2'],
class: 'description'
});
};
var container = $('<div></div>', {
id: 'container' + feature.properties['NUMBER'],
class: 'image-container'
});
// Appending the contents to be placed in the #contents div
container.append(chapter).append(imgHolder).append(caption).append(description).append(imgHolder2).append(description2);
$('#contents').append(container);
// declaring global variables to be used below
var i;
var areaTop;
var areaBottom;
// Function tied to when all images load or window is resized, it only initalises when all images have loaded or window resizes
function updateScrollTop() {
// height is based on the relative height from top of the container div
areaTop = 0;
// Calculating total height of blocks above active
for (i = 1; i < feature.properties['NUMBER']; i++) {
areaTop += $('div#container' + i).height() + imageContainerMargin;
}
areaBottom = areaTop + $('div#container' + feature.properties['NUMBER']).height();
$('div#contents').scroll(function() {
if ($(this).scrollTop() >= areaTop && $(this).scrollTop() < areaBottom) {
$('.image-container').removeClass("inFocus").addClass("outFocus");
$('div#container' + feature.properties['NUMBER']).addClass("inFocus").removeClass("outFocus");
// when the contents scroll down zoom to the associated point
// First pulling lat/long from the geojson for the center and set to use zoom 16 for all
map.flyTo([feature.geometry.coordinates[1], feature.geometry.coordinates[0] ], 16);
}
});
}
// Initialize scrolltop function when images load
$("img").on("load", updateScrollTop);
// Update container heights if the browser window changes size
window.addEventListener('resize', updateScrollTop);
// Make markers clickable
// When clicked #contents div scrolls to top of the #container corresponding to point clicked
layer.on('click', function() {
$("div#contents").animate({scrollTop: areaTop + 1 + "px"});
});
})(layer, feature.properties);
}
});
$('#contents').append("<div class='space-at-the-bottom'><a href='#space-at-the-top'><i class='fa fa-chevron-up'></i></br><small>Top</small></a></div>");
// fits the map view to fit the bounds of te points layer when the map loads
map.fitBounds(points.getBounds());
// add points layer to the map
points.addTo(map);
});
// loading the Ashbridges Watershed geojson layer, loaded last so that it renders above the other layers
// This loads the path GeoJSON map data file from a local folder
// jQuery getJSON() method - http://api.jquery.com/jquery.getjson/
$.getJSON('data/AB_Watershed_Path_WGS_qgis.geojson', function(json) {
L.geoJson(json, {
// style path
// http://leafletjs.com/examples/geojson/
style:{
"color": "#ff7800",
"weight": 5,
}
// add path layer to the map
}).addTo(map);
});
};
initMap();
</script>
</body>
</html>