Hello all,<br><br>For starters, I would like to put up a number of vector layers (points and polygons) on an OL application. For now there are 2 vector layers in kml format on my server.<br>Here's the link:<br><a href="http://99.35.104.33/bangalore/bangalore_osm_kml_popup3.html">http://99.35.104.33/bangalore/bangalore_osm_kml_popup3.html</a><br>
And the script is at bottom.<br><br>My qn is: how do i make a generic SelectFeatureEvent and popUp functions (like the one i have below for borewells vector layer) such that one set of functions will apply to any and all layers? As of now. given my very limited javascript experience, I only know that I could develop one set of functions for every single layer, which seems inefficient.<br>
<br>FYI, each vector layer has different number and attribute titles. Is it possible maybe to refer to an atttribute column number instead of the attribute title?. <br><br>BTW, if there is an informal OL users meetup or support group in the Davis/Sacramento area please let me know. I'm trying to develop something quite interactive and complex (to me, in terms of web programming) and could use some help over time...<br>
<br>Thanks,<br>Vishal<br><br><br><br><html><br> <head><br> <title>OpenLayers Example</title><br> <!--script src="<a href="http://openlayers.org/api/OpenLayers.js">http://openlayers.org/api/OpenLayers.js</a>"></script--><br>
<script src='javascript/OpenLayers-2.10/OpenLayers.js'></script><br> <link rel='stylesheet' href='css/trystyle.css' /><br> </head><br> <body><br>
<div id="toppage"><br> <h1> this is the top page </h1><br> </div><br> <div id="rightpage"><br> <h1> this is the right page </h1><br>
<p><br> <form method="POST" action="bangalore3.php"><br> <input type="radio" name="action" value="All" /> All<br /><br> <input type="radio" name="action" value="Average" /> Average<br>
<input type="submit" value="Submit" /><br> </form><br> </p><br> </div><br> <div id="map"><br> <script defer="defer" type="text/javascript"><br>
// pink tile avoidance<br> OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;<br> // make OL compute scale according to WMS spec<br> OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;<br><br> var map = new OpenLayers.Map(<br>
'map',<br> {displayProjection: new OpenLayers.Projection("EPSG:4326")}<br> );<br> <br><br> var bounds = new OpenLayers.Bounds(<br> 77.541, 12.935,<br> 77.626, 13.000<br>
); <br> <br> var osm = new OpenLayers.Layer.OSM( <br> "Simple OSM Map")<br> //console.log(map.getProjection());<br> map.addLayer(osm);<br> //console.log(map.getProjection());<br> map.setCenter(<br>
new OpenLayers.LonLat(77.6,13).transform(<br> new OpenLayers.Projection("EPSG:4326"),<br> map.getProjectionObject()<br> ), 13);<br> //console.log(map.getProjection());<br>
var borewells = new OpenLayers.Layer.Vector('borewells',<br> {<br> projection: new OpenLayers.Projection('EPSG:4326'),<br> protocol: new OpenLayers.Protocol.HTTP({<br> url: "borewells.kml",<br>
format: new OpenLayers.Format.KML({<br> extractAttributes: true,<br> extractStyles: true<br> })<br> }),<br> visibility: true,<br>
strategies: [new OpenLayers.Strategy.Fixed()]<br> }<br> );<br> <br> var wards = new OpenLayers.Layer.Vector('wards',<br> {<br> projection: new OpenLayers.Projection('EPSG:4326'),<br>
protocol: new OpenLayers.Protocol.HTTP({<br> url: "Wards27.kml",<br> format: new OpenLayers.Format.KML({<br> extractAttributes: true,<br> extractStyles: true<br>
})<br> }),<br> visibility: false,<br> strategies: [new OpenLayers.Strategy.Fixed()]<br> }<br> );<br> //add it to the map<br> map.addLayers([borewells,wards]);<br>
// Add a layer switcher control and mouse poistion control<br> map.addControls(<br> [new OpenLayers.Control.LayerSwitcher({}),<br> new OpenLayers.Control.MousePosition({})]<br> );<br> //create a variable for the SelectFeature Control<br>
selectborewells = new OpenLayers.Control.SelectFeature(borewells);<br> selectwards = new OpenLayers.Control.SelectFeature(wards);//not implemented yet<br> // 2 functions will be called when select and unselect events are fired<br>
borewells.events.on({<br> "featureselected": onFeatureSelect,<br> "featureunselected": onFeatureUnselect<br> });<br> //add the control to the map<br> <br>
map.addControl(selectborewells);<br> //activate it<br> selectborewells.activate();<br> <br> //not sure what evt is <br> function onPopupClose(evt) {<br> selectborewells.unselectAll();<br>
} <br> // this function for what happens when selecting a feature<br> // not sure exactly whats happening<br> function onFeatureSelect(event) {<br> var feature = event.feature;<br> // Since KML is user-generated, do naive protection against<br>
// Javascript.<br> //var content = feature.attributes;<br> var content = "<h3> Water Depth (metres)</h3>"+feature.attributes.Code_No.value + "</br>" + feature.attributes.Water_Leve.value.substr(0,4);<br>
if (content.search("<script") != -1) {<br> content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "&lt;");<br>
}<br> popup = new OpenLayers.Popup.FramedCloud("chicken", <br> feature.geometry.getBounds().getCenterLonLat(),<br> new OpenLayers.Size(100,100),<br>
content,<br> null, true, onPopupClose);<br> feature.popup = popup;<br> map.addPopup(popup);<br> } <br> // this function for when unselected<br>
function onFeatureUnselect(event) {<br> var feature = event.feature;<br> if(feature.popup) {<br> map.removePopup(feature.popup);<br> feature.popup.destroy();<br>
delete feature.popup;<br> }<br> } <br><br> </script> <br> </div><br></body><br></html><br><br><br><br clear="all"><br>-- <br>Vishal K. Mehta, PhD<br>
Scientist<br>Stockholm Environment Institute - US<br>133 D St Suite F<br>Davis CA 95616<br><a href="http://www.sei-us.org">www.sei-us.org</a><br>