From 9e384822992859c84536b43baf81a13ae141bbf9 Mon Sep 17 00:00:00 2001 From: jstrand Date: Mon, 20 Jun 2022 13:38:51 -0700 Subject: [PATCH 1/7] Added comments and code to source js for basemap, crs, layer switching, and wms support --- compiled/js/storymap.js | 2772 ++++++++++++++--------------- src/js/map/Map.js | 355 ++-- src/js/map/leaflet/Map.Leaflet.js | 45 +- 3 files changed, 1617 insertions(+), 1555 deletions(-) diff --git a/compiled/js/storymap.js b/compiled/js/storymap.js index e4f44521..74356abd 100644 --- a/compiled/js/storymap.js +++ b/compiled/js/storymap.js @@ -45,7 +45,7 @@ trace = function( msg ) { ================================================== */ VCO.Util = { - + extend: function (/*Object*/ dest) /*-> Object*/ { // merge src properties into dest var sources = Array.prototype.slice.call(arguments, 1); for (var j = 0, len = sources.length, src; j < len; j++) { @@ -58,34 +58,34 @@ VCO.Util = { } return dest; }, - + setOptions: function (obj, options) { obj.options = VCO.Util.extend({}, obj.options, options); if (obj.options.uniqueid === "") { obj.options.uniqueid = VCO.Util.unique_ID(6); } }, - + findArrayNumberByUniqueID: function(id, array, prop) { var _n = 0; - + for (var i = 0; i < array.length; i++) { if (array[i].data[prop] == id) { trace(array[i].data[prop]); _n = i; } }; - + return _n; }, - + convertUnixTime: function(str) { // created for Instagram. It's ISO8601-ish // 2013-12-09 01:56:28 var pattern = /^(\d{4})-(\d{2})-(\d{2})[T\s](\d{2}):(\d{2}):(\d{2})/; if (str.match(pattern)) { var date_parts = str.match(pattern).slice(1); } - + var date_array = []; for(var i = 0; i < date_parts.length; i++) { @@ -100,17 +100,17 @@ VCO.Util = { month = months[date.getMonth()]; day = date.getDate(); time = month + ', ' + day + ' ' + year; - + return time; }, - + setData: function (obj, data) { obj.data = VCO.Util.extend({}, obj.data, data); if (obj.data.uniqueid === "") { obj.data.uniqueid = VCO.Util.unique_ID(6); } }, - + mergeData: function(data_main, data_to_merge) { var x; for (x in data_to_merge) { @@ -120,35 +120,35 @@ VCO.Util = { } return data_main; }, - + stamp: (function () { var lastId = 0, key = '_vco_id'; - + return function (/*Object*/ obj) { obj[key] = obj[key] || ++lastId; return obj[key]; }; }()), - + isArray: (function () { // Use compiler's own isArray when available if (Array.isArray) { return Array.isArray; } - + // Retain references to variables for performance // optimization var objectToStringFn = Object.prototype.toString, arrayToStringResult = objectToStringFn.call([]); - + return function (subject) { return objectToStringFn.call(subject) === arrayToStringResult; }; }()), - + unique_ID: function(size, prefix) { - + var getRandomNumber = function(range) { return Math.floor(Math.random() * range); }; @@ -165,27 +165,27 @@ VCO.Util = { } return str; }; - + if (prefix) { return prefix + "-" + randomID(size); } else { return "vco-" + randomID(size); } }, - + htmlify: function(str) { //if (str.match(/<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/)) { if (VCO.Browser.chrome) { str = VCO.Emoji(str); } if (str.match(/

[\s\S]*?<\/p>/)) { - + return str; } else { return "

" + str + "

"; } }, - + getParamString: function (obj) { var params = []; for (var i in obj) { @@ -195,16 +195,16 @@ VCO.Util = { } return '?' + params.join('&'); }, - + formatNum: function (num, digits) { var pow = Math.pow(10, digits || 5); return Math.round(num * pow) / pow; }, - + falseFn: function () { return false; }, - + requestAnimFrame: (function () { function timeoutDefer(callback) { window.setTimeout(callback, 1000 / 60); @@ -226,13 +226,13 @@ VCO.Util = { } }; }()), - + bind: function (/*Function*/ fn, /*Object*/ obj) /*-> Object*/ { return function () { return fn.apply(obj, arguments); }; }, - + template: function (str, data) { return str.replace(/\{ *([\w_]+) *\}/g, function (str, key) { var value = data[key]; @@ -242,7 +242,7 @@ VCO.Util = { return value; }); }, - + hexToRgb: function(hex) { // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; @@ -257,7 +257,7 @@ VCO.Util = { b: parseInt(result[3], 16) } : null; }, - + ratio: { square: function(size) { var s = { @@ -273,7 +273,7 @@ VCO.Util = { } return s; }, - + r16_9: function(size) { if (size.w !== null && size.w !== "") { return Math.round((size.w / 16) * 9); @@ -304,33 +304,33 @@ VCO.Util = { } else { return ""; } - + }, getUrlVars: function(string) { var str, vars = [], hash, hashes; - + str = string.toString(); - - if (str.match('&')) { + + if (str.match('&')) { str = str.replace("&", "&"); } else if (str.match('&')) { str = str.replace("&", "&"); } else if (str.match('&')) { str = str.replace("&", "&"); } - + hashes = str.slice(str.indexOf('?') + 1).split('&'); - + for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } - - + + return vars; } }; @@ -1902,22 +1902,22 @@ VCO.Util = { Copyright (c) 2010-2012 Thomas Fuchs http://zeptojs.com -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be included in all +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ @@ -2116,7 +2116,7 @@ VCO.Events.fire = VCO.Events.fireEvent; var w = window.innerWidth, h = window.innerHeight, _orientation = "portrait"; - + if (w > h) { _orientation = "landscape"; } @@ -2128,7 +2128,7 @@ VCO.Events.fire = VCO.Events.fireEvent; } }; -}()); +}()); /* VCO.Load Loads External Javascript and CSS @@ -2136,29 +2136,29 @@ VCO.Events.fire = VCO.Events.fireEvent; VCO.Load = (function (doc) { var loaded = []; - + function isLoaded(url) { - + var i = 0, has_loaded = false; - + for (i = 0; i < loaded.length; i++) { if (loaded[i] == url) { has_loaded = true; } } - + if (has_loaded) { return true; } else { loaded.push(url); return false; } - + } - + return { - + css: function (urls, callback, obj, context) { if (!isLoaded(urls)) { VCO.LoadIt.css(urls, callback, obj, context); @@ -2175,7 +2175,7 @@ VCO.Load = (function (doc) { } } }; - + })(this.document); @@ -2643,17 +2643,17 @@ VCO.Emoji = function(str) { * * KeySpline - use bezier curve for transition easing function * Copyright (c) 2012 Gaetan Renaudeau - * + * * Permission is hereby granted, free of charge, to any person obtaining a * copy of this software and associated documentation files (the "Software"), * to deal in the Software without restriction, including without limitation * the rights to use, copy, modify, merge, publish, distribute, sublicense, * and/or sell copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following conditions: - * + * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. - * + * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL @@ -2671,7 +2671,7 @@ VCO.Emoji = function(str) { */ VCO.Easings = { - ease: [0.25, 0.1, 0.25, 1.0], + ease: [0.25, 0.1, 0.25, 1.0], linear: [0.00, 0.0, 1.00, 1.0], easein: [0.42, 0.0, 1.00, 1.0], easeout: [0.00, 0.0, 0.58, 1.0], @@ -2722,17 +2722,17 @@ VCO.Ease = { return aGuessT; } }, - + easeInSpline: function(t) { var spline = new VCO.Ease.KeySpline(VCO.Easings.easein); return spline.get(t); }, - + easeInOutExpo: function(t) { var spline = new VCO.Ease.KeySpline(VCO.Easings.easein); return spline.get(t); }, - + easeOut: function(t) { return Math.sin(t * Math.PI / 2); }, @@ -2827,15 +2827,15 @@ VCO.Ease = { easeOutQuad: function (t) { return t*(2-t) }, // acceleration until halfway, then deceleration easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }, - // accelerating from zero velocity + // accelerating from zero velocity easeInCubic: function (t) { return t*t*t }, - // decelerating to zero velocity + // decelerating to zero velocity easeOutCubic: function (t) { return (--t)*t*t+1 }, - // acceleration until halfway, then deceleration + // acceleration until halfway, then deceleration easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }, - // accelerating from zero velocity + // accelerating from zero velocity easeInQuart: function (t) { return t*t*t*t }, - // decelerating to zero velocity + // decelerating to zero velocity easeOutQuart: function (t) { return 1-(--t)*t*t*t }, // acceleration until halfway, then deceleration easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t }, @@ -2843,7 +2843,7 @@ VCO.Ease = { easeInQuint: function (t) { return t*t*t*t*t }, // decelerating to zero velocity easeOutQuint: function (t) { return 1+(--t)*t*t*t*t }, - // acceleration until halfway, then deceleration + // acceleration until halfway, then deceleration easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t } }; @@ -2852,7 +2852,7 @@ Math.easeInExpo = function (t, b, c, d) { return c * Math.pow( 2, 10 * (t/d - 1) ) + b; }; - + // exponential easing out - decelerating to zero velocity @@ -2861,7 +2861,7 @@ Math.easeOutExpo = function (t, b, c, d) { return c * ( -Math.pow( 2, -10 * t/d ) + 1 ) + b; }; - + // exponential easing in/out - accelerating until halfway, then decelerating @@ -3379,7 +3379,7 @@ VCO.Point.prototype = { Assumes there is a _el.container and animator ================================================== */ VCO.DomMixins = { - + /* Adding, Hiding, Showing etc ================================================== */ show: function(animate) { @@ -3395,21 +3395,21 @@ VCO.DomMixins = { this._el.container.style.display = "block"; } }, - + hide: function(animate) { this._el.container.style.display = "none"; }, - + addTo: function(container) { container.appendChild(this._el.container); this.onAdd(); }, - + removeFrom: function(container) { container.removeChild(this._el.container); this.onRemove(); }, - + /* Animate to Position ================================================== */ animatePosition: function(pos, el, use_percent) { @@ -3424,23 +3424,23 @@ VCO.DomMixins = { } else { ani[name] = pos[name] + "px"; } - + } } - + if (this.animator) { this.animator.stop(); } this.animator = VCO.Animate(el, ani); }, - + /* Events ================================================== */ - + onLoaded: function() { this.fire("loaded", this.data); }, - + onAdd: function() { this.fire("added", this.data); }, @@ -3448,7 +3448,7 @@ VCO.DomMixins = { onRemove: function() { this.fire("removed", this.data); }, - + /* Set the Position ================================================== */ setPosition: function(pos, el) { @@ -3462,11 +3462,11 @@ VCO.DomMixins = { } } }, - + getPosition: function() { return VCO.Dom.getPosition(this._el.container); } - + }; @@ -3479,13 +3479,13 @@ VCO.Dom = { get: function(id) { return (typeof id === 'string' ? document.getElementById(id) : id); }, - + getByClass: function(id) { if (id) { return document.getElementsByClassName(id); } }, - + create: function(tagName, className, container) { var el = document.createElement(tagName); el.className = className; @@ -3494,7 +3494,7 @@ VCO.Dom = { } return el; }, - + createText: function(content, container) { var el = document.createTextNode(content); if (container) { @@ -3502,13 +3502,13 @@ VCO.Dom = { } return el; }, - + getTranslateString: function (point) { return VCO.Dom.TRANSLATE_OPEN + point.x + 'px,' + point.y + 'px' + VCO.Dom.TRANSLATE_CLOSE; }, - + setPosition: function (el, point) { el._vco_pos = point; if (VCO.Browser.webkit3d) { @@ -3523,7 +3523,7 @@ VCO.Dom = { el.style.top = point.y + 'px'; } }, - + getPosition: function(el){ var pos = { x: 0, @@ -3547,7 +3547,7 @@ VCO.Dom = { } return false; } - + }; VCO.Util.extend(VCO.Dom, { @@ -3715,7 +3715,7 @@ VCO.DomUtil = { }; /* VCO.DomEvent - Inspired by Leaflet + Inspired by Leaflet DomEvent contains functions for working with DOM events. ================================================== */ // TODO stamp @@ -3828,7 +3828,7 @@ VCO.DomEvent = { e.cancelBubble = true; } }, - + // TODO VCO.Draggable.START disableClickPropagation: function (/*HTMLElement*/ el) { VCO.DomEvent.addListener(el, VCO.Draggable.START, VCO.DomEvent.stopPropagation); @@ -3871,18 +3871,18 @@ VCO.DomEvent = { ================================================== */ VCO.Draggable = VCO.Class.extend({ - + includes: VCO.Events, - + _el: {}, - + mousedrag: { down: "mousedown", up: "mouseup", leave: "mouseleave", move: "mousemove" }, - + touchdrag: { down: "touchstart", up: "touchend", @@ -3891,18 +3891,18 @@ VCO.Draggable = VCO.Class.extend({ }, initialize: function (drag_elem, options, move_elem) { - - // DOM ELements + + // DOM ELements this._el = { drag: drag_elem, move: drag_elem }; - + if (move_elem) { this._el.move = move_elem; } - - + + //Options this.options = { enable: { @@ -3919,18 +3919,18 @@ VCO.Draggable = VCO.Class.extend({ duration: 1000, ease: VCO.Ease.easeInOutQuint }; - - + + // Animation Object this.animator = null; - + // Drag Event Type this.dragevent = this.mousedrag; - + if (VCO.Browser.touch) { this.dragevent = this.touchdrag; } - + // Draggable Data this.data = { sliding: false, @@ -3967,18 +3967,18 @@ VCO.Draggable = VCO.Class.extend({ }, touch: false }; - + // Merge Data and Options VCO.Util.mergeData(this.options, options); - - + + }, - + enable: function(e) { // Temporarily disableing this until I have time to fix some issues. //VCO.DomEvent.addListener(this._el.drag, this.dragevent.down, this._onDragStart, this); //VCO.DomEvent.addListener(this._el.drag, this.dragevent.up, this._onDragEnd, this); - + this.data.pos.start = 0; //VCO.Dom.getPosition(this._el.move); this._el.move.style.left = this.data.pos.start.x + "px"; this._el.move.style.top = this.data.pos.start.y + "px"; @@ -3986,26 +3986,26 @@ VCO.Draggable = VCO.Class.extend({ //this._el.move.style.zIndex = "11"; //this._el.move.style.cursor = "move"; }, - + disable: function() { VCO.DomEvent.removeListener(this._el.drag, this.dragevent.down, this._onDragStart, this); VCO.DomEvent.removeListener(this._el.drag, this.dragevent.up, this._onDragEnd, this); }, - + stopMomentum: function() { if (this.animator) { this.animator.stop(); } }, - + updateConstraint: function(c) { this.options.constraint = c; - + // Temporary until issues are fixed - + }, - + /* Private Methods ================================================== */ _onDragStart: function(e) { @@ -4021,38 +4021,38 @@ VCO.Draggable = VCO.Class.extend({ this.data.pagex.start = e.pageX; this.data.pagey.start = e.pageY; } - + // Center element to finger or mouse if (this.options.enable.x) { this._el.move.style.left = this.data.pagex.start - (this._el.move.offsetWidth / 2) + "px"; } - + if (this.options.enable.y) { this._el.move.style.top = this.data.pagey.start - (this._el.move.offsetHeight / 2) + "px"; } - + this.data.pos.start = VCO.Dom.getPosition(this._el.drag); this.data.time.start = new Date().getTime(); - + this.fire("dragstart", this.data); VCO.DomEvent.addListener(this._el.drag, this.dragevent.move, this._onDragMove, this); VCO.DomEvent.addListener(this._el.drag, this.dragevent.leave, this._onDragEnd, this); }, - + _onDragEnd: function(e) { this.data.sliding = false; VCO.DomEvent.removeListener(this._el.drag, this.dragevent.move, this._onDragMove, this); VCO.DomEvent.removeListener(this._el.drag, this.dragevent.leave, this._onDragEnd, this); this.fire("dragend", this.data); - + // momentum this._momentum(); }, - + _onDragMove: function(e) { e.preventDefault(); this.data.sliding = true; - + if (VCO.Browser.touch) { if (e.originalEvent) { this.data.pagex.end = e.originalEvent.touches[0].screenX; @@ -4066,22 +4066,22 @@ VCO.Draggable = VCO.Class.extend({ this.data.pagex.end = e.pageX; this.data.pagey.end = e.pageY; } - + this.data.pos.end = VCO.Dom.getPosition(this._el.drag); this.data.new_pos.x = -(this.data.pagex.start - this.data.pagex.end - this.data.pos.start.x)//-(this.data.pagex.start - this.data.pagex.end - this.data.pos.end.x); this.data.new_pos.y = -(this.data.pagey.start - this.data.pagey.end - this.data.pos.start.y ); - + if (this.options.enable.x) { this._el.move.style.left = this.data.new_pos.x + "px"; } - + if (this.options.enable.y) { this._el.move.style.top = this.data.new_pos.y + "px"; } - + this.fire("dragmove", this.data); }, - + _momentum: function() { var pos_adjust = { x: 0, @@ -4095,42 +4095,42 @@ VCO.Draggable = VCO.Class.extend({ }, swipe = false, swipe_direction = ""; - - + + if (VCO.Browser.touch) { //this.options.momentum_multiplier = this.options.momentum_multiplier * 2; } - + pos_adjust.time = (new Date().getTime() - this.data.time.start) * 10; pos_change.time = (new Date().getTime() - this.data.time.start) * 10; - + pos_change.x = this.options.momentum_multiplier * (Math.abs(this.data.pagex.end) - Math.abs(this.data.pagex.start)); pos_change.y = this.options.momentum_multiplier * (Math.abs(this.data.pagey.end) - Math.abs(this.data.pagey.start)); - + pos_adjust.x = Math.round(pos_change.x / pos_change.time); pos_adjust.y = Math.round(pos_change.y / pos_change.time); - + this.data.new_pos.x = Math.min(this.data.pos.end.x + pos_adjust.x); this.data.new_pos.y = Math.min(this.data.pos.end.y + pos_adjust.y); - + if (!this.options.enable.x) { this.data.new_pos.x = this.data.pos.start.x; } else if (this.data.new_pos.x < 0) { this.data.new_pos.x = 0; } - + if (!this.options.enable.y) { this.data.new_pos.y = this.data.pos.start.y; } else if (this.data.new_pos.y < 0) { this.data.new_pos.y = 0; } - + // Detect Swipe if (pos_change.time < 3000) { swipe = true; } - + // Detect Direction if (Math.abs(pos_change.x) > 10000) { this.data.direction = "left"; @@ -4149,10 +4149,10 @@ VCO.Draggable = VCO.Class.extend({ if (swipe) { this.fire("swipe_" + this.data.direction, this.data); } - + }, - - + + _animateMomentum: function() { var pos = { x: this.data.new_pos.x, @@ -4162,7 +4162,7 @@ VCO.Draggable = VCO.Class.extend({ duration: this.options.duration, easing: VCO.Ease.easeOutStrong }; - + if (this.options.enable.y) { if (this.options.constraint.top || this.options.constraint.bottom) { if (pos.y > this.options.constraint.bottom) { @@ -4173,7 +4173,7 @@ VCO.Draggable = VCO.Class.extend({ } animate.top = Math.floor(pos.y) + "px"; } - + if (this.options.enable.x) { if (this.options.constraint.left || this.options.constraint.right) { if (pos.x > this.options.constraint.left) { @@ -4184,9 +4184,9 @@ VCO.Draggable = VCO.Class.extend({ } animate.left = Math.floor(pos.x) + "px"; } - + this.animator = VCO.Animate(this._el.move, animate); - + this.fire("momentum", this.data); } }); @@ -4198,18 +4198,18 @@ VCO.Draggable = VCO.Class.extend({ ================================================== */ VCO.Swipable = VCO.Class.extend({ - + includes: VCO.Events, - + _el: {}, - + mousedrag: { down: "mousedown", up: "mouseup", leave: "mouseleave", move: "mousemove" }, - + touchdrag: { down: "touchstart", up: "touchend", @@ -4218,18 +4218,18 @@ VCO.Swipable = VCO.Class.extend({ }, initialize: function (drag_elem, move_elem, options) { - - // DOM ELements + + // DOM ELements this._el = { drag: drag_elem, move: drag_elem }; - + if (move_elem) { this._el.move = move_elem; } - - + + //Options this.options = { snap: false, @@ -4247,18 +4247,18 @@ VCO.Swipable = VCO.Class.extend({ duration: 1000, ease: VCO.Ease.easeInOutQuint }; - - + + // Animation Object this.animator = null; - + // Drag Event Type this.dragevent = this.mousedrag; - + if (VCO.Browser.touch) { this.dragevent = this.touchdrag; } - + // Draggable Data this.data = { sliding: false, @@ -4295,17 +4295,17 @@ VCO.Swipable = VCO.Class.extend({ }, touch: false }; - + // Merge Data and Options VCO.Util.mergeData(this.options, options); - - + + }, - + enable: function(e) { VCO.DomEvent.addListener(this._el.drag, this.dragevent.down, this._onDragStart, this); VCO.DomEvent.addListener(this._el.drag, this.dragevent.up, this._onDragEnd, this); - + this.data.pos.start = 0; //VCO.Dom.getPosition(this._el.move); this._el.move.style.left = this.data.pos.start.x + "px"; this._el.move.style.top = this.data.pos.start.y + "px"; @@ -4313,34 +4313,34 @@ VCO.Swipable = VCO.Class.extend({ //this._el.move.style.zIndex = "11"; //this._el.move.style.cursor = "move"; }, - + disable: function() { VCO.DomEvent.removeListener(this._el.drag, this.dragevent.down, this._onDragStart, this); VCO.DomEvent.removeListener(this._el.drag, this.dragevent.up, this._onDragEnd, this); }, - + stopMomentum: function() { if (this.animator) { this.animator.stop(); } }, - + updateConstraint: function(c) { this.options.constraint = c; - + // Temporary until issues are fixed - + }, - + /* Private Methods ================================================== */ _onDragStart: function(e) { - + if (this.animator) { this.animator.stop(); } - + if (VCO.Browser.touch) { if (e.originalEvent) { this.data.pagex.start = e.originalEvent.touches[0].screenX; @@ -4353,36 +4353,36 @@ VCO.Swipable = VCO.Class.extend({ this.data.pagex.start = e.pageX; this.data.pagey.start = e.pageY; } - + // Center element to finger or mouse if (this.options.enable.x) { //this._el.move.style.left = this.data.pagex.start - (this._el.move.offsetWidth / 2) + "px"; } - + if (this.options.enable.y) { //this._el.move.style.top = this.data.pagey.start - (this._el.move.offsetHeight / 2) + "px"; } - + this.data.pos.start = {x:this._el.move.offsetLeft, y:this._el.move.offsetTop}; - - + + this.data.time.start = new Date().getTime(); - + this.fire("dragstart", this.data); VCO.DomEvent.addListener(this._el.drag, this.dragevent.move, this._onDragMove, this); VCO.DomEvent.addListener(this._el.drag, this.dragevent.leave, this._onDragEnd, this); }, - + _onDragEnd: function(e) { this.data.sliding = false; VCO.DomEvent.removeListener(this._el.drag, this.dragevent.move, this._onDragMove, this); VCO.DomEvent.removeListener(this._el.drag, this.dragevent.leave, this._onDragEnd, this); this.fire("dragend", this.data); - + // momentum this._momentum(); }, - + _onDragMove: function(e) { var change = { x:0, @@ -4390,7 +4390,7 @@ VCO.Swipable = VCO.Class.extend({ } //e.preventDefault(); this.data.sliding = true; - + if (VCO.Browser.touch) { if (e.originalEvent) { this.data.pagex.end = e.originalEvent.touches[0].screenX; @@ -4404,29 +4404,29 @@ VCO.Swipable = VCO.Class.extend({ this.data.pagex.end = e.pageX; this.data.pagey.end = e.pageY; } - + change.x = this.data.pagex.start - this.data.pagex.end; change.y = this.data.pagey.start - this.data.pagey.end; - + this.data.pos.end = {x:this._el.drag.offsetLeft, y:this._el.drag.offsetTop}; - + this.data.new_pos.x = -(change.x - this.data.pos.start.x); this.data.new_pos.y = -(change.y - this.data.pos.start.y ); - - + + if (this.options.enable.x && ( Math.abs(change.x) > Math.abs(change.y) ) ) { e.preventDefault(); this._el.move.style.left = this.data.new_pos.x + "px"; } - + if (this.options.enable.y && ( Math.abs(change.y) > Math.abs(change.y) ) ) { e.preventDefault(); this._el.move.style.top = this.data.new_pos.y + "px"; } - + this.fire("dragmove", this.data); }, - + _momentum: function() { var pos_adjust = { x: 0, @@ -4444,41 +4444,41 @@ VCO.Swipable = VCO.Class.extend({ }, swipe = false, swipe_direction = ""; - - + + this.data.direction = null; - + pos_adjust.time = (new Date().getTime() - this.data.time.start) * 10; pos_change.time = (new Date().getTime() - this.data.time.start) * 10; - + pos_change.x = this.options.momentum_multiplier * (Math.abs(this.data.pagex.end) - Math.abs(this.data.pagex.start)); pos_change.y = this.options.momentum_multiplier * (Math.abs(this.data.pagey.end) - Math.abs(this.data.pagey.start)); - + pos_adjust.x = Math.round(pos_change.x / pos_change.time); pos_adjust.y = Math.round(pos_change.y / pos_change.time); - + this.data.new_pos.x = Math.min(this.data.pos.end.x + pos_adjust.x); this.data.new_pos.y = Math.min(this.data.pos.end.y + pos_adjust.y); - + if (!this.options.enable.x) { this.data.new_pos.x = this.data.pos.start.x; } else if (this.data.new_pos.x > 0) { this.data.new_pos.x = 0; } - + if (!this.options.enable.y) { this.data.new_pos.y = this.data.pos.start.y; } else if (this.data.new_pos.y < 0) { this.data.new_pos.y = 0; } - + // Detect Swipe if (pos_change.time < 2000) { swipe = true; } - - + + if (this.options.enable.x && this.options.enable.y) { if (Math.abs(pos_change.x) > Math.abs(pos_change.y)) { swipe_detect.x = true; @@ -4494,15 +4494,15 @@ VCO.Swipable = VCO.Class.extend({ swipe_detect.y = true; } } - + // Detect Direction and long swipe if (swipe_detect.x) { - + // Long Swipe if (Math.abs(pos_change.x) > (this._el.drag.offsetWidth/2)) { swipe = true; } - + if (Math.abs(pos_change.x) > 10000) { this.data.direction = "left"; if (pos_change.x > 0) { @@ -4510,14 +4510,14 @@ VCO.Swipable = VCO.Class.extend({ } } } - + if (swipe_detect.y) { - + // Long Swipe if (Math.abs(pos_change.y) > (this._el.drag.offsetHeight/2)) { swipe = true; } - + if (Math.abs(pos_change.y) > 10000) { this.data.direction = "up"; if (pos_change.y > 0) { @@ -4525,7 +4525,7 @@ VCO.Swipable = VCO.Class.extend({ } } } - + this._animateMomentum(); if (swipe && this.data.direction) { this.fire("swipe_" + this.data.direction, this.data); @@ -4533,7 +4533,7 @@ VCO.Swipable = VCO.Class.extend({ this.fire("swipe_nodirection", this.data); } else if (this.options.snap) { this.animator.stop(); - + this.animator = VCO.Animate(this._el.move, { top: this.data.pos.start.y, left: this.data.pos.start.x, @@ -4541,10 +4541,10 @@ VCO.Swipable = VCO.Class.extend({ easing: VCO.Ease.easeOutStrong }); } - + }, - - + + _animateMomentum: function() { var pos = { x: this.data.new_pos.x, @@ -4554,7 +4554,7 @@ VCO.Swipable = VCO.Class.extend({ duration: this.options.duration, easing: VCO.Ease.easeOutStrong }; - + if (this.options.enable.y) { if (this.options.constraint.top || this.options.constraint.bottom) { if (pos.y > this.options.constraint.bottom) { @@ -4565,7 +4565,7 @@ VCO.Swipable = VCO.Class.extend({ } animate.top = Math.floor(pos.y) + "px"; } - + if (this.options.enable.x) { if (this.options.constraint.left || this.options.constraint.right) { if (pos.x >= this.options.constraint.left) { @@ -4576,9 +4576,9 @@ VCO.Swipable = VCO.Class.extend({ } animate.left = Math.floor(pos.x) + "px"; } - + this.animator = VCO.Animate(this._el.move, animate); - + this.fire("momentum", this.data); } }); @@ -4587,13 +4587,13 @@ VCO.Swipable = VCO.Class.extend({ /* VCO.MenuBar Draggable component to control size ================================================== */ - + VCO.MenuBar = VCO.Class.extend({ - + includes: [VCO.Events, VCO.DomMixins], - + _el: {}, - + /* Constructor ================================================== */ initialize: function(elem, parent_elem, options) { @@ -4609,19 +4609,19 @@ VCO.MenuBar = VCO.Class.extend({ coverbar: {}, grip: {} }; - + this.collapsed = false; - + if (typeof elem === 'object') { this._el.container = elem; } else { this._el.container = VCO.Dom.get(elem); } - + if (parent_elem) { this._el.parent = parent_elem; } - + //Options this.options = { width: 600, @@ -4630,21 +4630,21 @@ VCO.MenuBar = VCO.Class.extend({ ease: VCO.Ease.easeInOutQuint, menubar_default_y: 0 }; - + // Animation this.animator = {}; - + // Merge Data and Options VCO.Util.mergeData(this.options, options); - + this._initLayout(); this._initEvents(); }, - + /* Public ================================================== */ show: function(d) { - + var duration = this.options.duration; if (d) { duration = d; @@ -4657,7 +4657,7 @@ VCO.MenuBar = VCO.Class.extend({ }); */ }, - + hide: function(top) { /* this.animator = VCO.Animate(this._el.container, { @@ -4667,12 +4667,12 @@ VCO.MenuBar = VCO.Class.extend({ }); */ }, - - + + setSticky: function(y) { this.options.menubar_default_y = y; }, - + /* Color ================================================== */ setColor: function(inverted) { @@ -4682,26 +4682,26 @@ VCO.MenuBar = VCO.Class.extend({ this._el.container.className = 'vco-menubar'; } }, - + /* Update Display ================================================== */ updateDisplay: function(w, h, a, l) { this._updateDisplay(w, h, a, l); }, - + /* Events ================================================== */ - + _onButtonOverview: function(e) { this.fire("overview", e); }, - + _onButtonBackToStart: function(e) { this.fire("back_to_start", e); }, - + _onButtonCollapseMap: function(e) { if (this.collapsed) { this.collapsed = false; @@ -4725,52 +4725,52 @@ VCO.MenuBar = VCO.Class.extend({ } } }, - + /* Private Methods ================================================== */ _initLayout: function () { // Create Layout - + // Buttons this._el.button_overview = VCO.Dom.create('span', 'vco-menubar-button', this._el.container); VCO.DomEvent.addListener(this._el.button_overview, 'click', this._onButtonOverview, this); - + this._el.button_backtostart = VCO.Dom.create('span', 'vco-menubar-button', this._el.container); VCO.DomEvent.addListener(this._el.button_backtostart, 'click', this._onButtonBackToStart, this); - + this._el.button_collapse_toggle = VCO.Dom.create('span', 'vco-menubar-button', this._el.container); VCO.DomEvent.addListener(this._el.button_collapse_toggle, 'click', this._onButtonCollapseMap, this); - + if (this.options.map_as_image) { this._el.button_overview.innerHTML = VCO.Language.buttons.overview; } else { this._el.button_overview.innerHTML = VCO.Language.buttons.map_overview; } - + if (VCO.Browser.mobile) { - + this._el.button_backtostart.innerHTML = ""; this._el.button_collapse_toggle.innerHTML = ""; this._el.container.setAttribute("ontouchstart"," "); } else { - + this._el.button_backtostart.innerHTML = VCO.Language.buttons.backtostart + " "; this._el.button_collapse_toggle.innerHTML = VCO.Language.buttons.collapse_toggle + ""; } - + if (this.options.layout == "landscape") { this._el.button_collapse_toggle.style.display = "none"; } - + }, - + _initEvents: function () { - + }, - + // Update Display _updateDisplay: function(width, height, animate) { - + if (width) { this.options.width = width; } @@ -4778,19 +4778,19 @@ VCO.MenuBar = VCO.Class.extend({ this.options.height = height; } } - + }); /* VCO.SizeBar Draggable component to control size ================================================== */ - + VCO.Message = VCO.Class.extend({ - + includes: [VCO.Events, VCO.DomMixins], - + _el: {}, - + /* Constructor ================================================== */ initialize: function(data, options, add_to_container) { @@ -4802,7 +4802,7 @@ VCO.Message = VCO.Class.extend({ loading_icon: {}, message: {} }; - + //Options this.options = { width: 600, @@ -4810,40 +4810,40 @@ VCO.Message = VCO.Class.extend({ message_class: "vco-message", message_icon_class: "vco-loading-icon" }; - + // Merge Data and Options VCO.Util.mergeData(this.data, data); VCO.Util.mergeData(this.options, options); - + this._el.container = VCO.Dom.create("div", this.options.message_class); - + if (add_to_container) { add_to_container.appendChild(this._el.container); this._el.parent = add_to_container; }; - - + + // Animation this.animator = {}; - - + + this._initLayout(); this._initEvents(); }, - + /* Public ================================================== */ updateMessage: function(t) { this._updateMessage(t); }, - - + + /* Update Display ================================================== */ updateDisplay: function(w, h) { this._updateDisplay(w, h); }, - + _updateMessage: function(t) { if (!t) { if (VCO.Language) { @@ -4855,117 +4855,117 @@ VCO.Message = VCO.Class.extend({ this._el.message.innerHTML = t; } }, - + /* Events ================================================== */ - + _onMouseClick: function() { this.fire("clicked", this.options); }, - + /* Private Methods ================================================== */ _initLayout: function () { - + // Create Layout this._el.message_container = VCO.Dom.create("div", "vco-message-container", this._el.container); this._el.loading_icon = VCO.Dom.create("div", this.options.message_icon_class, this._el.message_container); this._el.message = VCO.Dom.create("div", "vco-message-content", this._el.message_container); - + this._updateMessage(); - + }, - + _initEvents: function () { VCO.DomEvent.addListener(this._el.container, 'click', this._onMouseClick, this); }, - + // Update Display _updateDisplay: function(width, height, animate) { - + } - + }); /* VCO.MediaType Determines the type of media the url string is. returns an object with .type and .id - You can add new media types by adding a regex - to match and the media class name to use to - render the media + You can add new media types by adding a regex + to match and the media class name to use to + render the media TODO Allow array so a slideshow can be a mediatype ================================================== */ VCO.MediaType = function(m) { - var media = {}, + var media = {}, media_types = [ { type: "youtube", - name: "YouTube", + name: "YouTube", match_str: "(www.)?youtube|youtu\.be", cls: VCO.Media.YouTube }, { type: "vimeo", - name: "Vimeo", + name: "Vimeo", match_str: "(player.)?vimeo\.com", cls: VCO.Media.Vimeo }, { type: "dailymotion", - name: "DailyMotion", + name: "DailyMotion", match_str: "(www.)?dailymotion\.com", cls: VCO.Media.DailyMotion }, { type: "vine", - name: "Vine", + name: "Vine", match_str: "(www.)?vine\.co", cls: VCO.Media.Vine }, { type: "soundcloud", - name: "SoundCloud", + name: "SoundCloud", match_str: "(player.)?soundcloud\.com", cls: VCO.Media.SoundCloud }, { type: "twitter", - name: "Twitter", + name: "Twitter", match_str: "(www.)?twitter\.com", cls: VCO.Media.Twitter }, { type: "googlemaps", - name: "Google Map", + name: "Google Map", match_str: "maps.google", cls: VCO.Media.Map }, { type: "googleplus", - name: "Google+", + name: "Google+", match_str: "plus.google", cls: VCO.Media.GooglePlus }, { type: "flickr", - name: "Flickr", + name: "Flickr", match_str: "flickr.com/photos", cls: VCO.Media.Flickr }, { type: "instagram", - name: "Instagram", + name: "Instagram", match_str: /(instagr.am|instagram.com)\/p\//, cls: VCO.Media.Instagram }, { type: "profile", - name: "Profile", + name: "Profile", match_str: /((instagr.am|instagram.com)(\/profiles\/|[-a-zA-Z0-9@:%_\+.~#?&//=]+instagramprofile))|[-a-zA-Z0-9@:%_\+.~#?&//=]+\?profile/, cls: VCO.Media.Profile }, @@ -5018,7 +5018,7 @@ VCO.MediaType = function(m) { cls: VCO.Media } ]; - + for (var i = 0; i < media_types.length; i++) { if (m instanceof Array) { return media = { @@ -5032,9 +5032,9 @@ VCO.MediaType = function(m) { break; } }; - + return false; - + } @@ -5045,11 +5045,11 @@ VCO.MediaType = function(m) { // TODO add link VCO.Media = VCO.Class.extend({ - + includes: [VCO.Events], - + _el: {}, - + /* Constructor ================================================== */ initialize: function(data, options, add_to_container) { @@ -5065,27 +5065,27 @@ VCO.Media = VCO.Class.extend({ parent: {}, link: null }; - + // Player (If Needed) this.player = null; - + // Timer (If Needed) this.timer = null; this.load_timer = null; - + // Message this.message = null; - + // Media ID this.media_id = null; - + // State this._state = { loaded: false, show_meta: false, media_loaded: false }; - + // Data this.data = { uniqueid: null, @@ -5095,39 +5095,39 @@ VCO.Media = VCO.Class.extend({ link: null, link_target: null }; - + //Options this.options = { api_key_flickr: "f2cc870b4d233dd0a5bfe73fd0d64ef0", credit_height: 0, caption_height: 0 }; - + this.animator = {}; - + // Merge Data and Options VCO.Util.mergeData(this.options, options); VCO.Util.mergeData(this.data, data); - + this._el.container = VCO.Dom.create("div", "vco-media"); - + if (this.data.uniqueid) { this._el.container.id = this.data.uniqueid; } - - + + this._initLayout(); - + if (add_to_container) { add_to_container.appendChild(this._el.container); this._el.parent = add_to_container; }; - + }, - + loadMedia: function() { var self = this; - + if (!this._state.loaded) { try { this.load_timer = setTimeout(function() { @@ -5139,23 +5139,23 @@ VCO.Media = VCO.Class.extend({ trace("Error loading media for ", this._media); trace(e); } - + //this._state.loaded = true; } }, - + loadingMessage: function() { this.message.updateMessage(this._('loading') + " " + this.options.media_name); }, - + updateMediaDisplay: function(layout) { if (this._state.loaded) { this._updateMediaDisplay(layout); - + if (!VCO.Browser.mobile && layout != "portrait") { this._el.content_item.style.maxHeight = (this.options.height/2) + "px"; } - + if (this._state.media_loaded) { if (this._el.credit) { this._el.credit.style.width = "auto"; @@ -5164,17 +5164,17 @@ VCO.Media = VCO.Class.extend({ this._el.caption.style.width = "auto"; } } - + // Fix for max-width issues in Firefox if (VCO.Browser.firefox) { if (this._el.content_item.offsetWidth > this._el.content_item.offsetHeight) { this._el.content_item.style.width = "100%"; this._el.content_item.style.maxWidth = "100%"; - + } - + if (layout == "portrait") { - this._el.content_item.style.maxHeight = "none"; + this._el.content_item.style.maxHeight = "none"; } } if (this._state.media_loaded) { @@ -5185,55 +5185,55 @@ VCO.Media = VCO.Class.extend({ this._el.caption.style.width = this._el.content_item.offsetWidth + "px"; } } - - + + } }, - + /* Media Specific ================================================== */ _loadMedia: function() { - + }, - + _updateMediaDisplay: function(l) { //this._el.content_item.style.maxHeight = (this.options.height - this.options.credit_height - this.options.caption_height - 16) + "px"; }, - + /* Public ================================================== */ show: function() { - + }, - + hide: function() { - + }, - + addTo: function(container) { container.appendChild(this._el.container); this.onAdd(); }, - + removeFrom: function(container) { container.removeChild(this._el.container); this.onRemove(); }, - + // Update Display updateDisplay: function(w, h, l) { this._updateDisplay(w, h, l); }, - + stopMedia: function() { this._stopMedia(); }, - + loadErrorDisplay: function(message) { this._el.content.removeChild(this._el.content_item); this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-loaderror", this._el.content); this._el.content_item.innerHTML = "

" + message + "

"; - + // After Loaded this.onLoaded(true); }, @@ -5251,7 +5251,7 @@ VCO.Media = VCO.Class.extend({ } this.updateDisplay(); }, - + onMediaLoaded: function(e) { this._state.media_loaded = true; this.fire("media_loaded", this.data); @@ -5262,7 +5262,7 @@ VCO.Media = VCO.Class.extend({ this._el.caption.style.width = this._el.content_item.offsetWidth + "px"; } }, - + showMeta: function(credit, caption) { this._state.show_meta = true; // Credit @@ -5271,7 +5271,7 @@ VCO.Media = VCO.Class.extend({ this._el.credit.innerHTML = this.data.credit; this.options.credit_height = this._el.credit.offsetHeight; } - + // Caption if (this.data.caption && this.data.caption != "" && !this._el.caption) { this._el.caption = VCO.Dom.create("div", "vco-caption", this._el.content_container); @@ -5279,7 +5279,7 @@ VCO.Media = VCO.Class.extend({ this.options.caption_height = this._el.caption.offsetHeight; } }, - + onAdd: function() { this.fire("added", this.data); }, @@ -5287,21 +5287,21 @@ VCO.Media = VCO.Class.extend({ onRemove: function() { this.fire("removed", this.data); }, - + /* Private Methods ================================================== */ _initLayout: function () { - + // Message this.message = new VCO.Message({}, this.options); this.message.addTo(this._el.container); - + // Create Layout this._el.content_container = VCO.Dom.create("div", "vco-media-content-container", this._el.container); - + // Link if (this.data.link && this.data.link != "") { - + this._el.link = VCO.Dom.create("a", "vco-media-link", this._el.content_container); this._el.link.href = this.data.link; if (this.data.link_target && this.data.link_target != "") { @@ -5309,16 +5309,16 @@ VCO.Media = VCO.Class.extend({ } else { this._el.link.target = "_blank"; } - + this._el.content = VCO.Dom.create("div", "vco-media-content", this._el.link); - + } else { this._el.content = VCO.Dom.create("div", "vco-media-content", this._el.content_container); } - - + + }, - + // Update Display _updateDisplay: function(w, h, l) { if (w) { @@ -5327,64 +5327,64 @@ VCO.Media = VCO.Class.extend({ if (h) { this.options.height = h; } - + if (l) { this.options.layout = l; - } - + } + if (this._el.credit) { this.options.credit_height = this._el.credit.offsetHeight; } if (this._el.caption) { this.options.caption_height = this._el.caption.offsetHeight + 5; } - + this.updateMediaDisplay(this.options.layout); - + }, - + _stopMedia: function() { - + } - + }); /* VCO.Media.Blockquote ================================================== */ VCO.Media.Blockquote = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-blockquote", this._el.content); - + // Get Media ID this.media_id = this.data.url; - + // API Call this._el.content_item.innerHTML = this.media_id; - + // After Loaded this.onLoaded(); }, - + updateMediaDisplay: function() { - + }, - + _updateMediaDisplay: function() { - + } - + }); @@ -5393,32 +5393,32 @@ VCO.Media.Blockquote = VCO.Media.extend({ ================================================== */ VCO.Media.Flickr = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("img", "vco-media-item vco-media-image vco-media-flickr vco-media-shadow", this._el.content); - + // Media Loaded Event this._el.content_item.addEventListener('load', function(e) { self.onMediaLoaded(); }); - + // Get Media ID this.establishMediaID(); - + // API URL api_url = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=" + this.options.api_key_flickr + "&photo_id=" + this.media_id + "&format=json&jsoncallback=?"; - + // API Call VCO.getJSON(api_url, function(d) { if (d.stat == "ok") { @@ -5427,7 +5427,7 @@ VCO.Media.Flickr = VCO.Media.extend({ self.loadErrorDisplay("Photo not found or private."); } }); - + }, establishMediaID: function() { @@ -5437,27 +5437,27 @@ VCO.Media.Flickr = VCO.Media.extend({ var pos = idx + marker.length; this.media_id = this.data.url.substr(pos).split("/")[1]; }, - + createMedia: function(d) { var best_size = this.sizes(this.options.height), size = d.sizes.size[d.sizes.size.length - 2].source; - + for(var i = 0; i < d.sizes.size.length; i++) { if (d.sizes.size[i].label == best_size) { size = d.sizes.size[i].source; } } - + // Set Image Source this._el.content_item.src = size; - + // After Loaded this.onLoaded(); }, - + sizes: function(s) { var _size = ""; - + if (s <= 75) { if (s <= 0) { _size = "Large"; @@ -5477,12 +5477,12 @@ VCO.Media.Flickr = VCO.Media.extend({ } else { _size = "Large"; } - + return _size; } - - - + + + }); @@ -5491,41 +5491,41 @@ VCO.Media.Flickr = VCO.Media.extend({ ================================================== */ VCO.Media.Instagram = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Get Media ID this.media_id = this.data.url.split("\/p\/")[1].split("/")[0]; - + // Link this._el.content_link = VCO.Dom.create("a", "", this._el.content); this._el.content_link.href = this.data.url; this._el.content_link.target = "_blank"; - + // Photo this._el.content_item = VCO.Dom.create("img", "vco-media-item vco-media-image vco-media-instagram vco-media-shadow", this._el.content_link); - + // Media Loaded Event this._el.content_item.addEventListener('load', function(e) { self.onMediaLoaded(); }); - + // Set source this._el.content_item.src = "http://instagr.am/p/" + this.media_id + "/media/?size=" + this.sizes(this._el.content.offsetWidth); - + this.onLoaded(); - + }, - + sizes: function(s) { var _size = ""; if (s <= 150) { @@ -5535,12 +5535,12 @@ VCO.Media.Instagram = VCO.Media.extend({ } else { _size = "l"; } - + return _size; } - - - + + + }); @@ -5549,29 +5549,29 @@ VCO.Media.Instagram = VCO.Media.extend({ ================================================== */ VCO.Media.Profile = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + this._el.content_item = VCO.Dom.create("img", "vco-media-item vco-media-image vco-media-profile vco-media-shadow", this._el.content); this._el.content_item.src = this.data.url; - + this.onLoaded(); }, - + _updateMediaDisplay: function(layout) { - - + + if(VCO.Browser.firefox) { this._el.content_item.style.maxWidth = (this.options.width/2) - 40 + "px"; } } - + }); /* VCO.Media.GoogleDoc @@ -5579,44 +5579,44 @@ VCO.Media.Profile = VCO.Media.extend({ ================================================== */ VCO.Media.GoogleDoc = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-iframe", this._el.content); - + // Get Media ID this.media_id = this.data.url; - + // API URL api_url = this.media_id; - + // API Call if (this.media_id.match(/docs.google.com/i)) { this._el.content_item.innerHTML = ""; } else { this._el.content_item.innerHTML = ""; } - + // After Loaded this.onLoaded(); }, - + // Update Media Display _updateMediaDisplay: function() { this._el.content_item.style.height = this.options.height + "px"; } - + }); @@ -5624,40 +5624,40 @@ VCO.Media.GoogleDoc = VCO.Media.extend({ ================================================== */ VCO.Media.GooglePlus = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-googleplus", this._el.content); - + // Get Media ID this.media_id = this.data.url; - + // API URL api_url = this.media_id; - + // API Call - this._el.content_item.innerHTML = "" - + this._el.content_item.innerHTML = "" + // After Loaded this.onLoaded(); }, - + // Update Media Display _updateMediaDisplay: function() { this._el.content_item.style.height = this.options.height + "px"; } - + }); @@ -5665,39 +5665,39 @@ VCO.Media.GooglePlus = VCO.Media.extend({ ================================================== */ VCO.Media.IFrame = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-iframe", this._el.content); - + // Get Media ID this.media_id = this.data.url; - + // API URL api_url = this.media_id; - + // API Call this._el.content_item.innerHTML = api_url; - + // After Loaded this.onLoaded(); }, - + // Update Media Display _updateMediaDisplay: function() { this._el.content_item.style.height = this.options.height + "px"; } - + }); @@ -5707,16 +5707,16 @@ VCO.Media.IFrame = VCO.Media.extend({ ================================================== */ VCO.Media.Image = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var self = this; // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Link if (this.data.link) { this._el.content_link = VCO.Dom.create("a", "", this._el.content); @@ -5726,67 +5726,67 @@ VCO.Media.Image = VCO.Media.extend({ } else { this._el.content_item = VCO.Dom.create("img", "vco-media-item vco-media-image vco-media-shadow", this._el.content); } - + // Media Loaded Event this._el.content_item.addEventListener('load', function(e) { self.onMediaLoaded(); }); - + this._el.content_item.src = this.data.url; - + this.onLoaded(); }, - + _updateMediaDisplay: function(layout) { - - - if(VCO.Browser.firefox) { + + + if(VCO.Browser.firefox) { //this._el.content_item.style.maxWidth = (this.options.width/2) - 40 + "px"; this._el.content_item.style.width = "auto"; } } - + }); /* VCO.Media.SoundCloud ================================================== */ VCO.Media.SoundCloud = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-iframe vco-media-soundcloud vco-media-shadow", this._el.content); - + // Get Media ID this.media_id = this.data.url; - + // API URL api_url = "http://soundcloud.com/oembed?url=" + this.media_id + "&format=js&callback=?" - + // API Call VCO.getJSON(api_url, function(d) { self.createMedia(d); }); - + }, - + createMedia: function(d) { this._el.content_item.innerHTML = d.html; - + // After Loaded this.onLoaded(); } - + }); @@ -5794,47 +5794,47 @@ VCO.Media.SoundCloud = VCO.Media.extend({ ================================================== */ VCO.Media.Storify = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var content; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-iframe vco-media-storify", this._el.content); - + // Get Media ID this.media_id = this.data.url; - + // Content content = ""; content += ""; - + // API Call this._el.content_item.innerHTML = content; - + // After Loaded this.onLoaded(); }, - + // Update Media Display _updateMediaDisplay: function() { this._el.content_item.style.height = this.options.height + "px"; } - - + + }); VCO.Media.Text = VCO.Class.extend({ - + includes: [VCO.Events], - + // DOM ELEMENTS _el: { container: {}, @@ -5844,72 +5844,72 @@ VCO.Media.Text = VCO.Class.extend({ date: {}, start_btn: {} }, - + // Data data: { uniqueid: "", headline: "headline", text: "text" }, - + // Options options: { title: false }, - + /* Constructor ================================================== */ initialize: function(data, options, add_to_container) { - + VCO.Util.setData(this, data); - + // Merge Options VCO.Util.mergeData(this.options, options); - + this._el.container = VCO.Dom.create("div", "vco-text"); this._el.container.id = this.data.uniqueid; - + this._initLayout(); - + if (add_to_container) { add_to_container.appendChild(this._el.container); }; - + }, - + /* Adding, Hiding, Showing etc ================================================== */ show: function() { - + }, - + hide: function() { - + }, - + addTo: function(container) { container.appendChild(this._el.container); //this.onAdd(); }, - + removeFrom: function(container) { container.removeChild(this._el.container); }, - + headlineHeight: function() { return this._el.headline.offsetHeight + 40; }, - + addDateText: function(str) { this._el.date.innerHTML = str; }, - + /* Events ================================================== */ onLoaded: function() { this.fire("loaded", this.data); }, - + onAdd: function() { this.fire("added", this.data); }, @@ -5917,17 +5917,17 @@ VCO.Media.Text = VCO.Class.extend({ onRemove: function() { this.fire("removed", this.data); }, - + /* Private Methods ================================================== */ _initLayout: function () { - + // Create Layout this._el.content_container = VCO.Dom.create("div", "vco-text-content-container", this._el.container); - + // Date this._el.date = VCO.Dom.create("h3", "vco-headline-date", this._el.content_container); - + // Headline if (this.data.headline != "") { var headline_class = "vco-headline"; @@ -5937,39 +5937,39 @@ VCO.Media.Text = VCO.Class.extend({ this._el.headline = VCO.Dom.create("h2", headline_class, this._el.content_container); this._el.headline.innerHTML = this.data.headline; } - + // Text if (this.data.text != "") { var text_content = ""; - + text_content += VCO.Util.htmlify(this.data.text); - + // Date if (this.data.date && this.data.date.created_time && this.data.date.created_time != "") { if (this.data.date.created_time.length > 10) { if (typeof(moment) !== 'undefined') { text_content += "
" + moment(this.data.date.created_time, 'YYYY-MM-DD h:mm:ss').fromNow() + "
"; - + } else { text_content += "
" + VCO.Util.convertUnixTime(this.data.date.created_time) + "
"; } } } - - + + this._el.content = VCO.Dom.create("div", "vco-text-content", this._el.content_container); this._el.content.innerHTML = text_content; - + } - - + + // Fire event that the slide is loaded this.onLoaded(); - - - + + + } - + }); /* VCO.Media.Twitter @@ -5977,21 +5977,21 @@ VCO.Media.Text = VCO.Class.extend({ ================================================== */ VCO.Media.Twitter = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-twitter", this._el.content); - + // Get Media ID if (this.data.url.match("status\/")) { this.media_id = this.data.url.split("status\/")[1]; @@ -6000,10 +6000,10 @@ VCO.Media.Twitter = VCO.Media.extend({ } else { this.media_id = ""; } - + // API URL api_url = "https://api.twitter.com/1/statuses/oembed.json?id=" + this.media_id + "&omit_script=true&include_entities=true&callback=?"; - + // API Call VCO.ajax({ type: 'GET', @@ -6018,28 +6018,28 @@ VCO.Media.Twitter = VCO.Media.extend({ self.loadErrorDisplay(error_text); } }); - + }, - - createMedia: function(d) { - trace("create_media") + + createMedia: function(d) { + trace("create_media") var tweet = "", tweet_text = "", tweetuser = "", tweet_status_temp = "", tweet_status_url = "", tweet_status_date = ""; - + // TWEET CONTENT tweet_text = d.html.split("<\/p>\—")[0] + "

"; tweetuser = d.author_url.split("twitter.com\/")[1]; tweet_status_temp = d.html.split("<\/p>\—")[1].split("")[0]; tweet_status_date = tweet_status_temp.split("\"\>")[1].split("<\/a>")[0]; - + // TWEET CONTENT tweet += tweet_text; - + // TWEET AUTHOR tweet += "
"; tweet += ""; @@ -6051,26 +6051,26 @@ VCO.Media.Twitter = VCO.Media.extend({ tweet += ""; tweet += "
"; tweet += ""; - - + + // Add to DOM this._el.content_item.innerHTML = tweet; - + // After Loaded this.onLoaded(); - + }, - + updateMediaDisplay: function() { - + }, - + _updateMediaDisplay: function() { - + } - - - + + + }); @@ -6078,54 +6078,54 @@ VCO.Media.Twitter = VCO.Media.extend({ ================================================== */ VCO.Media.Vimeo = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-iframe vco-media-vimeo vco-media-shadow", this._el.content); - + // Get Media ID this.media_id = this.data.url.split(/video\/|\/\/vimeo\.com\//)[1].split(/[?&]/)[0]; - + // API URL api_url = "http://player.vimeo.com/video/" + this.media_id + "?api=1&title=0&byline=0&portrait=0&color=ffffff"; - + this.player = VCO.Dom.create("iframe", "", this._el.content_item); this.player.width = "100%"; this.player.height = "100%"; this.player.frameBorder = "0"; this.player.src = api_url; - + // After Loaded this.onLoaded(); }, - + // Update Media Display _updateMediaDisplay: function() { this._el.content_item.style.height = VCO.Util.ratio.r16_9({w:this._el.content_item.offsetWidth}) + "px"; - + }, - + _stopMedia: function() { - + try { this.player.contentWindow.postMessage(JSON.stringify({method: "pause"}), "http://player.vimeo.com"); } catch(err) { trace(err); } - + } - + }); @@ -6133,43 +6133,43 @@ VCO.Media.Vimeo = VCO.Media.extend({ ================================================== */ VCO.Media.DailyMotion = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-iframe vco-media-dailymotion", this._el.content); - + // Get Media ID if (this.data.url.match("video")) { this.media_id = this.data.url.split("video\/")[1].split(/[?&]/)[0]; } else { this.media_id = this.data.url.split("embed\/")[1].split(/[?&]/)[0]; } - + // API URL api_url = "http://www.dailymotion.com/embed/video/" + this.media_id; - + // API Call - this._el.content_item.innerHTML = "" - + this._el.content_item.innerHTML = "" + // After Loaded this.onLoaded(); }, - + // Update Media Display _updateMediaDisplay: function() { this._el.content_item.style.height = VCO.Util.ratio.r16_9({w:this._el.content_item.offsetWidth}) + "px"; } - + }); @@ -6178,40 +6178,40 @@ VCO.Media.DailyMotion = VCO.Media.extend({ ================================================== */ VCO.Media.Vine = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-iframe vco-media-vine vco-media-shadow", this._el.content); - + // Get Media ID this.media_id = this.data.url.split("vine.co/v/")[1]; - + // API URL api_url = "https://vine.co/v/" + this.media_id + "/embed/simple"; - + // API Call - this._el.content_item.innerHTML = "" - + this._el.content_item.innerHTML = "" + // After Loaded this.onLoaded(); }, - + // Update Media Display _updateMediaDisplay: function() { var size = VCO.Util.ratio.square({w:this._el.content_item.offsetWidth , h:this.options.height}); this._el.content_item.style.height = size.h + "px"; } - + }); @@ -6219,26 +6219,26 @@ VCO.Media.Vine = VCO.Media.extend({ ================================================== */ VCO.Media.Website = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { - - + + }, - - createMedia: function(d) { - + createMedia: function(d) { + + // After Loaded this.onLoaded(); - + } - - - + + + }); @@ -6246,37 +6246,37 @@ VCO.Media.Website = VCO.Media.extend({ ================================================== */ VCO.Media.Wikipedia = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var api_url, api_language, self = this; - + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-wikipedia", this._el.content); - + // Get Media ID this.media_id = this.data.url.split("wiki\/")[1].split("#")[0].replace("_", " "); this.media_id = this.media_id.replace(" ", "%20"); api_language = this.data.url.split("//")[1].split(".wikipedia")[0]; - + // API URL api_url = "http://" + api_language + ".wikipedia.org/w/api.php?action=query&prop=extracts&redirects=&titles=" + this.media_id + "&exintro=1&format=json&callback=?"; - + // API Call - + VCO.ajax({ type: 'GET', url: api_url, dataType: 'json', //json data type - + success: function(d){ self.createMedia(d); }, @@ -6286,12 +6286,12 @@ VCO.Media.Wikipedia = VCO.Media.extend({ self.loadErrorDisplay(error_text); } }); - + }, - + createMedia: function(d) { var wiki = ""; - + if (d.query) { var content, wiki = { @@ -6302,49 +6302,49 @@ VCO.Media.Wikipedia = VCO.Media.extend({ paragraphs: 1, text_array: [] }; - + wiki.entry = VCO.Util.getObjectAttributeByIndex(d.query.pages, 0); wiki.extract = wiki.entry.extract; wiki.title = wiki.entry.title; - + if (wiki.extract.match("

")) { wiki.text_array = wiki.extract.split("

"); } else { wiki.text_array.push(wiki.extract); } - + for(var i = 0; i < wiki.text_array.length; i++) { if (i+1 <= wiki.paragraphs && i+1 < wiki.text_array.length) { wiki.text += "

" + wiki.text_array[i+1]; } } - + content = "

" + wiki.title + "

"; content += "" + VCO.Language.messages.wikipedia + ""; content += wiki.text; - + if (wiki.extract.match("REDIRECT")) { - + } else { // Add to DOM this._el.content_item.innerHTML = content; // After Loaded this.onLoaded(); } - - + + } - + }, - + updateMediaDisplay: function() { - + }, - + _updateMediaDisplay: function() { - + } - + }); @@ -6352,30 +6352,30 @@ VCO.Media.Wikipedia = VCO.Media.extend({ ================================================== */ VCO.Media.YouTube = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { var self = this, url_vars; - - // Loading Message + + // Loading Message this.message.updateMessage(VCO.Language.messages.loading + " " + this.options.media_name); - + this.youtube_loaded = false; - + // Create Dom element this._el.content_item = VCO.Dom.create("div", "vco-media-item vco-media-youtube vco-media-shadow", this._el.content); this._el.content_item.id = VCO.Util.unique_ID(7) - + // URL Vars url_vars = VCO.Util.getUrlVars(this.data.url); - + // Get Media ID this.media_id = {}; - + if (this.data.url.match('v=')) { this.media_id.id = url_vars["v"]; } else if (this.data.url.match('\/embed\/')) { @@ -6385,23 +6385,23 @@ VCO.Media.YouTube = VCO.Media.extend({ } else { trace("YOUTUBE IN URL BUT NOT A VALID VIDEO"); } - + this.media_id.start = url_vars["t"]; this.media_id.hd = url_vars["hd"]; - - + + // API Call VCO.Load.js('https://www.youtube.com/player_api', function() { self.createMedia(); }); - + }, - + // Update Media Display _updateMediaDisplay: function() { this._el.content_item.style.height = VCO.Util.ratio.r16_9({w:this._el.content_item.offsetWidth}) + "px"; }, - + _stopMedia: function() { if (this.youtube_loaded) { try { @@ -6410,20 +6410,20 @@ VCO.Media.YouTube = VCO.Media.extend({ catch(err) { trace(err); } - + } }, - + createMedia: function() { var self = this; - + // Determine Start of Media if (typeof(this.media_id.start) != 'undefined') { - + var vidstart = this.media_id.start.toString(), vid_start_minutes = 0, vid_start_seconds = 0; - + if (vidstart.match('m')) { vid_start_minutes = parseInt(vidstart.split("m")[0], 10); vid_start_seconds = parseInt(vidstart.split("m")[1].split("s")[0], 10); @@ -6434,24 +6434,24 @@ VCO.Media.YouTube = VCO.Media.extend({ } else { this.media_id.start = 0; } - + // Determine HD if (typeof(this.media_id.hd) != 'undefined') { this.media_id.hd = true; } else { this.media_id.hd = false; } - + this.createPlayer(); - - + + }, - + createPlayer: function() { var self = this; - + clearTimeout(this.timer); - + if(typeof YT != 'undefined' && typeof YT.Player != 'undefined') { // Create Player this.player = new YT.Player(this._el.content_item.id, { @@ -6480,26 +6480,26 @@ VCO.Media.YouTube = VCO.Media.extend({ self.createPlayer(); }, 1000); } - + this.onLoaded(); - + }, - + /* Events ================================================== */ onPlayerReady: function(e) { - + this.youtube_loaded = true; this._el.content_item = document.getElementById(this._el.content_item.id); this.onMediaLoaded(); this.onLoaded(); }, - + onStateChange: function(e) { - + } - + }); @@ -6511,19 +6511,19 @@ VCO.Media.YouTube = VCO.Media.extend({ ================================================== */ VCO.Media.Slider = VCO.Media.extend({ - + includes: [VCO.Events], - + /* Load the media ================================================== */ _loadMedia: function() { - + this._el.content_item = VCO.Dom.create("img", "vco-media-item vco-media-image", this._el.content); this._el.content_item.src = this.data.url; - + this.onLoaded(); } - + }); /* VCO.Slide @@ -6532,15 +6532,15 @@ VCO.Media.Slider = VCO.Media.extend({ ================================================== */ VCO.Slide = VCO.Class.extend({ - + includes: [VCO.Events, VCO.DomMixins], - + _el: {}, - + /* Constructor ================================================== */ initialize: function(data, options, title_slide) { - + // DOM Elements this._el = { container: {}, @@ -6550,17 +6550,17 @@ VCO.Slide = VCO.Class.extend({ content: {}, call_to_action: null }; - + // Components this._media = null; this._mediaclass = {}; this._text = {}; - + // State this._state = { loaded: false }; - + this.has = { headline: false, text: false, @@ -6572,11 +6572,11 @@ VCO.Slide = VCO.Class.extend({ color_value :"" } } - + this.has.title = title_slide; - + this.title = ""; - + // Data this.data = { uniqueid: null, @@ -6586,7 +6586,7 @@ VCO.Slide = VCO.Class.extend({ text: null, media: null }; - + // Options this.options = { // animation @@ -6598,23 +6598,23 @@ VCO.Slide = VCO.Class.extend({ skinny_size: 650, media_name: "" }; - + // Actively Displaying this.active = false; - + // Animation Object this.animator = {}; - + // Merge Data and Options VCO.Util.mergeData(this.options, options); VCO.Util.mergeData(this.data, data); - + this._initLayout(); this._initEvents(); - - + + }, - + /* Adding, Hiding, Showing etc ================================================== */ show: function() { @@ -6624,14 +6624,14 @@ VCO.Slide = VCO.Class.extend({ easing: this.options.ease }); }, - + hide: function() { - + }, - + setActive: function(is_active) { this.active = is_active; - + if (this.active) { if (this.data.background) { this.fire("background_change", this.has.background); @@ -6641,58 +6641,58 @@ VCO.Slide = VCO.Class.extend({ this.stopMedia(); } }, - + addTo: function(container) { container.appendChild(this._el.container); //this.onAdd(); }, - + removeFrom: function(container) { container.removeChild(this._el.container); }, - + updateDisplay: function(w, h, l) { this._updateDisplay(w, h, l); }, - + loadMedia: function() { - + if (this._media && !this._state.loaded) { this._media.loadMedia(); this._state.loaded = true; } }, - + stopMedia: function() { if (this._media && this._state.loaded) { this._media.stopMedia(); } }, - + getBackground: function() { return this.has.background; }, - + scrollToTop: function() { this._el.container.scrollTop = 0; }, - + addCallToAction: function(str) { this._el.call_to_action = VCO.Dom.create("div", "vco-slide-calltoaction", this._el.content_container); this._el.call_to_action.innerHTML = "" + str + ""; VCO.DomEvent.addListener(this._el.call_to_action, 'click', this._onCallToAction, this); }, - + /* Events ================================================== */ _onCallToAction: function(e) { this.fire("call_to_action", e); }, - + /* Private Methods ================================================== */ _initLayout: function () { - + // Create Layout this._el.container = VCO.Dom.create("div", "vco-slide"); if (this.data.uniqueid) { @@ -6723,11 +6723,11 @@ VCO.Slide = VCO.Class.extend({ if (this.data.background.text_background) { this._el.container.className += ' vco-text-background'; } - - } - - - + + } + + + // Determine Assets for layout and loading if (this.data.media && this.data.media.url && this.data.media.url != "") { this.has.media = true; @@ -6739,25 +6739,25 @@ VCO.Slide = VCO.Class.extend({ this.has.headline = true; this.title = this.data.text.headline; } - + // Create Media if (this.has.media) { - + // Determine the media type this.data.media.mediatype = VCO.MediaType(this.data.media); this.options.media_name = this.data.media.mediatype.name; this.options.media_type = this.data.media.mediatype.type; - + // Create a media object using the matched class name this._media = new this.data.media.mediatype.cls(this.data.media, this.options); - + } - + // Create Text if (this.has.text || this.has.headline) { this._text = new VCO.Media.Text(this.data.text, {title:this.has.title}); } - + // Add to DOM if (!this.has.text && !this.has.headline && this.has.media) { this._el.container.className += ' vco-slide-media-only'; @@ -6773,26 +6773,26 @@ VCO.Slide = VCO.Class.extend({ this._el.container.className += ' vco-slide-text-only'; this._text.addTo(this._el.content); } - + // Fire event that the slide is loaded this.onLoaded(); - + }, - + _initEvents: function() { - + }, - + // Update Display _updateDisplay: function(width, height, layout) { var pad_left, pad_right, new_width; - + if (width) { this.options.width = width; } else { this.options.width = this._el.container.offsetWidth; } - + if(VCO.Browser.mobile && (this.options.width <= this.options.skinny_size)) { pad_left = 0 + "px"; pad_right = 0 + "px"; @@ -6801,7 +6801,7 @@ VCO.Slide = VCO.Class.extend({ pad_left = 40 + "px"; pad_right = 75 + "px"; new_width = this.options.width - (75 + 40) + "px"; - + } else if (this.options.width <= this.options.skinny_size) { pad_left = this.options.slide_padding_lr + "px"; pad_right = this.options.slide_padding_lr + "px"; @@ -6811,25 +6811,25 @@ VCO.Slide = VCO.Class.extend({ pad_right = this.options.slide_padding_lr + "px"; new_width = this.options.width - (this.options.slide_padding_lr * 2) + "px"; } - + this._el.content.style.paddingLeft = pad_left; this._el.content.style.paddingRight = pad_right; this._el.content.style.width = new_width; - + if (this._el.call_to_action) { this._el.call_to_action.style.paddingLeft = pad_left; this._el.call_to_action.style.paddingRight = pad_right; this._el.call_to_action.style.width = new_width; } - + if (height) { this.options.height = height; //this._el.scroll_container.style.height = this.options.height + "px"; - + } else { this.options.height = this._el.container.offsetHeight; } - + if (this._media) { if (!this.has.text && this.has.headline) { this._media.updateDisplay(this.options.width, (this.options.height - this._text.headlineHeight()), layout); @@ -6837,9 +6837,9 @@ VCO.Slide = VCO.Class.extend({ this._media.updateDisplay(this.options.width, this.options.height, layout); } } - + } - + }); @@ -6849,11 +6849,11 @@ VCO.Slide = VCO.Class.extend({ // TODO null out data VCO.SlideNav = VCO.Class.extend({ - + includes: [VCO.Events, VCO.DomMixins], - + _el: {}, - + /* Constructor ================================================== */ initialize: function(data, options, add_to_container) { @@ -6865,50 +6865,50 @@ VCO.SlideNav = VCO.Class.extend({ title: {}, description: {} }; - + // Media Type this.mediatype = {}; - + // Data this.data = { title: "Navigation", description: "Description" }; - + //Options this.options = { direction: "previous" }; - + this.animator = null; this.animator_position = null; - + // Merge Data and Options VCO.Util.mergeData(this.options, options); VCO.Util.mergeData(this.data, data); - - + + this._el.container = VCO.Dom.create("div", "vco-slidenav-" + this.options.direction); - + if (VCO.Browser.mobile) { this._el.container.setAttribute("ontouchstart"," "); } - + this._initLayout(); this._initEvents(); - + if (add_to_container) { add_to_container.appendChild(this._el.container); }; - + }, - + /* Update Content ================================================== */ update: function(d) { this._update(d); }, - + /* Color ================================================== */ setColor: function(inverted) { @@ -6918,7 +6918,7 @@ VCO.SlideNav = VCO.Class.extend({ this._el.content_container.className = 'vco-slidenav-content-container'; } }, - + /* Position ================================================== */ updatePosition: function(pos, use_percent, duration, ease, start_value, return_to_default) { @@ -6931,7 +6931,7 @@ VCO.SlideNav = VCO.Class.extend({ } }; var _start_value = start_value; - + for (var name in pos) { if (pos.hasOwnProperty(name)) { if (use_percent) { @@ -6939,14 +6939,14 @@ VCO.SlideNav = VCO.Class.extend({ } else { ani[name] = pos[name] + "px"; } - + } } - + if (this.animator_position) { this.animator_position.stop(); } - + var prop_to_set; if (ani.right) { prop_to_set = "right"; @@ -6958,59 +6958,59 @@ VCO.SlideNav = VCO.Class.extend({ } else { this._el.container.style[prop_to_set] = _start_value + "px"; } - + this.animator_position = VCO.Animate(this._el.container, ani); }, - + _onUpdatePositionComplete: function(return_to_default) { if (return_to_default) { this._el.container.style.left = ""; this._el.container.style.right = ""; } }, - + /* Events ================================================== */ _onMouseClick: function() { this.fire("clicked", this.options); }, - + /* Private Methods ================================================== */ _update: function(d) { // update data this.data = VCO.Util.mergeData(this.data, d); - + // Title if (this.data.title != "") { this._el.title.innerHTML = this.data.title; } - + // Date if (this.data.date != "") { this._el.description.innerHTML = this.data.description; } }, - + _initLayout: function () { - + // Create Layout this._el.content_container = VCO.Dom.create("div", "vco-slidenav-content-container", this._el.container); this._el.icon = VCO.Dom.create("div", "vco-slidenav-icon", this._el.content_container); this._el.title = VCO.Dom.create("div", "vco-slidenav-title", this._el.content_container); this._el.description = VCO.Dom.create("div", "vco-slidenav-description", this._el.content_container); - + this._el.icon.innerHTML = " " - + this._update(); }, - + _initEvents: function () { VCO.DomEvent.addListener(this._el.container, 'click', this._onMouseClick, this); } - - + + }); /* StorySlider @@ -7025,17 +7025,17 @@ VCO.SlideNav = VCO.Class.extend({ slideLoaded slideRemoved - + ================================================== */ VCO.StorySlider = VCO.Class.extend({ - + includes: VCO.Events, - + /* Private Methods ================================================== */ initialize: function (elem, data, options, init) { - + // DOM ELEMENTS this._el = { container: {}, @@ -7044,35 +7044,35 @@ VCO.StorySlider = VCO.Class.extend({ slider_container: {}, slider_item_container: {} }; - + this._nav = {}; this._nav.previous = {}; this._nav.next = {}; - + // Slide Spacing this.slide_spacing = 0; - + // Slides Array this._slides = []; - + // Swipe Object this._swipable; - + // Preload Timer this.preloadTimer; - + // Message this._message; - + // Current Slide this.current_slide = 0; - + // Current Background Color this.current_bg_color = null; - + // Data Object this.data = {}; - + this.options = { id: "", layout: "portrait", @@ -7089,7 +7089,7 @@ VCO.StorySlider = VCO.Class.extend({ dragging: true, trackResize: true }; - + // Main element ID if (typeof elem === 'object') { this._el.container = elem; @@ -7102,49 +7102,49 @@ VCO.StorySlider = VCO.Class.extend({ if (!this._el.container.id) { this._el.container.id = this.options.id; } - + // Animation Object this.animator = null; this.animator_background = null; - + // Merge Data and Options VCO.Util.mergeData(this.options, options); VCO.Util.mergeData(this.data, data); - + if (init) { this.init(); } }, - + init: function() { this._initLayout(); this._initEvents(); this._initData(); this._updateDisplay(); - + // Go to initial slide this.goTo(this.options.start_at_slide); - + this._onLoaded(); this._introInterface(); }, - + /* Public ================================================== */ updateDisplay: function(w, h, a, l) { this._updateDisplay(w, h, a, l); }, - + // Create a slide createSlide: function(d) { this._createSlide(d); }, - + // Create Many Slides from an array createSlides: function(array) { this._createSlides(array); }, - + /* Create Slides ================================================== */ _createSlides: function(array) { @@ -7157,16 +7157,16 @@ VCO.StorySlider = VCO.Class.extend({ } else { this._createSlide(array[i], false); } - + }; }, - + _createSlide: function(d, title_slide) { var slide = new VCO.Slide(d, this.options, title_slide); this._addSlide(slide); this._slides.push(slide); }, - + _destroySlide: function(slide) { this._removeSlide(slide); for (var i = 0; i < this._slides.length; i++) { @@ -7175,22 +7175,22 @@ VCO.StorySlider = VCO.Class.extend({ } } }, - + _addSlide:function(slide) { slide.addTo(this._el.slider_item_container); slide.on('added', this._onSlideAdded, this); slide.on('background_change', this._onBackgroundChange, this); }, - + _removeSlide: function(slide) { slide.removeFrom(this._el.slider_item_container); slide.off('added', this._onSlideAdded, this); slide.off('background_change', this._onBackgroundChange); }, - + /* Message ================================================== */ - + /* Navigation ================================================== */ goToId: function(n, fast, displayupdate) { @@ -7200,29 +7200,29 @@ VCO.StorySlider = VCO.Class.extend({ _n = n; } this.goTo(_n, fast, displayupdate); - + }, - + goTo: function(n, fast, displayupdate) { var self = this; - + this.changeBackground({color_value:"", image:false}); - + // Clear Preloader Timer if (this.preloadTimer) { clearTimeout(this.preloadTimer); } - + // Set Slide Active State for (var i = 0; i < this._slides.length; i++) { this._slides[i].setActive(false); } - + if (n < this._slides.length && n >= 0) { - - + + this.current_slide = n; - + // Stop animation if (this.animator) { this.animator.stop(); @@ -7230,7 +7230,7 @@ VCO.StorySlider = VCO.Class.extend({ if (this._swipable) { this._swipable.stopMomentum(); } - + if (fast) { this._el.slider_container.style.left = -(this.slide_spacing * n) + "px"; this._onSlideChange(displayupdate); @@ -7241,12 +7241,12 @@ VCO.StorySlider = VCO.Class.extend({ easing: this.options.ease, complete: this._onSlideChange(displayupdate) }); - + } - + // Set Slide Active State this._slides[this.current_slide].setActive(true); - + // Update Navigation and Info if (this._slides[this.current_slide + 1]) { this.showNav(this._nav.next, true); @@ -7260,16 +7260,16 @@ VCO.StorySlider = VCO.Class.extend({ } else { this.showNav(this._nav.previous, false); } - - + + // Preload Slides this.preloadTimer = setTimeout(function() { self.preloadSlides(); }, this.options.duration); - + } }, - + preloadSlides: function() { if (this._slides[this.current_slide + 1]) { this._slides[this.current_slide + 1].loadMedia(); @@ -7288,14 +7288,14 @@ VCO.StorySlider = VCO.Class.extend({ this._slides[this.current_slide - 2].scrollToTop(); } }, - - + + getNavInfo: function(slide) { var n = { title: "", description: "" }; - + if (slide.data.text) { if (slide.data.text.headline) { n.title = slide.data.text.headline; @@ -7309,11 +7309,11 @@ VCO.StorySlider = VCO.Class.extend({ } */ } - + return n; - + }, - + next: function() { if ((this.current_slide +1) < (this._slides.length)) { this.goTo(this.current_slide +1); @@ -7321,7 +7321,7 @@ VCO.StorySlider = VCO.Class.extend({ this.goTo(this.current_slide); } }, - + previous: function() { if (this.current_slide -1 >= 0) { this.goTo(this.current_slide -1); @@ -7329,25 +7329,25 @@ VCO.StorySlider = VCO.Class.extend({ this.goTo(this.current_slide); } }, - + showNav: function(nav_obj, show) { - + if (this.options.width <= 500 && VCO.Browser.mobile) { - + } else { if (show) { nav_obj.show(); } else { nav_obj.hide(); } - + } }, - + changeBackground: function(bg) { var self = this, do_animation = false; - + var bg_color = {r:256, g:256, b:256}, bg_color_rgb, bg_percent_start = this.options.slide_default_fade, @@ -7355,59 +7355,59 @@ VCO.StorySlider = VCO.Class.extend({ bg_alpha_end = "0.87", bg_css = "", bg_old = this._el.background.getAttribute('style'); - + if (bg.color_value) { bg_color = VCO.Util.hexToRgb(bg.color_value); } else { bg_color = this.options.default_bg_color; } - - + + // Stop animation if (this.animator_background) { this.animator_background.stop(); } - + bg_color_rgb = bg_color.r + "," + bg_color.g + "," + bg_color.b; - + if (!this.current_bg_color || this.current_bg_color != bg_color_rgb) { this.current_bg_color = bg_color_rgb; do_animation = true; - } - - - + } + + + if (do_animation) { // Figure out CSS if (this.options.layout == "landscape") { - + this._nav.next.setColor(false); this._nav.previous.setColor(false); - + // If background is not white, less fade is better if (bg_color.r < 255 && bg_color.g < 255 && bg_color.b < 255) { bg_percent_start = "15%"; } - + if (bg.image) { bg_percent_start = "0%"; - - } + + } bg_css += "opacity:0;" bg_css += "background-image: -webkit-linear-gradient(left, color-stop(rgba(" + bg_color_rgb + ",0.0001 ) " + bg_percent_start + "), color-stop(rgba(" + bg_color_rgb + "," + bg_alpha_end + ") " + bg_percent_end + "));"; bg_css += "background-image: linear-gradient(to right, rgba(" + bg_color_rgb + ",0.0001 ) "+ bg_percent_start + ", rgba(" + bg_color_rgb + "," + bg_alpha_end + ") " + bg_percent_end + ");"; bg_css += "background-repeat: repeat-x;"; bg_css += "filter: e(%('progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)',argb(" + bg_color_rgb + ", 0.0001),argb(" + bg_color_rgb + ",0.80)));"; - - + + } else { if (bg.color_value) { bg_css += 'background-color:' + bg.color_value + ";"; } else { bg_css += "background-color:#FFF;"; } - + if (bg_color.r < 255 && bg_color.g < 255 && bg_color.b < 255 || bg.image) { this._nav.next.setColor(true); this._nav.previous.setColor(true); @@ -7416,7 +7416,7 @@ VCO.StorySlider = VCO.Class.extend({ this._nav.previous.setColor(false); } } - + // FADE OUT IN this.animator_background = VCO.Animate(this._el.background, { opacity: 0, @@ -7427,76 +7427,76 @@ VCO.StorySlider = VCO.Class.extend({ } }); } - - + + }, - + fadeInBackground: function(bg_css) { if (this.animator_background) { this.animator_background.stop(); } - + if (bg_css) { this._el.background.setAttribute("style", bg_css); } - + this.animator_background = VCO.Animate(this._el.background, { opacity: 1, duration: this.options.duration/2, easing: this.options.ease }); - + }, - + /* Private Methods ================================================== */ - + // Update Display _updateDisplay: function(width, height, animate, layout) { var nav_pos, _layout; - + if(typeof layout === 'undefined'){ _layout = this.options.layout; } else { _layout = layout; } - + this.options.layout = _layout; - + this.slide_spacing = this.options.width*2; - + if (width) { this.options.width = width; } else { this.options.width = this._el.container.offsetWidth; } - + if (height) { this.options.height = height; } else { this.options.height = this._el.container.offsetHeight; } - + //this._el.container.style.height = this.options.height; - + // position navigation nav_pos = (this.options.height/2); this._nav.next.setPosition({top:nav_pos}); this._nav.previous.setPosition({top:nav_pos}); - - + + // Position slides for (var i = 0; i < this._slides.length; i++) { this._slides[i].updateDisplay(this.options.width, this.options.height, _layout); this._slides[i].setPosition({left:(this.slide_spacing * i), top:0}); }; - + // Go to the current slide this.goTo(this.current_slide, true, true); }, - + _introInterface: function() { - + if (this.options.call_to_action) { var _str = VCO.Language.messages.start; if (this.options.call_to_action_text != "") { @@ -7505,44 +7505,44 @@ VCO.StorySlider = VCO.Class.extend({ this._slides[0].addCallToAction(_str); this._slides[0].on('call_to_action', this.next, this); } - + if (this.options.width <= this.options.skinny_size) { - + } else { this._nav.next.updatePosition({right:"130"}, false, this.options.duration*3, this.options.ease, -100, true); this._nav.previous.updatePosition({left:"-100"}, true, this.options.duration*3, this.options.ease, -200, true); } }, - + /* Init ================================================== */ _initLayout: function () { - + this._el.container.className += ' vco-storyslider'; - + // Create Layout this._el.slider_container_mask = VCO.Dom.create('div', 'vco-slider-container-mask', this._el.container); - this._el.background = VCO.Dom.create('div', 'vco-slider-background', this._el.container); + this._el.background = VCO.Dom.create('div', 'vco-slider-background', this._el.container); this._el.slider_container = VCO.Dom.create('div', 'vco-slider-container vcoanimate', this._el.slider_container_mask); this._el.slider_item_container = VCO.Dom.create('div', 'vco-slider-item-container', this._el.slider_container); - - + + // Update Size this.options.width = this._el.container.offsetWidth; this.options.height = this._el.container.offsetHeight; - + // Create Navigation this._nav.previous = new VCO.SlideNav({title: "Previous", description: "description"}, {direction:"previous"}); this._nav.next = new VCO.SlideNav({title: "Next",description: "description"}, {direction:"next"}); - + // add the navigation to the dom this._nav.next.addTo(this._el.container); this._nav.previous.addTo(this._el.container); - - - + + + this._el.slider_container.style.left="0px"; - + if (VCO.Browser.touch) { //this._el.slider_touch_mask = VCO.Dom.create('div', 'vco-slider-touch-mask', this._el.slider_container_mask); this._swipable = new VCO.Swipable(this._el.slider_container_mask, this._el.slider_container, { @@ -7550,7 +7550,7 @@ VCO.StorySlider = VCO.Class.extend({ snap: true }); this._swipable.enable(); - + // Message this._message = new VCO.Message({}, { message_class: "vco-message-full", @@ -7560,29 +7560,29 @@ VCO.StorySlider = VCO.Class.extend({ this._message.addTo(this._el.container); } }, - + _initEvents: function () { this._nav.next.on('clicked', this._onNavigation, this); this._nav.previous.on('clicked', this._onNavigation, this); - + if (this._message) { this._message.on('clicked', this._onMessageClick, this); } - + if (this._swipable) { this._swipable.on('swipe_left', this._onNavigation, this); this._swipable.on('swipe_right', this._onNavigation, this); this._swipable.on('swipe_nodirection', this._onSwipeNoDirection, this); } - - + + }, - + _initData: function() { // Create Slides and then add them this._createSlides(this.data.slides); }, - + /* Events ================================================== */ _onBackgroundChange: function(e) { @@ -7590,45 +7590,45 @@ VCO.StorySlider = VCO.Class.extend({ this.changeBackground(e); this.fire("colorchange", slide_background); }, - + _onMessageClick: function(e) { this._message.hide(); }, - + _onSwipeNoDirection: function(e) { this.goTo(this.current_slide); }, - + _onNavigation: function(e) { - + if (e.direction == "next" || e.direction == "left") { this.next(); } else if (e.direction == "previous" || e.direction == "right") { this.previous(); - } + } this.fire("nav_" + e.direction, this.data); }, - + _onSlideAdded: function(e) { trace("slideadded") this.fire("slideAdded", this.data); }, - + _onSlideRemoved: function(e) { this.fire("slideAdded", this.data); }, - + _onSlideChange: function(displayupdate) { - + if (!displayupdate) { this.fire("change", {current_slide:this.current_slide, uniqueid:this._slides[this.current_slide].data.uniqueid}); } }, - + _onMouseClick: function(e) { - + }, - + _fireMouseEvent: function (e) { if (!this._loaded) { return; @@ -7644,20 +7644,20 @@ VCO.StorySlider = VCO.Class.extend({ if (type === 'contextmenu') { VCO.DomEvent.preventDefault(e); } - + this.fire(type, { latlng: "something", //this.mouseEventToLatLng(e), layerPoint: "something else" //this.mouseEventToLayerPoint(e) }); }, - + _onLoaded: function() { this.fire("loaded", this.data); this.fire("title", {title:this._slides[0].title}); - + } - - + + }); @@ -11621,7 +11621,7 @@ L.Marker = L.Class.extend({ if (options.title) { icon.title = options.title; } - + if (options.alt) { icon.alt = options.alt; } @@ -14291,7 +14291,7 @@ L.Control.Attribution = L.Control.extend({ this.addAttribution(map._layers[i].getAttribution()); } } - + map .on('layeradd', this._onLayerAdd, this) .on('layerremove', this._onLayerRemove, this); @@ -14908,25 +14908,25 @@ L.TileLayer.Zoomify = L.TileLayer.extend({ //map.setView(center, zoom, true); }, - + getZoomifyBounds: function(map) { //return "getZoomifyBounds"; var imageSize = this._imageSize[0], topleft = map.options.crs.pointToLatLng(L.point(0, 0), 0), bottomright = map.options.crs.pointToLatLng(L.point(imageSize.x, imageSize.y), 0), bounds = L.latLngBounds(topleft, bottomright); - - + + return bounds; //[[75, -132], [-30, 128]] }, - + getCenterZoom: function(map) { var mapSize = map.getSize(), zoom = this._getBestFitZoom(mapSize), imageSize = this._imageSize[zoom], center = map.options.crs.pointToLatLng(L.point(imageSize.x / 2, imageSize.y / 2), zoom); - + return { center: center, lat: center.lat, @@ -14949,7 +14949,7 @@ L.TileLayer.Zoomify = L.TileLayer.extend({ imageSize = this._imageSize[zoom]; if (imageSize.x * tolerance < mapSize.x && imageSize.y * tolerance < mapSize.y) { return zoom; - } + } zoom--; } @@ -14976,11 +14976,11 @@ L.TileLayer.Zoomify = L.TileLayer.extend({ if (tilePoint.x === gridSize.x - 1) { tile.style.width = imageSize.x - (tileSize * (gridSize.x - 1)) + 'px'; - } + } if (tilePoint.y === gridSize.y - 1) { - tile.style.height = imageSize.y - (tileSize * (gridSize.y - 1)) + 'px'; - } + tile.style.height = imageSize.y - (tileSize * (gridSize.y - 1)) + 'px'; + } L.DomUtil.setPosition(tile, tilePos, L.Browser.chrome || L.Browser.android23); @@ -15003,8 +15003,8 @@ L.TileLayer.Zoomify = L.TileLayer.extend({ for (z = 0; z < zoom; z++) { gridSize = this._gridSize[z]; - num += gridSize.x * gridSize.y; - } + num += gridSize.x * gridSize.y; + } num += tilePoint.y * this._gridSize[zoom].x + tilePoint.x; return Math.floor(num / 256);; @@ -15018,7 +15018,7 @@ L.tileLayer.zoomify = function (url, options) { /* https://github.com/Norkart/Leaflet-MiniMap - + */ L.Control.MiniMap = L.Control.extend({ @@ -15102,7 +15102,7 @@ L.Control.MiniMap = L.Control.extend({ this._miniMap.whenReady(L.Util.bind(function() { this._aimingRect = L.rectangle(this._mainMap.getBounds(), this.options.aimingRectOptions).addTo(this._miniMap); this._shadowRect = L.rectangle(this._mainMap.getBounds(), this.options.shadowRectOptions).addTo(this._miniMap); - + this._locationCircle = L.circleMarker(this._mainMap.getCenter(), { fillColor: "#c34528", color: "#FFFFFF", @@ -15114,7 +15114,7 @@ L.Control.MiniMap = L.Control.extend({ clickable: false }).addTo(this._miniMap); this._locationCircle.setRadius(5); - + this._mainMap.on('moveend', this._onMainMapMoved, this); this._mainMap.on('move', this._onMainMapMoving, this); //this._miniMap.on('movestart', this._onMiniMapMoveStarted, this); @@ -15127,13 +15127,13 @@ L.Control.MiniMap = L.Control.extend({ return this._container; }, - + minimize: function(hide_completely) { if (!this._minimized) { this._minimize(); } }, - + restore: function() { if (this._minimized) { this._restore(); @@ -15227,7 +15227,7 @@ L.Control.MiniMap = L.Control.extend({ this._aimingRect.setBounds(this._mainMap.getBounds()); } this._locationCircle.setLatLng(this._mainMap.getCenter()); - + }, _onMainMapMoving: function(e) { @@ -15304,7 +15304,7 @@ L.Control.MiniMap = L.Control.extend({ } else { return this._mainMap.getZoom(); } - + } }, @@ -15417,7 +15417,7 @@ L.control.minimap = function(options) { } } - /* Get the named provider, or throw an exception + /* Get the named provider, or throw an exception if it doesn't exist. ================================================== */ function getProvider(name) { @@ -15472,7 +15472,7 @@ L.control.minimap = function(options) { var provider = getProvider(name), url = provider.url.replace(/({[A-Z]})/g, function(s) { return s.toLowerCase(); - }), + }), _options = { minZoom: provider.minZoom, maxZoom: provider.maxZoom, @@ -15480,11 +15480,11 @@ L.control.minimap = function(options) { scheme: "xyz", attribution: provider.attribution }; - + if (options) { VCO.Util.mergeData(_options, options); } - + L.TileLayer.prototype.initialize.call(this, url, _options); } }); @@ -15529,41 +15529,41 @@ L.control.minimap = function(options) { ================================================== */ VCO.MapMarker = VCO.Class.extend({ - + includes: [VCO.Events], - + /* Constructor ================================================== */ initialize: function(data, options) { - + // DOM Elements this._el = { container: {}, content_container: {}, content: {} }; - + // Components this._marker = {}; - + // Icon this._icon = {}; this._custom_icon = false; this._custom_icon_url = ""; this._custom_image_icon = false; - + // Marker Number this.marker_number = 0; - + // Media Icon this.media_icon_class = ""; - + // Timer this.timer = {}; - + // Data this.data = {}; - + // Options this.options = { // animation @@ -15574,102 +15574,102 @@ VCO.MapMarker = VCO.Class.extend({ map_popup: false, use_custom_markers: false }; - - + + // Animation Object this.animator = null; - + // Merge Data and Options VCO.Util.mergeData(this.options, options); VCO.Util.mergeData(this.data, data); - + this._initLayout(); - - + + }, - + /* Public ================================================== */ show: function() { - + }, - + hide: function() { - + }, - + addTo: function(m) { this._addTo(m); }, - + removeFrom: function(m) { this._removeFrom(m) }, - + updateDisplay: function(w, h, a) { this._updateDisplay(w, h, a); }, - + createMarker: function(d, o) { this._createMarker(d, o); }, - + createPopup: function(d, o) { this._createPopup(d, o); }, - + active: function(a) { this._active(a); }, - + location: function() { return this._location(); }, - + /* Marker Specific Specific to Map API ================================================== */ _createMarker: function(d, o) { - + }, - + _addTo: function(m) { - + }, - + _removeFrom: function(m) { - + }, - + _createPopup: function(d, o) { - + }, - + _active: function(a) { - + }, - + _location: function() { return {lat:0, lng:0} }, - + /* Events ================================================== */ _onMarkerClick: function(e) { this.fire("markerclick", {marker_number: this.marker_number}); }, - + /* Private Methods ================================================== */ _initLayout: function () { this._createMarker(this.data, this.options); }, - + // Update Display _updateDisplay: function(width, height, animate) { - + } - + }); @@ -15682,13 +15682,13 @@ VCO.MapMarker = VCO.Class.extend({ ================================================== */ - + VCO.Map = VCO.Class.extend({ - + includes: [VCO.Events, VCO.DomMixins], - + _el: {}, - + /* Constructor ================================================== */ initialize: function(elem, data, options) { @@ -15698,59 +15698,59 @@ VCO.Map = VCO.Class.extend({ map: {}, map_mask: {} }; - + if (typeof elem === 'object') { this._el.container = elem; } else { this._el.container = VCO.Dom.get(elem); } - + // LOADED this._loaded = { data: false, map: false }; - + // MAP this._map = null; - + // MINI MAP this._mini_map = null; - + // Markers this._markers = []; - + // Marker Zoom Miniumum and Maximum this.zoom_min_max = { min: null, max: null }; - + // Line this._line = null; this._line_active = null; - + // Current Marker this.current_marker = 0; - + // Markers Bounds Array this.bounds_array = null; - + // Map Tiles Layer this._tile_layer = null; - + // Map Tiles Layer for Mini Map this._tile_layer_mini = null; - + // Image Layer (for zoomify) this._image_layer = null; - + // Data this.data = { uniqueid: "", slides: [{test:"yes"}, {test:"yes"}, {test:"yes"}] }; - + //Options this.options = { map_type: "stamen:toner-lite", @@ -15769,12 +15769,12 @@ VCO.Map = VCO.Class.extend({ less_bounce: true, path_gfx: "gfx", start_at_slide: 0, - map_popup: false, + map_popup: false, zoom_distance: 100, calculate_zoom: true, // Allow map to determine best zoom level between markers (recommended) line_follows_path: true, // Map history path follows default line, if false it will connect previous and current only line_color: "#333", - line_color_inactive: "#000", + line_color_inactive: "#000", line_weight: 5, line_opacity: 0.20, line_dash: "5,5", @@ -15784,54 +15784,54 @@ VCO.Map = VCO.Class.extend({ use_custom_markers: false, map_center_offset: null // takes object {top:0,left:0} }; - + // Animation this.animator = null; - + // Timer this.timer = null; - + // Touchpad Events this.touch_scale = 1; this.scroll = { start_time: null }; - + // Merge Data and Options VCO.Util.mergeData(this.options, options); VCO.Util.mergeData(this.data, data); - + this._initLayout(); this._initEvents(); this._createMap(); this._initData(); - - + + }, - + /* Public ================================================== */ updateDisplay: function(w, h, animate, d, offset) { this._updateDisplay(w, h, animate, d, offset); }, - + goTo: function(n, change) { if (n < this._markers.length && n >= 0) { var zoom = 0, previous_marker = this.current_marker; - + this.current_marker = n; - + var marker = this._markers[this.current_marker]; - + // Stop animation if (this.animator) { this.animator.stop(); } - + // Reset Active Markers this._resetMarkersActive(); - + // Check to see if it's an overview if (marker.data.type && marker.data.type == "overview") { this._markerOverview(); @@ -15841,32 +15841,32 @@ VCO.Map = VCO.Class.extend({ } else { // Make marker active marker.active(true); - + if (change) { // Set Map View if (marker.data.location) { this._viewTo(marker.data.location); } else { - + } - - + + } else { if (marker.data.location && marker.data.location.lat) { - + // Calculate Zoom zoom = this._calculateZoomChange(this._getMapCenter(true), marker.location()); - + // Set Map View this._viewTo(marker.data.location, {calculate_zoom: this.options.calculate_zoom, zoom:zoom}); - + // Show Line if (this.options.line_follows_path) { if (this.options.show_history_line && marker.data.real_marker && this._markers[previous_marker].data.real_marker) { var lines_array = [], line_num = previous_marker, point; - + if (line_num < this.current_marker) { while (line_num < this.current_marker) { if (this._markers[line_num].data.location && this._markers[line_num].data.location.lat) { @@ -15876,7 +15876,7 @@ VCO.Map = VCO.Class.extend({ } lines_array.push(point); } - + line_num++; } } else if (line_num > this.current_marker) { @@ -15888,16 +15888,16 @@ VCO.Map = VCO.Class.extend({ } lines_array.push(point); } - + line_num--; } } - + lines_array.push({ lat:marker.data.location.lat, lon:marker.data.location.lon }); - + this._replaceLines(this._line_active, lines_array); } } else { @@ -15907,87 +15907,87 @@ VCO.Map = VCO.Class.extend({ { lat:marker.data.location.lat, lon:marker.data.location.lon - }, + }, { lat:this._markers[previous_marker].data.location.lat, lon:this._markers[previous_marker].data.location.lon } ]) } - + } } else { this._markerOverview(); if (!change) { this._onMarkerChange(); } - + } // Fire Event this._onMarkerChange(); - + } - + } - + } }, - + panTo: function(loc, animate) { this._panTo(loc, animate); }, - + zoomTo: function(z, animate) { this._zoomTo(z, animate); }, - + viewTo: function(loc, opts) { this._viewTo(loc, opts); }, - + getBoundsZoom: function(m1, m2, inside, padding) { this.__getBoundsZoom(m1, m2, inside, padding); // (LatLngBounds[, Boolean, Point]) -> Number }, - + markerOverview: function() { this._markerOverview(); }, - + calculateMarkerZooms: function() { this._calculateMarkerZooms(); }, - + createMiniMap: function() { this._createMiniMap(); }, - + setMapOffset: function(left, top) { // Update Component Displays this.options.map_center_offset.left = left; this.options.map_center_offset.top = top; }, - + calculateMinMaxZoom: function() { for (var i = 0; i < this._markers.length; i++) { - + if (this._markers[i].data.location && this._markers[i].data.location.zoom) { this.updateMinMaxZoom(this._markers[i].data.location.zoom); } - + } trace("MAX ZOOM: " + this.zoom_min_max.max + " MIN ZOOM: " + this.zoom_min_max.min); }, - + updateMinMaxZoom: function(zoom) { if (!this.zoom_min_max.max) { this.zoom_min_max.max = zoom; } - + if (!this.zoom_min_max.min) { this.zoom_min_max.min = zoom; } - + if (this.zoom_min_max.max < zoom) { this.zoom_min_max.max = zoom; } @@ -15995,44 +15995,44 @@ VCO.Map = VCO.Class.extend({ this.zoom_min_max.min = zoom; } }, - + initialMapLocation: function() { if (this._loaded.data && this._loaded.map) { this.goTo(this.options.start_at_slide, true); this._initialMapLocation(); } }, - + /* Adding, Hiding, Showing etc ================================================== */ show: function() { - + }, - + hide: function() { - + }, - + addTo: function(container) { container.appendChild(this._el.container); this.onAdd(); }, - + removeFrom: function(container) { container.removeChild(this._el.container); this.onRemove(); }, - + /* Adding and Removing Markers ================================================== */ createMarkers: function(array) { this._createMarkers(array) }, - + createMarker: function(d) { this._createMarker(d); }, - + _destroyMarker: function(marker) { this._removeMarker(marker); for (var i = 0; i < this._markers.length; i++) { @@ -16042,7 +16042,7 @@ VCO.Map = VCO.Class.extend({ } this.fire("markerRemoved", marker); }, - + _createMarkers: function(array) { for (var i = 0; i < array.length; i++) { this._createMarker(array[i]); @@ -16050,34 +16050,34 @@ VCO.Map = VCO.Class.extend({ this._addToLine(this._line, array[i]); } }; - + }, - + _createLines: function(array) { - + }, - - + + /* Map Specific ================================================== */ - + /* Map Specific Create ================================================== */ // Extend this map class and use this to create the map using preferred API _createMap: function() { - + }, - + /* Mini Map Specific Create ================================================== */ // Extend this map class and use this to create the map using preferred API _createMiniMap: function() { - + }, - + /* Map Specific Marker ================================================== */ - + // Specific Marker Methods based on preferred Map API _createMarker: function(d) { var marker = {}; @@ -16087,198 +16087,198 @@ VCO.Map = VCO.Class.extend({ marker.marker_number = this._markers.length - 1; this.fire("markerAdded", marker); }, - + _addMarker: function(marker) { - + }, - + _removeMarker: function(marker) { - + }, - + _resetMarkersActive: function() { for (var i = 0; i < this._markers.length; i++) { this._markers[i].active(false); }; }, - + _calculateMarkerZooms: function() { - + }, - + /* Map Specific Line ================================================== */ - + _createLine: function(d) { return {data: d}; }, - + _addToLine: function(line, d) { - + }, - + _replaceLines: function(line, d) { - + }, - + _addLineToMap: function(line) { - + }, - - + + /* Map Specific Methods ================================================== */ - + _panTo: function(loc, animate) { - + }, - + _zoomTo: function(z, animate) { - + }, - + _viewTo: function(loc, opts) { - + }, - + _updateMapDisplay: function(animate, d) { - + }, - + _refreshMap: function() { - + }, - + _getMapLocation: function(m) { return {x:0, y:0}; }, - + _getMapZoom: function() { return 1; }, - + _getMapCenter: function() { return {lat:0, lng:0}; }, - + _getBoundsZoom: function(m1, m2, inside, padding) { - + }, - + _markerOverview: function() { - + }, - + _initialMapLocation: function() { - + }, - + /* Events ================================================== */ _onMarkerChange: function(e) { this.fire("change", {current_marker:this.current_marker}); }, - + _onMarkerClick: function(e) { if (this.current_marker != e.marker_number) { this.goTo(e.marker_number); } }, - + _onMapLoaded: function(e) { this._loaded.map = true; - - + + if (this.options.calculate_zoom) { this.calculateMarkerZooms(); } - + this.calculateMinMaxZoom(); - + if (this.options.map_mini && !VCO.Browser.touch) { this.createMiniMap(); } - + this.initialMapLocation(); this.fire("loaded", this.data); }, - + _onWheel: function(e) { // borrowed from http://jsbin.com/qiyaseza/5/edit var self = this; - + if (e.ctrlKey) { var s = Math.exp(-e.deltaY/100); this.touch_scale *= s; e.preventDefault(); e.stopPropagation(e); - } - + } + if (!this.scroll.start_time) { this.scroll.start_time = +new Date(); }; - + var time_left = Math.max(40 - (+new Date() - this.scroll.start_time), 0); - + clearTimeout(this.scroll.timer); - + this.scroll.timer = setTimeout(function() { self._scollZoom(); //e.preventDefault(); //e.stopPropagation(e); }, time_left); - - + + }, - + _scollZoom: function(e) { var self = this, current_zoom = this._getMapZoom(); - + this.scroll.start_time = null; //VCO.DomUtil.addClass(this._el.container, 'vco-map-touch-zoom'); clearTimeout(this.scroll.timer); clearTimeout(this.scroll.timer_done); - + this.scroll.timer_done = setTimeout(function() { self._scollZoomDone(); }, 1000); - + this.zoomTo(Math.round(current_zoom * this.touch_scale)); }, - + _scollZoomDone: function(e) { //VCO.DomUtil.removeClass(this._el.container, 'vco-map-touch-zoom'); this.touch_scale = 1; }, - + /* Private Methods ================================================== */ - + _calculateZoomChange: function(origin, destination, correct_for_center) { return this._getBoundsZoom(origin, destination, correct_for_center); }, - + _updateDisplay: function(w, h, animate, d) { - + // Update Map Display this._updateMapDisplay(animate, d); }, - + _initLayout: function() { - + // Create Layout this._el.map_mask = VCO.Dom.create("div", "vco-map-mask", this._el.container); - + if (this.options.map_as_image) { this._el.map = VCO.Dom.create("div", "vco-map-display vco-mapimage-display", this._el.map_mask); } else { this._el.map = VCO.Dom.create("div", "vco-map-display", this._el.map_mask); } - - + + }, - + _initData: function() { if (this.data.slides) { this._createMarkers(this.data.slides); @@ -16286,20 +16286,20 @@ VCO.Map = VCO.Class.extend({ this._markers[this.current_marker].active(true); this._loaded.data = true; this._initialMapLocation(); - + } }, - + _initEvents: function() { var self = this; - + this._el.map.addEventListener('wheel', function(e) { self._onWheel(e); }); - + //this.on("wheel", this._onWheel, this); } - + }); /* VCO.MapMarker.Leaflet @@ -16307,21 +16307,21 @@ VCO.Map = VCO.Class.extend({ ================================================== */ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ - - + + /* Create Marker ================================================== */ _createMarker: function(d, o) { - + var icon = {}; //new L.Icon.Default(); - + if (d.location && d.location.lat && d.location.lon) { this.data.real_marker = true; if (o.use_custom_markers && d.location.icon && d.location.icon != "") { this._custom_icon = true; this._custom_icon_url = d.location.icon; this._icon = new L.icon({iconUrl: this._custom_icon_url, iconSize: [48], iconAnchor:[24, 48]}); - + } else if (o.use_custom_markers && d.location.image && d.location.image != "") { this._custom_image_icon = true; this._custom_icon_url = d.location.image; @@ -16329,26 +16329,26 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ } else { this._icon = new L.divIcon({className: 'vco-mapmarker ' + this.media_icon_class, iconAnchor:[10, 10]}); } - + this._marker = new L.marker([d.location.lat, d.location.lon], { title: d.text.headline, icon: this._icon }); - - this._marker.on("click", this._onMarkerClick, this); - + + this._marker.on("click", this._onMarkerClick, this); + if (o.map_popup) { this._createPopup(d, o); } } }, - + _addTo: function(m) { if (this.data.real_marker) { this._marker.addTo(m); } }, - + _createPopup: function(d, o) { /* var html = ""; @@ -16356,16 +16356,16 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ this._marker.bindPopup(html, {closeButton:false, offset:[0, 43]}); */ }, - + _active: function(a) { var self = this; - + if (this.data.media && this.data.media.mediatype) { this.media_icon_class = "vco-mapmarker-icon vco-icon-" + this.data.media.mediatype.type; } else { this.media_icon_class = "vco-mapmarker-icon vco-icon-plaintext"; } - + if (this.data.real_marker) { if (a) { this._marker.setZIndexOffset(100); @@ -16374,7 +16374,7 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ } else { this._icon = new L.divIcon({className: 'vco-mapmarker-active ' + this.media_icon_class, iconAnchor:[10, 10]}); } - + //this.timer = setTimeout(function() {self._openPopup();}, this.options.duration + 200); this._setIcon(); } else { @@ -16386,20 +16386,20 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ } else { this._icon = new L.divIcon({className: 'vco-mapmarker ' + this.media_icon_class, iconAnchor:[10, 10]}); } - + this._setIcon(); } } }, - + _openPopup: function() { this._marker.openPopup(); }, - + _setIcon: function() { this._marker.setIcon(this._icon); }, - + _location: function() { if (this.data.real_marker) { return this._marker.getLatLng(); @@ -16407,7 +16407,7 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ return {}; } } - + }); @@ -16416,30 +16416,30 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ ================================================== */ VCO.Map.Leaflet = VCO.Map.extend({ - + includes: [VCO.Events], - + /* Create the Map ================================================== */ _createMap: function() { - - + + this._map = new L.map(this._el.map, {scrollWheelZoom:false, zoomControl:!this.options.map_mini}); this._map.on("load", this._onMapLoaded, this); - - + + this._map.on("moveend", this._onMapMoveEnd, this); this._map.attributionControl.setPrefix("◼ StoryMapJS"); - - var map_type_arr = this.options.map_type.split(':'); + + var map_type_arr = this.options.map_type.split(':'); // Create Tile Layer this._tile_layer = this._createTileLayer(this.options.map_type); this._tile_layer.on("load", this._onTilesLoaded, this); - + // Add Tile Layer this._map.addLayer(this._tile_layer); - + // Add Zoomify Image Layer if (this._image_layer) { this._map.addLayer(this._image_layer); @@ -16448,32 +16448,32 @@ VCO.Map.Leaflet = VCO.Map.extend({ this._line = this._createLine(this._line); this._line.setStyle({color:this.options.line_color_inactive}); this._addLineToMap(this._line); - + // Create Active Line this._line_active = this._createLine(this._line_active); this._line_active.setStyle({opacity:1}); this._addLineToMap(this._line_active); - + if (this.options.map_as_image) { this._line_active.setStyle({opacity:0}); this._line.setStyle({opacity:0}); } - - + + }, - + /* Create Mini Map ================================================== */ _createMiniMap: function() { if (this.options.map_as_image) { this.zoom_min_max.min = 0; } - + if (!this.bounds_array) { this.bounds_array = this._getAllMarkersBounds(this._markers); - } - + } + this._tile_layer_mini = this._createTileLayer(this.options.map_type); this._mini_map = new L.Control.MiniMap(this._tile_layer_mini, { width: 150, @@ -16490,27 +16490,27 @@ VCO.Map.Leaflet = VCO.Map.extend({ stroke: true } }).addTo(this._map); - + this._mini_map.getContainer().style.backgroundColor = this.options.map_background_color; - + }, - + /* Create Background Map ================================================== */ _createBackgroundMap: function(tiles) { - - // TODO Check width and height + + // TODO Check width and height trace("CREATE BACKGROUND MAP"); if (!this._image_layer) { // Make Image Layer a Group this._image_layer = new L.layerGroup(); // Add Layer Group to Map this._map.addLayer(this._image_layer); - + } else { this._image_layer.clearLayers(); } - + if (tiles) { // Create Image Overlay for each tile in the group for (x in tiles) { @@ -16527,7 +16527,7 @@ VCO.Map.Leaflet = VCO.Map.extend({ end: 0 } }; - + if (target_tile.style.left || target_tile.style.top) { if (target_tile.style.left) { tile.x = parseInt(target_tile.style.left.split("px")[0]); @@ -16537,7 +16537,7 @@ VCO.Map.Leaflet = VCO.Map.extend({ } } else if (target_tile.style["-webkit-transform"] || target_tile.style["transform"] || target_tile.style["-ms-transform"]) { var t_array; - + if (target_tile.style["-webkit-transform"]) { t_array = target_tile.style["-webkit-transform"].split("3d(")[1].split(", 0)")[0].split(", "); } else if (target_tile.style["transform"]) { @@ -16545,12 +16545,12 @@ VCO.Map.Leaflet = VCO.Map.extend({ } else if (target_tile.style["-ms-transform"]) { t_array = target_tile.style["-ms-transform"].split("3d(")[1].split(", 0)")[0].split(", "); } - + tile.x = parseInt(t_array[0].split("px")[0]); tile.y = parseInt(t_array[1].split("px")[0]); } - - + + // If using toner, switch to toner lines if (tile.url.match("toner")) { //tile.url = tile.url.replace("/toner-lite/","/toner-lines/"); @@ -16560,15 +16560,15 @@ VCO.Map.Leaflet = VCO.Map.extend({ tile.pos.start = this._map.containerPointToLatLng([tile.x, tile.y]); tile.pos.end = this._map.containerPointToLatLng([tile.x + tile.width, tile.y + tile.height]); - + image = new L.imageOverlay(tile.url, [tile.pos.start, tile.pos.end]); this._image_layer.addLayer(image); - + } } - + }, - + /* Create Tile Layer ================================================== */ _createTileLayer: function(map_type, options) { @@ -16576,11 +16576,11 @@ VCO.Map.Leaflet = VCO.Map.extend({ _map_type_arr = map_type.split(':'), _options = {}, _attribution_knightlab = "Leaflet | " - + if (options) { _options = options; } - + // Set Tiles switch(_map_type_arr[0]) { case 'mapbox': @@ -16598,51 +16598,51 @@ VCO.Map.Leaflet = VCO.Map.extend({ _options.height = this.options.zoomify.height; _options.tolerance = this.options.zoomify.tolerance; _options.attribution = _attribution_knightlab + this.options.zoomify.attribution; - + _tilelayer = new L.tileLayer.zoomify(this.options.zoomify.path, _options); //this._image_layer = new L.imageOverlay(this.options.zoomify.path + "TileGroup0/0-0-0.jpg", _tilelayer.getZoomifyBounds(this._map)); break; case 'osm': _options.subdomains = 'ab'; _options.attribution = _attribution_knightlab + "© OpenStreetMap and contributors, under an open license"; - _tilelayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', _options); + _tilelayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', _options); break; - + case 'http': case 'https': _options.subdomains = this.options.map_subdomains; _tilelayer = new L.TileLayer(this.options.map_type, _options); break; - + default: _tilelayer = new L.StamenTileLayer('toner', _options); - break; + break; } - + return _tilelayer; }, - + /* Events ================================================== */ _onMapMoveEnd: function(e) { - + }, - + _onTilesLoaded: function(e) { this._createBackgroundMap(e.target._tiles); this._tile_layer.off("load", this._onTilesLoaded, this); }, - + _onMapZoomed:function(e) { trace("FIRST ZOOM"); this._map.off("zoomend", this._onMapZoomed, this); - + }, - + _onMapZoom:function(e) { - + }, - + /* Marker ================================================== */ _createMarker: function(d) { @@ -16652,7 +16652,7 @@ VCO.Map.Leaflet = VCO.Map.extend({ this._markers.push(marker); marker.marker_number = this._markers.length - 1; this.fire("markerAdded", marker); - + }, _addMarker: function(marker) { @@ -16660,60 +16660,60 @@ VCO.Map.Leaflet = VCO.Map.extend({ }, _removeMarker: function(marker) { - + }, - + _markerOverview: function() { var _location, _zoom; // Hide Active Line this._line_active.setStyle({opacity:0}); - + if (this.options.map_type == "zoomify" && this.options.map_as_image) { - + var _center_zoom = this._tile_layer.getCenterZoom(this._map); - + _location = _center_zoom.center; - + if (this.options.map_center_offset && this.options.map_center_offset.left != 0 || this.options.map_center_offset.top != 0) { _center_zoom.zoom = _center_zoom.zoom - 1; _location = this._getMapCenterOffset(_location, _center_zoom.zoom); } - + this._map.setView(_location, _center_zoom.zoom, { pan:{animate: true, duration: this.options.duration/1000, easeLinearity:.10}, zoom:{animate: true, duration: this.options.duration/1000, easeLinearity:.10} }); - - - + + + } else { this.bounds_array = this._getAllMarkersBounds(this._markers); - + if (this.options.map_center_offset && this.options.map_center_offset.left != 0 || this.options.map_center_offset.top != 0) { var the_bounds = new L.latLngBounds(this.bounds_array); _location = the_bounds.getCenter(); _zoom = this._map.getBoundsZoom(the_bounds) - + _location = this._getMapCenterOffset(_location, _zoom - 1); - + this._map.setView(_location, _zoom -1, { pan:{animate: true, duration: this.options.duration/1000, easeLinearity:.10}, zoom:{animate: true, duration: this.options.duration/1000, easeLinearity:.10} }); - - + + } else { this._map.fitBounds(this.bounds_array, {padding:[15,15]}); } - + } - + if (this._mini_map) { this._mini_map.minimize(); } - + }, - + _getAllMarkersBounds: function(markers_array) { var bounds_array = []; for (var i = 0; i < markers_array.length; i++) { @@ -16723,10 +16723,10 @@ VCO.Map.Leaflet = VCO.Map.extend({ }; return bounds_array; }, - + _calculateMarkerZooms: function() { for (var i = 0; i < this._markers.length; i++) { - + if (this._markers[i].data.location) { var marker = this._markers[i], prev_marker, @@ -16735,8 +16735,8 @@ VCO.Map.Leaflet = VCO.Map.extend({ prev_marker_zoom, next_marker_zoom, calculated_zoom; - - + + // MARKER LOCATION if (marker.data.type && marker.data.type == "overview") { marker_location = this._getMapCenter(true); @@ -16750,7 +16750,7 @@ VCO.Map.Leaflet = VCO.Map.extend({ prev_marker = this._getMapCenter(true); } prev_marker_zoom = this._calculateZoomChange(prev_marker, marker_location); - + // NEXT MARKER ZOOM if (i < (this._markers.length - 1)) { next_marker = this._markers[i+1].location(); @@ -16758,35 +16758,35 @@ VCO.Map.Leaflet = VCO.Map.extend({ next_marker = this._getMapCenter(true); } next_marker_zoom = this._calculateZoomChange(next_marker, marker_location); - - + + if (prev_marker_zoom && prev_marker_zoom < next_marker_zoom) { calculated_zoom = prev_marker_zoom; } else if (next_marker_zoom){ calculated_zoom = next_marker_zoom; - + } else { calculated_zoom = prev_marker_zoom; } - + if (this.options.map_center_offset && this.options.map_center_offset.left != 0 || this.options.map_center_offset.top != 0) { calculated_zoom = calculated_zoom -1; } - + marker.data.location.zoom = calculated_zoom; } - + }; - - + + }, - - - + + + /* Line ================================================== */ - + _createLine: function(d) { return new L.Polyline([], { clickable: false, @@ -16797,46 +16797,46 @@ VCO.Map.Leaflet = VCO.Map.extend({ lineJoin: this.options.line_join, className: "vco-map-line" } ); - + }, - + _addLineToMap: function(line) { this._map.addLayer(line); }, - + _addToLine: function(line, d) { line.addLatLng({lon: d.location.lon, lat: d.location.lat}); }, - + _replaceLines: function(line, array) { line.setLatLngs(array); }, - + /* Map ================================================== */ _panTo: function(loc, animate) { this._map.panTo({lat:loc.lat, lon:loc.lon}, {animate: true, duration: this.options.duration/1000, easeLinearity:.10}); }, - + _zoomTo: function(z, animate) { this._map.setZoom(z); }, - + _viewTo: function(loc, opts) { var _animate = true, _duration = this.options.duration/1000, _zoom = this._getMapZoom(), _location = {lat:loc.lat, lon:loc.lon}; - + // Show Active Line if (!this.options.map_as_image) { this._line_active.setStyle({opacity:1}); } - + if (loc.zoom) { _zoom = loc.zoom; } - + // Options if (opts) { if (opts.duration) { @@ -16846,26 +16846,26 @@ VCO.Map.Leaflet = VCO.Map.extend({ _duration = duration; } } - + if (opts.zoom && this.options.calculate_zoom) { _zoom = opts.zoom; } - } - + } + // OFFSET if (this.options.map_center_offset) { _location = this._getMapCenterOffset(_location, _zoom); } - + this._map.setView( - _location, + _location, _zoom, { pan:{animate: _animate, duration: _duration, easeLinearity:.10}, zoom:{animate: _animate, duration: _duration, easeLinearity:.10} } ) - + if (this._mini_map && this.options.width > this.options.skinny_size) { if ((_zoom - 1) <= this.zoom_min_max.min ) { this._mini_map.minimize(); @@ -16873,41 +16873,41 @@ VCO.Map.Leaflet = VCO.Map.extend({ this._mini_map.restore(); //this._mini_map.updateDisplay(_location, _zoom, _duration); } - } - + } + }, - + _getMapLocation: function(m) { return this._map.latLngToContainerPoint(m); }, - + _getMapZoom: function() { return this._map.getZoom(); }, - + _getMapCenter: function(offset) { if (offset) { - + } return this._map.getCenter(); }, - + _getMapCenterOffset: function(location, zoom) { var target_point, target_latlng; - + target_point = this._map.project(location, zoom).subtract([this.options.map_center_offset.left, this.options.map_center_offset.top]); target_latlng = this._map.unproject(target_point, zoom); - + return target_latlng; }, - + _getBoundsZoom: function(origin, destination, correct_for_center) { var _origin = origin, _padding = [(Math.abs(this.options.map_center_offset.left)*3),(Math.abs(this.options.map_center_offset.top)*3)]; - - + + //_padding = [0,0]; //_padding = [0,0]; if (correct_for_center) { @@ -16915,7 +16915,7 @@ VCO.Map.Leaflet = VCO.Map.extend({ _lng = _origin.lng + (_origin.lng - destination.lng)/2; _origin = new L.LatLng(_lat, _lng); } - + var bounds = new L.LatLngBounds([_origin, destination]); if (this.options.less_bounce) { return this._map.getBoundsZoom(bounds, false, _padding); @@ -16923,35 +16923,35 @@ VCO.Map.Leaflet = VCO.Map.extend({ return this._map.getBoundsZoom(bounds, true, _padding); } }, - + _getZoomifyZoom: function() { }, - + _initialMapLocation: function() { this._map.on("zoomend", this._onMapZoomed, this); }, - + /* Display ================================================== */ _updateMapDisplay: function(animate, d) { if (animate) { var duration = this.options.duration, self = this; - + if (d) {duration = d }; if (this.timer) {clearTimeout(this.timer)}; - + this.timer = setTimeout(function() { self._refreshMap(); }, duration); - + } else { if (!this.timer) { this._refreshMap(); }; } - + if (this._mini_map && this._el.container.offsetWidth < this.options.skinny_size ) { this._mini_map.true_hide = true; //this._mini_map.minimize(); @@ -16959,16 +16959,16 @@ VCO.Map.Leaflet = VCO.Map.extend({ this._mini_map.true_hide = false; } }, - + _refreshMap: function() { if (this._map) { if (this.timer) { clearTimeout(this.timer); this.timer = null; }; - + this._map.invalidateSize(); - + // Check to see if it's an overview if (this._markers[this.current_marker].data.type && this._markers[this.current_marker].data.type == "overview") { this._markerOverview(); @@ -16977,8 +16977,8 @@ VCO.Map.Leaflet = VCO.Map.extend({ } }; } - - + + }); /* Overwrite and customize Leaflet functions @@ -16991,7 +16991,7 @@ L.Map.include({ return true; }, - + _tryAnimatedZoom: function (center, zoom, options) { if (this._animatingZoom) { return true; } @@ -17031,8 +17031,8 @@ L.Map.include({ padding = L.point(padding || [0, 0]); size = this.getSize(); - - + + // Calculate Zoom Level Differences for (var i = 0; i < maxZoom; i++) { zoom++; @@ -17042,7 +17042,7 @@ L.Map.include({ y:Math.abs(size.y - boundsSize.y) }) } - + // Determine closest match smallest_zoom = zoom_array[0]; for (var j = 0; j < zoom_array.length; j++) { @@ -17052,15 +17052,15 @@ L.Map.include({ } if (zoom_array[j].x <= smallest_zoom.x) { smallest_zoom.x = zoom_array[j].x; - best_zoom.x = j; + best_zoom.x = j; } - + } final_zoom = Math.round((best_zoom.y + best_zoom.x) / 2) return final_zoom; } - + }); L.TileLayer.include({ @@ -17075,12 +17075,12 @@ L.TileLayer.include({ This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. - + ================================================== */ -/* +/* TODO Message for Data Loading -*/ +*/ /* Required Files CodeKit Import @@ -17098,7 +17098,7 @@ L.TileLayer.include({ // LANGUAGE // @codekit-prepend "language/VCO.Language.js"; - + // LIBRARY // @codekit-prepend "library/VCO.Emoji.js"; @@ -17150,7 +17150,7 @@ L.TileLayer.include({ // @codekit-prepend "slider/VCO.StorySlider.js"; // LEAFLET - + // LEAFLET SRC // Leaflet Core // @codekit-prepend "map/leaflet/leaflet-src/Leaflet.js"; @@ -17292,15 +17292,15 @@ L.TileLayer.include({ // Geolocation Adds Map#locate method and related events to make geolocation easier.' // "map/leaflet/leaflet-src/map/ext/Map.Geolocation.js"; - + // LEAFLET EXTENTIONS // @codekit-prepend "map/leaflet/extentions/VCO.Leaflet.TileLayer.Zoomify.js"; // @codekit-prepend "map/leaflet/extentions/VCO.Leaflet.MiniMap.js"; - + // TILES // "map/tile/VCO.TileLayer.Mapbox.js"; NOT READY YET // @codekit-prepend "map/tile/VCO.TileLayer.Stamen.js"; - + // MAP // @codekit-prepend "map/VCO.MapMarker.js"; // @codekit-prepend "map/VCO.Map.js"; @@ -17311,9 +17311,9 @@ L.TileLayer.include({ VCO.StoryMap = VCO.Class.extend({ - + includes: VCO.Events, - + /* Private Methods ================================================== */ initialize: function (elem, data, options,listeners) { @@ -17330,10 +17330,10 @@ VCO.StoryMap = VCO.Class.extend({ var self = this; // Version this.version = "0.1.16"; - + // Ready this.ready = false; - + // DOM ELEMENTS this._el = { container: {}, @@ -17341,31 +17341,31 @@ VCO.StoryMap = VCO.Class.extend({ map: {}, menubar: {} }; - + // Determine Container Element if (typeof elem === 'object') { this._el.container = elem; } else { this._el.container = VCO.Dom.get(elem); } - + // Slider this._storyslider = {}; - + // Map this._map = {}; this.map = {}; // For direct access to Leaflet Map - + // Menu Bar this._menubar = {}; - + // Loaded State this._loaded = {storyslider:false, map:false}; - + // Data Object // Test Data compiled from http://www.pbs.org/marktwain/learnmore/chronology.html this.data = {}; - + this.options = { script_path: "", height: this._el.container.offsetHeight, @@ -17420,34 +17420,34 @@ VCO.StoryMap = VCO.Class.extend({ show_lines: true, show_history_line: true, api_key_flickr: "f2cc870b4d233dd0a5bfe73fd0d64ef0", - language: "en" + language: "en" }; - + // Current Slide this.current_slide = this.options.start_at_slide; - + // Animation Objects this.animator_map = null; this.animator_storyslider = null; - + // Merge Options VCO.Util.mergeData(this.options, options); - + if (this.options.layout == "landscape") { this.options.map_center_offset = {left: -200, top: 0}; } - + // Zoomify Layout if (this.options.map_type == "zoomify" && this.options.map_as_image) { this.options.map_size_sticky = 2; - + } - - // Map as Image + + // Map as Image if (this.options.map_as_image) { this.options.calculate_zoom = false; } - + // Use Relative Date Calculations if(this.options.relative_date) { if (typeof(moment) !== 'undefined') { @@ -17458,21 +17458,21 @@ VCO.StoryMap = VCO.Class.extend({ trace("LOAD MOMENTJS") }); } - + } else { self._loadLanguage(data); } - + // Emoji Support to Chrome if (VCO.Browser.chrome) { VCO.Load.css(this.options.script_path + "../css/fonts/font.emoji.css", function() { trace("LOADED EMOJI CSS FOR CHROME") }); } - + return this; }, - + /* Load Language ================================================== */ _loadLanguage: function(data) { @@ -17486,7 +17486,7 @@ VCO.StoryMap = VCO.Class.extend({ }); } }, - + /* Navigation ================================================== */ goTo: function(n) { @@ -17502,16 +17502,16 @@ VCO.StoryMap = VCO.Class.extend({ this._updateDisplay(); } }, - + /* Private Methods ================================================== */ - + // Initialize the data _initData: function(data) { var self = this; - + if (typeof data === 'string') { - + VCO.getJSON(data, function(d) { if (d && d.storymap) { VCO.Util.mergeData(self.data, d.storymap); @@ -17529,42 +17529,42 @@ VCO.StoryMap = VCO.Class.extend({ self._onDataLoaded(); } }, - + // Initialize the layout _initLayout: function () { var self = this; - + this._el.container.className += ' vco-storymap'; this.options.base_class = this._el.container.className; - + // Create Layout this._el.menubar = VCO.Dom.create('div', 'vco-menubar', this._el.container); this._el.map = VCO.Dom.create('div', 'vco-map', this._el.container); this._el.storyslider = VCO.Dom.create('div', 'vco-storyslider', this._el.container); - + // Initial Default Layout this.options.width = this._el.container.offsetWidth; this.options.height = this._el.container.offsetHeight; this._el.map.style.height = "1px"; this._el.storyslider.style.top = "1px"; - + // Create Map using preferred Map API this._map = new VCO.Map.Leaflet(this._el.map, this.data, this.options); this.map = this._map._map; // For access to Leaflet Map. this._map.on('loaded', this._onMapLoaded, this); - + // Map Background Color this._el.map.style.backgroundColor = this.options.map_background_color; - + // Create Menu Bar this._menubar = new VCO.MenuBar(this._el.menubar, this._el.container, this.options); - + // Create StorySlider this._storyslider = new VCO.StorySlider(this._el.storyslider, this.data, this.options); this._storyslider.on('loaded', this._onStorySliderLoaded, this); this._storyslider.on('title', this._onTitle, this); this._storyslider.init(); - + // LAYOUT if (this.options.layout == "portrait") { // Set Default Component Sizes @@ -17578,45 +17578,45 @@ VCO.StoryMap = VCO.Class.extend({ this.options.storyslider_height = (this.options.height - this._el.menubar.offsetHeight - 1); this._menubar.setSticky(this.options.menubar_height); } - - + + // Update Display this._updateDisplay(this.options.map_height, true, 2000); - + // Animate Menu Bar to Default Location this._menubar.show(2000); - + }, - + _initEvents: function () { - + // Sidebar Events this._menubar.on('collapse', this._onMenuBarCollapse, this); this._menubar.on('back_to_start', this._onBackToStart, this); this._menubar.on('overview', this._onOverview, this); - + // StorySlider Events this._storyslider.on('change', this._onSlideChange, this); this._storyslider.on('colorchange', this._onColorChange, this); - + // Map Events this._map.on('change', this._onMapChange, this); }, - + // Update View _updateDisplay: function(map_height, animate, d) { var duration = this.options.duration, display_class = this.options.base_class, self = this; - + if (d) { duration = d; } - + // Update width and height this.options.width = this._el.container.offsetWidth; this.options.height = this._el.container.offsetHeight; - + // Check if skinny if (this.options.width <= this.options.skinny_size) { this.options.layout = "portrait"; @@ -17624,40 +17624,40 @@ VCO.StoryMap = VCO.Class.extend({ } else { this.options.layout = "landscape"; } - - + + // Map Height if (map_height) { this.options.map_height = map_height; } - - + + // Detect Mobile and Update Orientation on Touch devices if (VCO.Browser.touch) { this.options.layout = VCO.Browser.orientation(); display_class += " vco-mobile"; } - + // LAYOUT if (this.options.layout == "portrait") { display_class += " vco-skinny"; // Map Offset this._map.setMapOffset(0, 0); - + this.options.map_height = (this.options.height / this.options.map_size_sticky); this.options.storyslider_height = (this.options.height - this.options.map_height - 1); this._menubar.setSticky(0); - + // Portrait display_class += " vco-layout-portrait"; - + if (animate) { - + // Animate Map if (this.animator_map) { this.animator_map.stop(); } - + this.animator_map = VCO.Animate(this._el.map, { height: (this.options.map_height) + "px", duration: duration, @@ -17666,7 +17666,7 @@ VCO.StoryMap = VCO.Class.extend({ self._map.updateDisplay(self.options.width, self.options.map_height, animate, d, self.options.menubar_height); } }); - + // Animate StorySlider if (this.animator_storyslider) { this.animator_storyslider.stop(); @@ -17676,73 +17676,73 @@ VCO.StoryMap = VCO.Class.extend({ duration: duration, easing: VCO.Ease.easeOutStrong }); - + } else { // Map this._el.map.style.height = Math.ceil(this.options.map_height) + "px"; - + // StorySlider this._el.storyslider.style.height = this.options.storyslider_height + "px"; } - + // Update Component Displays this._menubar.updateDisplay(this.options.width, this.options.height, animate); this._map.updateDisplay(this.options.width, this.options.height, false); this._storyslider.updateDisplay(this.options.width, this.options.storyslider_height, animate, this.options.layout); - + } else { - + // Landscape display_class += " vco-layout-landscape"; - + this.options.menubar_height = this._el.menubar.offsetHeight; - + // Set Default Component Sizes this.options.map_height = this.options.height; this.options.storyslider_height = this.options.height; this._menubar.setSticky(this.options.menubar_height); - + // Set Sticky state of MenuBar this._menubar.setSticky(this.options.menubar_height); - + this._el.map.style.height = this.options.height + "px"; - + // Update Component Displays this._map.setMapOffset(-(this.options.width/4), 0); - + // StorySlider this._el.storyslider.style.top = 0; this._el.storyslider.style.height = this.options.storyslider_height + "px"; - + this._menubar.updateDisplay(this.options.width, this.options.height, animate); this._map.updateDisplay(this.options.width, this.options.height, animate, d); this._storyslider.updateDisplay(this.options.width/2, this.options.storyslider_height, animate, this.options.layout); } - - - + + + // Apply class this._el.container.className = display_class; - - + + }, - - + + /* Events ================================================== */ - + _onDataLoaded: function(e) { this.fire("dataloaded"); this._initLayout(); this._initEvents(); this.ready = true; - + }, - + _onTitle: function(e) { this.fire("title", e); }, - + _onColorChange: function(e) { if (e.color || e.image) { this._menubar.setColor(true); @@ -17750,7 +17750,7 @@ VCO.StoryMap = VCO.Class.extend({ this._menubar.setColor(false); } }, - + _onSlideChange: function(e) { if (this.current_slide != e.current_slide) { this.current_slide = e.current_slide; @@ -17758,7 +17758,7 @@ VCO.StoryMap = VCO.Class.extend({ this.fire("change", {current_slide: this.current_slide}, this); } }, - + _onMapChange: function(e) { if (this.current_slide != e.current_marker) { this.current_slide = e.current_marker; @@ -17766,26 +17766,26 @@ VCO.StoryMap = VCO.Class.extend({ this.fire("change", {current_slide: this.current_slide}, this); } }, - + _onOverview: function(e) { this._map.markerOverview(); }, - + _onBackToStart: function(e) { this.current_slide = 0; this._map.goTo(this.current_slide); this._storyslider.goTo(this.current_slide); this.fire("change", {current_slide: this.current_slide}, this); }, - + _onMenuBarCollapse: function(e) { this._updateDisplay(e.y, true); }, - + _onMouseClick: function(e) { - + }, - + _fireMouseEvent: function (e) { if (!this._loaded) { return; @@ -17801,32 +17801,28 @@ VCO.StoryMap = VCO.Class.extend({ if (type === 'contextmenu') { VCO.DomEvent.preventDefault(e); } - + this.fire(type, { latlng: "something", //this.mouseEventToLatLng(e), layerPoint: "something else" //this.mouseEventToLayerPoint(e) }); }, - + _onMapLoaded: function() { this._loaded.map = true; this._onLoaded(); }, - + _onStorySliderLoaded: function() { this._loaded.storyslider = true; this._onLoaded(); }, - + _onLoaded: function() { if (this._loaded.storyslider && this._loaded.map) { this.fire("loaded", this.data); } } - - -}); - - +}); diff --git a/src/js/map/Map.js b/src/js/map/Map.js index b00d8531..7c1a1a89 100644 --- a/src/js/map/Map.js +++ b/src/js/map/Map.js @@ -12,15 +12,15 @@ import { Browser } from "../core/Browser" ================================================== */ - + /* Map = VCO.Class.extend({ - + includes: [VCO.Events, VCO.DomMixins], - + _el: {}, */ - + export default class Map { constructor(elem, data, options) { // DOM ELEMENTS @@ -29,62 +29,80 @@ export default class Map { map: {}, map_mask: {} }; - + if (typeof elem === 'object') { this._el.container = elem; } else { this._el.container = Dom.get(elem); } - + // LOADED this._loaded = { data: false, map: false }; - + // MAP this._map = null; - + // MINI MAP this._mini_map = null; - + // Markers this._markers = []; - + // Marker Zoom Miniumum and Maximum this.zoom_min_max = { min: null, max: null }; - + // Line this._line = null; this._line_active = null; - + // Current Marker this.current_marker = 0; - + // Markers Bounds Array this.bounds_array = null; - + // Map Tiles Layer this._tile_layer = null; - + // Map Tiles Layer for Mini Map this._tile_layer_mini = null; - + // Image Layer (for zoomify) this._image_layer = null; - + // Data this.data = { uniqueid: "", slides: [{test:"yes"}, {test:"yes"}, {test:"yes"}] }; - + //Options this.options = { + // WMS/WMTS support + // ===================== + // Storymap is the JSON object holding the storymap data + // storymap.map_type, storymap.base_map, or storymap.slides.location.layer can be defined as either a string with one of the stamen,osm,mapbox etc TYPES + // if a WMS or WMTS layer is required, the map_type can be an object with the following structure: + // { + // “url”: “[wms | wmts]:https://ca.nfis.org/mapserver….”, + // “options”: { + // “layers”: + // “transparent” + // “format” + // “time” + // } + // } + // url is required, and wms or wmts must be prefixed to the web map service URL + // options is optional, and if defined can contain any options supported by the web map service + // options is passed to the appropriate createTileLayer function which uses the attributes to compose the request URL map_type: "stamen:toner-lite", + map_as_image: false, map_mini: false, map_background_color: "#d9d9d9", @@ -101,68 +119,73 @@ export default class Map { less_bounce: true, path_gfx: "gfx", start_at_slide: 0, - map_popup: false, + map_popup: false, zoom_distance: 100, calculate_zoom: true, // Allow map to determine best zoom level between markers (recommended) line_follows_path: true, // Map history path follows default line, if false it will connect previous and current only line_color: "#333", - line_color_inactive: "#000", + line_color_inactive: "#000", line_weight: 5, line_opacity: 0.20, line_dash: "5,5", line_join: "miter", show_lines: true, show_history_line: true, - map_center_offset: null // takes object {top:0,left:0} + map_center_offset: null, // takes object {top:0,left:0} + + // Basemap support + base_map: "", + // Extended CRS Support + map_crs: "" }; - + // Animation this.animator = null; - + // Timer this.timer = null; - + // Touchpad Events this.touch_scale = 1; this.scroll = { start_time: null }; - + // Merge Data and Options mergeData(this.options, options); mergeData(this.data, data); - + this._initLayout(); this._initEvents(); this._createMap(); this._initData(); - - + + } - + /* Public ================================================== */ updateDisplay(w, h, animate, d, offset) { this._updateDisplay(w, h, animate, d, offset); } - + goTo(n, change) { if (n < this._markers.length && n >= 0) { var zoom = 0, previous_marker = this.current_marker; - + this.current_marker = n; - + var marker = this._markers[this.current_marker]; - + // Stop animation if (this.animator) { this.animator.stop(); } - + // Reset Active Markers this._resetMarkersActive(); - + // Check to see if it's an overview if (marker.data.type && marker.data.type == "overview") { this._markerOverview(); @@ -172,32 +195,38 @@ export default class Map { } else { // Make marker active marker.active(true); - + if (change) { // Set Map View if (marker.data.location) { this._viewTo(marker.data.location); } else { - } - - + + } else { if (marker.data.location && marker.data.location.lat) { - + // Calculate Zoom zoom = this._calculateZoomChange(this._getMapCenter(true), marker.location()); - + + // Check if new layer has been requested for slide + // If so, Set Map Layer + if (marker.data.location.layer) { + trace(marker.data.location.layer); + this._updateLayer(marker.data.location.layer); + } else { } + // Set Map View this._viewTo(marker.data.location, {calculate_zoom: this.options.calculate_zoom, zoom:zoom}); - + // Show Line if (this.options.line_follows_path) { if (this.options.show_history_line && marker.data.real_marker && this._markers[previous_marker].data.real_marker) { var lines_array = [], line_num = previous_marker, point; - + if (line_num < this.current_marker) { while (line_num < this.current_marker) { if (this._markers[line_num].data.location && this._markers[line_num].data.location.lat) { @@ -207,7 +236,7 @@ export default class Map { } lines_array.push(point); } - + line_num++; } } else if (line_num > this.current_marker) { @@ -219,16 +248,16 @@ export default class Map { } lines_array.push(point); } - + line_num--; } } - + lines_array.push({ lat:marker.data.location.lat, lon:marker.data.location.lon }); - + this._replaceLines(this._line_active, lines_array); } } else { @@ -238,86 +267,86 @@ export default class Map { { lat:marker.data.location.lat, lon:marker.data.location.lon - }, + }, { lat:this._markers[previous_marker].data.location.lat, lon:this._markers[previous_marker].data.location.lon } ]) } - + } } else { this._markerOverview(); if (!change) { this._onMarkerChange(); } - + } // Fire Event this._onMarkerChange(); - + } - + } - + } } - + panTo(loc, animate) { this._panTo(loc, animate); } - + zoomTo(z, animate) { this._zoomTo(z, animate); } - + viewTo(loc, opts) { this._viewTo(loc, opts); } - + getBoundsZoom(m1, m2, inside, padding) { this.__getBoundsZoom(m1, m2, inside, padding); // (LatLngBounds[, Boolean, Point]) -> Number } - + markerOverview() { this._markerOverview(); } - + calculateMarkerZooms() { this._calculateMarkerZooms(); } - + createMiniMap() { this._createMiniMap(); } - + setMapOffset(left, top) { // Update Component Displays this.options.map_center_offset.left = left; this.options.map_center_offset.top = top; } - + calculateMinMaxZoom() { for (var i = 0; i < this._markers.length; i++) { - + if (this._markers[i].data.location && this._markers[i].data.location.zoom) { this.updateMinMaxZoom(this._markers[i].data.location.zoom); } - + } } - + updateMinMaxZoom(zoom) { if (!this.zoom_min_max.max) { this.zoom_min_max.max = zoom; } - + if (!this.zoom_min_max.min) { this.zoom_min_max.min = zoom; } - + if (this.zoom_min_max.max < zoom) { this.zoom_min_max.max = zoom; } @@ -325,44 +354,44 @@ export default class Map { this.zoom_min_max.min = zoom; } } - + initialMapLocation() { if (this._loaded.data && this._loaded.map) { this.goTo(this.options.start_at_slide, true); this._initialMapLocation(); } } - + /* Adding, Hiding, Showing etc ================================================== */ show() { - + } - + hide() { - + } - + addTo(container) { container.appendChild(this._el.container); this.onAdd(); } - + removeFrom(container) { container.removeChild(this._el.container); this.onRemove(); } - + /* Adding and Removing Markers ================================================== */ createMarkers(array) { this._createMarkers(array) } - + createMarker(d) { this._createMarker(d); } - + _destroyMarker(marker) { this._removeMarker(marker); for (var i = 0; i < this._markers.length; i++) { @@ -372,42 +401,42 @@ export default class Map { } this.fire("markerRemoved", marker); } - + _createMarkers(array) { for (var i = 0; i < array.length; i++) { - this._createMarker(array[i]); // this must be called even for overview which has no marker or other logic must be fixed. + this._createMarker(array[i]); // this must be called even for overview which has no marker or other logic must be fixed. if (array[i].location && array[i].location.lat && this.options.show_lines) { this._addToLine(this._line, array[i]); } }; - + } - + _createLines(array) { - + } - - + + /* Map Specific ================================================== */ - + /* Map Specific Create ================================================== */ // Extend this map class and use this to create the map using preferred API _createMap() { - + } - + /* Mini Map Specific Create ================================================== */ // Extend this map class and use this to create the map using preferred API _createMiniMap() { - + } - + /* Map Specific Marker ================================================== */ - + // Specific Marker Methods based on preferred Map API _createMarker(d) { var marker = {}; @@ -417,198 +446,198 @@ export default class Map { marker.marker_number = this._markers.length - 1; this.fire("markerAdded", marker); } - + _addMarker(marker) { - + } - + _removeMarker(marker) { - + } - + _resetMarkersActive() { for (var i = 0; i < this._markers.length; i++) { this._markers[i].active(false); }; } - + _calculateMarkerZooms() { - + } - + /* Map Specific Line ================================================== */ - + _createLine(d) { return {data: d}; } - + _addToLine(line, d) { - + } - + _replaceLines(line, d) { - + } - + _addLineToMap(line) { - + } - - + + /* Map Specific Methods ================================================== */ - + _panTo(loc, animate) { - + } - + _zoomTo(z, animate) { - + } - + _viewTo(loc, opts) { - + } - + _updateMapDisplay(animate, d) { - + } - + _refreshMap() { - + } - + _getMapLocation(m) { return {x:0, y:0}; } - + _getMapZoom() { return 1; } - + _getMapCenter() { return {lat:0, lng:0}; } - + _getBoundsZoom(m1, m2, inside, padding) { - + } - + _markerOverview() { - + } - + _initialMapLocation() { - + } - + /* Events ================================================== */ _onMarkerChange(e) { this.fire("change", {current_marker:this.current_marker}); } - + _onMarkerClick(e) { if (this.current_marker != e.marker_number) { this.goTo(e.marker_number); } } - + _onMapLoaded(e) { this._loaded.map = true; - - + + if (this.options.calculate_zoom) { this.calculateMarkerZooms(); } - + this.calculateMinMaxZoom(); - + if (this.options.map_mini && !Browser.touch) { this.createMiniMap(); } - + this.initialMapLocation(); this.fire("loaded", this.data); } - + _onWheel(e) { // borrowed from http://jsbin.com/qiyaseza/5/edit var self = this; - + if (e.ctrlKey) { var s = Math.exp(-e.deltaY/100); this.touch_scale *= s; e.preventDefault(); e.stopPropagation(e); - } - + } + if (!this.scroll.start_time) { this.scroll.start_time = +new Date(); }; - + var time_left = Math.max(40 - (+new Date() - this.scroll.start_time), 0); - + clearTimeout(this.scroll.timer); - + this.scroll.timer = setTimeout(function() { self._scollZoom(); //e.preventDefault(); //e.stopPropagation(e); }, time_left); - - + + } - + _scollZoom(e) { var self = this, current_zoom = this._getMapZoom(); - + this.scroll.start_time = null; //VCO.DomUtil.addClass(this._el.container, 'vco-map-touch-zoom'); clearTimeout(this.scroll.timer); clearTimeout(this.scroll.timer_done); - + this.scroll.timer_done = setTimeout(function() { self._scollZoomDone(); }, 1000); - + this.zoomTo(Math.round(current_zoom * this.touch_scale)); } - + _scollZoomDone(e) { //VCO.DomUtil.removeClass(this._el.container, 'vco-map-touch-zoom'); this.touch_scale = 1; } - + /* Private Methods ================================================== */ - + _calculateZoomChange(origin, destination, correct_for_center) { return this._getBoundsZoom(origin, destination, correct_for_center); } - + _updateDisplay(w, h, animate, d) { - + // Update Map Display this._updateMapDisplay(animate, d); } - + _initLayout() { - + // Create Layout this._el.map_mask = Dom.create("div", "vco-map-mask", this._el.container); - + if (this.options.map_as_image) { this._el.map = Dom.create("div", "vco-map-display vco-mapimage-display", this._el.map_mask); } else { this._el.map = Dom.create("div", "vco-map-display", this._el.map_mask); } - - + + } - + _initData() { if (this.data.slides) { this._createMarkers(this.data.slides); @@ -616,20 +645,20 @@ export default class Map { this._markers[this.current_marker].active(true); this._loaded.data = true; this._initialMapLocation(); - + } } - + _initEvents() { var self = this; - + this._el.map.addEventListener('wheel', function(e) { self._onWheel(e); }); - + //this.on("wheel", this._onWheel, this); } - + } classMixin(Map, Events, DomMixins) diff --git a/src/js/map/leaflet/Map.Leaflet.js b/src/js/map/leaflet/Map.Leaflet.js index aab7b6b3..0c134118 100644 --- a/src/js/map/leaflet/Map.Leaflet.js +++ b/src/js/map/leaflet/Map.Leaflet.js @@ -21,8 +21,31 @@ export default class Leaflet extends Map { ================================================== */ _createMap() { + // Set the CRS of the Leaflet map. If user has indicated a specific CRS check it against a set of support CRS here + var map_crs_requested; + switch (this.options.map_crs) { + case "EPSG:4326" : + map_crs_requested = L.CRS.EPSG4326; + break; + default: + map_crs_requested = L.CRS.EPSG3857; + break + } + console.log(map_crs_requested); + + this._map = new L.map(this._el.map, { + scrollWheelZoom:false, + zoomControl:!this.options.map_mini, + crs: map_crs_requested + } + ); + + // Detect if base_map has been defined in options object. + if ( (typeof this.options.base_map === "string" && this.options.base_map !== "") || !isEmptyObject(this.options.base_map) ) { + this._base_layer = this._createTileLayer(this.options.base_map); + this._map.addLayer(this._base_layer); + } - this._map = new L.map(this._el.map, {scrollWheelZoom:false, zoomControl:!this.options.map_mini}); this._map.on("load", this._onMapLoaded, this); @@ -72,7 +95,8 @@ export default class Leaflet extends Map { this.bounds_array = this._getAllMarkersBounds(this._markers); } - this._tile_layer_mini = this._createTileLayer(this.options.map_type); + // Detect if base_map defined in options object, use this as layer on minimap if defined. + this._tile_layer_mini = this._createTileLayer(this.options.base_map || this.options.map_type); this._mini_map = new MiniMapControl(this._tile_layer_mini, { width: 150, height: 100, @@ -170,7 +194,10 @@ export default class Leaflet extends Map { ================================================== */ _createTileLayer(map_type, options) { var _tilelayer = null, - _map_type_arr = map_type.split(':'), + // Set the map type by detecting the type, if an object the type is passed in url attribute + _map_type_arr = (typeof map_type === "object") ? map_type.url.split(':') : map_type.split(':'), + // Set the map options by decting type, if object the map options are passed in options attribute + _map_options = (typeof map_type === "object") ? map_type.options : {}, _options = {}, _attribution_knightlab = "Leaflet | " @@ -214,7 +241,17 @@ export default class Leaflet extends Map { _options.attribution = _attribution_knightlab + "© OpenStreetMap and contributors, under an open license"; _tilelayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', _options); break; - + // Adding support for WMS layer by calling TileLayer.WMS Leaflet function + case 'wms': + _options.attribution = _attribution_knightlab + this.options.attribution; + // Force the transparency of the WMS layer so either the map background or base map are visible + _map_options.transparent = true; + _tilelayer = new L.TileLayer.WMS(map_type.url.slice(4), _map_options); + break; + // Adding support for WMTS layer by calling TileLayer Leaflet function + case 'wmts': + _tilelayer = new L.TileLayer(map_type.url.slice(5), _map_options); + break; case 'http': case 'https': _options.subdomains = this.options.map_subdomains; From d4df26d1e16acd3bf6c61ae4e73bea9734ce90fb Mon Sep 17 00:00:00 2001 From: jstrand Date: Mon, 20 Jun 2022 14:46:33 -0700 Subject: [PATCH 2/7] updated how storymap js handles custom images and icons in the map UI --- src/js/map/Map.js | 3 ++- src/js/map/leaflet/Map.Leaflet.js | 20 ++++++++++++++++++-- src/js/map/leaflet/MapMarker.Leaflet.js | 16 ++++++++++++++-- 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/js/map/Map.js b/src/js/map/Map.js index 7c1a1a89..601b8b5a 100644 --- a/src/js/map/Map.js +++ b/src/js/map/Map.js @@ -136,7 +136,8 @@ export default class Map { // Basemap support base_map: "", // Extended CRS Support - map_crs: "" + map_crs: "", + use_custom_markers: false }; // Animation diff --git a/src/js/map/leaflet/Map.Leaflet.js b/src/js/map/leaflet/Map.Leaflet.js index 0c134118..7f30dde0 100644 --- a/src/js/map/leaflet/Map.Leaflet.js +++ b/src/js/map/leaflet/Map.Leaflet.js @@ -40,8 +40,18 @@ export default class Leaflet extends Map { } ); + function isEmptyObject(obj) { + var empt = true; + for(var key in obj) { + if(obj.hasOwnProperty(key)) empt = false; + } + return empt; + }; + // Detect if base_map has been defined in options object. - if ( (typeof this.options.base_map === "string" && this.options.base_map !== "") || !isEmptyObject(this.options.base_map) ) { + if ( (typeof this.options.base_map === "string" && this.options.base_map !== "") || + (typeof this.options.base_map === "object" && Object.keys(this.options.base_map).length === 0) ) + { this._base_layer = this._createTileLayer(this.options.base_map); this._map.addLayer(this._base_layer); } @@ -52,7 +62,7 @@ export default class Leaflet extends Map { this._map.on("moveend", this._onMapMoveEnd, this); this._map.attributionControl.setPrefix("■ StoryMapJS"); - var map_type_arr = this.options.map_type.split(':'); + //var map_type_arr = this.options.map_type.split(':'); // Create Tile Layer this._tile_layer = this._createTileLayer(this.options.map_type); @@ -466,6 +476,12 @@ export default class Leaflet extends Map { this._map.setZoom(z); } + _updateLayer(nl) { + this._map.removeLayer(this._tile_layer); + this._tile_layer = this._createTileLayer(nl); + this._map.addLayer(this._tile_layer); + }, + _viewTo(loc, opts) { var _animate = true, _duration = this.options.duration/1000, diff --git a/src/js/map/leaflet/MapMarker.Leaflet.js b/src/js/map/leaflet/MapMarker.Leaflet.js index 2847c7f6..593795fd 100644 --- a/src/js/map/leaflet/MapMarker.Leaflet.js +++ b/src/js/map/leaflet/MapMarker.Leaflet.js @@ -24,7 +24,12 @@ export default class LeafletMapMarker extends MapMarker { }; this._icon = this._createIcon(); } else if (use_custom_marker && d.location.image) { - this._custom_image_icon = d.location.image; + //this._custom_image_icon = d.location.image; + this._custom_image_icon = { + url:d.location.image, + size: d.location.imageSize || [50,100], + anchor: this._customIconAnchor(d.location.imageSize) + } this._icon = this._createImage(); } else { this._icon = this._createDefaultIcon(false); @@ -92,7 +97,14 @@ export default class LeafletMapMarker extends MapMarker { _createImage(active) { // TODO: calculate shadow dimensions var className = active ? "vco-mapmarker-image-icon-active" : "vco-mapmarker-image-icon"; - return new L.icon({ iconUrl: url, iconSize: [48], iconAnchor: [24, 48], shadowSize: [68, 95], shadowAnchor: [22, 94], className: className }); + //return new L.icon({ iconUrl: url, iconSize: [48], iconAnchor: [24, 48], shadowSize: [68, 95], shadowAnchor: [22, 94], className: className }); + return new L.icon({ + iconUrl: this._custom_image_icon.url, + iconSize:this._custom_image_icon.size, + iconAnchor: this._custom_icon.anchor, + shadowSize: [68, 95], + shadowAnchor: [22, 94], + className: className}); } _createDefaultIcon(active) { From eb9111f7dbe4b6cf8905a2b6549c8269337d6b26 Mon Sep 17 00:00:00 2001 From: jstrand Date: Mon, 20 Jun 2022 15:40:33 -0700 Subject: [PATCH 3/7] updated the icon-image generation to use 1 element array for images --- src/js/core/Util.js | 12 ++++++------ src/js/map/Map.js | 12 ++++++++++++ src/js/map/leaflet/Map.Leaflet.js | 20 +++++++------------- src/js/map/leaflet/MapMarker.Leaflet.js | 9 +++++++-- 4 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/js/core/Util.js b/src/js/core/Util.js index 40de08dc..5221e20b 100644 --- a/src/js/core/Util.js +++ b/src/js/core/Util.js @@ -17,10 +17,10 @@ export function extend(/*Object*/ dest) /*-> Object*/ { // merge src properties } /** - * Implement mixin behavior. Based on + * Implement mixin behavior. Based on * https://blog.bitsrc.io/understanding-mixins-in-javascript-de5d3e02b466 - * @param {class} cls - * @param {...class} src + * @param {class} cls + * @param {...class} src */ export function classMixin(cls, ...src) { for (let _cl of src) { @@ -145,7 +145,7 @@ export function htmlify(str) { str = Emoji(str); } if (str.match(/

[\s\S]*?<\/p>/)) { - + return str; } else { return "

" + str + "

"; @@ -158,7 +158,7 @@ export function getUrlVars(string) { hash, hashes; str = string.toString(); - if (str.match('&')) { + if (str.match('&')) { str = str.replace("&", "&"); } else if (str.match('&')) { str = str.replace("&", "&"); @@ -189,7 +189,7 @@ export const ratio = { } return s; }, - + r16_9: function(size) { if (size.w !== null && size.w !== "") { return Math.round((size.w / 16) * 9); diff --git a/src/js/map/Map.js b/src/js/map/Map.js index 601b8b5a..5239a0db 100644 --- a/src/js/map/Map.js +++ b/src/js/map/Map.js @@ -23,6 +23,10 @@ Map = VCO.Class.extend({ export default class Map { constructor(elem, data, options) { + console.log(elem); + console.log(data); + console.log(options); + // DOM ELEMENTS this._el = { container: {}, @@ -154,8 +158,16 @@ export default class Map { // Merge Data and Options mergeData(this.options, options); + + console.log(options); + console.log(this.options); + mergeData(this.data, data); + console.log(data); + console.log(this.data); + + this._initLayout(); this._initEvents(); this._createMap(); diff --git a/src/js/map/leaflet/Map.Leaflet.js b/src/js/map/leaflet/Map.Leaflet.js index 7f30dde0..c148752e 100644 --- a/src/js/map/leaflet/Map.Leaflet.js +++ b/src/js/map/leaflet/Map.Leaflet.js @@ -23,6 +23,9 @@ export default class Leaflet extends Map { // Set the CRS of the Leaflet map. If user has indicated a specific CRS check it against a set of support CRS here var map_crs_requested; + + //console.log(this.options); + switch (this.options.map_crs) { case "EPSG:4326" : map_crs_requested = L.CRS.EPSG4326; @@ -31,7 +34,7 @@ export default class Leaflet extends Map { map_crs_requested = L.CRS.EPSG3857; break } - console.log(map_crs_requested); + //console.log(map_crs_requested); this._map = new L.map(this._el.map, { scrollWheelZoom:false, @@ -40,18 +43,9 @@ export default class Leaflet extends Map { } ); - function isEmptyObject(obj) { - var empt = true; - for(var key in obj) { - if(obj.hasOwnProperty(key)) empt = false; - } - return empt; - }; - // Detect if base_map has been defined in options object. - if ( (typeof this.options.base_map === "string" && this.options.base_map !== "") || - (typeof this.options.base_map === "object" && Object.keys(this.options.base_map).length === 0) ) - { + if ((typeof this.options.base_map === "string" && this.options.base_map !== "") || + (typeof this.options.base_map === "object" && Object.keys(this.options.base_map).length === 0) ) { this._base_layer = this._createTileLayer(this.options.base_map); this._map.addLayer(this._base_layer); } @@ -480,7 +474,7 @@ export default class Leaflet extends Map { this._map.removeLayer(this._tile_layer); this._tile_layer = this._createTileLayer(nl); this._map.addLayer(this._tile_layer); - }, + } _viewTo(loc, opts) { var _animate = true, diff --git a/src/js/map/leaflet/MapMarker.Leaflet.js b/src/js/map/leaflet/MapMarker.Leaflet.js index 593795fd..ede34bbc 100644 --- a/src/js/map/leaflet/MapMarker.Leaflet.js +++ b/src/js/map/leaflet/MapMarker.Leaflet.js @@ -27,10 +27,11 @@ export default class LeafletMapMarker extends MapMarker { //this._custom_image_icon = d.location.image; this._custom_image_icon = { url:d.location.image, - size: d.location.imageSize || [50,100], + size: d.location.imageSize || [48], anchor: this._customIconAnchor(d.location.imageSize) } this._icon = this._createImage(); + console.log(this._icon); } else { this._icon = this._createDefaultIcon(false); } @@ -92,7 +93,11 @@ export default class LeafletMapMarker extends MapMarker { } _createIcon() { - return new L.icon({ iconUrl: this._custom_icon.url, iconSize: this._custom_icon.size, iconAnchor: this._custom_icon.anchor }); + return new L.icon({ + iconUrl: this._custom_icon.url, + iconSize: this._custom_icon.size, + iconAnchor: this._custom_icon.anchor + }); } _createImage(active) { // TODO: calculate shadow dimensions From f2f43796edd9205a599f4e442bfc2ac4eeb2b0e4 Mon Sep 17 00:00:00 2001 From: jstrand Date: Wed, 22 Jun 2022 14:11:40 -0700 Subject: [PATCH 4/7] final changes for first round of integration of NFIS features to StoryMapJS --- src/js/map/Map.js | 24 +++++---- src/js/map/leaflet/MapMarker.Leaflet.js | 70 ++++++++++++------------- 2 files changed, 49 insertions(+), 45 deletions(-) diff --git a/src/js/map/Map.js b/src/js/map/Map.js index 5239a0db..2e40958c 100644 --- a/src/js/map/Map.js +++ b/src/js/map/Map.js @@ -106,9 +106,8 @@ export default class Map { // options is optional, and if defined can contain any options supported by the web map service // options is passed to the appropriate createTileLayer function which uses the attributes to compose the request URL map_type: "stamen:toner-lite", - - map_as_image: false, - map_mini: false, + map_as_image: false, // If true, default icons will display on hover, lines and history lines are suppressed. If false, default icons and lines will always display + map_mini: false, // If true, a mini-map with the base layer or stamen:toner-lite will be displayed. If false, a zoom control is displayed map_background_color: "#d9d9d9", map_subdomains: "", map_access_token: "", @@ -125,23 +124,28 @@ export default class Map { start_at_slide: 0, map_popup: false, zoom_distance: 100, - calculate_zoom: true, // Allow map to determine best zoom level between markers (recommended) - line_follows_path: true, // Map history path follows default line, if false it will connect previous and current only + calculate_zoom: true, // Allow map to determine best zoom level between markers (recommended) + line_follows_path: true, // Map history path follows default line, if false it will connect previous and current only line_color: "#333", line_color_inactive: "#000", line_weight: 5, line_opacity: 0.20, line_dash: "5,5", - line_join: "miter", - show_lines: true, - show_history_line: true, - map_center_offset: null, // takes object {top:0,left:0} + line_join: "miter", // Shape to use for corner of stroke can be any options for Leaflet Path + show_lines: true, // If true, will display edges joining map points + show_history_line: true, // If true, will highlight the last edge of map points + map_center_offset: null, // takes object {top:0,left:0} // Basemap support base_map: "", // Extended CRS Support map_crs: "", - use_custom_markers: false + + use_custom_markers: false // If use_custom_markers is true, the program will seek a location.icon or location.image URL definition. If detected will display them. + // If no icon or image URL is defined, a default marker will be displayed. + // If you want to suppress default markers, define an empty string or dummy image/icon + + }; // Animation diff --git a/src/js/map/leaflet/MapMarker.Leaflet.js b/src/js/map/leaflet/MapMarker.Leaflet.js index ede34bbc..206fe79c 100644 --- a/src/js/map/leaflet/MapMarker.Leaflet.js +++ b/src/js/map/leaflet/MapMarker.Leaflet.js @@ -11,43 +11,43 @@ export default class LeafletMapMarker extends MapMarker { ================================================== */ _createMarker(d, o) { - var icon = {}; //new L.Icon.Default(); - - if (d.location && typeof(d.location.lat) == 'number' && typeof(d.location.lon) == 'number') { - this.data.real_marker = true; - var use_custom_marker = o.use_custom_markers || d.location.use_custom_marker; - if (use_custom_marker && d.location.icon) { - this._custom_icon = { - url: d.location.icon, - size: d.location.iconSize || [48, 48], - anchor: this._customIconAnchor(d.location.iconSize) - }; - this._icon = this._createIcon(); - } else if (use_custom_marker && d.location.image) { - //this._custom_image_icon = d.location.image; - this._custom_image_icon = { - url:d.location.image, - size: d.location.imageSize || [48], - anchor: this._customIconAnchor(d.location.imageSize) - } - this._icon = this._createImage(); - console.log(this._icon); - } else { - this._icon = this._createDefaultIcon(false); - } - - this._marker = new L.marker([d.location.lat, d.location.lon], { - title: d.text.headline, - icon: this._icon - }); + var icon = {}; //new L.Icon.Default(); + + if (d.location && typeof(d.location.lat) == 'number' && typeof(d.location.lon) == 'number') { + this.data.real_marker = true; + var use_custom_marker = o.use_custom_markers || d.location.use_custom_marker; + if (use_custom_marker && d.location.icon) { + this._custom_icon = { + url: d.location.icon, + size: d.location.iconSize || [48, 48], + anchor: this._customIconAnchor(d.location.iconSize) + }; + this._icon = this._createIcon(); + } else if (use_custom_marker && d.location.image) { + this._custom_image_icon = { + url: d.location.image, + size: d.location.imageSize || [48], + anchor: this._customIconAnchor(d.location.iconSize) + } + this._icon = this._createImage(); + } else { + this._icon = this._createDefaultIcon(false); + } + + this._marker = new L.marker([d.location.lat, d.location.lon], { + title: d.text.headline, + icon: this._icon + }); + + this._marker.on("click", this._onMarkerClick, this); + + if (o.map_popup) { + this._createPopup(d, o); + } + } + } - this._marker.on("click", this._onMarkerClick, this); - if (o.map_popup) { - this._createPopup(d, o); - } - } - } _addTo(m) { if (this.data.real_marker) { From f84c8378811d7b71bc4f65dd24464db8a04de46d Mon Sep 17 00:00:00 2001 From: Meghan Frese Date: Wed, 27 Jul 2022 12:15:45 -0700 Subject: [PATCH 5/7] changes for adding a new projection --- package.json | 4 + src/js/map/leaflet/Map.Leaflet.js | 1468 ++++++++++++++------------- src/js/map/tile/TileLayer.Stamen.js | 2 + src/js/storymap/StoryMap.js | 4 +- 4 files changed, 785 insertions(+), 693 deletions(-) diff --git a/package.json b/package.json index 05be429d..930bcf39 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "adm-zip": "^0.5.4", "leaflet": "^0.7.2", "mini-css-extract-plugin": "^1.3.9", + "proj4": "^2.8.0", + "proj4leaflet": "^1.0.2", "prompt": "^1.1.0", "simple-git": "^2.36.1", "trash-cli": "^4.0.0", @@ -26,6 +28,8 @@ "jstrace": "^0.3.0", "less": "^3.13.0", "less-loader": "^7.1.0", + "mocha": "^10.0.0", + "mocha-phantomjs": "^4.1.0", "npm-run-all": "^4.1.5", "run-all": "^1.0.1", "run-s": "0.0.0", diff --git a/src/js/map/leaflet/Map.Leaflet.js b/src/js/map/leaflet/Map.Leaflet.js index c148752e..a53e19e7 100644 --- a/src/js/map/leaflet/Map.Leaflet.js +++ b/src/js/map/leaflet/Map.Leaflet.js @@ -1,5 +1,15 @@ -import { classMixin } from "../../core/Util"; -import { LeafletModule } from "leaflet"; +import { + classMixin +} from "../../core/Util"; +import { + LeafletModule +} from "leaflet"; +console.log(L); +import * as proj4 from "proj4"; +console.log(proj4); +// import * as L from 'leaflet'; +//import 'proj4leaflet'; +import * as proj4leaflet from "proj4leaflet"; import Map from "../Map"; import Events from "../../core/Events"; import ZoomifyTileLayer from "./extensions/Leaflet.TileLayer.Zoomify"; @@ -15,622 +25,693 @@ import StamenTileLayer from "../tile/TileLayer.Stamen"; //Map.Leaflet = Map.extend({ export default class Leaflet extends Map { - //includes: [Events], + //includes: [Events], - /* Create the Map - ================================================== */ - _createMap() { + /* Create the Map + ================================================== */ + _createMap() { - // Set the CRS of the Leaflet map. If user has indicated a specific CRS check it against a set of support CRS here - var map_crs_requested; + // Set the CRS of the Leaflet map. If user has indicated a specific CRS check it against a set of support CRS here + var map_crs_requested; - //console.log(this.options); + //console.log(this.options); - switch (this.options.map_crs) { - case "EPSG:4326" : - map_crs_requested = L.CRS.EPSG4326; - break; - default: - map_crs_requested = L.CRS.EPSG3857; - break - } - //console.log(map_crs_requested); - - this._map = new L.map(this._el.map, { - scrollWheelZoom:false, - zoomControl:!this.options.map_mini, - crs: map_crs_requested - } - ); - - // Detect if base_map has been defined in options object. - if ((typeof this.options.base_map === "string" && this.options.base_map !== "") || - (typeof this.options.base_map === "object" && Object.keys(this.options.base_map).length === 0) ) { - this._base_layer = this._createTileLayer(this.options.base_map); - this._map.addLayer(this._base_layer); - } - - this._map.on("load", this._onMapLoaded, this); - - - this._map.on("moveend", this._onMapMoveEnd, this); - this._map.attributionControl.setPrefix("■ StoryMapJS"); - - //var map_type_arr = this.options.map_type.split(':'); - - // Create Tile Layer - this._tile_layer = this._createTileLayer(this.options.map_type); - this._tile_layer.on("load", this._onTilesLoaded, this); - - // Add Tile Layer - this._map.addLayer(this._tile_layer); - - // Add Zoomify Image Layer - if (this._image_layer) { - this._map.addLayer(this._image_layer); - } - // Create Overall Connection Line - this._line = this._createLine(this._line); - this._line.setStyle({color:this.options.line_color_inactive}); - this._addLineToMap(this._line); - - // Create Active Line - this._line_active = this._createLine(this._line_active); - this._line_active.setStyle({opacity:1}); - this._addLineToMap(this._line_active); - - if (this.options.map_as_image) { - this._line_active.setStyle({opacity:0}); - this._line.setStyle({opacity:0}); - } - - - - } - - /* Create Mini Map - ================================================== */ - _createMiniMap() { - if (this.options.map_as_image) { - this.zoom_min_max.min = 0; - } - - if (!this.bounds_array) { - this.bounds_array = this._getAllMarkersBounds(this._markers); - } - - // Detect if base_map defined in options object, use this as layer on minimap if defined. - this._tile_layer_mini = this._createTileLayer(this.options.base_map || this.options.map_type); - this._mini_map = new MiniMapControl(this._tile_layer_mini, { - width: 150, - height: 100, - position: "topleft", - bounds_array: this.bounds_array, - zoomLevelFixed: this.zoom_min_max.min, - zoomAnimation: true, - aimingRectOptions: { - fillColor: "#FFFFFF", - color: "#FFFFFF", - opacity: 0.4, - weight: 1, - stroke: true - } - }).addTo(this._map); - - this._mini_map.getContainer().style.backgroundColor = this.options.map_background_color; - - } - - /* Create Background Map - ================================================== */ - _createBackgroundMap(tiles) { - - // TODO Check width and height - if (!this._image_layer) { - // Make Image Layer a Group - this._image_layer = new L.layerGroup(); - // Add Layer Group to Map - this._map.addLayer(this._image_layer); - - } else { - this._image_layer.clearLayers(); - } - - if (tiles) { - // Create Image Overlay for each tile in the group - for (let x in tiles) { - var target_tile = tiles[x], - image = {}, - tile = { - x: 0, - y: 0, - url: target_tile.src, - height: parseInt(target_tile.style.height.split("px")[0]), - width: parseInt(target_tile.style.width.split("px")[0]), - pos: { - start: 0, - end: 0 - } - }; - - if (target_tile.style.left || target_tile.style.top) { - if (target_tile.style.left) { - tile.x = parseInt(target_tile.style.left.split("px")[0]); - } - if (target_tile.style.top) { - tile.y = parseInt(target_tile.style.top.split("px")[0]); - } - } else if (target_tile.style["-webkit-transform"] || target_tile.style["transform"] || target_tile.style["-ms-transform"]) { - var t_array; - - if (target_tile.style["-webkit-transform"]) { - t_array = target_tile.style["-webkit-transform"].split("3d(")[1].split(", 0)")[0].split(", "); - } else if (target_tile.style["transform"]) { - t_array = target_tile.style["transform"].split("3d(")[1].split(", 0)")[0].split(", "); - } else if (target_tile.style["-ms-transform"]) { - t_array = target_tile.style["-ms-transform"].split("3d(")[1].split(", 0)")[0].split(", "); - } - - tile.x = parseInt(t_array[0].split("px")[0]); - tile.y = parseInt(t_array[1].split("px")[0]); - } - - - // If using toner, switch to toner lines - if (tile.url.match("toner")) { - //tile.url = tile.url.replace("/toner-lite/","/toner-lines/"); - tile.url = tile.url.replace("/toner-hybrid/","/toner-lines/"); - tile.url = tile.url.replace("/toner/","/toner-background/"); - } - - tile.pos.start = this._map.containerPointToLatLng([tile.x, tile.y]); - tile.pos.end = this._map.containerPointToLatLng([tile.x + tile.width, tile.y + tile.height]); - - image = new L.imageOverlay(tile.url, [tile.pos.start, tile.pos.end]); - this._image_layer.addLayer(image); - - } - } - - } - - /* Create Tile Layer - ================================================== */ - _createTileLayer(map_type, options) { - var _tilelayer = null, - // Set the map type by detecting the type, if an object the type is passed in url attribute - _map_type_arr = (typeof map_type === "object") ? map_type.url.split(':') : map_type.split(':'), - // Set the map options by decting type, if object the map options are passed in options attribute - _map_options = (typeof map_type === "object") ? map_type.options : {}, - _options = {}, - _attribution_knightlab = "Leaflet | " - - if (options) { - _options = options; // WARNING this is just a reference not a copy. If the idea was to protect options it isn't doing that. - } - - // Set Tiles - switch(_map_type_arr[0]) { - case 'mapbox': - var mapbox_url; - _options.attribution = _attribution_knightlab + "© Mapbox © OpenStreetMap"; - if (_map_type_arr.length > 2) { - // new form mapbox URL: - // mapbox://styles/nuknightlab/cjl6w8oio0agu2sltd04tp1kx - var this_mapbox_map = _map_type_arr[2].substr('//styles/'.length); - mapbox_url = "https://api.mapbox.com/styles/v1/" + this_mapbox_map + "/tiles/256/{z}/{x}/{y}@2x?access_token=" + this.options.map_access_token; - } else { - // legacy configuration - // nuknightlab.cjl6w8oio0agu2sltd04tp1kx - var mapbox_name = _map_type_arr[1]; - mapbox_url = "https://api.tiles.mapbox.com/v4/" + mapbox_name + "/{z}/{x}/{y}.png?access_token=" + this.options.map_access_token; + switch (this.options.map_crs) { + case "EPSG:4326": + console.log(L); + map_crs_requested = L.CRS.EPSG4326; + break; + case "EPSG:3978": + Proj4js.defs["EPSG:3978"] = "+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; + var crs_proj4def = "+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; + var crs_options ={ + resolutions: [8192,4096,2048,1024,512,256,128], + origin: [0,0] } - _tilelayer = new L.TileLayer(mapbox_url, _options); - break; - case 'stamen': - _tilelayer = new StamenTileLayer(_map_type_arr[1] || 'toner-lite', _options); - this._map.getContainer().style.backgroundColor = "#FFFFFF"; - break; - case 'zoomify': - _options.width = this.options.zoomify.width; - _options.height = this.options.zoomify.height; - _options.tolerance = this.options.zoomify.tolerance || 0.9; - _options.attribution = _attribution_knightlab + this.options.zoomify.attribution; - - _tilelayer = new ZoomifyTileLayer(this.options.zoomify.path, _options); - //this._image_layer = new L.imageOverlay(this.options.zoomify.path + "TileGroup0/0-0-0.jpg", _tilelayer.getZoomifyBounds(this._map)); - break; - case 'osm': - _options.subdomains = 'ab'; - _options.attribution = _attribution_knightlab + "© OpenStreetMap and contributors, under an open license"; - _tilelayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', _options); - break; - // Adding support for WMS layer by calling TileLayer.WMS Leaflet function - case 'wms': - _options.attribution = _attribution_knightlab + this.options.attribution; - // Force the transparency of the WMS layer so either the map background or base map are visible - _map_options.transparent = true; - _tilelayer = new L.TileLayer.WMS(map_type.url.slice(4), _map_options); - break; - // Adding support for WMTS layer by calling TileLayer Leaflet function - case 'wmts': - _tilelayer = new L.TileLayer(map_type.url.slice(5), _map_options); - break; - case 'http': - case 'https': - _options.subdomains = this.options.map_subdomains; - _options.attribution = _attribution_knightlab + this.options.attribution; - _tilelayer = new L.TileLayer(this.options.map_type, _options); + var EPSG3978 = new L.Proj.CRS( + crs_code, + crs_proj4def, + crs_options + ); + map_crs_requested = EPSG3978; + console.log(map_crs_requested); break; + default: //add case for 3978 **************************************** + map_crs_requested = L.CRS.EPSG3857; + break; + } + console.log(map_crs_requested); + + this._map = new L.map(this._el.map, { + scrollWheelZoom: false, + zoomControl: !this.options.map_mini, + crs: map_crs_requested + }); + + // Detect if base_map has been defined in options object. + if ((typeof this.options.base_map === "string" && this.options.base_map !== "") || + (typeof this.options.base_map === "object" && Object.keys(this.options.base_map).length === 0)) { + this._base_layer = this._createTileLayer(this.options.base_map); + this._map.addLayer(this._base_layer); + } + + this._map.on("load", this._onMapLoaded, this); + + + this._map.on("moveend", this._onMapMoveEnd, this); + this._map.attributionControl.setPrefix("■ StoryMapJS"); + + //var map_type_arr = this.options.map_type.split(':'); + + // Create Tile Layer + this._tile_layer = this._createTileLayer(this.options.map_type); + this._tile_layer.on("load", this._onTilesLoaded, this); + + // Add Tile Layer + this._map.addLayer(this._tile_layer); + + // Add Zoomify Image Layer + if (this._image_layer) { + this._map.addLayer(this._image_layer); + } + // Create Overall Connection Line + this._line = this._createLine(this._line); + this._line.setStyle({ + color: this.options.line_color_inactive + }); + this._addLineToMap(this._line); + + // Create Active Line + this._line_active = this._createLine(this._line_active); + this._line_active.setStyle({ + opacity: 1 + }); + this._addLineToMap(this._line_active); + + if (this.options.map_as_image) { + this._line_active.setStyle({ + opacity: 0 + }); + this._line.setStyle({ + opacity: 0 + }); + } + + + + } + + /* Create Mini Map + ================================================== */ + _createMiniMap() { + if (this.options.map_as_image) { + this.zoom_min_max.min = 0; + } + + if (!this.bounds_array) { + this.bounds_array = this._getAllMarkersBounds(this._markers); + } + + // Detect if base_map defined in options object, use this as layer on minimap if defined. + this._tile_layer_mini = this._createTileLayer(this.options.base_map || this.options.map_type); + this._mini_map = new MiniMapControl(this._tile_layer_mini, { + width: 150, + height: 100, + position: "topleft", + bounds_array: this.bounds_array, + zoomLevelFixed: this.zoom_min_max.min, + zoomAnimation: true, + aimingRectOptions: { + fillColor: "#FFFFFF", + color: "#FFFFFF", + opacity: 0.4, + weight: 1, + stroke: true + } + }).addTo(this._map); + + this._mini_map.getContainer().style.backgroundColor = this.options.map_background_color; + + } + + /* Create Background Map + ================================================== */ + _createBackgroundMap(tiles) { + + // TODO Check width and height + if (!this._image_layer) { + // Make Image Layer a Group + this._image_layer = new L.layerGroup(); + // Add Layer Group to Map + this._map.addLayer(this._image_layer); + + } else { + this._image_layer.clearLayers(); + } + + if (tiles) { + // Create Image Overlay for each tile in the group + for (let x in tiles) { + var target_tile = tiles[x], + image = {}, + tile = { + x: 0, + y: 0, + url: target_tile.src, + height: parseInt(target_tile.style.height.split("px")[0]), + width: parseInt(target_tile.style.width.split("px")[0]), + pos: { + start: 0, + end: 0 + } + }; + + if (target_tile.style.left || target_tile.style.top) { + if (target_tile.style.left) { + tile.x = parseInt(target_tile.style.left.split("px")[0]); + } + if (target_tile.style.top) { + tile.y = parseInt(target_tile.style.top.split("px")[0]); + } + } else if (target_tile.style["-webkit-transform"] || target_tile.style["transform"] || target_tile.style["-ms-transform"]) { + var t_array; + + if (target_tile.style["-webkit-transform"]) { + t_array = target_tile.style["-webkit-transform"].split("3d(")[1].split(", 0)")[0].split(", "); + } else if (target_tile.style["transform"]) { + t_array = target_tile.style["transform"].split("3d(")[1].split(", 0)")[0].split(", "); + } else if (target_tile.style["-ms-transform"]) { + t_array = target_tile.style["-ms-transform"].split("3d(")[1].split(", 0)")[0].split(", "); + } + + tile.x = parseInt(t_array[0].split("px")[0]); + tile.y = parseInt(t_array[1].split("px")[0]); + } + + + // If using toner, switch to toner lines + if (tile.url.match("toner")) { + //tile.url = tile.url.replace("/toner-lite/","/toner-lines/"); + tile.url = tile.url.replace("/toner-hybrid/", "/toner-lines/"); + tile.url = tile.url.replace("/toner/", "/toner-background/"); + } + + tile.pos.start = this._map.containerPointToLatLng([tile.x, tile.y]); + tile.pos.end = this._map.containerPointToLatLng([tile.x + tile.width, tile.y + tile.height]); + + image = new L.imageOverlay(tile.url, [tile.pos.start, tile.pos.end]); + this._image_layer.addLayer(image); + + } + } + + } + + /* Create Tile Layer + ================================================== */ + _createTileLayer(map_type, options) { + var _tilelayer = null, + // Set the map type by detecting the type, if an object the type is passed in url attribute + _map_type_arr = (typeof map_type === "object") ? map_type.url.split(':') : map_type.split(':'), + // Set the map options by decting type, if object the map options are passed in options attribute + _map_options = (typeof map_type === "object") ? map_type.options : {}, + _options = {}, + _attribution_knightlab = "Leaflet | " + + if (options) { + _options = options; // WARNING this is just a reference not a copy. If the idea was to protect options it isn't doing that. + } + + // Set Tiles + switch (_map_type_arr[0]) { + case 'mapbox': + var mapbox_url; + _options.attribution = _attribution_knightlab + "© Mapbox © OpenStreetMap"; + if (_map_type_arr.length > 2) { + // new form mapbox URL: + // mapbox://styles/nuknightlab/cjl6w8oio0agu2sltd04tp1kx + var this_mapbox_map = _map_type_arr[2].substr('//styles/'.length); + mapbox_url = "https://api.mapbox.com/styles/v1/" + this_mapbox_map + "/tiles/256/{z}/{x}/{y}@2x?access_token=" + this.options.map_access_token; + } else { + // legacy configuration + // nuknightlab.cjl6w8oio0agu2sltd04tp1kx + var mapbox_name = _map_type_arr[1]; + mapbox_url = "https://api.tiles.mapbox.com/v4/" + mapbox_name + "/{z}/{x}/{y}.png?access_token=" + this.options.map_access_token; + } + _tilelayer = new L.TileLayer(mapbox_url, _options); + break; + case 'stamen': + _tilelayer = new StamenTileLayer(_map_type_arr[1] || 'toner-lite', _options); + this._map.getContainer().style.backgroundColor = "#FFFFFF"; + break; + case 'zoomify': + _options.width = this.options.zoomify.width; + _options.height = this.options.zoomify.height; + _options.tolerance = this.options.zoomify.tolerance || 0.9; + _options.attribution = _attribution_knightlab + this.options.zoomify.attribution; + + _tilelayer = new ZoomifyTileLayer(this.options.zoomify.path, _options); + //this._image_layer = new L.imageOverlay(this.options.zoomify.path + "TileGroup0/0-0-0.jpg", _tilelayer.getZoomifyBounds(this._map)); + break; + case 'osm': + _options.subdomains = 'ab'; + _options.attribution = _attribution_knightlab + "© OpenStreetMap and contributors, under an open license"; + _tilelayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', _options); + break; + // Adding support for WMS layer by calling TileLayer.WMS Leaflet function + case 'wms': + _options.attribution = _attribution_knightlab + this.options.attribution; + // Force the transparency of the WMS layer so either the map background or base map are visible + _map_options.transparent = true; + _tilelayer = new L.TileLayer.WMS(map_type.url.slice(4), _map_options); + break; + // Adding support for WMTS layer by calling TileLayer Leaflet function + case 'wmts': + _tilelayer = new L.TileLayer(map_type.url.slice(5), _map_options); + break; + case 'http': + case 'https': + _options.subdomains = this.options.map_subdomains; + _options.attribution = _attribution_knightlab + this.options.attribution; + _tilelayer = new L.TileLayer(this.options.map_type, _options); + break; + + default: + _tilelayer = new StamenTileLayer('toner', _options); + break; + } + + return _tilelayer; + } + + /* Events + ================================================== */ + _onMapMoveEnd(e) { + + } + + _onTilesLoaded(e) { + this._createBackgroundMap(e.target._tiles); + this._tile_layer.off("load", this._onTilesLoaded, this); + } + + _onMapZoomed(e) { + this._map.off("zoomend", this._onMapZoomed, this); + + } + + _onMapZoom(e) { + + } + + /* Marker + ================================================== */ + _createMarker(d) { + var marker = new LeafletMapMarker(d, this.options); + marker.on('markerclick', this._onMarkerClick, this); + this._addMarker(marker); + this._markers.push(marker); + marker.marker_number = this._markers.length - 1; + this.fire("markerAdded", marker); + + } + + _addMarker(marker) { + marker.addTo(this._map); + } + + _removeMarker(marker) { + + } + + _markerOverview() { + var _location, _zoom; + // Hide Active Line + this._line_active.setStyle({ + opacity: 0 + }); + + if (this.options.map_type == "zoomify" && this.options.map_as_image) { + + var _center_zoom = this._tile_layer.getCenterZoom(this._map); + + _location = _center_zoom.center; + + if (this.options.map_center_offset && this.options.map_center_offset.left != 0 || this.options.map_center_offset.top != 0) { + _center_zoom.zoom = _center_zoom.zoom - 1; + _location = this._getMapCenterOffset(_location, _center_zoom.zoom); + } + + this._map.setView(_location, _center_zoom.zoom, { + pan: { + animate: true, + duration: this.options.duration / 1000, + easeLinearity: .10 + }, + zoom: { + animate: true, + duration: this.options.duration / 1000, + easeLinearity: .10 + } + }); + + + + } else { + this.bounds_array = this._getAllMarkersBounds(this._markers); + + if (this.options.map_center_offset && this.options.map_center_offset.left != 0 || this.options.map_center_offset.top != 0) { + var the_bounds = new L.latLngBounds(this.bounds_array); + _location = the_bounds.getCenter(); + _zoom = this._map.getBoundsZoom(the_bounds) + + _location = this._getMapCenterOffset(_location, _zoom - 1); + + this._map.setView(_location, _zoom - 1, { + pan: { + animate: true, + duration: this.options.duration / 1000, + easeLinearity: .10 + }, + zoom: { + animate: true, + duration: this.options.duration / 1000, + easeLinearity: .10 + } + }); - default: - _tilelayer = new StamenTileLayer('toner', _options); - break; - } - - return _tilelayer; - } - - /* Events - ================================================== */ - _onMapMoveEnd(e) { - - } - - _onTilesLoaded(e) { - this._createBackgroundMap(e.target._tiles); - this._tile_layer.off("load", this._onTilesLoaded, this); - } - - _onMapZoomed(e) { - this._map.off("zoomend", this._onMapZoomed, this); - - } - - _onMapZoom(e) { - - } - - /* Marker - ================================================== */ - _createMarker(d) { - var marker = new LeafletMapMarker(d, this.options); - marker.on('markerclick', this._onMarkerClick, this); - this._addMarker(marker); - this._markers.push(marker); - marker.marker_number = this._markers.length - 1; - this.fire("markerAdded", marker); - - } - - _addMarker(marker) { - marker.addTo(this._map); - } - - _removeMarker(marker) { - - } - - _markerOverview() { - var _location, _zoom; - // Hide Active Line - this._line_active.setStyle({opacity:0}); - - if (this.options.map_type == "zoomify" && this.options.map_as_image) { - - var _center_zoom = this._tile_layer.getCenterZoom(this._map); - - _location = _center_zoom.center; - - if (this.options.map_center_offset && this.options.map_center_offset.left != 0 || this.options.map_center_offset.top != 0) { - _center_zoom.zoom = _center_zoom.zoom - 1; - _location = this._getMapCenterOffset(_location, _center_zoom.zoom); - } - - this._map.setView(_location, _center_zoom.zoom, { - pan:{animate: true, duration: this.options.duration/1000, easeLinearity:.10}, - zoom:{animate: true, duration: this.options.duration/1000, easeLinearity:.10} - }); - - - - } else { - this.bounds_array = this._getAllMarkersBounds(this._markers); - - if (this.options.map_center_offset && this.options.map_center_offset.left != 0 || this.options.map_center_offset.top != 0) { - var the_bounds = new L.latLngBounds(this.bounds_array); - _location = the_bounds.getCenter(); - _zoom = this._map.getBoundsZoom(the_bounds) - - _location = this._getMapCenterOffset(_location, _zoom - 1); - - this._map.setView(_location, _zoom -1, { - pan:{animate: true, duration: this.options.duration/1000, easeLinearity:.10}, - zoom:{animate: true, duration: this.options.duration/1000, easeLinearity:.10} - }); - - - } else { - this._map.fitBounds(this.bounds_array, {padding:[15,15]}); - } - } + } else { + this._map.fitBounds(this.bounds_array, { + padding: [15, 15] + }); + } - if (this._mini_map) { - this._mini_map.minimize(); - } - - } - - _getAllMarkersBounds(markers_array) { - var bounds_array = []; - for (var i = 0; i < markers_array.length; i++) { - if (markers_array[i].data.real_marker) { - bounds_array.push( [markers_array[i].data.location.lat, markers_array[i].data.location.lon]); - } - }; - return bounds_array; - } - - _calculateMarkerZooms() { - for (var i = 0; i < this._markers.length; i++) { - - if (this._markers[i].data.location) { - var marker = this._markers[i], - prev_marker, - next_marker, - marker_location, - prev_marker_zoom, - next_marker_zoom, - calculated_zoom; - - - // MARKER LOCATION - if (marker.data.type && marker.data.type == "overview") { - marker_location = this._getMapCenter(true); - } else { - marker_location = marker.location(); - } - // PREVIOUS MARKER ZOOM - if (i > 0 ) { - prev_marker = this._markers[i-1].location(); - } else { - prev_marker = this._getMapCenter(true); - } - prev_marker_zoom = this._calculateZoomChange(prev_marker, marker_location); - - // NEXT MARKER ZOOM - if (i < (this._markers.length - 1)) { - next_marker = this._markers[i+1].location(); - } else { - next_marker = this._getMapCenter(true); - } - next_marker_zoom = this._calculateZoomChange(next_marker, marker_location); - - - if (prev_marker_zoom && prev_marker_zoom < next_marker_zoom) { - calculated_zoom = prev_marker_zoom; - } else if (next_marker_zoom){ - calculated_zoom = next_marker_zoom; - - } else { - calculated_zoom = prev_marker_zoom; - } - - if (this.options.map_center_offset && this.options.map_center_offset.left != 0 || this.options.map_center_offset.top != 0) { - calculated_zoom = calculated_zoom -1; - } - - marker.data.location.zoom = calculated_zoom; - } - - - }; - - - } - - - - /* Line - ================================================== */ - - _createLine(d) { - return new L.Polyline([], { - clickable: false, - color: this.options.line_color, - weight: this.options.line_weight, - opacity: this.options.line_opacity, - dashArray: this.options.line_dash, - lineJoin: this.options.line_join, - className: "vco-map-line" - } ); - - } - - _addLineToMap(line) { - this._map.addLayer(line); - } - - _addToLine(line, d) { - line.addLatLng({lon: d.location.lon, lat: d.location.lat}); - } - - _replaceLines(line, array) { - line.setLatLngs(array); - } - - /* Map - ================================================== */ - _panTo(loc, animate) { - this._map.panTo({lat:loc.lat, lon:loc.lon}, {animate: true, duration: this.options.duration/1000, easeLinearity:.10}); - } - - _zoomTo(z, animate) { - this._map.setZoom(z); - } - - _updateLayer(nl) { - this._map.removeLayer(this._tile_layer); - this._tile_layer = this._createTileLayer(nl); - this._map.addLayer(this._tile_layer); - } - - _viewTo(loc, opts) { - var _animate = true, - _duration = this.options.duration/1000, - _zoom = this._getMapZoom(), - _location = {lat:loc.lat, lon:loc.lon}; - - // Show Active Line - if (!this.options.map_as_image) { - this._line_active.setStyle({opacity:1}); - } - - if (loc.zoom) { - _zoom = loc.zoom; - } - - // Options - if (opts) { - if (opts.duration) { - if (opts.duration == 0) { - _animate = false; - } else { - _duration = duration; - } - } - - if (opts.zoom && this.options.calculate_zoom) { - _zoom = opts.zoom; - } - } - - // OFFSET - if (this.options.map_center_offset) { - _location = this._getMapCenterOffset(_location, _zoom); - } - - this._map.setView( - _location, - _zoom, - { - pan:{animate: _animate, duration: _duration, easeLinearity:.10}, - zoom:{animate: _animate, duration: _duration, easeLinearity:.10} - } - ) - - if (this._mini_map && this.options.width > this.options.skinny_size) { - if ((_zoom - 1) <= this.zoom_min_max.min ) { - this._mini_map.minimize(); - } else { - this._mini_map.restore(); - //this._mini_map.updateDisplay(_location, _zoom, _duration); - } - } - - } - - _getMapLocation(m) { - return this._map.latLngToContainerPoint(m); - } - - _getMapZoom() { - return this._map.getZoom(); - } - - _getMapCenter(offset) { - if (offset) { - - } - return this._map.getCenter(); - } - - _getMapCenterOffset(location, zoom) { - var target_point, - target_latlng; - - target_point = this._map.project(location, zoom).subtract([this.options.map_center_offset.left, this.options.map_center_offset.top]); - target_latlng = this._map.unproject(target_point, zoom); - - return target_latlng; - - } - - _getBoundsZoom(origin, destination, correct_for_center) { - var _origin = origin, - _padding = [(Math.abs(this.options.map_center_offset.left)*3),(Math.abs(this.options.map_center_offset.top)*3)]; - - - //_padding = [0,0]; - //_padding = [0,0]; - if (correct_for_center) { - var _lat = _origin.lat + (_origin.lat - destination.lat)/2, - _lng = _origin.lng + (_origin.lng - destination.lng)/2; - _origin = new L.LatLng(_lat, _lng); - } - - var bounds = new L.LatLngBounds([_origin, destination]); - if (this.options.less_bounce) { - return this._map.getBoundsZoom(bounds, false, _padding); - } else { - return this._map.getBoundsZoom(bounds, true, _padding); - } - } - - _getZoomifyZoom() { - - } - - _initialMapLocation() { - this._map.on("zoomend", this._onMapZoomed, this); - } - - /* Display - ================================================== */ - _updateMapDisplay(animate, d) { - if (animate) { - var duration = this.options.duration, - self = this; - - if (d) {duration = d }; - if (this.timer) {clearTimeout(this.timer)}; - - this.timer = setTimeout(function() { - self._refreshMap(); - }, duration); - - } else { - if (!this.timer) { - this._refreshMap(); - }; - } - - if (this._mini_map && this._el.container.offsetWidth < this.options.skinny_size ) { - this._mini_map.true_hide = true; - //this._mini_map.minimize(); - } else if (this._mini_map) { - this._mini_map.true_hide = false; - } - } - - _refreshMap() { - if (this._map) { - if (this.timer) { - clearTimeout(this.timer); - this.timer = null; - }; - - this._map.invalidateSize(); - - // Check to see if it's an overview - if (this._markers[this.current_marker].data.type && this._markers[this.current_marker].data.type == "overview") { - this._markerOverview(); - } else { - this._viewTo(this._markers[this.current_marker].data.location, {zoom:this._getMapZoom()}); - } - }; - } + } + + if (this._mini_map) { + this._mini_map.minimize(); + } + + } + + _getAllMarkersBounds(markers_array) { + var bounds_array = []; + for (var i = 0; i < markers_array.length; i++) { + if (markers_array[i].data.real_marker) { + bounds_array.push([markers_array[i].data.location.lat, markers_array[i].data.location.lon]); + } + }; + return bounds_array; + } + + _calculateMarkerZooms() { + for (var i = 0; i < this._markers.length; i++) { + + if (this._markers[i].data.location) { + var marker = this._markers[i], + prev_marker, + next_marker, + marker_location, + prev_marker_zoom, + next_marker_zoom, + calculated_zoom; + + + // MARKER LOCATION + if (marker.data.type && marker.data.type == "overview") { + marker_location = this._getMapCenter(true); + } else { + marker_location = marker.location(); + } + // PREVIOUS MARKER ZOOM + if (i > 0) { + prev_marker = this._markers[i - 1].location(); + } else { + prev_marker = this._getMapCenter(true); + } + prev_marker_zoom = this._calculateZoomChange(prev_marker, marker_location); + + // NEXT MARKER ZOOM + if (i < (this._markers.length - 1)) { + next_marker = this._markers[i + 1].location(); + } else { + next_marker = this._getMapCenter(true); + } + next_marker_zoom = this._calculateZoomChange(next_marker, marker_location); + + + if (prev_marker_zoom && prev_marker_zoom < next_marker_zoom) { + calculated_zoom = prev_marker_zoom; + } else if (next_marker_zoom) { + calculated_zoom = next_marker_zoom; + + } else { + calculated_zoom = prev_marker_zoom; + } + + if (this.options.map_center_offset && this.options.map_center_offset.left != 0 || this.options.map_center_offset.top != 0) { + calculated_zoom = calculated_zoom - 1; + } + + marker.data.location.zoom = calculated_zoom; + } + + + }; + + + } + + + + /* Line + ================================================== */ + + _createLine(d) { + return new L.Polyline([], { + clickable: false, + color: this.options.line_color, + weight: this.options.line_weight, + opacity: this.options.line_opacity, + dashArray: this.options.line_dash, + lineJoin: this.options.line_join, + className: "vco-map-line" + }); + + } + + _addLineToMap(line) { + this._map.addLayer(line); + } + + _addToLine(line, d) { + line.addLatLng({ + lon: d.location.lon, + lat: d.location.lat + }); + } + + _replaceLines(line, array) { + line.setLatLngs(array); + } + + /* Map + ================================================== */ + _panTo(loc, animate) { + this._map.panTo({ + lat: loc.lat, + lon: loc.lon + }, { + animate: true, + duration: this.options.duration / 1000, + easeLinearity: .10 + }); + } + + _zoomTo(z, animate) { + this._map.setZoom(z); + } + + _updateLayer(nl) { + this._map.removeLayer(this._tile_layer); + this._tile_layer = this._createTileLayer(nl); + this._map.addLayer(this._tile_layer); + } + + _viewTo(loc, opts) { + var _animate = true, + _duration = this.options.duration / 1000, + _zoom = this._getMapZoom(), + _location = { + lat: loc.lat, + lon: loc.lon + }; + + // Show Active Line + if (!this.options.map_as_image) { + this._line_active.setStyle({ + opacity: 1 + }); + } + + if (loc.zoom) { + _zoom = loc.zoom; + } + + // Options + if (opts) { + if (opts.duration) { + if (opts.duration == 0) { + _animate = false; + } else { + _duration = duration; + } + } + + if (opts.zoom && this.options.calculate_zoom) { + _zoom = opts.zoom; + } + } + + // OFFSET + if (this.options.map_center_offset) { + _location = this._getMapCenterOffset(_location, _zoom); + } + + this._map.setView( + _location, + _zoom, { + pan: { + animate: _animate, + duration: _duration, + easeLinearity: .10 + }, + zoom: { + animate: _animate, + duration: _duration, + easeLinearity: .10 + } + } + ) + + if (this._mini_map && this.options.width > this.options.skinny_size) { + if ((_zoom - 1) <= this.zoom_min_max.min) { + this._mini_map.minimize(); + } else { + this._mini_map.restore(); + //this._mini_map.updateDisplay(_location, _zoom, _duration); + } + } + + } + + _getMapLocation(m) { + return this._map.latLngToContainerPoint(m); + } + + _getMapZoom() { + return this._map.getZoom(); + } + + _getMapCenter(offset) { + if (offset) { + + } + return this._map.getCenter(); + } + + _getMapCenterOffset(location, zoom) { + var target_point, + target_latlng; + + target_point = this._map.project(location, zoom).subtract([this.options.map_center_offset.left, this.options.map_center_offset.top]); + target_latlng = this._map.unproject(target_point, zoom); + + return target_latlng; + + } + + _getBoundsZoom(origin, destination, correct_for_center) { + var _origin = origin, + _padding = [(Math.abs(this.options.map_center_offset.left) * 3), (Math.abs(this.options.map_center_offset.top) * 3)]; + + + //_padding = [0,0]; + //_padding = [0,0]; + if (correct_for_center) { + var _lat = _origin.lat + (_origin.lat - destination.lat) / 2, + _lng = _origin.lng + (_origin.lng - destination.lng) / 2; + _origin = new L.LatLng(_lat, _lng); + } + + var bounds = new L.LatLngBounds([_origin, destination]); + if (this.options.less_bounce) { + return this._map.getBoundsZoom(bounds, false, _padding); + } else { + return this._map.getBoundsZoom(bounds, true, _padding); + } + } + + _getZoomifyZoom() { + + } + + _initialMapLocation() { + this._map.on("zoomend", this._onMapZoomed, this); + } + + /* Display + ================================================== */ + _updateMapDisplay(animate, d) { + if (animate) { + var duration = this.options.duration, + self = this; + + if (d) { + duration = d + }; + if (this.timer) { + clearTimeout(this.timer) + }; + + this.timer = setTimeout(function() { + self._refreshMap(); + }, duration); + + } else { + if (!this.timer) { + this._refreshMap(); + }; + } + + if (this._mini_map && this._el.container.offsetWidth < this.options.skinny_size) { + this._mini_map.true_hide = true; + //this._mini_map.minimize(); + } else if (this._mini_map) { + this._mini_map.true_hide = false; + } + } + + _refreshMap() { + if (this._map) { + if (this.timer) { + clearTimeout(this.timer); + this.timer = null; + }; + + this._map.invalidateSize(); + + // Check to see if it's an overview + if (this._markers[this.current_marker].data.type && this._markers[this.current_marker].data.type == "overview") { + this._markerOverview(); + } else { + this._viewTo(this._markers[this.current_marker].data.location, { + zoom: this._getMapZoom() + }); + } + }; + } } @@ -640,90 +721,95 @@ classMixin(Leaflet, Events) /* Overwrite and customize Leaflet functions ================================================== */ L.Map.include({ - _tryAnimatedPan: function (center, options) { - var offset = this._getCenterOffset(center)._floor(); - - this.panBy(offset, options); - - return true; - }, - - _tryAnimatedZoom: function (center, zoom, options) { - if (typeof this._animateZoom == "undefined") { - return false; - } - if (this._animatingZoom) { return true; } - - options = options || {}; - - // offset is the pixel coords of the zoom origin relative to the current center - var scale = this.getZoomScale(zoom), - offset = this._getCenterOffset(center)._divideBy(1 - 1 / scale), - origin = this._getCenterLayerPoint()._add(offset); - - this - .fire('movestart') - .fire('zoomstart'); - - this._animateZoom(center, zoom, origin, scale, null, true); - - return true; - }, - - getBoundsZoom: function (bounds, inside, padding) { // (LatLngBounds[, Boolean, Point]) -> Number - bounds = L.latLngBounds(bounds); - - var zoom = this.getMinZoom() - (inside ? 1 : 0), - minZoom = this.getMinZoom(), - maxZoom = this.getMaxZoom(), - size = this.getSize(), - - nw = bounds.getNorthWest(), - se = bounds.getSouthEast(), - - zoomNotFound = true, - boundsSize, - zoom_array = [], - best_zoom = {x:0,y:0}, - smallest_zoom = {}, - final_zoom = 0; - - padding = L.point(padding || [0, 0]); - size = this.getSize(); - - - // Calculate Zoom Level Differences - for (var i = 0; i < maxZoom; i++) { - zoom++; - boundsSize = this.project(se, zoom).subtract(this.project(nw, zoom)).add(padding); - zoom_array.push({ - x:Math.abs(size.x - boundsSize.x), - y:Math.abs(size.y - boundsSize.y) - }) - } - - // Determine closest match - smallest_zoom = zoom_array[0]; - for (var j = 0; j < zoom_array.length; j++) { - if (zoom_array[j].y <= smallest_zoom.y) { - smallest_zoom.y = zoom_array[j].y; - best_zoom.y = j; - } - if (zoom_array[j].x <= smallest_zoom.x) { - smallest_zoom.x = zoom_array[j].x; - best_zoom.x = j; - } - - } - final_zoom = Math.round((best_zoom.y + best_zoom.x) / 2) - return final_zoom; - - } + _tryAnimatedPan: function(center, options) { + var offset = this._getCenterOffset(center)._floor(); + + this.panBy(offset, options); + + return true; + }, + + _tryAnimatedZoom: function(center, zoom, options) { + if (typeof this._animateZoom == "undefined") { + return false; + } + if (this._animatingZoom) { + return true; + } + + options = options || {}; + + // offset is the pixel coords of the zoom origin relative to the current center + var scale = this.getZoomScale(zoom), + offset = this._getCenterOffset(center)._divideBy(1 - 1 / scale), + origin = this._getCenterLayerPoint()._add(offset); + + this + .fire('movestart') + .fire('zoomstart'); + + this._animateZoom(center, zoom, origin, scale, null, true); + + return true; + }, + + getBoundsZoom: function(bounds, inside, padding) { // (LatLngBounds[, Boolean, Point]) -> Number + bounds = L.latLngBounds(bounds); + + var zoom = this.getMinZoom() - (inside ? 1 : 0), + minZoom = this.getMinZoom(), + maxZoom = this.getMaxZoom(), + size = this.getSize(), + + nw = bounds.getNorthWest(), + se = bounds.getSouthEast(), + + zoomNotFound = true, + boundsSize, + zoom_array = [], + best_zoom = { + x: 0, + y: 0 + }, + smallest_zoom = {}, + final_zoom = 0; + + padding = L.point(padding || [0, 0]); + size = this.getSize(); + + + // Calculate Zoom Level Differences + for (var i = 0; i < maxZoom; i++) { + zoom++; + boundsSize = this.project(se, zoom).subtract(this.project(nw, zoom)).add(padding); + zoom_array.push({ + x: Math.abs(size.x - boundsSize.x), + y: Math.abs(size.y - boundsSize.y) + }) + } + + // Determine closest match + smallest_zoom = zoom_array[0]; + for (var j = 0; j < zoom_array.length; j++) { + if (zoom_array[j].y <= smallest_zoom.y) { + smallest_zoom.y = zoom_array[j].y; + best_zoom.y = j; + } + if (zoom_array[j].x <= smallest_zoom.x) { + smallest_zoom.x = zoom_array[j].x; + best_zoom.x = j; + } + + } + final_zoom = Math.round((best_zoom.y + best_zoom.x) / 2) + return final_zoom; + + } }); L.TileLayer.include({ - getTiles: function() { - return this._tiles; - } + getTiles: function() { + return this._tiles; + } }); diff --git a/src/js/map/tile/TileLayer.Stamen.js b/src/js/map/tile/TileLayer.Stamen.js index 5e7d0256..b2baf4fa 100755 --- a/src/js/map/tile/TileLayer.Stamen.js +++ b/src/js/map/tile/TileLayer.Stamen.js @@ -3,6 +3,8 @@ http://maps.stamen.com/ ================================================== */ import { LeafletModule } from "leaflet"; +// import * as proj4 from "proj4"; +// import * as proj4leaflet from "proj4leaflet"; import { mergeData } from "../../core/Util" diff --git a/src/js/storymap/StoryMap.js b/src/js/storymap/StoryMap.js index fe3a36ab..c6a7064a 100755 --- a/src/js/storymap/StoryMap.js +++ b/src/js/storymap/StoryMap.js @@ -26,7 +26,7 @@ class StoryMap { this.on(key,callbacks); } else { for (var idx in callbacks) { - if (typeof(callbacks[idx]) == 'function') { + if (typeof(callbacks[idx]) == 'function') { this.on(key,callbacks[idx]); } else { console.log( @@ -52,7 +52,7 @@ class StoryMap { map: {}, menubar: {} }; - + // Determine Container Element if (typeof elem === 'object') { this._el.container = elem; From b611072ee3cd25412e8914f442c65a6224814011 Mon Sep 17 00:00:00 2001 From: Meghan Frese Date: Thu, 28 Jul 2022 10:10:33 -0700 Subject: [PATCH 6/7] import statment changes --- src/js/map/leaflet/Map.Leaflet.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/js/map/leaflet/Map.Leaflet.js b/src/js/map/leaflet/Map.Leaflet.js index a53e19e7..daa37aee 100644 --- a/src/js/map/leaflet/Map.Leaflet.js +++ b/src/js/map/leaflet/Map.Leaflet.js @@ -1,14 +1,10 @@ import { classMixin } from "../../core/Util"; -import { - LeafletModule -} from "leaflet"; -console.log(L); +import { LeafletModule } from "leaflet"; +export { LeafletModule } import * as proj4 from "proj4"; -console.log(proj4); -// import * as L from 'leaflet'; -//import 'proj4leaflet'; +export { proj4 } import * as proj4leaflet from "proj4leaflet"; import Map from "../Map"; import Events from "../../core/Events"; @@ -35,14 +31,16 @@ export default class Leaflet extends Map { var map_crs_requested; //console.log(this.options); - + var Ll = require('leaflet'); + console.log(Ll); + var proj4p = require('proj4'); + console.log(proj4p); switch (this.options.map_crs) { case "EPSG:4326": console.log(L); map_crs_requested = L.CRS.EPSG4326; break; case "EPSG:3978": - Proj4js.defs["EPSG:3978"] = "+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; var crs_proj4def = "+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; var crs_options ={ resolutions: [8192,4096,2048,1024,512,256,128], From 6ac8835e2417d83b62ceb583bb2b5bb0f2155290 Mon Sep 17 00:00:00 2001 From: jstrand Date: Mon, 8 Aug 2022 16:03:31 -0700 Subject: [PATCH 7/7] Upgraded leaflet and proj4leaflet to 180/102, added EPSG3978 support, tweaked baselayer logic --- package.json | 3 +- src/js/map/Map.js | 10 ----- src/js/map/leaflet/Map.Leaflet.js | 72 ++++++++++++++++++------------- 3 files changed, 42 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 930bcf39..b8568caa 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,8 @@ }, "dependencies": { "adm-zip": "^0.5.4", - "leaflet": "^0.7.2", + "leaflet": "^1.8.0", "mini-css-extract-plugin": "^1.3.9", - "proj4": "^2.8.0", "proj4leaflet": "^1.0.2", "prompt": "^1.1.0", "simple-git": "^2.36.1", diff --git a/src/js/map/Map.js b/src/js/map/Map.js index 2e40958c..692d0a86 100644 --- a/src/js/map/Map.js +++ b/src/js/map/Map.js @@ -23,9 +23,6 @@ Map = VCO.Class.extend({ export default class Map { constructor(elem, data, options) { - console.log(elem); - console.log(data); - console.log(options); // DOM ELEMENTS this._el = { @@ -162,15 +159,8 @@ export default class Map { // Merge Data and Options mergeData(this.options, options); - - console.log(options); - console.log(this.options); - mergeData(this.data, data); - console.log(data); - console.log(this.data); - this._initLayout(); this._initEvents(); diff --git a/src/js/map/leaflet/Map.Leaflet.js b/src/js/map/leaflet/Map.Leaflet.js index daa37aee..f0a90c70 100644 --- a/src/js/map/leaflet/Map.Leaflet.js +++ b/src/js/map/leaflet/Map.Leaflet.js @@ -1,10 +1,5 @@ -import { - classMixin -} from "../../core/Util"; +import { classMixin } from "../../core/Util"; import { LeafletModule } from "leaflet"; -export { LeafletModule } -import * as proj4 from "proj4"; -export { proj4 } import * as proj4leaflet from "proj4leaflet"; import Map from "../Map"; import Events from "../../core/Events"; @@ -28,47 +23,59 @@ export default class Leaflet extends Map { _createMap() { // Set the CRS of the Leaflet map. If user has indicated a specific CRS check it against a set of support CRS here - var map_crs_requested; + var map_crs; - //console.log(this.options); - var Ll = require('leaflet'); - console.log(Ll); - var proj4p = require('proj4'); - console.log(proj4p); switch (this.options.map_crs) { case "EPSG:4326": - console.log(L); - map_crs_requested = L.CRS.EPSG4326; + map_crs = L.CRS.EPSG4326; break; case "EPSG:3978": - var crs_proj4def = "+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; - var crs_options ={ - resolutions: [8192,4096,2048,1024,512,256,128], - origin: [0,0] - } - var EPSG3978 = new L.Proj.CRS( - crs_code, - crs_proj4def, - crs_options + L.CRS.EPSG3978 = new L.Proj.CRS( + "EPSG:3978", + "+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs" + ,{ + //Resolution factors (projection units per pixel, for example meters/pixel) for zoom levels; + resolutions: [ + 38364.660062653464, + 22489.62831258996, + 13229.193125052918, + 7937.5158750317505, + 4630.2175937685215, + 2645.8386250105837, + 926.0435187537042, + 529.1677250021168, + 317.50063500127004, + 185.20870375074085, + 111.12522225044451, + 66.1459656252646, + 38.36466006265346, + 22.48962831258996, + 7.9375158750317505, + 4.6302175937685215 + ], + origin: [-34655800, 39310000] + } ); - map_crs_requested = EPSG3978; - console.log(map_crs_requested); + map_crs = L.CRS.EPSG3978; break; - default: //add case for 3978 **************************************** - map_crs_requested = L.CRS.EPSG3857; + default: + map_crs = L.CRS.EPSG3857; break; } - console.log(map_crs_requested); this._map = new L.map(this._el.map, { scrollWheelZoom: false, zoomControl: !this.options.map_mini, - crs: map_crs_requested + crs: map_crs, + center: [0,0] }); + console.log(Object.keys(this.options.base_map).length) + // Detect if base_map has been defined in options object. - if ((typeof this.options.base_map === "string" && this.options.base_map !== "") || - (typeof this.options.base_map === "object" && Object.keys(this.options.base_map).length === 0)) { + if ((typeof this.options.base_map === "string" && this.options.base_map !== "") || (typeof this.options.base_map === "object" && Object.keys(this.options.base_map).length > 0)) { + + this._base_layer = this._createTileLayer(this.options.base_map); this._map.addLayer(this._base_layer); } @@ -228,6 +235,8 @@ export default class Leaflet extends Map { /* Create Tile Layer ================================================== */ _createTileLayer(map_type, options) { + console.log('in _createTileLayer') + console.log(map_type) var _tilelayer = null, // Set the map type by detecting the type, if an object the type is passed in url attribute _map_type_arr = (typeof map_type === "object") ? map_type.url.split(':') : map_type.split(':'), @@ -298,6 +307,7 @@ export default class Leaflet extends Map { _tilelayer = new StamenTileLayer('toner', _options); break; } + console.log(_tilelayer) return _tilelayer; }