[GIS] Function to add layer with button click

geoserverhtmljavascriptopenlayers-2

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

Best Answer

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

Related Question