Anatomy of a Web Map
In this post, we’ll have a closer look behind how web maps combine map services with web pages.
In an earlier post we looked at some of the web maps working off of our GIS server. In this post, we’ll have a closer look at just how web maps work. We’ll use the staff/student addresses web map we saw in the other post and dissect it to get a better idea of how it works. We’re about to start looking at some code.
This web map began its life as an ArcMap map. All it consists of are two layers: points to show address positions, symbolised as either staff, or domestic/international students, and a layer of suburbs:
Once this was set up, the next step was to create a map service from this. In ArcMap this is done from File > Share As… > Map Service. This requires a connection to the GIS server, where a wizard takes us through the steps of starting a service (this process will be the subject of another post.) Once created on the server, the map service is now available on the web for anyone who knows where it is and how to use it. Here I’ve called the map service “LUAddresses”. I can get some information on the map service itself by looking here:
I saved the map service to the Maps folder and you can see it listed here along with the other map services in that folder:
Clicking on the link for the LUAddresses Service, we get:
Pretty much as before only this one is running directly off the server rather than in ArcMap – this is the raw material our web map will work with at a later stage.
Now, how are the other map layers added in in our final web map (the basemap and the bus routes/stops)?
If you’ve got any hope still left, please abandon it now.
Web pages blend map services together via scripts that display them in a browser. If you’ve still got the LUAddresses web map open in a browser, right-click anywhere on the page and go to “view page source” (or something similar – you may be tempted to try “Translate to English” in Chrome instead…) A new tab should open up with a lot more gobbeldy-gook – this is the behind-the-scenes script that instructs the browser on how to display the page (an excerpt below.)
The portion highlighted in blue should look a bit familiar – it’s the URL to the LUAddresses map service on gis.lincoln.ac.nz. This line tells the web page to go out, find this map service and assign it to a variable called “locations”. At the bottom note the “map.addLayers” line – this explicitly adds the map service to the page. Above the line where our local map service gets added, there’s one called “basemap” and points to another map service, this one residing on a server called services.arcgisonline.co.nz. It’s looking for a map service called “newzealand” in the Generic folder. This is a map service put up by Eagle Technology for anyone to use – I use it on a lot of my web maps because it saves me the trouble of having to set one up on my own and displays different levels of detail depending on the scale. Click here to see their services directory.
There’s also a line that adds the Bus_Routes_Scheduled map service from the ECan web server to a variable called “busroutes” that gets added to the map along with the addresses a the bottom.
Nestled in between is the code that adds in the legend. At the bottom of the script is some more HTML which sets up the different dividers on the page, the two separate panes that hold the content.
Yikes. I’m sure that was a bit painful. There are still a few missing pieces to be covered here, but my intention has been to give you a sense of how web maps do their thing.
A really important point you can take from this is that knowing the URL of a map service, you can also add these services to an ArcMap map. We covered how to do this in an earlier post. You just need to know the server the map service lives on to connect. You can then browse available services in the service directory (e.g. http://<server_name>/arcgis/rest/services, so long as it’s an ArcGIS server. There are some other protocols we’ll cover another time.)
So we’ve made it to the ninth circle of GIS hell and can now happily crawl into the next hemisphere of Purgatory (i.e. school holidays). Dante would be proud. If you’ve made it to the end of this, let me know and I’ll shout you a Pixie Caramel.