GeoSearch Map Tutorial

Changing the Initial Extent

There are two ways of changing the initial extent displayed on the map in GeoSearch:

Setting a new map center and zoom level
Zooming the map to a specific extent

Before you can do either of these, however, you need to get a variable reference to the GeoSearch Control. Luckily, this is returned by the call to Init(), so all you have to do is assign it to a variable name:

  <body onload="var gs = MetaCarta.GeoSearch.Init({'textDivId': 'list', 
                            'mapDivId':'map', 
                            'applianceHost': 'metacarta.example.com'});">

Setting a new map center and zoom level

If you already know the Latitude and Longitude coordinates for the center of where you want the map to start, then you will simply call the setCenter() method on the GeoSearch Control's "map" property.

Example: Let's say you want the map to start off zoomed in to Barcelona. The lat/lon coordinates of Barcelona are (roughly) 2.18 Longitude and 41.39 Latitude. We must also pick a zoom level. For towns and cities, level 10 generally works well, though you will want to play around with different values to get it just right.

  <body onload="var gs = MetaCarta.GeoSearch.Init({'textDivId': 'list', 
                            'mapDivId':'map', 
                            'applianceHost': 'metacarta.example.com'});
	        gs.map.setCenter( new OpenLayers.LonLat(2.18, 41.39), 10);">

See the setCenter example live

Zooming the map to a specific extent

If you know the extent of where you want the map to start, then you can call zoomToExtent() on the GeoSearch Control's "map" property.

Example: Let's say you want the map to start off zoomed in to the bay of Salvador in Brazil. The lat/lon coordinates of the region are (roughly)

Minimum Longitude: -38.97
Minimum Latitude: -12.65
Maximum Longitude: -38.27
Maximum Latitude: -13.35

Note that the OpenLayers.Bounds object takes values in bottom-left, top-right order on initialization.

  <body onload="var gs = MetaCarta.GeoSearch.Init({'textDivId': 'list', 
                            'mapDivId':'map', 
                            'applianceHost': 'metacarta.example.com'});
	        gs.map.zoomToExtent( new OpenLayers.Bounds(-38.97,-12.65, -38.27, -13.35));">

See the zoomToExtent example live

Next: Changing the Background Map