X-Git-Url: https://dev.renevier.net/gitweb.cgi?p=syp.git;a=blobdiff_plain;f=js%2Fsyp.js;h=afb53bc0db9d2116a14379a4d40d24f51991ca15;hp=cf92ef51f9601ba8fa48478b62f51467736e4109;hb=a34fe8cb1b7f571577d4af4399d6a850fef07041;hpb=7bd8d49ee21cdbc107c8e3eb99a17d636b79dccd diff --git a/js/syp.js b/js/syp.js index cf92ef5..afb53bc 100644 --- a/js/syp.js +++ b/js/syp.js @@ -17,10 +17,10 @@ OpenLayers.Control.SypAttribution = OpenLayers.Class (OpenLayers.Control.Attribu }); var SYP = { - Settings: { - MARKER_ICON: "media/marker-normal.png", - MARKER_SELECT_ICON: "media/marker-selected.png", - MARKER_HEIGHT: 25 + Markers: { + ICON: "media/marker-normal.png", + SELECT_ICON: "media/marker-selected.png", + HEIGHT: 25 }, map: null, @@ -49,19 +49,7 @@ var SYP = { this.selectControl.activate(); if (!this.map.getCenter()) { - var centerBounds = new OpenLayers.Bounds(); - - var mapProj = this.map.getProjectionObject(); - var sypOrigProj = new OpenLayers.Projection("EPSG:4326"); - - var bottomLeft = new OpenLayers.LonLat(sypOrig[0],sypOrig[1]); - bottomLeft = bottomLeft.transform(sypOrigProj, mapProj); - var topRight = new OpenLayers.LonLat(sypOrig[2],sypOrig[3]) - topRight = topRight.transform(sypOrigProj, mapProj); - - centerBounds.extend(bottomLeft); - centerBounds.extend(topRight); - this.map.zoomToExtent(centerBounds); + this.map.setCenter(new OpenLayers.LonLat(0, 0), 0); } }, @@ -71,20 +59,20 @@ var SYP = { createDataLayer: function(map) { var defaultStyle = new OpenLayers.Style({ - externalGraphic: this.Settings.MARKER_ICON, + externalGraphic: this.Markers.ICON, graphicHeight: "${height}" }, { context: { height: function(feature) { - var defaultHeight = SYP.Settings.MARKER_HEIGHT || 32; + var defaultHeight = SYP.Markers.HEIGHT || 32; var increase = 4 * (feature.attributes.count - 1); return Math.min(defaultHeight + increase, 50); } } }); var selectStyle = new OpenLayers.Style({ - externalGraphic: this.Settings.MARKER_SELECT_ICON, - graphicHeight: this.Settings.MARKER_HEIGHT || 32 + externalGraphic: this.Markers.SELECT_ICON, + graphicHeight: this.Markers.HEIGHT || 32 }); var styleMap = new OpenLayers.StyleMap ( {"default": defaultStyle, @@ -99,7 +87,7 @@ var SYP = { format: OpenLayers.Format.KML, projection: this.map.displayProjection, eventListeners: { scope: this, - loadend: this.checkForFeatures + loadend: this.dataLayerEndLoad } }); @@ -117,12 +105,38 @@ var SYP = { return control; }, + dataLayerEndLoad: function() { + if (!this.checkForFeatures()) { + return; + } + + var map = this.map; + if (map.getControlsByClass("OpenLayers.Control.ArgParser")[0].lat + == undefined) { // 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) { @@ -169,7 +183,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. @@ -189,7 +223,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); @@ -219,10 +253,6 @@ var SYP = { document.getElementById('bigimg').style.maxHeight = maxHeight + "px"; document.getElementById('bigimg').style.maxWidth = maxWidth + "px"; document.getElementById('bigimg').onload = function () { - var icon = document.getElementById('bigimg_close'); - icon.style.top = this.offsetTop; - icon.style.left = this.offsetLeft + this.clientWidth - icon.clientWidth; - var heightRatio = this.clientHeight / parseInt(this.style.maxHeight); var widthRatio = this.clientWidth / parseInt(this.style.maxWidth); if (heightRatio > 1 || widthRatio > 1) { @@ -233,6 +263,10 @@ var SYP = { } } + var icon = document.getElementById('bigimg_close'); + icon.style.top = this.offsetTop; + icon.style.left = this.offsetLeft + this.clientWidth - icon.clientWidth; + }; document.getElementById('bigimg').src = href; }, @@ -244,14 +278,90 @@ var SYP = { }, 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) @@ -290,32 +400,87 @@ OpenLayers.Console.userError = function(error) { // sometimes, especially when cache is clear, firefox does not compute // correctly popup size. That's because at the end of getRenderedDimensions, -// dimensions of image is not known. So, we work around that problem by setting -// image width and image height. That way, dimensions of image are set in -// innerHTML, and are therefore known in getRenderedDimensions -OpenLayers.Popup.Anchored.prototype.registerImageListeners = function() { - var onImgLoad = function() { - this.img.width = this.img.width; - this.img.height = this.img.height; - this.popup.updateSize(); - OpenLayers.Event.stopObserving( - this.img, "load", this.img._onImageLoad - ); - }; - - 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) { - - var context = { - 'popup': this, - 'img': img - }; - - img._onImgLoad = OpenLayers.Function.bind(onImgLoad, context); - - OpenLayers.Event.observe(img, 'load', img._onImgLoad); - } - } +// dimensions of image is not known. Then, popup size is too small for its +// content. We work around the problem by checking that computed size is at +// least as big as content. To achieve that, we need to override +// OpenLayers.Popup.Anchored.prototype.updateSize to modify it slightly. +OpenLayers.Popup.Anchored.prototype.updateSize = function() { + // determine actual render dimensions of the contents by putting its + // contents into a fake contentDiv (for the CSS) and then measuring it + var preparedHTML = "
" + + this.contentDiv.innerHTML + + "
"; + + var containerElement = (this.map) ? this.map.layerContainerDiv + : document.body; + var realSize = OpenLayers.Util.getRenderedDimensions( + preparedHTML, null, { + displayClass: this.displayClass, + containerElement: containerElement + } + ); + + /* + * XXX: next four lines are added by SYP! + */ + if (this.contentDiv) { + realSize.w = Math.max (realSize.w, this.contentDiv.scrollWidth); + realSize.h = Math.max (realSize.h, this.contentDiv.scrollHeight); + } + + // is the "real" size of the div is safe to display in our map? + var safeSize = this.getSafeContentSize(realSize); + + 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; + + } 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: this.contentDisplayClass, + containerElement: containerElement + } + ); + + //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( + this.contentDiv, "overflow" + ); + if ( (currentOverflow != "hidden") && + (clippedSize.equals(safeSize)) ) { + var scrollBar = OpenLayers.Util.getScrollbarWidth(); + if (fixedSize.w) { + clippedSize.h += scrollBar; + } else { + clippedSize.w += scrollBar; + } + } + + newSize = this.getSafeContentSize(clippedSize); + } + } + this.setSize(newSize); }