X-Git-Url: https://dev.renevier.net/gitweb.cgi?p=syp.git;a=blobdiff_plain;f=js%2Fsyp.js;h=0f7785491f15a681bc556a81d0e089e7e39376a3;hp=fdd69ed7253b293e1d6dd9b0c1044925ee8fa4e8;hb=19730f2e2bbf61f389882c646f58349df3bcd848;hpb=0aaa61f458673b76783ce5fc1112dcc29697b6ca diff --git a/js/syp.js b/js/syp.js index fdd69ed..0f77854 100644 --- a/js/syp.js +++ b/js/syp.js @@ -1,9 +1,76 @@ /* Copyright (c) 2009 Arnaud Renevier, Inc, published under the modified BSD * license. */ +/* + * With canvas rendering engine, externalgraphics are drawn by loading and + * Image javascript object and drawing it with drawImage once it has been + * loaded. If matching feature is deleted while image is loading, redraw + * function will be called before drawImage and therefore, feature is removed, + * but image is still drawn on the screen. We fix it with locks: when an image is + * loading, we defer redraw method. + */ +OpenLayers.Renderer.Canvas.prototype = OpenLayers.Util.extend({ + needsRedraw: false, + imagesLoading: 0 +}, OpenLayers.Renderer.Canvas.prototype); +OpenLayers.Renderer.Canvas.prototype.oldRedraw = OpenLayers.Renderer.Canvas.prototype.redraw; +OpenLayers.Renderer.Canvas.prototype.redraw = function() { + if (this.imagesLoading > 0) { + this.needsRedraw = true; + return; + } + OpenLayers.Renderer.Canvas.prototype.oldRedraw.apply(this, arguments); +} +OpenLayers.Renderer.Canvas.prototype.drawExternalGraphic = function(pt, style) { + var img = new Image(); + img.src = style.externalGraphic; + + if(style.graphicTitle) { + img.title=style.graphicTitle; + } + + var width = style.graphicWidth || style.graphicHeight; + var height = style.graphicHeight || style.graphicWidth; + width = width ? width : style.pointRadius*2; + height = height ? height : style.pointRadius*2; + var xOffset = (style.graphicXOffset != undefined) ? + style.graphicXOffset : -(0.5 * width); + var yOffset = (style.graphicYOffset != undefined) ? + style.graphicYOffset : -(0.5 * height); + var opacity = style.graphicOpacity || style.fillOpacity; + + var context = { img: img, + x: (pt[0]+xOffset), + y: (pt[1]+yOffset), + width: width, + height: height, + canvas: this.canvas }; + + var self = this; + this.imagesLoading++; + img.onerror = function() { + self.imagesLoading--; + if ((self.imagesLoading == 0) && (self.needsRedraw)) { + self.needsRedraw = false; + self.redraw(); + } + } + img.onload = OpenLayers.Function.bind( function() { + self.imagesLoading--; + if ((self.imagesLoading == 0) && (self.needsRedraw)) { + self.needsRedraw = false; + self.redraw(); + } else { + this.canvas.drawImage(this.img, this.x, + this.y, this.width, this.height); + } + }, context); +} + + OpenLayers.Control.SypAttribution = OpenLayers.Class (OpenLayers.Control.Attribution, { updateAttribution: function() { - var attributions = [SypStrings.propulsedByLink]; + var attributions = [SypStrings.poweredByLink]; if (this.map && this.map.layers) { for(var i=0, len=this.map.layers.length; i 1) ? feature.attributes.count: ""; } } }); var selectStyle = new OpenLayers.Style({ - externalGraphic: this.Settings.MARKER_SELECT_ICON, - graphicHeight: this.Settings.MARKER_SELECT_ICON_HEIGHT || 32 + externalGraphic: this.Markers.SELECT_ICON, + graphicHeight: this.Markers.HEIGHT || 32 }); var styleMap = new OpenLayers.StyleMap ( {"default": defaultStyle, @@ -100,7 +164,7 @@ var SYP = { format: OpenLayers.Format.KML, projection: this.map.displayProjection, eventListeners: { scope: this, - loadend: this.checkForFeatures + loadend: this.dataLayerEndLoad } }); @@ -118,12 +182,38 @@ var SYP = { return control; }, + dataLayerEndLoad: function() { + if (!this.checkForFeatures()) { + return; + } + + var map = this.map; + if (map.getControlsByClass("OpenLayers.Control.ArgParser")[0].center + == null) { // map center was not set in ArgParser control. + var orig = this.Utils.mbr (this.dataLayer); + var centerBounds = new OpenLayers.Bounds(); + + var mapProj = map.getProjectionObject(); + var sypOrigProj = new OpenLayers.Projection("EPSG:4326"); + + var bottomLeft = new OpenLayers.LonLat(orig[0],orig[1]); + bottomLeft = bottomLeft.transform(sypOrigProj, mapProj); + var topRight = new OpenLayers.LonLat(orig[2],orig[3]) + topRight = topRight.transform(sypOrigProj, mapProj); + + centerBounds.extend(bottomLeft); + centerBounds.extend(topRight); + map.zoomToExtent(centerBounds); + } + }, + checkForFeatures: function() { var features = this.dataLayer.features; if (features.length == 0) { var message = SypStrings.noImageRegistered; this.Utils.displayUserMessage(message, "warn"); } + return !!features.length; }, createPopup: function(position, contentHTML) { @@ -156,11 +246,36 @@ var SYP = { } }, + onZoomClusterEnd: function(arg) { + var map = arg.object; + var point = new OpenLayers.Geometry.Point(this.lonlat.lon, this.lonlat.lat); + var center = map.getCenter(); + for (var i = this.layer.features.length; i-->0;) { + var feature = this.layer.features[i]; + if (feature.geometry.equals(point) && + (feature.attributes.count == this.count)) { + var self = this; + window.setTimeout(function() { map.setCenter(self.lonlat, map.zoom + 1)}, 500); + return; + } + } + SYP.selectControl.activate(); + map.events.unregister("zoomend", this, SYP.onZoomClusterEnd); + }, + onFeatureSelect: function(feature) { var map = feature.layer.map; + if (feature.attributes.count > 1) { this.unselect(feature); var lonlat = new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y); + var args = { + lonlat: lonlat, + layer: feature.layer, + count: feature.attributes.count + } + map.events.register("zoomend", args, SYP.onZoomClusterEnd); + SYP.selectControl.deactivate(); map.setCenter(lonlat, map.zoom + 1); return; } @@ -170,7 +285,27 @@ var SYP = { } var popup = feature.popup; - var brCorner = SYP.Utils.brCorner(map, 8); + var popupPos = null; + switch (sypSettings.popupPos) { + case 0: + popupPos = feature.geometry.getBounds().getCenterLonLat(); + break; + case 1: + popupPos = SYP.Utils.tlCorner(map, 8); + break; + case 2: + popupPos = SYP.Utils.trCorner(map, 8); + break; + case 3: + popupPos = SYP.Utils.brCorner(map, 8); + break; + case 4: + popupPos = SYP.Utils.blCorner(map, 8); + break; + default: + popupPos = SYP.Utils.brCorner(map, 8); + break; + } // we cannot reuse popup; we need to recreate it in order for IE // expressions to work. Otherwise, we get a 0x0 image on second view. @@ -179,8 +314,9 @@ var SYP = { } var contentHTML; if (feature.cluster[0].attributes.name) { + // escaping name is necessary because it's not enclosed in another html tag. contentHTML = "

" + - feature.cluster[0].attributes.name + + SYP.Utils.escapeHTML(feature.cluster[0].attributes.name) + "

" + feature.cluster[0].attributes.description; } else { @@ -190,7 +326,7 @@ var SYP = { this.map.events.register("movestart", this, this._unselect = function () { this.unselect(feature)}); return; } - popup = SYP.createPopup(brCorner, contentHTML); + popup = SYP.createPopup(popupPos, contentHTML); var control = this; popup.hide = function () { OpenLayers.Element.hide(this.div); @@ -198,17 +334,147 @@ var SYP = { }; map.addPopup(popup); feature.popup = popup; + var anchor = popup.div.getElementsByTagName("a")[0]; + if (anchor) { + anchor.onclick = function() { + SYP.showBigImage(this.href); + return false; + } + } + }, + + showBigImage: function (href) { + if (OpenLayers.Util.getBrowserName() == "msie") { + document.getElementById('bigimg_container').style.display = "block"; + } else { + document.getElementById('bigimg_container').style.display = "table"; + } + + var maxHeight = document.body.clientHeight * 0.9; + var maxWidth = document.body.clientWidth * 0.9; + document.getElementById('bigimg').style.height = ""; + document.getElementById('bigimg').style.width = ""; + document.getElementById('bigimg').style.maxHeight = maxHeight + "px"; + document.getElementById('bigimg').style.maxWidth = maxWidth + "px"; + document.getElementById('bigimg').onload = function () { + var heightRatio = this.clientHeight / parseInt(this.style.maxHeight); + var widthRatio = this.clientWidth / parseInt(this.style.maxWidth); + if (heightRatio > 1 || widthRatio > 1) { + if (heightRatio > widthRatio) { + this.style.height = this.style.maxHeight; + } else { + this.style.width = this.style.maxWidth; + } + } + + var offsetTop = this.offsetTop; + var offsetLeft = this.offsetLeft; + var par = this.offsetParent; + var ismsie = OpenLayers.Util.getBrowserName() == "msie"; + while (par && !ismsie) { + offsetTop += par.offsetTop; + offsetLeft += par.offsetLeft; + par = par.offsetParent; + } + var icon = document.getElementById('bigimg_close'); + icon.style.top = offsetTop; + icon.style.left = offsetLeft + this.clientWidth - icon.clientWidth; + + }; + document.getElementById('bigimg').src = href; + }, + + closeBigImage: function() { + document.getElementById('bigimg').src = ""; + document.getElementById('bigimg').parentNode.innerHTML = document.getElementById('bigimg').parentNode.innerHTML; + document.getElementById('bigimg_container').style.display = "none"; }, Utils: { + tlCorner: function(map, margin) { + var bounds = map.calculateBounds(); + var corner = new OpenLayers.LonLat(bounds.left, bounds.top); + var cornerAsPx = map.getPixelFromLonLat(corner); + cornerAsPx = cornerAsPx.add( +margin, +margin); + return map.getLonLatFromPixel(cornerAsPx); + }, + + trCorner: function(map, margin) { + var bounds = map.calculateBounds(); + var corner = new OpenLayers.LonLat(bounds.right, bounds.top); + var cornerAsPx = map.getPixelFromLonLat(corner); + cornerAsPx = cornerAsPx.add( -margin, +margin); + return map.getLonLatFromPixel(cornerAsPx); + }, + brCorner: function(map, margin) { var bounds = map.calculateBounds(); var corner = new OpenLayers.LonLat(bounds.right, bounds.bottom); var cornerAsPx = map.getPixelFromLonLat(corner); cornerAsPx = cornerAsPx.add( -margin, -margin); - corner = map.getLonLatFromPixel(cornerAsPx); - return corner; + return map.getLonLatFromPixel(cornerAsPx); + }, + + blCorner: function(map, margin) { + var bounds = map.calculateBounds(); + var corner = new OpenLayers.LonLat(bounds.left, bounds.bottom); + var cornerAsPx = map.getPixelFromLonLat(corner); + cornerAsPx = cornerAsPx.add( +margin, -margin); + return map.getLonLatFromPixel(cornerAsPx); }, + + /* minimum bounds rectangle containing all feature locations. + * FIXME: if two features are close, but separated by 180th meridian, + * their mbr will span the whole earth. Actually, 179° lon and -170° + * lon are considerated very near. + */ + mbr: function (layer) { + var features = []; + var map = layer.map; + + var mapProj = map.getProjectionObject(); + var sypOrigProj = new OpenLayers.Projection("EPSG:4326"); + + for (var i =0; i < layer.features.length; i++) { + if (layer.features[i].cluster) { + features = features.concat(layer.features[i].cluster); + } else { + features = features.concat(layer.features); + } + } + + var minlon = 180; + var minlat = 88; + var maxlon = -180; + var maxlat = -88; + + if (features.length == 0) { + // keep default values + } else if (features.length == 1) { + // in case there's only one feature, we show an area of at least + // 4 x 4 degrees + var pos = features[0].geometry.getBounds().getCenterLonLat().clone(); + var lonlat = pos.transform(mapProj, sypOrigProj); + + minlon = Math.max (lonlat.lon - 2, -180); + maxlon = Math.min (lonlat.lon + 2, 180); + minlat = Math.max (lonlat.lat - 2, -90); + maxlat = Math.min (lonlat.lat + 2, 90); + } else { + for (var i = 0; i < features.length; i++) { + var pos = features[i].geometry.getBounds().getCenterLonLat().clone(); + var lonlat = pos.transform(mapProj, sypOrigProj); + minlon = Math.min (lonlat.lon, minlon); + minlat = Math.min (lonlat.lat, minlat); + maxlon = Math.max (lonlat.lon, maxlon); + maxlat = Math.max (lonlat.lat, maxlat); + } + } + + return [minlon, minlat, maxlon, maxlat]; + + }, + displayUserMessage: function(message, status) { var div = document.getElementById('message'); while (div.firstChild) @@ -230,6 +496,18 @@ var SYP = { } div.style.display = "block"; div.appendChild(textNode); + }, + + escapeHTML: function (str) { + if (!str) { + return ""; + } + return str. + replace(/&/gm, '&'). + replace(/'/gm, '''). + replace(/"/gm, '"'). + replace(/>/gm, '>'). + replace(/" + + self.contentDiv.innerHTML + + ""; + + var containerElement = (self.map) ? self.map.layerContainerDiv + : document.body; + var realSize = OpenLayers.Util.getRenderedDimensions( + preparedHTML, null, { + displayClass: self.displayClass, + containerElement: containerElement + } ); - }; - var images = this.contentDiv.getElementsByTagName("img"); - for (var i = 0, len = images.length; i < len; i++) { - var img = images[i]; - if (img.width == 0 || img.height == 0) { + /* + * XXX: next four lines are added by SYP! + */ + if (self.contentDiv) { + realSize.w = Math.max (realSize.w, self.contentDiv.scrollWidth); + realSize.h = Math.max (realSize.h, self.contentDiv.scrollHeight); + } + + // is the "real" size of the div is safe to display in our map? + var safeSize = self.getSafeContentSize(realSize); - var context = { - 'popup': this, - 'img': img - }; + var newSize = null; + if (safeSize.equals(realSize)) { + //real size of content is small enough to fit on the map, + // so we use real size. + newSize = realSize; - img._onImgLoad = OpenLayers.Function.bind(onImgLoad, context); + } else { + + //make a new OL.Size object with the clipped dimensions + // set or null if not clipped. + var fixedSize = new OpenLayers.Size(); + fixedSize.w = (safeSize.w < realSize.w) ? safeSize.w : null; + fixedSize.h = (safeSize.h < realSize.h) ? safeSize.h : null; + + if (fixedSize.w && fixedSize.h) { + //content is too big in both directions, so we will use + // max popup size (safeSize), knowing well that it will + // overflow both ways. + newSize = safeSize; + } else { + //content is clipped in only one direction, so we need to + // run getRenderedDimensions() again with a fixed dimension + var clippedSize = OpenLayers.Util.getRenderedDimensions( + preparedHTML, fixedSize, { + displayClass: self.contentDisplayClass, + containerElement: containerElement + } + ); - OpenLayers.Event.observe(img, 'load', img._onImgLoad); - } - } + //if the clipped size is still the same as the safeSize, + // that means that our content must be fixed in the + // offending direction. If overflow is 'auto', this means + // we are going to have a scrollbar for sure, so we must + // adjust for that. + // + var currentOverflow = OpenLayers.Element.getStyle( + self.contentDiv, "overflow" + ); + if ( (currentOverflow != "hidden") && + (clippedSize.equals(safeSize)) ) { + var scrollBar = OpenLayers.Util.getScrollbarWidth(); + if (fixedSize.w) { + clippedSize.h += scrollBar; + } else { + clippedSize.w += scrollBar; + } + } + + newSize = self.getSafeContentSize(clippedSize); + } + } + self.setSize(newSize); + }, 0); }