Virtual Black Heritage Trail® Tour

Signs mark the path of the physical Black Heritage Trail.

 

The Black Heritage Trail^® is a 1.6 mile walk through the heart of Boston's Beacon Hill neighborhood. The trail showcases residences and community buildings associated with a Black community that thrived on, and near, the north slope of Beacon Hill before, during, and after the American Civil War. Throughout that time, this community struggled and organized for equal rights and access to equal education. Community members championed the movement to abolish slavery and even housed freedom seekers on their journey along the Underground Railroad.

Most sites along the trail remain private residences. However, the final stops—the Abiel Smith School and the African Meeting House—are part of the Museum of African American History which is open to the public.

For a full audio tour of the The Black Heritage Trail^®, check out the Self Guided Tour in the NPS App.

 

 

 

/*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js */ var objectToString=Object.prototype.toString;var isArray=Array.isArray||function isArrayPolyfill(object){return objectToString.call(object)==='[object Array]'};function isFunction(object){return typeof object==='function'} function typeStr(obj){return isArray(obj)?'array':typeof obj} function escapeRegExp(string){return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,'\\$&')} function hasProperty(obj,propName){return obj!=null&&typeof obj==='object'&&(propName in obj)} function primitiveHasOwnProperty(primitive,propName){return(primitive!=null&&typeof primitive!=='object'&&primitive.hasOwnProperty&&primitive.hasOwnProperty(propName))} var regExpTest=RegExp.prototype.test;function testRegExp(re,string){return regExpTest.call(re,string)} var nonSpaceRe=/\S/;function isWhitespace(string){return!testRegExp(nonSpaceRe,string)} var entityMap={'&':'&','<':'<','>':'>','"':'"',"'":''','/':'/','`':'`','=':'='};function escapeHtml(string){return String(string).replace(/[&<>"'`=\/]/g,function fromEntityMap(s){return entityMap[s]})} var whiteRe=/\s*/;var spaceRe=/\s+/;var equalsRe=/\s*=/;var curlyRe=/\s*\}/;var tagRe=/#|\^|\/|>|\{|&|=|!/;function parseTemplate(template,tags){if(!template) return[];var lineHasNonSpace=!1;var sections=[];var tokens=[];var spaces=[];var hasTag=!1;var nonSpace=!1;var indentation='';var tagIndex=0;function stripSpace(){if(hasTag&&!nonSpace){while(spaces.length) delete tokens[spaces.pop()]}else{spaces=[]} hasTag=!1;nonSpace=!1} var openingTagRe,closingTagRe,closingCurlyRe;function compileTags(tagsToCompile){if(typeof tagsToCompile==='string') tagsToCompile=tagsToCompile.split(spaceRe,2);if(!isArray(tagsToCompile)||tagsToCompile.length!==2) throw new Error('Invalid tags: '+tagsToCompile);openingTagRe=new RegExp(escapeRegExp(tagsToCompile[0])+'\\s*');closingTagRe=new RegExp('\\s*'+escapeRegExp(tagsToCompile[1]));closingCurlyRe=new RegExp('\\s*'+escapeRegExp('}'+tagsToCompile[1]))} compileTags(tags||mustache.tags);var scanner=new Scanner(template);var start,type,value,chr,token,openSection;while(!scanner.eos()){start=scanner.pos;value=scanner.scanUntil(openingTagRe);if(value){for(var i=0,valueLength=value.length;i<valueLength;++i){chr=value.charAt(i);if(isWhitespace(chr)){spaces.push(tokens.length);indentation+=chr}else{nonSpace=!0;lineHasNonSpace=!0;indentation+=' '} tokens.push(['text',chr,start,start+1]);start+=1;if(chr==='\n'){stripSpace();indentation='';tagIndex=0;lineHasNonSpace=!1}}} if(!scanner.scan(openingTagRe)) break;hasTag=!0;type=scanner.scan(tagRe)||'name';scanner.scan(whiteRe);if(type==='='){value=scanner.scanUntil(equalsRe);scanner.scan(equalsRe);scanner.scanUntil(closingTagRe)}else if(type==='{'){value=scanner.scanUntil(closingCurlyRe);scanner.scan(curlyRe);scanner.scanUntil(closingTagRe);type='&'}else{value=scanner.scanUntil(closingTagRe)} if(!scanner.scan(closingTagRe)) throw new Error('Unclosed tag at '+scanner.pos);if(type=='>'){token=[type,value,start,scanner.pos,indentation,tagIndex,lineHasNonSpace]}else{token=[type,value,start,scanner.pos]} tagIndex++;tokens.push(token);if(type==='#'||type==='^'){sections.push(token)}else if(type==='/'){openSection=sections.pop();if(!openSection) throw new Error('Unopened section "'+value+'" at '+start);if(openSection[1]!==value) throw new Error('Unclosed section "'+openSection[1]+'" at '+start)}else if(type==='name'||type==='{'||type==='&'){nonSpace=!0}else if(type==='='){compileTags(value)}} stripSpace();openSection=sections.pop();if(openSection) throw new Error('Unclosed section "'+openSection[1]+'" at '+scanner.pos);return nestTokens(squashTokens(tokens))} function squashTokens(tokens){var squashedTokens=[];var token,lastToken;for(var i=0,numTokens=tokens.length;i<numTokens;++i){token=tokens[i];if(token){if(token[0]==='text'&&lastToken&&lastToken[0]==='text'){lastToken[1]+=token[1];lastToken[3]=token[3]}else{squashedTokens.push(token);lastToken=token}}} return squashedTokens} function nestTokens(tokens){var nestedTokens=[];var collector=nestedTokens;var sections=[];var token,section;for(var i=0,numTokens=tokens.length;i<numTokens;++i){token=tokens[i];switch(token[0]){case '#':case '^':collector.push(token);sections.push(token);collector=token[4]=[];break;case '/':section=sections.pop();section[5]=token[2];collector=sections.length>0?sections[sections.length-1][4]:nestedTokens;break;default:collector.push(token)}} return nestedTokens} function Scanner(string){this.string=string;this.tail=string;this.pos=0} Scanner.prototype.eos=function eos(){return this.tail===''};Scanner.prototype.scan=function scan(re){var match=this.tail.match(re);if(!match||match.index!==0) return'';var string=match[0];this.tail=this.tail.substring(string.length);this.pos+=string.length;return string};Scanner.prototype.scanUntil=function scanUntil(re){var index=this.tail.search(re),match;switch(index){case-1:match=this.tail;this.tail='';break;case 0:match='';break;default:match=this.tail.substring(0,index);this.tail=this.tail.substring(index)} this.pos+=match.length;return match};function Context(view,parentContext){this.view=view;this.cache={'.':this.view};this.parent=parentContext} Context.prototype.push=function push(view){return new Context(view,this)};Context.prototype.lookup=function lookup(name){var cache=this.cache;var value;if(cache.hasOwnProperty(name)){value=cache[name]}else{var context=this,intermediateValue,names,index,lookupHit=!1;while(context){if(name.indexOf('.')>0){intermediateValue=context.view;names=name.split('.');index=0;while(intermediateValue!=null&&index<names.length){if(index===names.length-1) lookupHit=(hasProperty(intermediateValue,names[index])||primitiveHasOwnProperty(intermediateValue,names[index]));intermediateValue=intermediateValue[names[index++]]}}else{intermediateValue=context.view[name];lookupHit=hasProperty(context.view,name)} if(lookupHit){value=intermediateValue;break} context=context.parent} cache[name]=value} if(isFunction(value)) value=value.call(this.view);return value};function Writer(){this.templateCache={_cache:{},set:function set(key,value){this._cache[key]=value},get:function get(key){return this._cache[key]},clear:function clear(){this._cache={}}}} Writer.prototype.clearCache=function clearCache(){if(typeof this.templateCache!=='undefined'){this.templateCache.clear()}};Writer.prototype.parse=function parse(template,tags){var cache=this.templateCache;var cacheKey=template+':'+(tags||mustache.tags).join(':');var isCacheEnabled=typeof cache!=='undefined';var tokens=isCacheEnabled?cache.get(cacheKey):undefined;if(tokens==undefined){tokens=parseTemplate(template,tags);isCacheEnabled&&cache.set(cacheKey,tokens)} return tokens};Writer.prototype.render=function render(template,view,partials,config){var tags=this.getConfigTags(config);var tokens=this.parse(template,tags);var context=(view instanceof Context)?view:new Context(view,undefined);return this.renderTokens(tokens,context,partials,template,config)};Writer.prototype.renderTokens=function renderTokens(tokens,context,partials,originalTemplate,config){var buffer='';var token,symbol,value;for(var i=0,numTokens=tokens.length;i<numTokens;++i){value=undefined;token=tokens[i];symbol=token[0];if(symbol==='#')value=this.renderSection(token,context,partials,originalTemplate,config);else if(symbol==='^')value=this.renderInverted(token,context,partials,originalTemplate,config);else if(symbol==='>')value=this.renderPartial(token,context,partials,config);else if(symbol==='&')value=this.unescapedValue(token,context);else if(symbol==='name')value=this.escapedValue(token,context,config);else if(symbol==='text')value=this.rawValue(token);if(value!==undefined) buffer+=value} return buffer};Writer.prototype.renderSection=function renderSection(token,context,partials,originalTemplate,config){var self=this;var buffer='';var value=context.lookup(token[1]);function subRender(template){return self.render(template,context,partials,config)} if(!value)return;if(isArray(value)){for(var j=0,valueLength=value.length;j<valueLength;++j){buffer+=this.renderTokens(token[4],context.push(value[j]),partials,originalTemplate,config)}}else if(typeof value==='object'||typeof value==='string'||typeof value==='number'){buffer+=this.renderTokens(token[4],context.push(value),partials,originalTemplate,config)}else if(isFunction(value)){if(typeof originalTemplate!=='string') throw new Error('Cannot use higher-order sections without the original template');value=value.call(context.view,originalTemplate.slice(token[3],token[5]),subRender);if(value!=null) buffer+=value}else{buffer+=this.renderTokens(token[4],context,partials,originalTemplate,config)} return buffer};Writer.prototype.renderInverted=function renderInverted(token,context,partials,originalTemplate,config){var value=context.lookup(token[1]);if(!value||(isArray(value)&&value.length===0)) return this.renderTokens(token[4],context,partials,originalTemplate,config)};Writer.prototype.indentPartial=function indentPartial(partial,indentation,lineHasNonSpace){var filteredIndentation=indentation.replace(/[^ \t]/g,'');var partialByNl=partial.split('\n');for(var i=0;i<partialByNl.length;i++){if(partialByNl[i].length&&(i>0||!lineHasNonSpace)){partialByNl[i]=filteredIndentation+partialByNl[i]}} return partialByNl.join('\n')};Writer.prototype.renderPartial=function renderPartial(token,context,partials,config){if(!partials)return;var tags=this.getConfigTags(config);var value=isFunction(partials)?partials(token[1]):partials[token[1]];if(value!=null){var lineHasNonSpace=token[6];var tagIndex=token[5];var indentation=token[4];var indentedValue=value;if(tagIndex==0&&indentation){indentedValue=this.indentPartial(value,indentation,lineHasNonSpace)} var tokens=this.parse(indentedValue,tags);return this.renderTokens(tokens,context,partials,indentedValue,config)}};Writer.prototype.unescapedValue=function unescapedValue(token,context){var value=context.lookup(token[1]);if(value!=null) return value};Writer.prototype.escapedValue=function escapedValue(token,context,config){var escape=this.getConfigEscape(config)||mustache.escape;var value=context.lookup(token[1]);if(value!=null) return(typeof value==='number'&&escape===mustache.escape)?String(value):escape(value)};Writer.prototype.rawValue=function rawValue(token){return token[1]};Writer.prototype.getConfigTags=function getConfigTags(config){if(isArray(config)){return config}else if(config&&typeof config==='object'){return config.tags}else{return undefined}};Writer.prototype.getConfigEscape=function getConfigEscape(config){if(config&&typeof config==='object'&&!isArray(config)){return config.escape}else{return undefined}};var mustache={name:'mustache.js',version:'4.2.0',tags:['{{','}}'],clearCache:undefined,escape:undefined,parse:undefined,render:undefined,Scanner:undefined,Context:undefined,Writer:undefined,set templateCache(cache){defaultWriter.templateCache=cache},get templateCache(){return defaultWriter.templateCache}};var defaultWriter=new Writer();mustache.clearCache=function clearCache(){return defaultWriter.clearCache()};mustache.parse=function parse(template,tags){return defaultWriter.parse(template,tags)};mustache.render=function render(template,view,partials,config){if(typeof template!=='string'){throw new TypeError('Invalid template! Template should be a "string" '+'but "'+typeStr(template)+'" was given as the first '+'argument for mustache#render(template, view, partials)')} return defaultWriter.render(template,view,partials,config)};mustache.escape=escapeHtml;mustache.Scanner=Scanner;mustache.Context=Context;mustache.Writer=Writer //define a class for fetching, handling, and holding all tour data, with helper methods defined to render things in special ways. //constructor: Accepts a configuration object that defines data endpoints (i.e. NPS data API) as well as templates class nps_tours { //instantiate with the 'new' operator, providing an object that defines endpoints and arguments to properly query and process the data of the tour(s) constructor(constructObj) { this.config = constructObj; this.div = document.getElementById(constructObj.div); this.markerPopTemplate = ''; this.tourStopTemplate = ''; this.tourHeaderTemplate = ''; //console.log(constructObj.templates.tourStop) if(constructObj.templates && constructObj.templates.mapPopup) { this.markerPopTemplate = constructObj.templates.mapPopup; } else { this.markerPopTemplate = `<h3><a href='#{{assetId}}' data-target='{{assetId}}'>{{assetName}}</a></h3>`; } if(constructObj.templates && constructObj.templates.tourHeader) { this.tourHeaderTemplate = constructObj.templates.tourHeader; } else { this.tourHeaderTemplate = ` <div class="tourHeader"> <h2>{{title}}</h2> <p>{{description}}</p> </div> ` } if(constructObj.templates && constructObj.templates.tourStop) { this.tourStopTemplate = constructObj.templates.tourStop; } else { this.tourStopTemplate = ` <div class="stop"> <div id="{{assetId}}" data-latitude={{assetContent.latitude}} data-longitude={{assetContent.longitude}} data-ordinal="{{ordinal}}" data-name="{{assetName}}"> <h3>Stop {{ordinal}}: {{assetName}}</h3> <div class="row"> <div class="col-xs-12"> {{#assetContent.images}} <img src="{{url}}?maxwidth=650&autorotate=false" style="margin-left:auto;margin-right:auto;" alt="{{altText}}" title="{{altText}}"> {{/assetContent.images}} </div> <div class="col-xs-12"> <audio id="audio_{{assetId}}" class="video-js vjs-default-skin" controls preload="metadata" width="100%" height="40px" style="width:100%"> <source src="{{audioFileUrl}}" type="audio/mp3" /> </audio> <div id="transcriptWrapper"> <div class="transcript-control open"><a href="javascript:void(0);" id="transcript_anch_{{assetId}}">Audio Transcript</a></div> <div class="transcript" style="display: none;">{{audioTranscript}}</div> </div> </div> <div class="col-xs-12"> <h4>Significance:</h4> {{significance}} {{#directionsToNextStop}} <div class="directions"> <h4>Directions to the next stop, {{nextStopName}}:</h4> {{directionsToNextStop}} </div> {{/directionsToNextStop}} </div> </div> </div> </div>` } } //Call this method to execute data fetch using endpoints and arguments provided in the config. //will automatically fetch tour(s), and then iterate over stops to fetch place/campground/visitor center asset content. getData(callback) { let scope = this; //first, tours data let allData = ''; //if(this.endpoints.places) let placesURL = this.config.places.endpoint; let placesParameters = this.config.places.parameters; //if(this.endpoints.visitorcenters) let visitorcentersURL = this.config.visitorcenters.endpoint; let visitorcentersParameters = this.config.visitorcenters.parameters; //if(this.endpoints.campgrounds) let campgroundsURL = this.config.campgrounds.endpoint; let campgroundsParameters = this.config.campgrounds.parameters; let div = this.div; let tourStopTemplate = this.tourStopTemplate; jQuery.ajax({ url:nps_tours.buildReqURL(this.config.tours.endpoint,this.config.tours.parameters), success:function(d) { //console.log(d); allData = d; let places = ''; let visitorcenters = ''; let campgrounds = ''; //first order of business is to go through all the tour stops and assemble requests for assets //places, visitorcenters, and campgrounds can all be assembled into a tour. toursLoop: { for(var t = 0; t < allData.data.length;t++) { stopLoop: { for(var s = 0; s < allData.data[t].stops.length;s++) { switch (allData.data[t].stops[s].assetType) { case "places": places += allData.data[t].stops[s].assetId + ","; break; case "visitorcenters": visitorcenters += allData.data[t].stops[s].assetId + ","; break; case "campgrounds": campgrounds += allData.data[t].stops[s].assetId + ","; break; } } } } } let stopDataPromise = new Promise(function(resolve, reject) { placesParameters.ID = places; //console.log(nps_tours.buildReqURL(placesURL,placesParameters)) jQuery.ajax({ url:nps_tours.buildReqURL(placesURL,placesParameters), success:function(data) { allData = nps_tours.augmentStopData(data,allData); //scope.allData = allData; resolve(); } }); }); stopDataPromise.then(function(resolve,reject){ //console.log("first promise done"); if(visitorcenters) { visitorcentersParameters.ID = visitorcenters; //console.log(nps_tours.buildReqURL(visitorcentersURL,visitorcentersParameters)) jQuery.ajax({ url:nps_tours.buildReqURL(visitorcentersURL,visitorcentersParameters), success:function(data) { allData = nps_tours.augmentStopData(data,allData); //resolve(); } }); } else { //console.log("no visitorcenter stops"); //resolve(); } }); stopDataPromise.then(function(resolve,reject){ //console.log("second promise done"); if(campgrounds) { campgroundsParameters.ID = campgrounds; //console.log(nps_tours.buildReqURL(campgroundsURL,campgroundsParameters)) jQuery.ajax({ url:nps_tours.buildReqURL(campgroundsURL,campgroundsParameters), success:function(data) { allData = nps_tours.augmentStopData(data,allData); //resolve(); } }); } else { //console.log("no campground stops"); //resolve(); } }); stopDataPromise.then(function(){ scope.data = allData.data; return callback(allData.data); }); } }); } //helper method that calls the static function in the class buldTour. //When complete, it will fire a no-argument callback. Useful for chaining follow-up renders like making a map, or slick-ifying buildTour(callback) { //console.log(this.config) nps_tours.buildTour(this.data,this.div,this.tourHeaderTemplate,this.tourStopTemplate); callback(); } static augmentStopData(data,allData) { //console.log(data); toursLoop: { for(var t = 0; t < allData.data.length;t++) { stopLoop: { for(var s = 0; s < allData.data[t].stops.length;s++) { //if(allData.data[t].stops[s].assetType == "places") // { for(var p = 0; p < data.data.length; p++) { if(allData.data[t].stops[s].assetId == data.data[p].id) { allData.data[t].stops[s].assetContent = data.data[p]; break; } } // } } } } } return allData; } //this function will render all stops using provided or default header and stop templates in an iterative fashion. static buildTour(d,div,tourHeaderTemplate,tourStopTemplate) { //console.log(JSON.stringify(d.data[0].stops[0])) let tourString = ''; toursLoop: { for(var t = 0; t < d.length;t++) { tourString += mustache.render(tourHeaderTemplate,d[t]); stopLoop: { //tourString += "<div class='all-tour-stops' id='" + div.id + "_stops'>"; for(var s = 0; s < d[t].stops.length;s++) { if(s != d[t].stops.length - 1) { d[t].stops[s].nextStopName = d[t].stops[s + 1].assetName; } tourString += mustache.render(tourStopTemplate, d[t].stops[s]); } //tourString += "</div>" } } } div.innerHTML = tourString; } static goTo(tourDiv,id) { //console.log(jQuery("#" + id)) try { jQuery("#" + tourDiv).slick("goTo", parseInt(jQuery("#" + id)[0].attributes["data-ordinal"].value)) } catch (e) { console.log(e) $('html, body').animate({ scrollTop: $("#" + id).offset().top }, 800, function(){ }); } //history.pushState(null, null, "#" + id); } static buildReqURL(url,parameters) { var parametersString = "?" for(var x in parameters) { parametersString += x + "=" + parameters[x] + "&"; } return url + parametersString; } //provide an instance of the tour class, div where you want the map, and callback will also return with the leaflet map object and array of marker objects. static makeMap(tourClass,div,callback) { let data = tourClass.data; var npmapJS = document.createElement('script'); npmapJS.src = 'https://www.nps.gov/lib/npmap.js/4.0.0/npmap.min.js'; npmapJS.onload = function(){ let tour_NPMap = L.npmap.map({ "baseLayers": [ "nps-parkTiles" ], "center": { //"lat": parseFloat(tourData[0].attributes["data-latitude"].value), "lat": data[0].stops[0].assetContent.latitude, //"lng": parseFloat(tourData[0].attributes["data-longitude"].value) "lng": data[0].stops[0].assetContent.longitude }, "div": div, "homeControl": false, "overlays": [], "zoom":15, "smallzoomControl": false }); var markers = []; var iter = 0 for(var x = 0; x < data.length; x++) { for(var y = 0; y < data[x].stops.length; y++) { try { //console.log({lat:parseFloat(data[x].stops[y].assetContent.latitude),lng:parseFloat(data[x].stops[y].assetContent.longitude)}) markers.push(L.marker({lat:parseFloat(data[x].stops[y].assetContent.latitude),lng:parseFloat(data[x].stops[y].assetContent.longitude)},{icon:L.npmap.icon.maki({'marker-symbol':data[x].stops[y].ordinal})})); markers[iter].bindPopup(mustache.render(tourClass.markerPopTemplate,data[x].stops[y])); //console.log(mustache.render(tourClass.markerPopTemplate,data[x].stops[y])); //marker.on("click",function(){jQuery("#My_NPStoryMap_story").slick('slickGoTo',x)}) markers[iter].addTo(tour_NPMap); } catch(e) { markers.push("") console.log(data[x].stops[y] + " Error " + e); } iter++; } } setTimeout(function(){ tour_NPMap.invalidateSize(); var group = new L.featureGroup(markers); tour_NPMap.fitBounds(group.getBounds()); jQuery(".leaflet-container").removeClass("leaflet-touch-drag"); jQuery(".leaflet-container").css("-ms-touch-action","none"); jQuery(".leaflet-container").css("touch-action","none"); },500); callback(tour_NPMap,markers); } document.getElementsByTagName("head")[0].appendChild(npmapJS); var npmapCSS = document.createElement('link'); npmapCSS.href = "https://www.nps.gov/lib/npmap.js/4.0.0/npmap.min.css"; npmapCSS.rel = "stylesheet"; document.getElementsByTagName("head")[0].appendChild(npmapCSS); } } var BHT = new nps_tours( { div:"tourDiv", tours:{endpoint:"https://developer.nps.gov/api/v1/tours",parameters:{id:"64FA869C-07EE-674E-C58B0FF9595CC7BC",api_key:"OMszSnR1dzPjDaafXFXntxWB3V8pLyv5D7IEB96G"}}, places:{endpoint:"https://developer.nps.gov/api/v1/places",parameters:{api_key:"OMszSnR1dzPjDaafXFXntxWB3V8pLyv5D7IEB96G"}}, visitorcenters:{endpoint:"https://developer.nps.gov/api/v1/visitorcenters",parameters:{api_key:"OMszSnR1dzPjDaafXFXntxWB3V8pLyv5D7IEB96G"}}, campgrounds:{endpoint:"https://developer.nps.gov/api/v1/campgrounds",parameters:{api_key:"OMszSnR1dzPjDaafXFXntxWB3V8pLyv5D7IEB96G"}}, templates:{mapPopup:` <h3><button class="btn-link" onclick='nps_tours.goTo("tourDiv","{{assetId}}");' data-target='{{assetId}}'>{{assetName}}</button></h3> `} } ) BHT.getData(function(data){ //BHT.allData = data; BHT.buildTour(function(){ console.log("rendering videojs player"); var audios = jQuery("audio"); for(var x = 0; x < audios.length; x ++) { var player = videojs(audios[x].id, { aspectRatio: '1:0', fluid: true, inactivityTimeout: 0, controlBar: { 'fullscreenToggle': false } }); player.hotkeys({ volumeStep: 0.1, seekStep: 5, alwaysCaptureHotkeys: false, enableVolumeScroll: false }); var eventCategoryText = 'Audio'; player.ga({ 'eventCategory': 'NPS ' + eventCategoryText, 'eventLabel': location.pathname + "_" + audios[x].id, 'eventsToTrack': ['start', 'end', 'percentsPlayed', 'fullscreen'], 'percentsPlayedInterval': 25, 'debug': true }); } console.log("attempt map make") nps_tours.makeMap(BHT,"map",function(map,markers){ BHT.map = map; BHT.markers = markers; //custom stuff -- we have a map and divs of the header and each stop. Let's slickify it for great ux let tour_div = "tourDiv"; var slickJS = document.createElement('script'); slickJS.src = '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js'; slickJS.onload = function(){ jQuery("#" + tour_div).slick({ dots: true, prevArrow: false, nextArrow: false, infinite: true, speed: 300, slidesToShow: 1, draggable:false, swipe:false }); tourData = jQuery("#" + tour_div + " div.stop>div"); jQuery(".tourHeader").append('<div style="width:100%;text-align:center;"><button class="btn btn-primary" onclick="jQuery("#' + tour_div + '").slick("goTo",1)" type="button">Get Started</button></div>') for(var x = 0; x < tourData.length; x++) { jQuery(tourData[x]).append('<button class="btn btn-primary" onclick="jQuery("#' + tour_div + '").slick("slickNext")" style="float:right;margin:2rem;" type="button" tabindex="0">Next Stop <span style="padding:0.25rem;font-family:slick;vertical-align:middle;">→</span></a>') jQuery(tourData[x]).append('<button class="btn btn-primary" onclick="jQuery("#' + tour_div + '").slick("slickPrev")" style="float:left;margin:2rem;" type="button" tabindex="0"><span style="padding:0.25rem;font-family:slick;vertical-align:middle;">←</span> Previous Stop</a>') } jQuery("#" + tour_div).on('beforeChange', function(event, slick, currentSlide, nextSlide){ //location.hash = jQuery('[data-ordinal=' + nextSlide +']')[0].id; try { console.log(nextSlide); jQuery("audio").each(function(e,f){f.pause()}); jQuery("html, body").animate({scrollTop: jQuery("#map").offset().top},500); BHT.map.closePopup(); //My_NPStoryMap_flying = true; BHT.map.flyTo({lat:tourData[nextSlide].attributes["data-latitude"].value,lng:tourData[nextSlide].attributes["data-longitude"].value}); console.log(BHT.markers[nextSlide - 1]) jQuery(".leaflet-marker-icon-active").removeClass("leaflet-marker-icon-active") BHT.map.on("moveend",function(){ BHT.markers[nextSlide - 1]._icon.classList.add("leaflet-marker-icon-active"); BHT.markers[nextSlide - 1]._icon.style.transform += " scale(2)"; BHT.map.off("moveend"); }); } catch(e) { console.log("No marker for " + nextSlide + e) } }); } document.body.appendChild(slickJS); var slickCSS = document.createElement('link'); slickCSS.href = "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"; slickCSS.rel = "stylesheet"; document.getElementsByTagName("head")[0].appendChild(slickCSS); var slick_themeCSS = document.createElement('link'); slick_themeCSS.href = "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"; slick_themeCSS.rel = "stylesheet"; document.getElementsByTagName("head")[0].appendChild(slick_themeCSS); var slick_fix = document.createElement('style'); //slick_fix.innerText = ".slick-arrow{height:300px;width:5rem;} .slick-arrow:before {color:black;font-size:2rem;opacity:1;} .slick-next{right:1rem;top:200px;z-index:100;} .slick-prev{left:1rem;top:200px;z-index:100;}"; slick_fix.innerText = ".leaflet-marker-icon-active{transform-origin: 50% 75%;transition: transform .5s}" document.getElementsByTagName("head")[0].appendChild(slick_fix); if (jQuery('.transcript-control').length) { jQuery('.transcript-control a').click(function() { var transcript = jQuery(this).parent().next('.transcript'); var jQueryfact = jQuery('.adjusted-for-fact .fact'); if (transcript.is(':visible')) { transcript.hide(); jQuery(this).parent().removeClass('close').addClass('open'); } else { transcript.show(); jQuery(this).parent() .removeClass('open') .addClass('close'); } }); } }); }); });