[OpenLayers-Users] Radio button to interract with map

Thu Apr 11 00:46:14 PDT 2013

Hi everybody,

For my research project, I try to develop a web map application but I'm a
great beginner in web development.
My web app has to change the style of the layers according to selected
radio button.
I have written these two files. The first is my page in php :
--------------------------------------------------------------------------------
<?php
session_start();
$_SESSION["login"]="bob";
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>IMaDeS bis</title>
<script type="text/javascript"
src="IMaDeS/OpenLayers/lib/OpenLayers.js"></script>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body onload="init()">
<form name="formulaire" method="post" action="test_carte.php">
<div id="bloc">
<div id="bloc_alea">
Bonjour <?php echo $_SESSION["login"]; ?>
<div id="couche_alea">
<input type="radio" name="alea" value="alea_value_green" id="alea_id_green"
checked="checked" onchange="init(alea);" />green
<input type="radio" name="alea" value="alea_value_blue" id="alea_id_blue"
onchange="init(alea);" />blue
</div>
</div>
</div>
<div id="mapdiv" >
<script type='text/javascript' src='IMaDeS/carte.js'></script>
</div>
</form>
</body>
</html>
--------------------------------------------------
the second is my script in js to display and to modify my map :
--------------------------------------------------
function init() {
 //Choix des éléments de contrôle à afficher
var navigation_control = new OpenLayers.Control.Navigation({});
var controls_array = [
navigation_control, //ne pas commenter
new OpenLayers.Control.PanZoomBar({}),
new OpenLayers.Control.MousePosition({}),
];
 //Construction de la carte
var map = new OpenLayers.Map("mapdiv", {controls: controls_array});
 //Définition des styles
if (document.getElementById("alea_id_non").checked) {
var style = new OpenLayers.Style({
fillColor : "green",
fillOpacity : 0.5,
strokeColor : "green",
strokeWidth: 0,
});
}
if (document.getElementById("alea_id_oui").checked) {
var style = new OpenLayers.Style({
fillColor : "blue",
fillOpacity : 0.5,
strokeColor : "blue",
strokeWidth: 0,
});
}
var map_style = new OpenLayers.StyleMap({"default":style});
 //Construction des BaseLayers
var osm = new OpenLayers.Layer.OSM();
 //Construction des Layers
var alea = new OpenLayers.Layer.Vector("alea", {
styleMap: map_style,
protocol: new OpenLayers.Protocol.HTTP({
url: "IMaDeS/data/alea_37/alea_37_wgs84.gml",
format: new OpenLayers.Format.GML(),
}),
strategies: [new OpenLayers.Strategy.Fixed()]
});
 //Affichage des BaseLayers et des Layers
map.addLayers([osm, alea]);
 //Options d'affichage
map.setCenter(new OpenLayers.LonLat(65400, 6002141),10);
}

function changeByButtonRadio(layerToRedraw) {
layerToRedraw.redraw();
}
----------------------------------------------------------
I think it lacks something in my js, probably in the function
changeByButtonRadio() but I don't know what.

Thank you for your help.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20130411/74dd443f/attachment-0001.html>