Thursday, March 3, 2011

Creating a Simple Map using Google and the GIS Hub

There may be situations where it would be handy to drop in a simple map within an existing static web site. This map can contain a base map and one or more layers from the GIS Hub (or other ArcGIS Server resource).

I’m not a developer so I copied and pasted sample code from Esri’s site into a file ending in .html that I created with a text editor. Then I doctored it up so that I could use GIS Hub data and have it zoom to the great State of North Dakota:

I made some modifications to the code that I copied:

  • var centerat = new GLatLng(47.5, -100.5); -- this is used to center the view on the map
  • var initialExtent = new GLatLngBounds(GLatLng(45, -104),GLatLng(49,-96.5)); -- this is used set the extents of the map, note that the zoom window is minimum lat/long followed by maximum lat/long
  • gmap.setCenter(centerat, 7); -- sets the initial zoom scale of the map
  • imageParams.layerIds = [LAYERIDHERE]; -- place one or more layer IDs in place of LAYERIDHERE (see below for more info)
  • ("URLHERE",imageParams, 0.75, dynmapcallback); -- place the URL of the service here in place of URLHERE (see below for more info), .75 is the transparency value
  • "width: 750px; height:450px;" -- the width and height values set the size of the map to be displayed
Not too scary is it? If it is, we’ll catch you at the next posting. If not, and you want to try editing your .html file to display a layer or two from the GIS Hub, then copy and paste the code from the Esri site then modify it so that it looks like the above. The next step is to figure out which URL and layer ID(s) you should be using.

Begin by going to the GIS Hub REST. Let’s say you’d like to display state-managed lands on the map. In the REST, click on the “All_GovtLands_State” item. After doing this, copy the URL displayed at the top of your browser and paste that URL into your .html file, replacing the URLHERE so that the line looks something like this:

("",imageParams, 0.75, dynmapcallback);

Now add the layer or layers to be displayed. Let’s display Surface Trust Lands and Wildlife Management Areas. Note in the All_GovtLands_State that there are four layers. The Surface Trust Land layer is #2 and the Wildlife Management Areas layer is #3. Edit your .html changing LAYERIDHERE to 2,3 so that line now looks something like:

imageParams.layerIds = [2,3];

Finally, save your work and give it a try by simply double-clicking on the .html file that you have just created. The map should show up in your web browser. After zooming in you should see both the Surface Trust Lands (light blue) and the Wildlife Management Areas (red). For example:

1 comment: