0

I'm using OpenLayers 2:10 Beginners Guide ebook. This code is APRA create a button click event in an opacity and zoom the map. But already rewritten several times and does not work. Nothing appears.

Where is the error?

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <title>My OpenLayers Map</title>
 <script type='text/javascript' src='OpenLayers.js'></script>
 <style type='text/css'>
    /*Custom Button*/
    .olControlCustomButtonItemInactive {
        background:#22dd22;
        border:5px solid #202020;
        cursor: pointer;
        height: 28px;
        width: 28px;
    }
 </style>
 <script type='text/javascript'>
 var map;
 //Função a ser chamada para criar o mapa na leitura da página
 function init() {
//Cria o objeto map     
map = new OpenLayers.Map('map_element', {});     
//Cria a primeira camada usando o serviço WMS, explicitamnete definida como base
    var wms_layer_map = new OpenLayers.Layer.WMS(
        'Base layer',
        'http://vmap0.tiles.osgeo.org/wms/vmap0',
        {layers: 'basic'},
        {isBaseLayer: true}
        );

//Adiciona as camadas ao mapa em uma martriz de objetos de camada
    map.addLayers([wms_layer_map);
 }

 //Função do botão para mudar opacidade e zoom ao evento do click
var custom_button_func = function(){
//Get a random coordinate from -90 to 90
var random_lon = Math.floor(Math.random() * 360) - 180;
var random_lat = Math.floor(Math.random() * 180) - 90;
if(map.layers[0].opacity === 1){
//If the layer opacity is 1 (fully opaque), then change it
and zoom
map.layers[0].setOpacity(.5);
map.setCenter(new OpenLayers.LonLat(random_lon,
random_lat), 3);
}
else{
//If the layer opacity is anything but 1, change it and
zoom
map.layers[0].setOpacity(1);
map.setCenter(new OpenLayers.LonLat(random_lon,
random_lat), 3);
}
};


//Cria o botão com a chamada para a função
var my_button = new OpenLayers.Control.Button({
    displayClass: 'olControlCustomButton',
    trigger: custom_button_func
});

//Painel onde será exibido o botão
var control_panel = new OpenLayers.Control.Panel({});

//Chama o addControl
control_panel.addControls([
    custom_button
    ]);

//Adiciona o painel ao mapa
map.addControl(control_panel);

//Move o mapa
control_panel.moveTo(new OpenLayers.Pixel(450,0));

 //Informações do centro do mapa
 if(!map.getCenter()){
    map.zoomToMaxExtent();
 }
 </script>
</head>
<body onload='init();'> <!-- Chama a função js init() --> 
<!--Elemento HTML onde o mapa é exibido -->
 <div id='map_element' style='width: 500px; height: 500px;'>
 </div>
</body>
</html>
1

I have repaired your code, but first I want to list all the found errors, so that you can avoid them in the future:

  • the init() function is incredibly small so it is not surprising that nothing works:

enter image description here

  • in the above init() function, there is a missing square bracket, on the last line of code.

  • portions of the comments are mixed with the code:

enter image description here

  • sometimes the custom button is called my_button, and other times custom_button;

My advice for you is to use a Javascript IDE with code completion and syntax checking. This way you'll be able to easily identify the errors.

Bellow is the repaired code:

<!DOCTYPE html>
<html lang = 'en'>
  <head>
    <meta charset = 'utf-8' />
    <title> My OpenLayers Map </title>
    <script type = 'text/javascript' src = 'http://openlayers.org/api/2.13.1/OpenLayers.js'></script>

    <style type = 'text/css'>
        /*Custom Button*/
        .olControlCustomButtonItemInactive {
            background:#22dd22;
            border:5px solid #202020;
            cursor: pointer;
            height: 28px;
            width: 28px;
        }
    </style>

    <script type = 'text/javascript'>
        //Variável map
        var map;
        //Funçao a ser chamada para criar o mapa na leitura da página
        function init() {
            //Cria o objeto map     
            map = new OpenLayers.Map('map_element', {});
            //Cria a primeira camada usando o serviço WMS, explicitamnete definida como base
            var wms_layer_map = new OpenLayers.Layer.WMS(
                'Base layer',
                'http://vmap0.tiles.osgeo.org/wms/vmap0',
                {layers: 'basic'},
                {isBaseLayer: true}
            );
            //Adiciona as camadas ao mapa em uma martriz de objetos de camada
            map.addLayers([wms_layer_map]);
            //Funçao do botao para mudar opacidade e zoom ao evento do click
            var my_button_func = function(){
                //Get a random coordinate from -90 to 90
                var random_lon = Math.floor(Math.random() * 360) - 180;
                var random_lat = Math.floor(Math.random() * 180) - 90;
                if (map.layers[0].opacity === 1){
                    //If the layer opacity is 1 (fully opaque), then change it and zoom
                    map.layers[0].setOpacity(.5);
                    map.setCenter(new OpenLayers.LonLat(random_lon, random_lat), 3);
                } else {
                    //If the layer opacity is anything but 1, change it and zoom
                    map.layers[0].setOpacity(1);
                    map.setCenter(new OpenLayers.LonLat(random_lon, random_lat), 3);
                }
            };
            //Cria o botao com a chamada para a funçao
            var my_button = new OpenLayers.Control.Button({
                displayClass: 'olControlCustomButton',
                trigger: my_button_func,
            });
            //Painel onde será exibido o botao
            var control_panel = new OpenLayers.Control.Panel({});
            //Chama o addControl
            control_panel.addControls([
                my_button
            ])

            //Adiciona o painel ao mapa
            map.addControl(control_panel);
            //Move o mapa
            control_panel.moveTo(new OpenLayers.Pixel(450, 0));
            //Informaçoes do centro do mapa
            if (!map.getCenter()){
                map.zoomToMaxExtent();
            }
        }
    </script>
  </head>

  <body onload = 'init();'> <!-- Chama a funçao js init() -->
    <!--Elemento HTML onde o mapa é exibido -->
    <div id = 'map_element' style = 'width: 500px; height: 500px;'></div>
  </body>
</html>

And this is a browser screenshot:

enter image description here

| improve this answer | |

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.