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.

All hope abandon, ye who enter here…

abandon-all-hope-ye-who-enter-here

So when we open up a web map in a browser, the map, like any webpage, is using some sort of code in the back room to make it display as you see it.  Usually this is HTML which most of us are at least a little bit familiar with.  Another type of code used in webpages is called JavaScript,  and often you have a combination of both.  As a start, let’s look at the staff/student addresses map again:

AddressWebMap

A combination of HTML and JavaScript give the page its look and feel.  In the great scheme of things it’s a very simple map with a few key elements: the map itself, which sits in its own pane and a simple legend on the right.  Map-wise there are several layers visible; the address points, suburb boundaries, a base map, and when zoomed in, bus lines and bus stops.  Not a lot of bells and whistles and a good one to start with for just those reasons.

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:

MapView

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:

ServicesDir

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:

MapServices

Clicking on the link for the LUAddresses Service, we get:

LUAddressService

More gibberish, you may well say, but there’s some sense to be made here.  Under “Layers” there are two entries: 2012 Locations and Suburbs.  These correspond to the  layers from my original map.  One of the most important aspects of this page  is the URL in the address line of your browser, specifically: http://gis.lincoln.ac.nz/arcgis/rest/services/Maps/LUAddresses/MapServer.  We will need to know this when we write the web map’s script.  It’s literally the address of the map service.  Across the top you could click on one of the “View in” options to see what the map service looks like (below I’ve clicked the JavaScript option):

JavascirptMap

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.)

PageSource

There’s a lot to this and we’ll skip over much of it (for now…)  My aim here to dissect it enough so we get a sense of how it all fits together.  Those familiar with HTML will see some common things, but much of it is JavaScript.  You’ll see lots of tags, things like “<title>”.  The browser interprets those tags and does different things with them depending on what they are.  For instance, if you look at the title of the tab for this map, it’s “Map with legend” which is precisely the text you see in-between the <title></title> tags.  These are instructions to the browser to treat what’s in-between the opening a closing tags a special way.

The JavaScript on the page is a bit like a program that makes the webpage jump through various hoops.  Scroll down the pages of the source code and look for the “function init () {” portion.  This is where the map portion of the page is getting set up.  Here’s a snippet of it:

Init

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.

Divs

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.

C