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 <[email protected]<mailto:[email protected]>>
Date: Wednesday, May 29, 2013 8:55 AM
To: "[email protected]<mailto:[email protected]>" 
<[email protected]<mailto:[email protected]>>
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.
_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users

Reply via email to