[OpenLayers-Users] enabling popup with attribute information on multiple vector layers

Mon Jun 6 19:21:58 EDT 2011

Hello all,

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.
Here's the link:
http://99.35.104.33/bangalore/bangalore_osm_kml_popup3.html
And the script is at bottom.

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.

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?.

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...

Thanks,
Vishal

<html>
    <head>
          <title>OpenLayers Example</title>
            <!--script src="http://openlayers.org/api/OpenLayers.js
"></script-->
        <script src='javascript/OpenLayers-2.10/OpenLayers.js'></script>
        <link rel='stylesheet' href='css/trystyle.css' />
    </head>
        <body>
              <div id="toppage">
            <h1> this is the top page </h1>
              </div>
        <div id="rightpage">
            <h1> this is the right page </h1>
            <p>
        <form method="POST" action="bangalore3.php">
        <input type="radio" name="action" value="All" /> All<br />
        <input type="radio" name="action" value="Average" /> Average
        <input type="submit" value="Submit" />
        </form>
        </p>
        </div>
      <div id="map">
      <script defer="defer" type="text/javascript">
            // pink tile avoidance
            OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
            // make OL compute scale according to WMS spec
            OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

        var map = new OpenLayers.Map(
    'map',
    {displayProjection: new OpenLayers.Projection("EPSG:4326")}
        );

    var bounds = new OpenLayers.Bounds(
        77.541, 12.935,
        77.626, 13.000
    );

    var osm =   new OpenLayers.Layer.OSM(
    "Simple OSM Map")
    //console.log(map.getProjection());
        map.addLayer(osm);
    //console.log(map.getProjection());
     map.setCenter(
                new OpenLayers.LonLat(77.6,13).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
               ), 13);
    //console.log(map.getProjection());
    var borewells = new OpenLayers.Layer.Vector('borewells',
        {
            projection: new OpenLayers.Projection('EPSG:4326'),
            protocol: new OpenLayers.Protocol.HTTP({
                url: "borewells.kml",
                format: new OpenLayers.Format.KML({
                    extractAttributes: true,
                    extractStyles: true
                    })
            }),
            visibility: true,
            strategies: [new OpenLayers.Strategy.Fixed()]
            }
        );

    var wards = new OpenLayers.Layer.Vector('wards',
        {
            projection: new OpenLayers.Projection('EPSG:4326'),
            protocol: new OpenLayers.Protocol.HTTP({
                url: "Wards27.kml",
                format: new OpenLayers.Format.KML({
                    extractAttributes: true,
                    extractStyles: true
                    })
            }),
            visibility: false,
            strategies: [new OpenLayers.Strategy.Fixed()]
            }
        );
    //add it to the map
    map.addLayers([borewells,wards]);
    // Add a layer switcher control and mouse poistion control
    map.addControls(
    [new OpenLayers.Control.LayerSwitcher({}),
     new OpenLayers.Control.MousePosition({})]
    );
    //create a variable for the SelectFeature Control
    selectborewells = new OpenLayers.Control.SelectFeature(borewells);
    selectwards = new OpenLayers.Control.SelectFeature(wards);//not
implemented yet
   // 2 functions will be called when select and unselect events are fired
   borewells.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });
    //add the control to the map

   map.addControl(selectborewells);
   //activate it
   selectborewells.activate();

   //not sure what evt is
      function onPopupClose(evt) {
            selectborewells.unselectAll();
        }
   // this function for what happens when selecting a feature
   // not sure exactly whats happening
           function onFeatureSelect(event) {
            var feature = event.feature;
            // Since KML is user-generated, do naive protection against
            // Javascript.
            //var content = feature.attributes;
            var content = "<h3> Water Depth
(metres)</h3>"+feature.attributes.Code_No.value + "</br>" +
feature.attributes.Water_Leve.value.substr(0,4);
            if (content.search("<script") != -1) {
                content = "Content contained Javascript! Escaped content
below.<br />" + content.replace(/</g, "&lt;");
            }
            popup = new OpenLayers.Popup.FramedCloud("chicken",

feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(100,100),
                                     content,
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
   // this function for when unselected
          function onFeatureUnselect(event) {
            var feature = event.feature;
            if(feature.popup) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                delete feature.popup;
            }
        }

      </script>
    </div>
</body>
</html>

-- 
Vishal K. Mehta, PhD
Scientist
Stockholm Environment Institute - US
133 D St Suite F
Davis CA 95616
www.sei-us.org
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20110606/98e321c7/attachment-0001.html