[OpenLayers-Users] Wrong icon when adding control to editing toolbar

Wed May 29 09:08:22 PDT 2013

Rob,

Sorry if you get this twice; I forgot to copy the list the first time.

The controls aren't tied to icons in any way except CSS.  The toolbars in OpenLayers are built from large images containing the "on" and "off" states for all the icons in the toolbar.  OpenLayers sets certain classes on the buttons when they are activated and deactivated, and it's up to you to modify the CSS so that the background image has the correct offset for your particular button.  I forget whether the editing toolbar background image has a zoom icon in it; it may not, in which case you'll also need to alter the editing toolbar image.

Andrew

From: Rob Hyx <robhyx at gmail.com<mailto:robhyx at gmail.com>>
Date: Wednesday, May 29, 2013 8:55 AM
To: "openlayers-users at lists.osgeo.org<mailto:openlayers-users at lists.osgeo.org>" <openlayers-users at lists.osgeo.org<mailto:openlayers-users at lists.osgeo.org>>
Subject: [OpenLayers-Users] Wrong icon when adding control to editing toolbar

Good day,

I'm trying to add my zoom box control to an editing toolbar so I can have all my controls in one contiguous row. When I add it to the example given in OL 2.12 I get the wrong icon and it doesn't toggle when pressed. Any ideas? Below is my code (where the relative paths just point to the JavaScript and CSS that comes with the download unmodified):

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>OpenLayers Editing Toolbar Example</title>

        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <!--[if lte IE 6]>
            <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css">
        <![endif]-->
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../lib/OpenLayers.js"></script>
        <script src="../lib/Firebug/firebug.js"></script>
        <script type="text/javascript">
            var lon = 5;
            var lat = 40;
            var zoom = 5;
            var map, layer;

            function init(){
                layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                        "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );

                vlayer = new OpenLayers.Layer.Vector( "Editable" );

                var editingToolbar = new OpenLayers.Control.EditingToolbar(vlayer);
                var zoomBox = new OpenLayers.Control.ZoomBox();
                editingToolbar.addControls(zoomBox);

                map = new OpenLayers.Map( 'map', {
                    controls: [
                        new OpenLayers.Control.PanZoom(),
                        editingToolbar
                    ]
                });
                map.addLayers([layer, vlayer]);

                map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            }
        </script>
    </head>
    <body onload="init()">
        <h1 id="title">Editing Toolbar Example</h1>

        <div id="tags">
            digitizing, point, line, linestring, polygon, editing
        </div>

        <p id="shortdesc">
            Demonstrate polygon, polyline and point creation and editing tools.
        </p>

        <div id="panel"></div>
        <div id="map" class="smallmap"></div>

        <div id="docs"></div>
    </body>
</html>

Thanks in advance.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20130529/97aaec2f/attachment.html>