From 5268164e75292b6fe71bdb6798f5bedeefeac14f Mon Sep 17 00:00:00 2001 From: jeannettestrand Date: Fri, 31 Aug 2018 14:28:21 -0700 Subject: [PATCH 1/6] added wms map feature, added use_custom_markers to storymap object --- StoryMapJS | 1 + 1 file changed, 1 insertion(+) create mode 160000 StoryMapJS diff --git a/StoryMapJS b/StoryMapJS new file mode 160000 index 00000000..2c62f8b3 --- /dev/null +++ b/StoryMapJS @@ -0,0 +1 @@ +Subproject commit 2c62f8b37357962e1224890073e7d61e33b3db2c From 7941511e2b9f110e2436ee7e11e5b6372adf9496 Mon Sep 17 00:00:00 2001 From: jeannettestrand Date: Fri, 31 Aug 2018 14:49:54 -0700 Subject: [PATCH 2/6] Added WMS layer feature, added use_custom_markers to storymap object --- source/js/VCO.StoryMap.js | 951 ++++++++++++----------- source/js/map/leaflet/VCO.Map.Leaflet.js | 5 +- 2 files changed, 492 insertions(+), 464 deletions(-) diff --git a/source/js/VCO.StoryMap.js b/source/js/VCO.StoryMap.js index f3ff0420..93873222 100755 --- a/source/js/VCO.StoryMap.js +++ b/source/js/VCO.StoryMap.js @@ -112,6 +112,7 @@ // TileLayerWMS WMS tile layer. // @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.js"; + // @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.WMS.js"; // TileLayerCanvas Tile layer made from canvases (for custom drawing purposes) // @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.Canvas.js"; @@ -234,234 +235,249 @@ // @codekit-prepend "map/VCO.MapMarker.js"; // @codekit-prepend "map/VCO.Map.js"; -// LEAFLET IMPLIMENTATION +// LEAFLET IMPLEMENTATION // @codekit-prepend "map/leaflet/VCO.MapMarker.Leaflet.js"; // @codekit-prepend "map/leaflet/VCO.Map.Leaflet.js"; -VCO.StoryMap = VCO.Class.extend({ - - includes: VCO.Events, - - /* Private Methods - ================================================== */ - initialize: function (elem, data, options,listeners) { - for (key in listeners) { - var callbacks = listeners[key]; - if (typeof(callbacks) == 'function') { - this.on(key,callbacks); - } else { - for (var idx in callbacks) { - this.on(key,callbacks[idx]); - } - } - } - var self = this; - // Version - this.version = "0.1.16"; - - // Ready - this.ready = false; - - // DOM ELEMENTS - this._el = { - container: {}, - storyslider: {}, - 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: VCO.StoryMap.SCRIPT_PATH, - height: this._el.container.offsetHeight, - width: this._el.container.offsetWidth, - layout: "landscape", // portrait or landscape - base_class: "", - default_bg_color: {r:256, g:256, b:256}, - map_size_sticky: 2.5, // Set as division 1/3 etc - map_center_offset: null, // takes object {top:0,left:0} - less_bounce: false, // Less map bounce when calculating zoom, false is good when there are clusters of tightly grouped markers - start_at_slide: 0, - call_to_action: false, - call_to_action_text: "", - menubar_height: 0, - skinny_size: 650, - relative_date: false, // Use momentjs to show a relative date from the slide.text.date.created_time field - // animation - duration: 1000, - ease: VCO.Ease.easeInOutQuint, - // interaction - dragging: true, - trackResize: true, - map_type: "stamen:toner-lite", - attribution: "", - map_mini: true, - map_subdomains: "", - map_as_image: false, - map_access_token: "pk.eyJ1IjoibnVrbmlnaHRsYWIiLCJhIjoiczFmd0hPZyJ9.Y_afrZdAjo3u8sz_r8m2Yw", // default - map_background_color: "#d9d9d9", - zoomify: { - path: "", - width: "", - height: "", - tolerance: 0.8, - attribution: "" +VCO.StoryMap = VCO.Class.extend( + + { + + includes: VCO.Events, + + /* Private Methods + ================================================== */ + initialize: function (elem, data, options, listeners) { + + // attach listeners to the storymap object, using the key/name, and function definition + for (key in listeners) { + // appears that listeners can contain either key:value, where value is a callbacks + // OR key:list, where list contains further list of callbacks + var callbacks = listeners[key]; + if (typeof(callbacks) == 'function') { + this.on(key,callbacks); + } else { + for (var idx in callbacks) { + this.on(key,callbacks[idx]); + } + } + } + var self = this; + // Version + this.version = "0.1.16"; + + // Ready + this.ready = false; + + // DOM ELEMENTS + this._el = { + container: {}, + storyslider: {}, + 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: VCO.StoryMap.SCRIPT_PATH, + height: this._el.container.offsetHeight, // HTML Dom property, setting height and width off the container element for the map + width: this._el.container.offsetWidth, + layout: "landscape", // portrait or landscape + base_class: "", + default_bg_color: {r:255, g:255, b:255}, + map_size_sticky: 2.5, // Set as division 1/3 etc + map_center_offset: null, // takes object {top:0,left:0} + less_bounce: false, // Less map bounce when calculating zoom, false is good when there are clusters of tightly grouped markers + start_at_slide: 0, + call_to_action: false, + call_to_action_text: "", + menubar_height: 0, + skinny_size: 650, + relative_date: false, // Use momentjs to show a relative date from the slide.text.date.created_time field + + // animation + duration: 1000, + ease: VCO.Ease.easeInOutQuint, + + // interaction + dragging: true, + trackResize: true, + map_type: "stamen:toner-lite", + wms_options: {}, + attribution: "", + map_mini: true, + map_subdomains: "", + map_as_image: false, + map_access_token: "pk.eyJ1IjoibnVrbmlnaHRsYWIiLCJhIjoiczFmd0hPZyJ9.Y_afrZdAjo3u8sz_r8m2Yw", // default + map_background_color: "#d9d9d9", + zoomify: { + path: "", + width: "", + height: "", + tolerance: 0.8, + attribution: "" + }, + map_height: 300, + storyslider_height: 600, + slide_padding_lr: 45, // padding on slide of slide + slide_default_fade: "0%", // landscape fade + menubar_default_y: 0, + path_gfx: "gfx", + 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: "#c34528", //"#DA0000", + line_color_inactive: "#CCC", + line_join: "miter", + line_weight: 3, + line_opacity: 0.80, + line_dash: "5,5", + show_lines: true, + show_history_line: true, + api_key_flickr: "f2cc870b4d233dd0a5bfe73fd0d64ef0", + language: "en", + use_custom_markers: false + }; + + // Current Slide + this.current_slide = this.options.start_at_slide; + + // Animation Objects + this.animator_map = null; + this.animator_storyslider = null; + + // Merge Options -- legacy, in case people still need to pass in + VCO.Util.mergeData(this.options, options); + this._initData(data); + + return this; + }, + + + /* 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); + } + self._initOptions(); + }); + } else if (typeof data === 'object') { + if (data.storymap) { + self.data = data.storymap; + } else { + trace("data must have a storymap property") + } + self._initOptions(); + } else { + trace("data has unknown type") + self._initOptions(); + } }, - map_height: 300, - storyslider_height: 600, - slide_padding_lr: 45, // padding on slide of slide - slide_default_fade: "0%", // landscape fade - menubar_default_y: 0, - path_gfx: "gfx", - 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: "#c34528", //"#DA0000", - line_color_inactive: "#CCC", - line_join: "miter", - line_weight: 3, - line_opacity: 0.80, - line_dash: "5,5", - show_lines: true, - show_history_line: true, - api_key_flickr: "f2cc870b4d233dd0a5bfe73fd0d64ef0", - language: "en" - }; - - // Current Slide - this.current_slide = this.options.start_at_slide; - - // Animation Objects - this.animator_map = null; - this.animator_storyslider = null; - - // Merge Options -- legacy, in case people still need to pass in - VCO.Util.mergeData(this.options, options); - - this._initData(data); - - return this; - }, - - /* 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); - } - self._initOptions(); - }); - } else if (typeof data === 'object') { - if (data.storymap) { - self.data = data.storymap; - } else { - trace("data must have a storymap property") - } - self._initOptions(); - } else { - trace("data has unknown type") - self._initOptions(); - } - }, - - /* Initialize the options - ================================================== */ - _initOptions: function() { - var self = this; - // Grab options from storymap data - VCO.Util.updateData(this.options, this.data); - - if (this.options.layout == "landscape") { - this.options.map_center_offset = {left: -200, top: 0}; - } - if (this.options.map_type == "zoomify" && this.options.map_as_image) { - this.options.map_size_sticky = 2; - } - if (this.options.map_as_image) { - this.options.calculate_zoom = false; - } - - // Use relative date calculations? - if(this.options.relative_date) { - if (typeof(moment) !== 'undefined') { - self._loadLanguage(); - } else { - VCO.Load.js(this.options.script_path + "/library/moment.js", function() { - self._loadLanguage(); - trace("LOAD MOMENTJS") - }); - } - } else { - self._loadLanguage(); - } - - // Emoji Support to Chrome? - if (VCO.Browser.chrome) { - VCO.Load.css(VCO.Util.urljoin(this.options.script_path,"../css/fonts/font.emoji.css"), function() { - trace("LOADED EMOJI CSS FOR CHROME") - }); - } - }, - - /* Load Language - ================================================== */ - _loadLanguage: function() { - var self = this; - if(this.options.language == 'en') { - this.options.language = VCO.Language; - self._onDataLoaded(); - } else { - VCO.Load.js(VCO.Util.urljoin(this.options.script_path, "/locale/" + this.options.language + ".js"), function() { - self._onDataLoaded(); - }); - } - }, - - /* Navigation - ================================================== */ - goTo: function(n) { - if (n != this.current_slide) { - this.current_slide = n; - this._storyslider.goTo(this.current_slide); - this._map.goTo(this.current_slide); - } - }, - - updateDisplay: function() { - if (this.ready) { - this._updateDisplay(); - } - }, + /* Initialize the options + ================================================== */ + _initOptions: function() { + var self = this; + + // Grab options from storymap data + + VCO.Util.updateData(this.options, this.data); + + if (this.options.layout == "landscape") { + this.options.map_center_offset = {left: -200, top: 0}; + } + if (this.options.map_type == "zoomify" && this.options.map_as_image) { + this.options.map_size_sticky = 2; + } + if (this.options.map_as_image) { + this.options.calculate_zoom = false; + } + + // Use relative date calculations? + if(this.options.relative_date) { + if (typeof(moment) !== 'undefined') { + self._loadLanguage(); + } else { + VCO.Load.js(this.options.script_path + "/library/moment.js", function() { + self._loadLanguage(); + trace("LOAD MOMENTJS") + }); + } + } else { + self._loadLanguage(); + } + + // Emoji Support to Chrome? + if (VCO.Browser.chrome) { + VCO.Load.css(VCO.Util.urljoin(this.options.script_path,"../css/fonts/font.emoji.css"), function() { + trace("LOADED EMOJI CSS FOR CHROME") + }); + } + trace(this.options); + }, + + /* Load Language + ================================================== */ + _loadLanguage: function() + { + var self = this; + if(this.options.language == 'en') { + this.options.language = VCO.Language; + self._onDataLoaded(); + } else { + VCO.Load.js(VCO.Util.urljoin(this.options.script_path, "/locale/" + this.options.language + ".js"), function() { + self._onDataLoaded(); + }); + } + }, + + /* Navigation + ================================================== */ + goTo: function(n) + { + if (n != this.current_slide) { + this.current_slide = n; + this._storyslider.goTo(this.current_slide); + this._map.goTo(this.current_slide); + } + }, + + updateDisplay: function() + { + if (this.ready) { + this._updateDisplay(); + } + }, /* Private Methods ================================================== */ @@ -491,256 +507,265 @@ VCO.StoryMap = VCO.Class.extend({ } }, */ - // 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 - this.options.map_height = (this.options.height / this.options.map_size_sticky); - this.options.storyslider_height = (this.options.height - this._el.menubar.offsetHeight - this.options.map_height - 1); - this._menubar.setSticky(0); - } else { - 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._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); - + // 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 + this.options.map_height = (this.options.height / this.options.map_size_sticky); + this.options.storyslider_height = (this.options.height - this._el.menubar.offsetHeight - this.options.map_height - 1); + this._menubar.setSticky(0); + } else { + 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._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 () { + _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); + // 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); + // 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); + // 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"; - //display_class += " vco-skinny"; - } 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, - easing: VCO.Ease.easeOutStrong, - complete: function () { - 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(); - } - this.animator_storyslider = VCO.Animate(this._el.storyslider, { - height: this.options.storyslider_height + "px", - 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); - } - - if (this.options.language.direction == 'rtl') { - display_class += ' vco-rtl'; - } - else if (VCO.Language.direction == 'rtl'){ - display_class += ' vco-rtl'; - } - - // 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); - } else { - this._menubar.setColor(false); - } - }, - - _onSlideChange: function(e) { - if (this.current_slide != e.current_slide) { - this.current_slide = e.current_slide; - this._map.goTo(this.current_slide); - 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; - this._storyslider.goTo(this.current_slide); - this.fire("change", {current_slide: this.current_slide}, this); - } - }, - - _onOverview: function(e) { - this._map.markerOverview(); - }, + _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"; + //display_class += " vco-skinny"; + } 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"; + } - _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); + // 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, + easing: VCO.Ease.easeOutStrong, + complete: function () { + 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(); + } + this.animator_storyslider = VCO.Animate(this._el.storyslider, { + height: this.options.storyslider_height + "px", + 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); + } + + if (this.options.language.direction == 'rtl') { + display_class += ' vco-rtl'; + } + else if (VCO.Language.direction == 'rtl'){ + display_class += ' vco-rtl'; + } + + // 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); + } else { + this._menubar.setColor(false); + } + }, + + _onSlideChange: function(e) + { + if (this.current_slide != e.current_slide) { + this.current_slide = e.current_slide; + this._map.goTo(this.current_slide); + 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; + this._storyslider.goTo(this.current_slide); + 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) { diff --git a/source/js/map/leaflet/VCO.Map.Leaflet.js b/source/js/map/leaflet/VCO.Map.Leaflet.js index 0170014d..0c2692c6 100644 --- a/source/js/map/leaflet/VCO.Map.Leaflet.js +++ b/source/js/map/leaflet/VCO.Map.Leaflet.js @@ -197,7 +197,10 @@ VCO.Map.Leaflet = VCO.Map.extend({ _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; - + case 'wms' : + _options.attribution = _attribution_knightlab + this.options.attribution; + _tilelayer = new L.TileLayer.WMS(map_type.slice(4), this.options.wms_options); + break; case 'http': case 'https': _options.subdomains = this.options.map_subdomains; From 05a665e31c456cdf7cdd01aeece9542fefe5c5e3 Mon Sep 17 00:00:00 2001 From: jeannettestrand Date: Fri, 31 Aug 2018 14:54:04 -0700 Subject: [PATCH 3/6] Corrected formatting --- source/js/VCO.StoryMap.js | 1523 +++++++++++----------- source/js/map/leaflet/VCO.Map.Leaflet.js | 1357 ++++++++++--------- 2 files changed, 1447 insertions(+), 1433 deletions(-) diff --git a/source/js/VCO.StoryMap.js b/source/js/VCO.StoryMap.js index 93873222..9c4864cf 100755 --- a/source/js/VCO.StoryMap.js +++ b/source/js/VCO.StoryMap.js @@ -10,816 +10,767 @@ TODO Message for Data Loading */ - /* Required Files CodeKit Import http://incident57.com/codekit/ ================================================== */ - // CORE - // @codekit-prepend "core/VCO.js"; - // @codekit-prepend "core/VCO.Util.js"; - // @codekit-prepend "data/VCO.Data.js"; - // @codekit-prepend "core/VCO.Class.js"; - // @codekit-prepend "core/VCO.Events.js"; - // @codekit-prepend "core/VCO.Browser.js"; - // @codekit-prepend "core/VCO.Load.js"; - +// @codekit-prepend "core/VCO.js"; +// @codekit-prepend "core/VCO.Util.js"; +// @codekit-prepend "data/VCO.Data.js"; +// @codekit-prepend "core/VCO.Class.js"; +// @codekit-prepend "core/VCO.Events.js"; +// @codekit-prepend "core/VCO.Browser.js"; +// @codekit-prepend "core/VCO.Load.js"; // LANGUAGE - // @codekit-prepend "language/VCO.Language.js"; - +// @codekit-prepend "language/VCO.Language.js"; // LIBRARY - // @codekit-prepend "library/VCO.Emoji.js"; - +// @codekit-prepend "library/VCO.Emoji.js"; // ANIMATION - // @codekit-prepend "animation/VCO.Ease.js"; - // @codekit-prepend "animation/VCO.Animate.js"; - +// @codekit-prepend "animation/VCO.Ease.js"; +// @codekit-prepend "animation/VCO.Animate.js"; // DOM - // @codekit-prepend "dom/VCO.Point.js"; - // @codekit-prepend "dom/VCO.DomMixins.js"; - // @codekit-prepend "dom/VCO.Dom.js"; - // @codekit-prepend "dom/VCO.DomUtil.js"; - // @codekit-prepend "dom/VCO.DomEvent.js"; - +// @codekit-prepend "dom/VCO.Point.js"; +// @codekit-prepend "dom/VCO.DomMixins.js"; +// @codekit-prepend "dom/VCO.Dom.js"; +// @codekit-prepend "dom/VCO.DomUtil.js"; +// @codekit-prepend "dom/VCO.DomEvent.js"; // UI - // @codekit-prepend "ui/VCO.Draggable.js"; - // @codekit-prepend "ui/VCO.Swipable.js"; - // @codekit-prepend "ui/VCO.MenuBar.js"; - // @codekit-prepend "ui/VCO.Message.js"; - +// @codekit-prepend "ui/VCO.Draggable.js"; +// @codekit-prepend "ui/VCO.Swipable.js"; +// @codekit-prepend "ui/VCO.MenuBar.js"; +// @codekit-prepend "ui/VCO.Message.js"; // MEDIA - // @codekit-prepend "media/VCO.MediaType.js"; - // @codekit-prepend "media/VCO.Media.js"; - +// @codekit-prepend "media/VCO.MediaType.js"; +// @codekit-prepend "media/VCO.Media.js"; // MEDIA TYPES - // @codekit-prepend "media/types/VCO.Media.Blockquote.js"; - // @codekit-prepend "media/types/VCO.Media.Flickr.js"; - // @codekit-prepend "media/types/VCO.Media.Instagram.js"; - // @codekit-prepend "media/types/VCO.Media.Profile.js"; - // @codekit-prepend "media/types/VCO.Media.GoogleDoc.js"; - // @codekit-prepend "media/types/VCO.Media.GooglePlus.js"; - // @codekit-prepend "media/types/VCO.Media.IFrame.js"; - // @codekit-prepend "media/types/VCO.Media.Image.js"; - // @codekit-prepend "media/types/VCO.Media.SoundCloud.js"; - // @codekit-prepend "media/types/VCO.Media.Storify.js"; - // @codekit-prepend "media/types/VCO.Media.Text.js"; - // @codekit-prepend "media/types/VCO.Media.Twitter.js"; - // @codekit-prepend "media/types/VCO.Media.Vimeo.js"; - // @codekit-prepend "media/types/VCO.Media.DailyMotion.js"; - // @codekit-prepend "media/types/VCO.Media.Vine.js"; - // @codekit-prepend "media/types/VCO.Media.Website.js"; - // @codekit-prepend "media/types/VCO.Media.Wikipedia.js"; - // @codekit-prepend "media/types/VCO.Media.YouTube.js"; - // @codekit-prepend "media/types/VCO.Media.Slider.js"; - +// @codekit-prepend "media/types/VCO.Media.Blockquote.js"; +// @codekit-prepend "media/types/VCO.Media.Flickr.js"; +// @codekit-prepend "media/types/VCO.Media.Instagram.js"; +// @codekit-prepend "media/types/VCO.Media.Profile.js"; +// @codekit-prepend "media/types/VCO.Media.GoogleDoc.js"; +// @codekit-prepend "media/types/VCO.Media.GooglePlus.js"; +// @codekit-prepend "media/types/VCO.Media.IFrame.js"; +// @codekit-prepend "media/types/VCO.Media.Image.js"; +// @codekit-prepend "media/types/VCO.Media.SoundCloud.js"; +// @codekit-prepend "media/types/VCO.Media.Storify.js"; +// @codekit-prepend "media/types/VCO.Media.Text.js"; +// @codekit-prepend "media/types/VCO.Media.Twitter.js"; +// @codekit-prepend "media/types/VCO.Media.Vimeo.js"; +// @codekit-prepend "media/types/VCO.Media.DailyMotion.js"; +// @codekit-prepend "media/types/VCO.Media.Vine.js"; +// @codekit-prepend "media/types/VCO.Media.Website.js"; +// @codekit-prepend "media/types/VCO.Media.Wikipedia.js"; +// @codekit-prepend "media/types/VCO.Media.YouTube.js"; +// @codekit-prepend "media/types/VCO.Media.Slider.js"; // STORYSLIDER - // @codekit-prepend "slider/VCO.Slide.js"; - // @codekit-prepend "slider/VCO.SlideNav.js"; - // @codekit-prepend "slider/VCO.StorySlider.js"; - +// @codekit-prepend "slider/VCO.Slide.js"; +// @codekit-prepend "slider/VCO.SlideNav.js"; +// @codekit-prepend "slider/VCO.StorySlider.js"; // LEAFLET - - // LEAFLET SRC - // Leaflet Core - // @codekit-prepend "map/leaflet/leaflet-src/Leaflet.js"; - // @codekit-prepend "map/leaflet/leaflet-src/core/Util.js"; - // @codekit-prepend "map/leaflet/leaflet-src/core/Class.js"; - // @codekit-prepend "map/leaflet/leaflet-src/core/Events.js"; - // @codekit-prepend "map/leaflet/leaflet-src/core/Browser.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geometry/Point.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geometry/Bounds.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geometry/Transformation.js"; - // @codekit-prepend "map/leaflet/leaflet-src/dom/DomUtil.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geo/LatLng.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geo/LatLngBounds.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geo/projection/Projection.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geo/projection/Projection.SphericalMercator.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geo/projection/Projection.LonLat.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geo/crs/CRS.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geo/crs/CRS.Simple.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geo/crs/CRS.EPSG3857.js"; - // @codekit-prepend "map/leaflet/leaflet-src/geo/crs/CRS.EPSG4326.js"; - // @codekit-prepend "map/leaflet/leaflet-src/map/Map.js"; - // @codekit-prepend "map/leaflet/leaflet-src/dom/DomEvent.js"; - // @codekit-prepend "map/leaflet/leaflet-src/dom/Draggable.js"; - // @codekit-prepend "map/leaflet/leaflet-src/core/Handler.js"; - // @codekit-prepend "map/leaflet/leaflet-src/control/Control.js"; - - // Additonal Projections EPSG:3395 projection (used by some map providers). - // "map/leaflet/leaflet-src/geo/projection/Projection.Mercator.js"; - // "map/leaflet/leaflet-src/geo/crs/CRS.EPSG3395.js"; - - // TileLayerWMS WMS tile layer. - // @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.js"; - // @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.WMS.js"; - - // TileLayerCanvas Tile layer made from canvases (for custom drawing purposes) - // @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.Canvas.js"; - - // ImageOverlay Used to display an image over a particular rectangular area of the map. - // @codekit-prepend "map/leaflet/leaflet-src/layer/ImageOverlay.js"; - - // Marker Markers to put on the map. - // @codekit-prepend "map/leaflet/leaflet-src/layer/marker/Icon.js"; - // @codekit-prepend "map/leaflet/leaflet-src/layer/marker/Icon.Default.js"; - // @codekit-prepend "map/leaflet/leaflet-src/layer/marker/Marker.js"; - - // DivIcon Lightweight div-based icon for markers. - // @codekit-prepend "map/leaflet/leaflet-src/layer/marker/DivIcon.js"; - - // Popup Used to display the map popup (used mostly for binding HTML data to markers and paths on click). - // "map/leaflet/leaflet-src/layer/Popup.js"; - // "map/leaflet/leaflet-src/layer/marker/Marker.Popup.js"; - - // LayerGroup Allows grouping several layers to handle them as one. - // @codekit-prepend "map/leaflet/leaflet-src/layer/LayerGroup.js"; - - // FeatureGroup Extends LayerGroup with mouse events and bindPopup method shared between layers. - // @codekit-prepend "map/leaflet/leaflet-src/layer/FeatureGroup.js"; - - // Path Vector rendering core (SVG-powered), enables overlaying the map with SVG paths. - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Path.js"; - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Path.SVG.js"; - // "map/leaflet/leaflet-src/layer/vector/Path.Popup.js"; - - // PathVML VML fallback for vector rendering core (IE 6-8) - // "map/leaflet/leaflet-src/layer/vector/Path.VML.js"; - - // Path Canvas fallback for vector rendering core (makes it work on Android 2+) - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/canvas/Path.Canvas.js"; - - // Polyline Polyline overlays. - // @codekit-prepend "map/leaflet/leaflet-src/geometry/LineUtil.js"; - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Polyline.js"; - - // Polygon Polygon overlays - // @codekit-prepend "map/leaflet/leaflet-src/geometry/PolyUtil.js"; - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Polygon.js"; - - // MultiPoly MultiPolygon and MultyPolyline layers. - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/MultiPoly.js"; - - // Rectangle - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Rectangle.js"; - - // Circle - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Circle.js"; - - // CircleMarker - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/CircleMarker.js"; - - // VectorsCanvas Canvas fallback for vector layers (polygons, polylines, circles, circlemarkers) - // @codekit-prepend "map/leaflet/leaflet-src/layer/vector/canvas/Polyline.Canvas.js"; - // "map/leaflet/leaflet-src/layer/vector/canvas/Polygon.Canvas.js"; - // "map/leaflet/leaflet-src/layer/vector/canvas/Circle.Canvas.js"; - // "map/leaflet/leaflet-src/layer/vector/canvas/CircleMarker.Canvas.js"; - - // GeoJSON GeoJSON layer, parses the data and adds corresponding layers above. - // "map/leaflet/leaflet-src/layer/GeoJSON.js"; - - // MapDrag Makes the map draggable (by mouse or touch). - // @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.Drag.js"; - - // MouseZoom Scroll wheel zoom and double click zoom on the map. - // @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.DoubleClickZoom.js"; - // @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.ScrollWheelZoom.js"; - - // TouchZoom Enables smooth touch zoom / tap / longhold / doubletap on iOS, IE10, Android - // @codekit-prepend "map/leaflet/leaflet-src/dom/DomEvent.DoubleTap.js"; - // @codekit-prepend "map/leaflet/leaflet-src/dom/DomEvent.Pointer.js"; - // @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.TouchZoom.js"; - // @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.Tap.js"; - - // BoxZoom Enables zooming to bounding box by shift-dragging the map. - // "map/leaflet/leaflet-src/map/handler/Map.BoxZoom.js"; - - // Keyboard Enables keyboard pan/zoom when the map is focused. - // "map/leaflet/leaflet-src/map/handler/Map.Keyboard.js"; - - // ControlZoom Basic zoom control with two buttons (zoom in / zoom out). - // @codekit-prepend "map/leaflet/leaflet-src/control/Control.Zoom.js"; - - // ControlAttrib Attribution control. - // @codekit-prepend "map/leaflet/leaflet-src/control/Control.Attribution.js"; - - // ControlScale Scale control. - // "map/leaflet/leaflet-src/control/Control.Scale.js"; - - // ControlLayers Layer Switcher control. - // "map/leaflet/leaflet-src/control/Control.Layers.js"; - - // AnimationPan Core panning animation support. - // @codekit-prepend "map/leaflet/leaflet-src/dom/PosAnimation.js"; - // @codekit-prepend "map/leaflet/leaflet-src/map/anim/Map.PanAnimation.js"; - - // AnimationTimer Timer-based pan animation fallback for browsers that don\'t support CSS3 transitions. - // @codekit-prepend "map/leaflet/leaflet-src/dom/PosAnimation.Timer.js"; - - // AnimationZoom Smooth zooming animation. Works only on browsers that support CSS3 Transitions. - // @codekit-prepend "map/leaflet/leaflet-src/map/anim/Map.ZoomAnimation.js"; - // @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.Anim.js"; - - // Geolocation Adds Map#locate method and related events to make geolocation easier.' - // "map/leaflet/leaflet-src/map/ext/Map.Geolocation.js"; - +// LEAFLET SRC +// Leaflet Core +// @codekit-prepend "map/leaflet/leaflet-src/Leaflet.js"; +// @codekit-prepend "map/leaflet/leaflet-src/core/Util.js"; +// @codekit-prepend "map/leaflet/leaflet-src/core/Class.js"; +// @codekit-prepend "map/leaflet/leaflet-src/core/Events.js"; +// @codekit-prepend "map/leaflet/leaflet-src/core/Browser.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geometry/Point.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geometry/Bounds.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geometry/Transformation.js"; +// @codekit-prepend "map/leaflet/leaflet-src/dom/DomUtil.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geo/LatLng.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geo/LatLngBounds.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geo/projection/Projection.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geo/projection/Projection.SphericalMercator.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geo/projection/Projection.LonLat.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geo/crs/CRS.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geo/crs/CRS.Simple.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geo/crs/CRS.EPSG3857.js"; +// @codekit-prepend "map/leaflet/leaflet-src/geo/crs/CRS.EPSG4326.js"; +// @codekit-prepend "map/leaflet/leaflet-src/map/Map.js"; +// @codekit-prepend "map/leaflet/leaflet-src/dom/DomEvent.js"; +// @codekit-prepend "map/leaflet/leaflet-src/dom/Draggable.js"; +// @codekit-prepend "map/leaflet/leaflet-src/core/Handler.js"; +// @codekit-prepend "map/leaflet/leaflet-src/control/Control.js"; +// Additonal Projections EPSG:3395 projection (used by some map providers). +// "map/leaflet/leaflet-src/geo/projection/Projection.Mercator.js"; +// "map/leaflet/leaflet-src/geo/crs/CRS.EPSG3395.js"; +// TileLayerWMS WMS tile layer. +// @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.js"; +// @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.WMS.js"; +// TileLayerCanvas Tile layer made from canvases (for custom drawing purposes) +// @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.Canvas.js"; +// ImageOverlay Used to display an image over a particular rectangular area of the map. +// @codekit-prepend "map/leaflet/leaflet-src/layer/ImageOverlay.js"; +// Marker Markers to put on the map. +// @codekit-prepend "map/leaflet/leaflet-src/layer/marker/Icon.js"; +// @codekit-prepend "map/leaflet/leaflet-src/layer/marker/Icon.Default.js"; +// @codekit-prepend "map/leaflet/leaflet-src/layer/marker/Marker.js"; +// DivIcon Lightweight div-based icon for markers. +// @codekit-prepend "map/leaflet/leaflet-src/layer/marker/DivIcon.js"; +// Popup Used to display the map popup (used mostly for binding HTML data to markers and paths on click). +// "map/leaflet/leaflet-src/layer/Popup.js"; +// "map/leaflet/leaflet-src/layer/marker/Marker.Popup.js"; +// LayerGroup Allows grouping several layers to handle them as one. +// @codekit-prepend "map/leaflet/leaflet-src/layer/LayerGroup.js"; +// FeatureGroup Extends LayerGroup with mouse events and bindPopup method shared between layers. +// @codekit-prepend "map/leaflet/leaflet-src/layer/FeatureGroup.js"; +// Path Vector rendering core (SVG-powered), enables overlaying the map with SVG paths. +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Path.js"; +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Path.SVG.js"; +// "map/leaflet/leaflet-src/layer/vector/Path.Popup.js"; +// PathVML VML fallback for vector rendering core (IE 6-8) +// "map/leaflet/leaflet-src/layer/vector/Path.VML.js"; +// Path Canvas fallback for vector rendering core (makes it work on Android 2+) +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/canvas/Path.Canvas.js"; +// Polyline Polyline overlays. +// @codekit-prepend "map/leaflet/leaflet-src/geometry/LineUtil.js"; +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Polyline.js"; +// Polygon Polygon overlays +// @codekit-prepend "map/leaflet/leaflet-src/geometry/PolyUtil.js"; +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Polygon.js"; +// MultiPoly MultiPolygon and MultyPolyline layers. +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/MultiPoly.js"; +// Rectangle +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Rectangle.js"; +// Circle +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/Circle.js"; +// CircleMarker +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/CircleMarker.js"; +// VectorsCanvas Canvas fallback for vector layers (polygons, polylines, circles, circlemarkers) +// @codekit-prepend "map/leaflet/leaflet-src/layer/vector/canvas/Polyline.Canvas.js"; +// "map/leaflet/leaflet-src/layer/vector/canvas/Polygon.Canvas.js"; +// "map/leaflet/leaflet-src/layer/vector/canvas/Circle.Canvas.js"; +// "map/leaflet/leaflet-src/layer/vector/canvas/CircleMarker.Canvas.js"; +// GeoJSON GeoJSON layer, parses the data and adds corresponding layers above. +// "map/leaflet/leaflet-src/layer/GeoJSON.js"; +// MapDrag Makes the map draggable (by mouse or touch). +// @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.Drag.js"; +// MouseZoom Scroll wheel zoom and double click zoom on the map. +// @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.DoubleClickZoom.js"; +// @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.ScrollWheelZoom.js"; +// TouchZoom Enables smooth touch zoom / tap / longhold / doubletap on iOS, IE10, Android +// @codekit-prepend "map/leaflet/leaflet-src/dom/DomEvent.DoubleTap.js"; +// @codekit-prepend "map/leaflet/leaflet-src/dom/DomEvent.Pointer.js"; +// @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.TouchZoom.js"; +// @codekit-prepend "map/leaflet/leaflet-src/map/handler/Map.Tap.js"; +// BoxZoom Enables zooming to bounding box by shift-dragging the map. +// "map/leaflet/leaflet-src/map/handler/Map.BoxZoom.js"; +// Keyboard Enables keyboard pan/zoom when the map is focused. +// "map/leaflet/leaflet-src/map/handler/Map.Keyboard.js"; +// ControlZoom Basic zoom control with two buttons (zoom in / zoom out). +// @codekit-prepend "map/leaflet/leaflet-src/control/Control.Zoom.js"; +// ControlAttrib Attribution control. +// @codekit-prepend "map/leaflet/leaflet-src/control/Control.Attribution.js"; +// ControlScale Scale control. +// "map/leaflet/leaflet-src/control/Control.Scale.js"; +// ControlLayers Layer Switcher control. +// "map/leaflet/leaflet-src/control/Control.Layers.js"; +// AnimationPan Core panning animation support. +// @codekit-prepend "map/leaflet/leaflet-src/dom/PosAnimation.js"; +// @codekit-prepend "map/leaflet/leaflet-src/map/anim/Map.PanAnimation.js"; +// AnimationTimer Timer-based pan animation fallback for browsers that don\'t support CSS3 transitions. +// @codekit-prepend "map/leaflet/leaflet-src/dom/PosAnimation.Timer.js"; +// AnimationZoom Smooth zooming animation. Works only on browsers that support CSS3 Transitions. +// @codekit-prepend "map/leaflet/leaflet-src/map/anim/Map.ZoomAnimation.js"; +// @codekit-prepend "map/leaflet/leaflet-src/layer/tile/TileLayer.Anim.js"; +// 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"; - +// @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/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"; - +// @codekit-prepend "map/VCO.MapMarker.js"; +// @codekit-prepend "map/VCO.Map.js"; // LEAFLET IMPLEMENTATION - // @codekit-prepend "map/leaflet/VCO.MapMarker.Leaflet.js"; - // @codekit-prepend "map/leaflet/VCO.Map.Leaflet.js"; +// @codekit-prepend "map/leaflet/VCO.MapMarker.Leaflet.js"; +// @codekit-prepend "map/leaflet/VCO.Map.Leaflet.js"; +VCO.StoryMap = VCO.Class.extend( + { + + includes: VCO.Events, + + /* Private Methods + ================================================== */ + initialize: function(elem, data, options, listeners) { + + // attach listeners to the storymap object, using the key/name, and function definition + for (key in listeners) { + // appears that listeners can contain either key:value, where value is a callbacks + // OR key:list, where list contains further list of callbacks + var callbacks = listeners[key]; + if (typeof(callbacks) == 'function') { + this.on(key, callbacks); + } else { + for (var idx in callbacks) { + this.on(key, callbacks[idx]); + } + } + } + var self = this; + // Version + this.version = "0.1.16"; + + // Ready + this.ready = false; + + // DOM ELEMENTS + this._el = { + container: {}, + storyslider: {}, + 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: VCO.StoryMap.SCRIPT_PATH, + height: this._el.container.offsetHeight, // HTML Dom property, setting height and width off the container element for the map + width: this._el.container.offsetWidth, + layout: "landscape", // portrait or landscape + base_class: "", + default_bg_color: { + r: 255, + g: 255, + b: 255 + }, + map_size_sticky: 2.5, // Set as division 1/3 etc + map_center_offset: null, // takes object {top:0,left:0} + less_bounce: false, // Less map bounce when calculating zoom, false is good when there are clusters of tightly grouped markers + start_at_slide: 0, + call_to_action: false, + call_to_action_text: "", + menubar_height: 0, + skinny_size: 650, + relative_date: false, // Use momentjs to show a relative date from the slide.text.date.created_time field + + // animation + duration: 1000, + ease: VCO.Ease.easeInOutQuint, + + // interaction + dragging: true, + trackResize: true, + map_type: "stamen:toner-lite", + wms_options: {}, + attribution: "", + map_mini: true, + map_subdomains: "", + map_as_image: false, + map_access_token: "pk.eyJ1IjoibnVrbmlnaHRsYWIiLCJhIjoiczFmd0hPZyJ9.Y_afrZdAjo3u8sz_r8m2Yw", // default + map_background_color: "#d9d9d9", + zoomify: { + path: "", + width: "", + height: "", + tolerance: 0.8, + attribution: "" + }, + map_height: 300, + storyslider_height: 600, + slide_padding_lr: 45, // padding on slide of slide + slide_default_fade: "0%", // landscape fade + menubar_default_y: 0, + path_gfx: "gfx", + 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: "#c34528", //"#DA0000", + line_color_inactive: "#CCC", + line_join: "miter", + line_weight: 3, + line_opacity: 0.80, + line_dash: "5,5", + show_lines: true, + show_history_line: true, + api_key_flickr: "f2cc870b4d233dd0a5bfe73fd0d64ef0", + language: "en", + use_custom_markers: false + }; + + // Current Slide + this.current_slide = this.options.start_at_slide; + + // Animation Objects + this.animator_map = null; + this.animator_storyslider = null; + + // Merge Options -- legacy, in case people still need to pass in + VCO.Util.mergeData(this.options, options); + this._initData(data); + + return this; + }, + + + /* 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); + } + self._initOptions(); + }); + } else if (typeof data === 'object') { + if (data.storymap) { + self.data = data.storymap; + } else { + trace("data must have a storymap property") + } + self._initOptions(); + } else { + trace("data has unknown type") + self._initOptions(); + } + }, + + /* Initialize the options + ================================================== */ + _initOptions: function() { + var self = this; + + // Grab options from storymap data + + VCO.Util.updateData(this.options, this.data); + + if (this.options.layout == "landscape") { + this.options.map_center_offset = { + left: -200, + top: 0 + }; + } + if (this.options.map_type == "zoomify" && this.options.map_as_image) { + this.options.map_size_sticky = 2; + } + if (this.options.map_as_image) { + this.options.calculate_zoom = false; + } + + // Use relative date calculations? + if (this.options.relative_date) { + if (typeof(moment) !== 'undefined') { + self._loadLanguage(); + } else { + VCO.Load.js(this.options.script_path + "/library/moment.js", function() { + self._loadLanguage(); + trace("LOAD MOMENTJS") + }); + } + } else { + self._loadLanguage(); + } + + // Emoji Support to Chrome? + if (VCO.Browser.chrome) { + VCO.Load.css(VCO.Util.urljoin(this.options.script_path, "../css/fonts/font.emoji.css"), function() { + trace("LOADED EMOJI CSS FOR CHROME") + }); + } + trace(this.options); + }, + + /* Load Language + ================================================== */ + _loadLanguage: function() { + var self = this; + if (this.options.language == 'en') { + this.options.language = VCO.Language; + self._onDataLoaded(); + } else { + VCO.Load.js(VCO.Util.urljoin(this.options.script_path, "/locale/" + this.options.language + ".js"), function() { + self._onDataLoaded(); + }); + } + }, + + /* Navigation + ================================================== */ + goTo: function(n) { + if (n != this.current_slide) { + this.current_slide = n; + this._storyslider.goTo(this.current_slide); + this._map.goTo(this.current_slide); + } + }, + + updateDisplay: function() { + if (this.ready) { + 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); + } + self._onDataLoaded(); + }); + } else if (typeof data === 'object') { + if (data.storymap) { + self.data = data.storymap; + } else { + trace("data must have a storymap property") + } + self._onDataLoaded(); + } else { + 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 + this.options.map_height = (this.options.height / this.options.map_size_sticky); + this.options.storyslider_height = (this.options.height - this._el.menubar.offsetHeight - this.options.map_height - 1); + this._menubar.setSticky(0); + } else { + 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._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"; + //display_class += " vco-skinny"; + } 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, + easing: VCO.Ease.easeOutStrong, + complete: function() { + 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(); + } + this.animator_storyslider = VCO.Animate(this._el.storyslider, { + height: this.options.storyslider_height + "px", + 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); + } + + if (this.options.language.direction == 'rtl') { + display_class += ' vco-rtl'; + } else if (VCO.Language.direction == 'rtl') { + display_class += ' vco-rtl'; + } + + // 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); + } else { + this._menubar.setColor(false); + } + }, + + _onSlideChange: function(e) { + if (this.current_slide != e.current_slide) { + this.current_slide = e.current_slide; + this._map.goTo(this.current_slide); + 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; + this._storyslider.goTo(this.current_slide); + this.fire("change", { + current_slide: this.current_slide + }, this); + } + }, -VCO.StoryMap = VCO.Class.extend( + _onOverview: function(e) { + this._map.markerOverview(); + }, - { - - includes: VCO.Events, - - /* Private Methods - ================================================== */ - initialize: function (elem, data, options, listeners) { - - // attach listeners to the storymap object, using the key/name, and function definition - for (key in listeners) { - // appears that listeners can contain either key:value, where value is a callbacks - // OR key:list, where list contains further list of callbacks - var callbacks = listeners[key]; - if (typeof(callbacks) == 'function') { - this.on(key,callbacks); - } else { - for (var idx in callbacks) { - this.on(key,callbacks[idx]); - } - } - } - var self = this; - // Version - this.version = "0.1.16"; - - // Ready - this.ready = false; - - // DOM ELEMENTS - this._el = { - container: {}, - storyslider: {}, - 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: VCO.StoryMap.SCRIPT_PATH, - height: this._el.container.offsetHeight, // HTML Dom property, setting height and width off the container element for the map - width: this._el.container.offsetWidth, - layout: "landscape", // portrait or landscape - base_class: "", - default_bg_color: {r:255, g:255, b:255}, - map_size_sticky: 2.5, // Set as division 1/3 etc - map_center_offset: null, // takes object {top:0,left:0} - less_bounce: false, // Less map bounce when calculating zoom, false is good when there are clusters of tightly grouped markers - start_at_slide: 0, - call_to_action: false, - call_to_action_text: "", - menubar_height: 0, - skinny_size: 650, - relative_date: false, // Use momentjs to show a relative date from the slide.text.date.created_time field - - // animation - duration: 1000, - ease: VCO.Ease.easeInOutQuint, - - // interaction - dragging: true, - trackResize: true, - map_type: "stamen:toner-lite", - wms_options: {}, - attribution: "", - map_mini: true, - map_subdomains: "", - map_as_image: false, - map_access_token: "pk.eyJ1IjoibnVrbmlnaHRsYWIiLCJhIjoiczFmd0hPZyJ9.Y_afrZdAjo3u8sz_r8m2Yw", // default - map_background_color: "#d9d9d9", - zoomify: { - path: "", - width: "", - height: "", - tolerance: 0.8, - attribution: "" - }, - map_height: 300, - storyslider_height: 600, - slide_padding_lr: 45, // padding on slide of slide - slide_default_fade: "0%", // landscape fade - menubar_default_y: 0, - path_gfx: "gfx", - 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: "#c34528", //"#DA0000", - line_color_inactive: "#CCC", - line_join: "miter", - line_weight: 3, - line_opacity: 0.80, - line_dash: "5,5", - show_lines: true, - show_history_line: true, - api_key_flickr: "f2cc870b4d233dd0a5bfe73fd0d64ef0", - language: "en", - use_custom_markers: false - }; - - // Current Slide - this.current_slide = this.options.start_at_slide; - - // Animation Objects - this.animator_map = null; - this.animator_storyslider = null; - - // Merge Options -- legacy, in case people still need to pass in - VCO.Util.mergeData(this.options, options); - this._initData(data); - - return this; - }, - - - /* 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); - } - self._initOptions(); - }); - } else if (typeof data === 'object') { - if (data.storymap) { - self.data = data.storymap; - } else { - trace("data must have a storymap property") - } - self._initOptions(); - } else { - trace("data has unknown type") - self._initOptions(); - } - }, - - /* Initialize the options - ================================================== */ - _initOptions: function() { - var self = this; - - // Grab options from storymap data - - VCO.Util.updateData(this.options, this.data); - - if (this.options.layout == "landscape") { - this.options.map_center_offset = {left: -200, top: 0}; - } - if (this.options.map_type == "zoomify" && this.options.map_as_image) { - this.options.map_size_sticky = 2; - } - if (this.options.map_as_image) { - this.options.calculate_zoom = false; - } - - // Use relative date calculations? - if(this.options.relative_date) { - if (typeof(moment) !== 'undefined') { - self._loadLanguage(); - } else { - VCO.Load.js(this.options.script_path + "/library/moment.js", function() { - self._loadLanguage(); - trace("LOAD MOMENTJS") - }); - } - } else { - self._loadLanguage(); - } - - // Emoji Support to Chrome? - if (VCO.Browser.chrome) { - VCO.Load.css(VCO.Util.urljoin(this.options.script_path,"../css/fonts/font.emoji.css"), function() { - trace("LOADED EMOJI CSS FOR CHROME") - }); - } - trace(this.options); - }, - - /* Load Language - ================================================== */ - _loadLanguage: function() - { - var self = this; - if(this.options.language == 'en') { - this.options.language = VCO.Language; - self._onDataLoaded(); - } else { - VCO.Load.js(VCO.Util.urljoin(this.options.script_path, "/locale/" + this.options.language + ".js"), function() { - self._onDataLoaded(); - }); - } - }, - - /* Navigation - ================================================== */ - goTo: function(n) - { - if (n != this.current_slide) { - this.current_slide = n; - this._storyslider.goTo(this.current_slide); - this._map.goTo(this.current_slide); - } - }, - - updateDisplay: function() - { - if (this.ready) { - 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); - } - self._onDataLoaded(); - }); - } else if (typeof data === 'object') { - if (data.storymap) { - self.data = data.storymap; - } else { - trace("data must have a storymap property") - } - self._onDataLoaded(); - } else { - 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 - this.options.map_height = (this.options.height / this.options.map_size_sticky); - this.options.storyslider_height = (this.options.height - this._el.menubar.offsetHeight - this.options.map_height - 1); - this._menubar.setSticky(0); - } else { - 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._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"; - //display_class += " vco-skinny"; - } 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, - easing: VCO.Ease.easeOutStrong, - complete: function () { - 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(); - } - this.animator_storyslider = VCO.Animate(this._el.storyslider, { - height: this.options.storyslider_height + "px", - 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); - } - - if (this.options.language.direction == 'rtl') { - display_class += ' vco-rtl'; - } - else if (VCO.Language.direction == 'rtl'){ - display_class += ' vco-rtl'; - } - - // 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); - } else { - this._menubar.setColor(false); - } - }, - - _onSlideChange: function(e) - { - if (this.current_slide != e.current_slide) { - this.current_slide = e.current_slide; - this._map.goTo(this.current_slide); - 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; - this._storyslider.goTo(this.current_slide); - this.fire("change", {current_slide: this.current_slide}, this); - } - }, + _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); + }, - _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); + }, - _onMenuBarCollapse: function(e) { - this._updateDisplay(e.y, true); - }, - - _onMouseClick: function(e) { - - }, - - _fireMouseEvent: function (e) { - if (!this._loaded) { - return; - } - - var type = e.type; - type = (type === 'mouseenter' ? 'mouseover' : (type === 'mouseleave' ? 'mouseout' : type)); - - if (!this.hasEventListeners(type)) { - return; - } - - 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); - } - } - - -}); + _onMouseClick: function(e) { + + }, + + _fireMouseEvent: function(e) { + if (!this._loaded) { + return; + } + + var type = e.type; + type = (type === 'mouseenter' ? 'mouseover' : (type === 'mouseleave' ? 'mouseout' : type)); + + if (!this.hasEventListeners(type)) { + return; + } + + 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); + } + } + + + }); (function(_) { - var scripts = document.getElementsByTagName("script"), - src = scripts[scripts.length-1].src; - _.SCRIPT_PATH = src.substr(0,src.lastIndexOf("/")); + var scripts = document.getElementsByTagName("script"), + src = scripts[scripts.length - 1].src; + _.SCRIPT_PATH = src.substr(0, src.lastIndexOf("/")); })(VCO.StoryMap) diff --git a/source/js/map/leaflet/VCO.Map.Leaflet.js b/source/js/map/leaflet/VCO.Map.Leaflet.js index 0c2692c6..9f00bc66 100644 --- a/source/js/map/leaflet/VCO.Map.Leaflet.js +++ b/source/js/map/leaflet/VCO.Map.Leaflet.js @@ -1,576 +1,634 @@ /* VCO.Map.Leaflet Creates a Map using Leaflet ================================================== */ - 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(':'); - - // 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: 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, - 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: function(tiles) { - - // 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) { - 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: function(map_type, options) { - var _tilelayer = null, - _map_type_arr = map_type.split(':'), - _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': - if (mapbox_name = _map_type_arr[1]) { - _options.subdomains = 'abcd'; - _options.attribution = _attribution_knightlab + "© Mapbox © OpenStreetMap"; - _tilelayer = new L.TileLayer("https://api.tiles.mapbox.com/v4/"+mapbox_name+"/{z}/{x}/{y}.png?access_token="+this.options.map_access_token, _options); - break; - } else { - trace("Mapbox configured but no map name provided."); - } - case 'stamen': - _tilelayer = new L.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 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('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', _options); - break; - case 'wms' : - _options.attribution = _attribution_knightlab + this.options.attribution; - _tilelayer = new L.TileLayer.WMS(map_type.slice(4), this.options.wms_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 L.StamenTileLayer('toner', _options); - 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) { - var marker = new VCO.MapMarker.Leaflet(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: function(marker) { - marker.addTo(this._map); - }, - - _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++) { - 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: function() { - 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); + 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(':'); + + // 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: 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, + 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: function(tiles) { + + // 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) { + 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: function(map_type, options) { + var _tilelayer = null, + _map_type_arr = map_type.split(':'), + _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': + if (mapbox_name = _map_type_arr[1]) { + _options.subdomains = 'abcd'; + _options.attribution = _attribution_knightlab + "© Mapbox © OpenStreetMap"; + _tilelayer = new L.TileLayer("https://api.tiles.mapbox.com/v4/" + mapbox_name + "/{z}/{x}/{y}.png?access_token=" + this.options.map_access_token, _options); + break; + } else { + trace("Mapbox configured but no map name provided."); + } + case 'stamen': + _tilelayer = new L.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 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('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', _options); + break; + case 'wms': + _options.attribution = _attribution_knightlab + this.options.attribution; + _tilelayer = new L.TileLayer.WMS(map_type.slice(4), this.options.wms_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 L.StamenTileLayer('toner', _options); + 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) { + var marker = new VCO.MapMarker.Leaflet(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: function(marker) { + marker.addTo(this._map); + }, + + _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 + } + }); - // 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); + } else { + this._map.fitBounds(this.bounds_array, { + padding: [15, 15] + }); + } - 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, - 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: 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) { - 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: 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) { - 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: 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(); - } else if (this._mini_map) { - 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(); - } else { - this._viewTo(this._markers[this.current_marker].data.location, {zoom:this._getMapZoom()}); - } - }; - } + } + + if (this._mini_map) { + this._mini_map.minimize(); + } + + }, + + _getAllMarkersBounds: function(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: function() { + 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: function(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: 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) { + 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: 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) { + 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: 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(); + } else if (this._mini_map) { + 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(); + } else { + this._viewTo(this._markers[this.current_marker].data.location, { + zoom: this._getMapZoom() + }); + } + }; + } }); @@ -578,90 +636,95 @@ VCO.Map.Leaflet = VCO.Map.extend({ /* 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; + } }); From 51d17357f6e37d0ae48bdc9cb96435a255d39a34 Mon Sep 17 00:00:00 2001 From: Jeannette Strand Date: Sat, 22 Sep 2018 22:05:27 -0700 Subject: [PATCH 4/6] resolved use-custom-markers image issue --- .../js/map/leaflet/VCO.MapMarker.Leaflet.js | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/source/js/map/leaflet/VCO.MapMarker.Leaflet.js b/source/js/map/leaflet/VCO.MapMarker.Leaflet.js index 9279c3ab..1a93a5f2 100644 --- a/source/js/map/leaflet/VCO.MapMarker.Leaflet.js +++ b/source/js/map/leaflet/VCO.MapMarker.Leaflet.js @@ -3,14 +3,14 @@ ================================================== */ 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; var use_custom_marker = o.use_custom_markers || d.location.use_custom_marker; @@ -27,26 +27,26 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ } 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); - + + 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 = ""; @@ -54,10 +54,10 @@ 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 { @@ -90,7 +90,7 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ _createImage: function(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: this._custom_image_icon, iconSize: [48], iconAnchor:[24, 48], shadowSize: [68, 95], shadowAnchor: [22, 94], className: className}); }, _createDefaultIcon: function(active) { @@ -105,15 +105,15 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ return [ 24, 48 ]; } }, - + _openPopup: function() { this._marker.openPopup(); }, - + _setIcon: function() { this._marker.setIcon(this._icon); }, - + _location: function() { if (this.data.real_marker) { return this._marker.getLatLng(); @@ -121,5 +121,5 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ return {}; } } - + }); From 4d54eb5ad0f4b3f6813989b21993483f4eb1a250 Mon Sep 17 00:00:00 2001 From: Jeannette Strand Date: Sat, 22 Sep 2018 23:16:57 -0700 Subject: [PATCH 5/6] further refined custom_image_icon setup in VCO.MapMarker.Leaflet --- source/js/map/leaflet/VCO.MapMarker.Leaflet.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/source/js/map/leaflet/VCO.MapMarker.Leaflet.js b/source/js/map/leaflet/VCO.MapMarker.Leaflet.js index 1a93a5f2..19df9ad1 100644 --- a/source/js/map/leaflet/VCO.MapMarker.Leaflet.js +++ b/source/js/map/leaflet/VCO.MapMarker.Leaflet.js @@ -12,6 +12,10 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ var icon = {}; //new L.Icon.Default(); if (d.location && d.location.lat && d.location.lon) { + console.log("d==============================="); + console.log(d); + console.log("d.location======================"); + console.log(d.location); 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) { @@ -22,7 +26,11 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ }; 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 || [50,100], + anchor: this._customIconAnchor(d.location.imageSize) + } this._icon = this._createImage(); } else { this._icon = this._createDefaultIcon(false); @@ -90,7 +98,7 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ _createImage: function(active) { // TODO: calculate shadow dimensions var className = active ? "vco-mapmarker-image-icon-active" : "vco-mapmarker-image-icon"; - return new L.icon({iconUrl: this._custom_image_icon, 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, className: className}); }, _createDefaultIcon: function(active) { From 70f0af66948fa53558bfa0b5615ec210e120b789 Mon Sep 17 00:00:00 2001 From: Jeannette Strand Date: Sun, 23 Sep 2018 20:29:08 -0700 Subject: [PATCH 6/6] clearing out work --- source/js/map/leaflet/VCO.MapMarker.Leaflet.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/source/js/map/leaflet/VCO.MapMarker.Leaflet.js b/source/js/map/leaflet/VCO.MapMarker.Leaflet.js index 19df9ad1..244847f6 100644 --- a/source/js/map/leaflet/VCO.MapMarker.Leaflet.js +++ b/source/js/map/leaflet/VCO.MapMarker.Leaflet.js @@ -105,7 +105,13 @@ VCO.MapMarker.Leaflet = VCO.MapMarker.extend({ var className = active ? "vco-mapmarker-active" : "vco-mapmarker"; return L.divIcon({className: className + " " + this.media_icon_class, iconAnchor:[10, 10]}); }, - + _customImageIconAnchor: function(size) { + if (size) { + return [ size[0] * 0.5, size[1]* 0.5 ]; + } else { + return [ 25, 50 ]; + } + }, _customIconAnchor: function(size) { if (size) { return [ size[0] * 0.5, size[1] ];