X-Git-Url: https://dev.renevier.net/gitweb.cgi?p=syp.git;a=blobdiff_plain;f=js%2Fsyp.js;h=2c87c2b34bb83b64ae8fe784d9558f2343d519d8;hp=fdd69ed7253b293e1d6dd9b0c1044925ee8fa4e8;hb=12376baf148afee289fbb53dd16ee2a0841d5290;hpb=0aaa61f458673b76783ce5fc1112dcc29697b6ca diff --git a/js/syp.js b/js/syp.js index fdd69ed..2c87c2b 100644 --- a/js/syp.js +++ b/js/syp.js @@ -18,10 +18,9 @@ OpenLayers.Control.SypAttribution = OpenLayers.Class (OpenLayers.Control.Attribu var SYP = { Settings: { - MARKER_ICON: "openlayers/img/marker-blue.png", - MARKER_ICON_HEIGHT: 25, - MARKER_SELECT_ICON: "openlayers/img/marker-green.png", - MARKER_SELECT_ICON_HEIGHT: 25 + MARKER_ICON: "media/marker-normal.png", + MARKER_SELECT_ICON: "media/marker-selected.png", + MARKER_HEIGHT: 25 }, map: null, @@ -77,7 +76,7 @@ var SYP = { }, { context: { height: function(feature) { - var defaultHeight = SYP.Settings.MARKER_ICON_HEIGHT || 32; + var defaultHeight = SYP.Settings.MARKER_HEIGHT || 32; var increase = 4 * (feature.attributes.count - 1); return Math.min(defaultHeight + increase, 50); } @@ -85,7 +84,7 @@ var SYP = { }); var selectStyle = new OpenLayers.Style({ externalGraphic: this.Settings.MARKER_SELECT_ICON, - graphicHeight: this.Settings.MARKER_SELECT_ICON_HEIGHT || 32 + graphicHeight: this.Settings.MARKER_HEIGHT || 32 }); var styleMap = new OpenLayers.StyleMap ( {"default": defaultStyle, @@ -170,7 +169,12 @@ var SYP = { } var popup = feature.popup; - var brCorner = SYP.Utils.brCorner(map, 8); + var popupPos = null; + if (sypPopupNearFeature) { + popupPos = feature.geometry.getBounds().getCenterLonLat(); + } else { + popupPos = SYP.Utils.brCorner(map, 8); + } // 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. @@ -190,7 +194,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,6 +202,50 @@ 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) { + try { + document.getElementById('bigimg_container').style.display = "table"; + } catch(e) { + document.getElementById('bigimg_container').style.display = "block"; + } + 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 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) { + if (heightRatio > widthRatio) { + this.style.height = this.style.maxHeight; + } else { + this.style.width = this.style.maxWidth; + } + } + + }; + 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: {