1

I'm working with openlayers and geoserver to create a map and overlay layers. I need to add a layer when a button is clicked, but what I get is that the layer is added ( i can see it through the layer switcher control) but just a second later the map refresh itself and the layer isn't there anymore. Here my code:

<html>
<head>
    <title>OpenLayers Example</title>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
        <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>


        <script  type="text/javascript">
        var map, gmap, wms,style,wfs_query;


        function init(){

         map = new OpenLayers.Map('map', {controls: [],zoomDuration: 10,zoomMethod: null});
         gmap = new OpenLayers.Layer.Google("Google Streets", {sphericalMercator:true, numZoomLevels: 21,disableDefaultUI:true});
         wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );



        style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
        style.fillOpacity = 0.5;
        style.graphicOpacity = 1;
        style.strokeWidth = 1; 
        style.strokeColor = "#ff0000";
        style.strokeOpacity = 1;                                        


var wfs = new OpenLayers.Layer.Vector(
            "Contatti",
            {           
                style: style,     
                strategies: [new OpenLayers.Strategy.Fixed()], 
                projection: new OpenLayers.Projection("EPSG:4326"), 
                protocol: new OpenLayers.Protocol.WFS({

                        version: "1.1.0",
                        url: "http://92.245.171.37:8585/geoserver/wfs",
                        featurePrefix: 'Demo', //geoserver worspace name
                        featureType: "contatti", //geoserver Layer Name
                        featureNS: "http://demo.opengeo.org/dettaglio", // Edit Workspace Namespace URI
                        geometryName: "Posizione" // field in Feature Type details with type "Geometry"
                })
            });




        map.addLayers([gmap,wfs]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl(new OpenLayers.Control.Navigation());
        map.addControl(new OpenLayers.Control.PanZoomBar());
        map.setCenter(new OpenLayers.LonLat(1175716.6321362,5175716.6321362), 5);

        }       

        function que(){
            wfs_query = new OpenLayers.Layer.Vector(
            "WFS on click",
            {
                style: style,     
                strategies: [new OpenLayers.Strategy.Fixed()],
                projection: new OpenLayers.Projection("EPSG:4326"), 
                protocol: new OpenLayers.Protocol.WFS({         

                    version: "1.1.0",
                    url: "http://92.245.171.37:8585/geoserver/wfs",
                    featurePrefix: 'Demo', //geoserver worspace name
                    featureType: "contatti", //geoserver Layer Name
                    featureNS: "http://demo.opengeo.org/dettaglio", 
                    geometryName: "Posizione" 
                }), 
                filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.EQUAL_TO,
                    property: 'Prov',
                    value: 'PG'
                })
            });
            map.addLayer(wfs_query);

        }

        </script>
</head>

<body onload="init();">

    <div style="width:65%; height:100%;float:left;" id="map"></div>
    <div style="width:33%; height:100%; padding-left : 20px;float:left; border:1px solid black;" id="query">
        <form method="POST" id="menu"> 
            <h3 style="text-align:center;">QUERY - BOX</h2></br>
            Seleziona  il parametro <select id="parametro" > 
                <option value="uguale">=</option> 
                <option value="minore"><</option> 
                <option value="maggiore">></option> 
                <option value="diverso">!=</option> 
            </select> 
            Seleziona  il valore <select id="valore"> </select> 
                <script  type="text/javascript">
                    var sel = document.getElementById('valore');
                    for (i=0; i<=10; i++){
                        var opt = document.createElement('option');
                        opt.value = i;
                        opt.innerHTML =i;
                        sel.appendChild(opt)
                    }
                </script>
            <input type="submit" value="QUERY" onClick = "que()" > 
        </form>  
    </div>
</body>
</html>

Any advice? Thanks in advance!

EDIT: this example should now work.... (and here is the live version: http://92.245.171.37:8585/new.html

  • Learn Javascript. Understand why global variables is a bad thing, provide a minimal example. Study the docs. – atlefren May 12 '14 at 10:37
  • Yeah thanks.... what do you mean with "provide a minimal example"? I've explained what I'm trying to do.... – TBE23 May 12 '14 at 10:47
  • 1
    It's not possible to run your example because you're running a local Geoserver (localhost:8585/geoserver/wfs). Try to strip down unneded code until you have an example anyone can run. It would be ideal if you could fit into a JSFiddle – kryger May 12 '14 at 12:10
  • Thank you kryger.... I've edited the code, now it should work! – TBE23 May 12 '14 at 12:45
1

You have a form with a button of type submit. When you click the submit button on a form, the form is submitted.

There is no action for the form so the page is being reloaded (the default action is the same page).

Change the type of the button from submit to button and then the browser won't submit the form (reload the page) when you click it.

See also: https://stackoverflow.com/questions/9824808/disable-form-auto-submit-on-button-click

  • Thank you brother!! That was the problem! Jah bless you! =) – TBE23 May 12 '14 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.