This example shows an external OGC web mapping service from www2.demis.nl. Another example (with more functionality) using a local UMN MapServer is shown here.

To change the extent, select a tool button: zoom in, zoom out, pan/move, or info. The remaining buttons are for the whole area, a previous extent, or a following extent respectively. Note that a zoom area can also be defined by dragging an area in the overview map.

The capabilities of the local mapserver can be requested by this link.

The carto filter is defined between {carto-filter} tags. In this case:

{carto-filter}
    {mappingwidget type="ZoomIn" factor=0.5 target="next"
      normalimage="buttons/button_zoomin_1.png"
      hoverimage="buttons/button_zoomin_2.png"
      selectedimage="buttons/button_zoomin_3.png"
      group="navigation"}
    {mappingwidget type="ZoomOut" factor=0.5 target="next" 
      group="navigation"}
    {mappingwidget type="Move" group="navigation" target="next"}
    {mappingwidget type="Query" group="navigation" target="next"}
    {mappingwidget type="Ruler" group="navigation" target="next"}
    
    {mappingwidget type="ZoomFull" target="next"}
    {mappingwidget type="ZoomPrevious" target="next"}
    {mappingwidget type="ZoomNext" target="next"}
{/carto-filter}

{carto-filter}
    {mappingwidget type="SimpleMap" width="480" height="240" 
     service="http://www2.demis.nl/wms/wms.asp?wms=WorldMap"
     layers="Bathymetry,Topography, ..etc.. ,Builtup areas"
     query_layers="Bathymetry,Topography, ... ,Builtup areas"
     extent="-180,-90,180,90" srs="epsg:4326"
     format="image/png"
     oversized="0.25"
     }
{/carto-filter}