Implementing a dropdown list of “Quick Zooms” in GeoExplorer.

Prerequisites: Make sure you’re working off a development version of the GeoExplorer.js file, per my previous post.

Background: We will be incorporating an ExtJS Combo Box into the GeoExplorer toolbar where users can select a predefined “Quick Zoom”, which will zoom the map to a set extent.  This hack is based on the following ExtJS sample: http://www.sencha.com/deploy/dev/examples/form/combos.html.

Step 1:

• Build a simple data array store
  • Open index.html and paste the following code before the line “var app = new GeoExplorer.Composer”:
  • Ext.namespace(‘Ext.selectdata’); Ext.selectdata.zooms = [ ['-76.05971168', '44.0021275', '-74.32601832', '45.0641225', 'St. Lawrence (County)'], ['-74.824079', '44.781062', '-74.75695', '44.820802', 'Brasher Falls-Winthrop (Village)'], ['-75.195351', '44.57916', '-75.134151', '44.623117', 'Canton (Village)'], ['-75.266038', '44.312554', '-75.237355', '44.333564', 'Edwards (Village)'], ['-75.485823', '44.324122', '-75.443832', '44.348731', 'Gouverneur (Village)'], ];
  • This defines the spatial extent and label for each Quick Zoom
  • Next we have to define the data store using the above data, by pasting the following code directly after it
  • var zoomstore = new Ext.data.ArrayStore({
    fields: [{ name : 'ymin', type: 'float'}, { name : 'xmin', type: 'float'}, { name : 'ymax', type: 'float'}, { name : 'xmax', type: 'float'}, { name : 'label', type: 'string'}],
    data : Ext.selectdata.zooms
    });

Step 2:

• Add the Quick Zoom combo box to the GeoExplorer toolbar
  • Open GeoExplorer.js and search for “enable3DButton”.  The first instance should be the code that defines the button.. “var enable3DButton = new Ext.Button({…”  The next instance adds the button to the toolbar (this is the instance we want).  Since this is the last button in the toolbar, we want to add our Quick Zoom dropdown after this.
  • Paste the following code after “enable3DButton,” (don’t forget the comma after enable3DButton):
  • “->”,
    new Ext.form.ComboBox({
    tpl: ‘<tpl for=”.”><div ext:qtip=”{label}”>{label}</div></tpl>’,
    store: zoomstore,
    displayField:’label’,
    typeAhead: true,
    mode: ‘local’,
    forceSelection: true,
    triggerAction: ‘all’,
    width:125,
    emptyText:’Quick Zooms’,
    selectOnFocus:true,
    listeners: {‘select’: function (combo,record){this.mapPanel.map.zoomToExtent(new OpenLayers.Bounds(record.data.ymin,record.data.xmin,record.data.ymax,record.data.xmax).transform(new OpenLayers.Projection(“EPSG:4326″), new OpenLayers.Projection(“EPSG:900913″)));},
    scope:this}})
  • The “->” bit aligns the combobox to the far right side of the toolbar.  The select listener calls an OL zoomToExtent function- and transforms our unprojected coordinates to the defined map projection coordinate system- EPSG:900913.

Refresh your GeoExplorer site and make sure everything is working correctly.  If you run into troubles, use the Firebug extension for Firefox to view the error console.  Most likely there is a simple syntax error (missing comma or unclosed brackets, etc.)

I’ve been spending a lot of time over at OpenGeo’s GetSatisfaction page lately.  This is a great resource and a shining example of OpenGeo’s commitment to their user community.  Turnaround time for questions is quick and you often get answers directly from senior staff and developers.

I’m currently attempting to port the St. Lawrence County Open GeoPortal site over to the GeoExplorer platform.  GeoExplorer, a component of OpenGeo’s OpenGeo Suite provides a much more scalable platform, which is also easier to maintain and update- however, I wanted to retain some of the advanced functionality from my existing OpenLayers/ExtJS site- specifically tax parcel search capabilities, municipal quick zooms, and an organized tree structure for the layer list.  I’ve also made a few smaller tweaks, including a map loading icon, metadata tab, disclaimer popup, and some changes to the default WMS tiling and transition effects.

Here’s what I’ve got so far: http://www.opengeohost.com/slcgeoexplorer/

Since there seems to be quite a bit of interest in these mods over at the GetSatisfaction forum, I’ve decided to post some brief documentation and code snippets to help others get going with this type of GeoExplorer customization.  Check back often in the coming weeks as I will be posting the hacks piecemeal when I can free up some time!