[GIS] Changing infoWindow style in ArcGIS JavaScript API (v3.2)

arcgis-javascript-apipopupstyle

See below a screenshot of the infoWindow's appearance in my ArcGIS JavaScript API (v3.2) application.

default style

As you can see the transparent title bar with the white buttons doesn't work too well against a background map with white areas.

I've used Chrome's developer tools to test changing the CSS of every element associated with the infoWindow but still haven't managed to stop it having a transparent background. The closest I've come gave it a coloured background – by adding a background-color to the title class – but this extended way outside the infoWindow and out of the map.

altered title style

How do I style this differently? Do I need to choose a new (non-claro) theme for the whole page? What are the other theme options?

Any input much appreciated.

Best Answer

In the end my specific requirement - to remove transparency from the info window - was solved outside the ArcGIS JavaScript API.

The application's global CSS file defines a style for the class .title which includes float: left;

Because the info window uses the same class name I was getting some weird effects that were not related to API styling. The reason I couldn't find any mention of transparency in the CSS was because it wasn't a transparency setting making the area transparent, but instead an unwanted position offset that stopped it from being coloured.

I didn't want to change the global styling (or all titles in the site), and I wanted to avoid digging into the info window to change its title's class name, so I introduced the following JavaScript immediately after creating the map

var infoWindowTitle = query('.title', this.map.infoWindow.domNode)[0];
infoWindowTitle.style.float = 'none';
infoWindowTitle.style.styleFloat = 'none';  // IE

Related Solutions

[GIS] ArcGIS Javascript API – Refresh

Replace getImageUrl and modify the url before passing it to the callback:

    layer = new esri.layers.WMSLayer("http://sampleserver1c.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer", {
        visibleLayers: ['1', '2']
    });

    function extendLayer(layer)
    {
        var getImageUrl, tick;

        tick = 0;
        getImageUrl = layer.getImageUrl;

        layer.setDisableClientCaching = layer.setDisableClientCaching || function(disable)
        {
            if (disable)
            {
                layer.getImageUrl = function (extent, width, height, callback) {
                    var result = getImageUrl.call(layer, extent, width, height, function (url) {
                        callback.call(layer, url + "&_c=" + tick++);
                    });
                    return result;
                };
            }
            else
            {
                layer.getImageUrl = getImageUrl;
            }
        };
        return layer;
    }

    extendLayer ( layer ).setDisableClientCaching ( true );

    setInterval(function () {
        layer.refresh();
    }, 5000);

    map.addLayer(layer);

[GIS] Hiding infoWindow of ArcGIS API for JavaScript while using measure tool

It's not listed in the documentation, but you can access the functions that control the Measurement Widget through areaToggleButton and distanceToggleButton. Here's an example using your your initToolbar function.

function initToolbar(mymap) {
    //define a new line symbol and point symbol to use for measure tools
    var pms = new esri.symbol.PictureMarkerSymbol("images/flag.png", 24, 24);
    pms.setOffset(9, 11);
    var sls = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([255, 0, 0, .55]), 4);
    var measurement = new esri.dijit.Measurement({
        map : mymap,
        lineSymbol : sls,
        pointSymbol : pms
    }, dojo.byId('measurementDiv'));
    measurement.startup();
    measurement.setTool("area", false);

    // make measurement buttons turn off clickhandler when clicked
    measurement.areaToggleButton = function () {
        this.clearResult();
        this.setTool("area");
        dojo.disconnect(clickHandler);
    };

    measurement.distanceToggleButton= function () {
        this.clearResult();
        this.setTool("distance");
        dojo.disconnect(clickHandler);
    };
}

Best Answer

Related Solutions

[GIS] ArcGIS Javascript API – Refresh

[GIS] Hiding infoWindow of ArcGIS API for JavaScript while using measure tool

Related Question