<html>
<head>
<style><!--
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 12pt;
font-family:Calibri
}
--></style></head>
<body class='hmmessage'><div dir='ltr'><font face="Arial" style="color: rgb(68, 68, 68); font-size: 15px;">Hi all,</font><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;"><br style="line-height: 21px;"></font></div><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;">I have a quite small problem with my OL Script. </font></div><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;"><br style="line-height: 21px;"></font></div><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;">What my current map looks like: I have a base OSM map and a GML layer loaded. The layer is loaded as a vector layer with the format GML. When I select one of the features of the GML layer, a function is called (currently, making a div visible, and on unselect, hide the div. This is done via the OpenLayers.Control.SelectFeature and the onSelect function.</font></div><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;"><br style="line-height: 21px;"></font></div><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;">So far, so good. What I am trying to do now, is gathering information from the selected feature and hand it to the called function, so that I can fill the appearing div with data I get from the database in a later step using AJAX. </font></div><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;"><br style="line-height: 21px;"></font></div><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;">I hope you get what I am trying to do. The missing link is to get the information from the feature to the function "openDetail () ". <br style="line-height: 21px;"><br style="line-height: 21px;">This is my current file:</font></div><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;"><br style="line-height: 21px;"></font></div><div style="line-height: 21px; color: rgb(68, 68, 68); font-size: 15px;"><font face="Arial" style="line-height: normal;"><div style="line-height: 21px;">[...]</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { </div><div style="line-height: 21px;"> defaultHandlerOptions: {</div><div style="line-height: 21px;"> 'single': true,</div><div style="line-height: 21px;"> 'double': false,</div><div style="line-height: 21px;"> 'pixelTolerance': 0,</div><div style="line-height: 21px;"> 'stopSingle': false,</div><div style="line-height: 21px;"> 'stopDouble': false</div><div style="line-height: 21px;"> },</div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;"> initialize: function(options) {</div><div style="line-height: 21px;"> this.handlerOptions = OpenLayers.Util.extend(</div><div style="line-height: 21px;"> {}, this.defaultHandlerOptions</div><div style="line-height: 21px;"> );</div><div style="line-height: 21px;"> OpenLayers.Control.prototype.initialize.apply(</div><div style="line-height: 21px;"> this, arguments</div><div style="line-height: 21px;"> ); </div><div style="line-height: 21px;"> this.handler = new OpenLayers.Handler.Click(</div><div style="line-height: 21px;"> this, {</div><div style="line-height: 21px;"> 'click': this.trigger</div><div style="line-height: 21px;"> }, this.handlerOptions</div><div style="line-height: 21px;"> );</div><div style="line-height: 21px;"> }, </div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;"> trigger: function(e) {</div><div style="line-height: 21px;"> var lonlat = map.getLonLatFromPixel(e.xy);</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>openFormAdd(lonlat.lat,lonlat.lon);</div><div style="line-height: 21px;"> //alert("You clicked near " + lonlat.lat + " N, " +</div><div style="line-height: 21px;"> // + lonlat.lon + " E");</div><div style="line-height: 21px;"> }</div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;"> });</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"> var map, layer, pointLayer;</div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;"> function init() {</div><div style="line-height: 21px;"> if (!OpenLayers.CANVAS_SUPPORTED) {</div><div style="line-height: 21px;"> var unsupported = OpenLayers.Util.getElement('unsupported');</div><div style="line-height: 21px;"> unsupported.innerHTML = 'Your browser does not support canvas, nothing to see here !';</div><div style="line-height: 21px;"> }</div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;"> layer = new OpenLayers.Layer.OSM('Simple OSM Map', null, {</div><div style="line-height: 21px;"> eventListeners: {</div><div style="line-height: 21px;"> tileloaded: function(evt) {</div><div style="line-height: 21px;"> var ctx = evt.tile.getCanvasContext();</div><div style="line-height: 21px;"> if (ctx) {</div><div style="line-height: 21px;"> var imgd = ctx.getImageData(0, 0, evt.tile.size.w, evt.tile.size.h);</div><div style="line-height: 21px;"> var pix = imgd.data;</div><div style="line-height: 21px;"> for (var i = 0, n = pix.length; i < n; i += 4) {</div><div style="line-height: 21px;"> pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 * pix[i + 1] + pix[i + 2]) / 8;</div><div style="line-height: 21px;"> }</div><div style="line-height: 21px;"> ctx.putImageData(imgd, 0, 0);</div><div style="line-height: 21px;"> evt.tile.imgDiv.removeAttribute("crossorigin");</div><div style="line-height: 21px;"> evt.tile.imgDiv.src = ctx.canvas.toDataURL();</div><div style="line-height: 21px;"> }</div><div style="line-height: 21px;"> }</div><div style="line-height: 21px;"> }</div><div style="line-height: 21px;"> });</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>pointLayer = new OpenLayers.Layer.Vector("GeoJSON", {</div><div style="line-height: 21px;"> strategies: [new OpenLayers.Strategy.Fixed()],</div><div style="line-height: 21px;"> protocol: new OpenLayers.Protocol.HTTP({</div><div style="line-height: 21px;"> url: "http://127.0.0.1/L11/geoData/data.xml.gml",</div><div style="line-height: 21px;"> format: new OpenLayers.Format.GML()</div><div style="line-height: 21px;"> })</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>});</div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;"> map = new OpenLayers.Map('map', {</div><div style="line-height: 21px;"> layers: [layer, pointLayer],</div><div style="line-height: 21px;"> zoom: 3,</div><div style="line-height: 21px;"> center: [-1081125, 6212801]</div><div style="line-height: 21px;"> });</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span><span class="ecxApple-tab-span" style="line-height: 22px; font-size: 12pt; white-space: pre;"> </span></div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>var click = new OpenLayers.Control.Click();</div><div style="line-height: 21px;"> map.addControl(click);</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>//click.activate();</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>clickFeature = new OpenLayers.Control.SelectFeature(</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> [pointLayer],</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> {</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> clickout: true, toggle: false,</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> multiple: false, hover: false,</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> hover: </div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> }</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>);</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>map.addControl(clickFeature);</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>pointLayer.events.on({</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> "featureselected": function(e) {</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>//drag.activate();</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>openDetail();</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> },</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> "featureunselected": function(e) {</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>closeDetail();</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> }</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> });</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span> </div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>clickFeature.activate();</div><div style="line-height: 21px;"> </div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>map.addControl(new OpenLayers.Control.LayerSwitcher());</div><div style="line-height: 21px;"> }</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;">[...]</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>function openDetail () {</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>document.getElementById("contentLayerDetail").style.visibility='visible';</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>}</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>function closeDetail () {</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>document.getElementById("contentLayerDetail").style.visibility='hidden';</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span>}</div><div style="line-height: 21px;"><span class="ecxApple-tab-span" style="white-space: pre;"> </span></div><div style="line-height: 21px;"></script></div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;">[...]</div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;">I hope somebody can give me a little help with this. </div><div style="line-height: 21px;"><br></div><div style="line-height: 21px;">Thanks in advance,</div><div style="line-height: 21px;">Freddy</div></font></div><br><br><br> </div></body>
</html>