I'm working with OpenLayers 3 on creating a webgis I want to add a caption (png image) of a map via a button, as I demonstraded.

When someone click the button I would like the caption image to appear inside the map.

<button id="testButton" onclick="legend()" class="fas fa-list-ul"> <img src="http://datageo.ambiente.sp.gov.br/geoserver/datageo/wms?REQUEST=GetLegendGraphic&VERSION=1.1.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=datageo:DensidadeDemografica2016&bbox=-124.73142200000001,24.955967,-66.969849,49.371735&srcwidth=768&srcheight=330&srs=EPSG:4326&legend_options=countMatched:true;fontAntiAliasing:true"> </button>

The caption is generated through a WMS request from OpenLayes 3 itself, by REQUEST = GetLegendGraphic.

I tested this alternative, however, without success. I've added my layers inside an array to make the view call from them, as you can see. Can anybody help me? Thankful

        var layersArray = [];
        var map;

        function layer () {

            var osm = new ol.layer.Tile({
                preload: Infinity,
                source: new ol.source.OSM()

            var layer =  new ol.layer.Image({
                        source: new ol.source.ImageWMS({
                            url: 'http://datageo.ambiente.sp.gov.br/geoserver/datageo/wms',
                            params: {'layers':'datageo:DensidadeDemografica2016', 'TILED':true},
                            ratio: 1,
                            serverType: 'geoserver'

            var layerUm =  new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    url: 'http://datageo.ambiente.sp.gov.br/geoserver/datageo/wms',
                    params: {'layers':'datageo:DensidadeDemografica2015', 'TILED':true},
                    ratio: 1,
                    serverType: 'geoserver'

            layersArray.push(osm); //0
            layersArray.push(layer); //1
            layersArray.push(layerUm); //2

             map = new ol.Map({
                    target: 'map',
                    controls: ol.control.defaults({attribution:false}).extend([
                        new ol.control.ScaleLine(),
                        new ol.control.ZoomSlider()
                    renderer: 'canvas',
                    layers: layersArray,
                    view: new ol.View({
                    center: [-23.6526023,-46.8906052],
                        zoom: 4


        // funcao para aparecer e desaparecer a legenda quando clicar no botao
        function legend() {
            layersArray.events.register("visibilitychanged",layersArray, function() {
            if (layersArray.getVisible() === true) {
                } else {

       //funcao para ligar e desligar uma layer num checkbox
        function layerswitch(evt){

Your Answer

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

Browse other questions tagged or ask your own question.