Connecting an overview map

Submitted by Pieter De Graef on Tue, 17/03/2009 - 11:03

This section will show how to add an overview map to the page. An overviewmap is in essence just a map, the only difference is that it needs to be related to an other map. Let us first have a look at the HTML code (see online here):

<body class="soria">

    <div style="width: 100%; margin: 0px; padding: 0px;">
        <div id="helloToolbar" dojoType="geomajas.widget.DynamicToolbar"
            style="padding: 0px; width:600px; height:25px; border: 1px solid #999;
            position:absolute; left:50px; top:50px;">
        </div>
        <div id="helloMap" dojoType="geomajas.widget.MapWidget"
            style="width:600px; height:400px; border: 1px solid #999;
            position:absolute; left:50px; top:76px;">
        </div>
        <div id="helloOverviewMap" dojoType="geomajas.widget.MapWidget"
            style="width:200px; height:200px; border: 1px solid #999;
            position:absolute; left:675px; top:50px;">
        </div>
    </div>

</body>

So what we have here is very analogous to the previous section. The main difference is the addition of a new MapWidget. In the HTML we see no real difference between the regular map ("helloMap") and the overview map ("helloOverviewMap"). This must mean that the difference is in the XML configurations on the server. Well, let's have a look:

<map id="helloOverviewMap">
    <backgroundColor>#E0E0E0</backgroundColor>
    <lineSelectStyle>
        <fillOpacity>0</fillOpacity>
        <strokeColor>#FF6600</strokeColor>
        <strokeOpacity>1</strokeOpacity>
    </lineSelectStyle>
    <pointSelectStyle>
    </pointSelectStyle>
    <polygonSelectStyle>
        <fillColor>#FFFF00</fillColor>
        <fillOpacity>0.5</fillOpacity>
    </polygonSelectStyle>

    <crs>EPSG:900913</crs>
    <scaleBarEnabled>false</scaleBarEnabled>
    <panButtonsEnabled>false</panButtonsEnabled>
    <overview>helloMap</overview>
    <maximumScale>9.5</maximumScale>
    <initialBounds x="-2000000" y="-2000000" width="4000000" height="4000000"/>

    <layerConfig>
        <xi:include href="layers/gnormal.xml"    />
        <mapOrder>
            <layerRef>gnormal</layerRef>
        </mapOrder>
        <layerTree>
            <label>Layers</label>
            <layerRef>gnormal</layerRef>
        </layerTree>
    </layerConfig>
</map>

As you can tell by the ID attribute in the very first line, this is the configuration for a map called "helloOverviewMap". This map configuration looks quite similar to the "helloMap" configuration, except for the overview-tag. The overviewmap specifies in it'soverview-tag the name of the map of which it is an overview map. Simple as that.