[OpenLayers-Users] Creating a search criteria

raghuveer modala modala.raghuveer at gmail.com
Tue Jul 3 08:20:16 PDT 2012


Hi All,
          This is the first time i am learning about OpenLayers. I am doing
a small example project to get familiar with OpenLayers. I read a kml file
(containing various locations) into the OpenLayers. the next task is to
search the map  based on the location so that it displays only the
placemarks in that location. Can anyone help me in writng the code for it.

So far i developed the following using various openlayer examples

<openlayers-users at lists.osgeo.org>html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="../theme/default/style.css"
type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
        <div>
        <style type="text/css">
            html, body {
            height: 100%;
        }
        #map {
            width: 100%;
            height: 75%;
            border: 1px solid black;
        }
        .olPopup p { margin:0px; font-size: .9em;}
        .olPopup h2 { font-size:1.2em; }
        </style>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript">
        var lon = 5;
        var lat = 40;
        var zoom = 3;
        var map, select;
        function setCumulative() {
            var nav =
map.getControlsByClass("OpenLayers.Control.Navigation")[0];
            var cumulative = document.getElementById("cumulative");
            nav.handlers.wheel.cumulative = cumulative.checked;
        }
        function init(){
            map = new OpenLayers.Map('map', {
                controls: [
                        new OpenLayers.Control.Navigation(
                            {mouseWheelOptions: {interval: 100}}
                        ),
                        new OpenLayers.Control.ScaleLine(),
                        new OpenLayers.Control.KeyboardDefaults(),
                        new OpenLayers.Control.PanZoom(),
                        new OpenLayers.Control.ArgParser(),
                        new OpenLayers.Control.Attribution()
            ]} );

            var bounds = new OpenLayers.Bounds(-70,-70, 40, 80);
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers:'basic'} );

        var thesis = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "georeferences_test3.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true,
                    extractAttributes: true,
                    maxDepth: 1
                })
            })
        });

        map.addLayers([wms, thesis]);
        map.zoomToMaxExtent();
        select = new OpenLayers.Control.SelectFeature(thesis);
        thesis.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });

            map.addControl(select);
            select.activate();
            map.zoomToExtent(bounds);

        }
        function onPopupClose(evt) {
            select.unselectAll();
        }
        function onFeatureSelect(event) {
            var feature = event.feature;
            // Since KML is user-generated, do naive protection against
            // Javascript.
            var content = "<h4>"+feature.attributes.name + "</h4>" +
feature.attributes.description;
            if (content.search("<script") != -1) {
                content = "Content contained Javascript! Escaped content
below.<br>" + content.replace(/</g, "<");
            }
            popup = new OpenLayers.Popup.FramedCloud("chicken",

feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(5,10),
                                     content,
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(event) {
            var feature = event.feature;
            if(feature.popup) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                delete feature.popup;
            }
        }
      </script>
    </head>

-- 
Naga Raghuveer Modala
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20120703/5cafb90d/attachment.html>


More information about the Users mailing list