-
Notifications
You must be signed in to change notification settings - Fork 3
Version 1.4.9
Below is documentation for the customizations I have made for version 1.4.9 of the Shortlist Story Map application.
The toggable legend consists of a container for the legend elements and a button to show/hide the legend. The legend consists of a series on unordered lists with the name of the legend item and an image. I have placed the code below as the first children of the <div id="map"> element around line 1648 of the index.html file.
<!-- Custom Legend -->
<!-- Legend Button -->
<div id="customLegendBtn">
<h3>Legend</h3>
</div>
<!-- Legend Container -->
<div id="customLegend">
<ul>
<li><!-- [Name of Layer]--></li>
<li><img src="" alt="" /><!-- Graphic representing layer --></li>
</ul>
<ul>
<li><!-- [Name of Layer]--></li>
<li><img src="" alt="" /><!-- Graphic representing layer --></li>
</ul>
<!-- Use one unordered list per layer -->
</div>
<!-- end Custom Legend -->Within the app/css directory, there is a jquery.shortlist-legend.css stylesheet containing the CSS rules for the legend. You can add this stylesheet within the <head> of index.html, or add the rules to your custom stylesheet for the app.
The JavaScript logic for the legend is located in the main.js file within the app/js directory. The code uses JQuery and shows or hides the <div id="customLegend"> element whenever the <div id="customLegendBtn"> is clicked, using the toggle() method.
I have also controlled when the legend button appears, due to differences in how the app loads above and below the breakpoint. If the viewport width is greater than 767, the legend button is shown. Else, it is shown once the user selects a map layer from the title page. Below is the code.
// around line 84 of main.js
// Custom Legend - Capture viewport width
var viewportWidth = $(window).width();
// around line 524 of main.js, within the if(_featureService) conditional around line 411 of main.js
list.then(function(results){
if (_map.loaded ) {
organizeLayers(results);
// Custom Legend - If screen width is above breakpoint, display legend button
if (viewportWidth > 767) {
$('#customLegendBtn').show();
}
}
});
// around line 2272 of main.js
function selectMobileTheme(index){
if(index != 0) {
activateLayer(_contentLayers[index]);
}
$('#mobileTitlePage').css('display', 'none');
$('#map').css('height', '100%').css('height', '48%').css('height', '-=20px');
// Custom Legend - show Legend button on devices below breakpoint once map is visible
$('#customLegendBtn').show();
_map.resize();
}
// at the end of the main.js file
// Custom Legend - add toggle legend functionality to the legend button
$('#customLegendBtn').click(function() {
$('#customLegend').toggle();
});The last data update text provides a place within the header area of the app to inform users of how current the data is. This area could also be used for other messages. The text is placed within the appropriate header element, based upon the viewport width (above or below app breakpoint). Additionally, if a resize event results in the map going from below to above the breakpoint, the text is added.
Within the app/css directory, there is a data-update.css stylesheet containing the CSS rules for this text. You can add this stylesheet within the <head> of index.html, or add the rules to your custom stylesheet for the app.
The JavaScript logic for the legend is located in the dataUpdate.js file within the app/js directory. The code creates a <span id="datUpdate> element, and appends the element within the #header or #mobileTitlePage element, based upon the viewport on page load. Below is the code:
var lastDataUpdateDate = '3-22-2017' // update this variable with last data update date
var dataUpdateText = '<span id="dataUpdate">Data Last Updated: ' + lastDataUpdateDate + '</span>';
// title page for mobile (below breakpoint)
var ccpaMobileTitlePage = $('#mobileTitlePage');
// header for desktop (above breakpoint)
var ccpaHeader = $('#header');
$(document).ready(function() {
var viewportWidth =$(window).width();
if (viewportWidth >= 768 ) {
ccpaHeader.append(dataUpdateText);
} else {
ccpaMobileTitlePage.append(dataUpdateText);
}
});
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth >= 768) {
ccpaHeader.append(dataUpdateText);
}
});