Openlayers.Control.Panel Example

by _DR_

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
<div id="panel"></div>  
<div id="mapdiv"></div>

CSS

#mapdiv {
    width: 600px;
    height: 200px;
    border: 1px solid #dddddd;
}

#panel {
    width: 18px;
    height: 54px;
    border: 1px solid #dddddd;
    cursor: pointer;
}

#panel .olControlZoomInItemInactive {
    background:url(http://dev.openlayers.org/releases/OpenLayers-2.8/img/zoom-plus-mini.png) no-repeat;
    width: 18px;
    height: 18px;
}

#panel .myZoomToMaxOutsideItemInactive {
    background:url(http://dev.openlayers.org/releases/OpenLayers-2.8/img/zoom-world-mini.png) no-repeat;
    width: 18px;
    height: 18px;
}

#panel .myZoomOutOutsideItemInactive{
    background:url(http://dev.openlayers.org/releases/OpenLayers-2.8/img/zoom-minus-mini.png) no-repeat;
    width: 18px;
    height: 18px;
}


.insidePanel {
    width: 18px;
    height: 54px;
    border: 1px solid #dddddd;
    margin-top: 100px;
    cursor: pointer;
}

.insidePanel .olControlZoomInItemInactive {
    background:url(http://dev.openlayers.org/releases/OpenLayers-2.8/img/zoom-plus-mini.png) no-repeat;
    width: 18px;
    height: 18px;
}

.insidePanel .myZoomToMaxInsideItemInactive {
    background:url(http://dev.openlayers.org/releases/OpenLayers-2.8/img/zoom-world-mini.png) no-repeat;
    width: 18px;
    height: 18px;
}

.insidePanel .myZoomOutInsideItemInactive{
    background:url(http://dev.openlayers.org/releases/OpenLayers-2.8/img/zoom-minus-mini.png) no-repeat;
    width: 18px;
    height: 18px;
}

JavaScript

map = new OpenLayers.Map("mapdiv", {
    controls: []
});

//outside
var outside_panel = new OpenLayers.Control.Panel({
    div: OpenLayers.Util.getElement('panel')
});
map.addControl(outside_panel);


var zoom_in_outside = new OpenLayers.Control.ZoomIn();
var zoom_max_outside = new OpenLayers.Control.ZoomToMaxExtent({
    displayClass: 'myZoomToMaxOutside'
});
var zoom_out_outside = new OpenLayers.Control.ZoomOut({
    displayClass: 'myZoomOutOutside'
});


outside_panel.addControls([zoom_in_outside, zoom_max_outside, zoom_out_outside]);

//inside
var inside_panel = new OpenLayers.Control.Panel({
    displayClass: 'insidePanel'
});
map.addControl(inside_panel);

var zoom_in_inside = new OpenLayers.Control.ZoomIn();
var zoom_max_inside = new OpenLayers.Control.ZoomToMaxExtent({
    displayClass: 'myZoomToMaxInside'
});
var zoom_out_inside = new OpenLayers.Control.ZoomOut({
    displayClass: 'myZoomOutInside'
});
inside_panel.addControls([zoom_in_inside, zoom_max_inside, zoom_out_inside]);

map.addLayer(new OpenLayers.Layer('', {
    isBaseLayer: true,
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200)
}));
var buildingLayer = new OpenLayers.Layer.Vector("Buildings", {
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200),
    strategies: [new OpenLayers.Strategy.Cluster({
        autoActivate: true,
        distance: 100
    })]
});

map.addLayer(buildingLayer);
buildingLayer.addFeatures([new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-50.126, 36.755)),
    new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-100.196, 43.215)),
    new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-150.556, 56.615)),
    new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-170.423, 35.510))]);
map.zoomToMaxExtent();