{"id":380,"date":"2013-09-25T10:32:48","date_gmt":"2013-09-25T10:32:48","guid":{"rendered":"http:\/\/www.lincoln.ac.nz\/conversation\/gis\/?p=380"},"modified":"2023-05-07T04:17:05","modified_gmt":"2023-05-07T04:17:05","slug":"anatomy-of-a-web-map","status":"publish","type":"post","link":"https:\/\/blogs.lincoln.ac.nz\/gis\/anatomy-of-a-web-map\/","title":{"rendered":"Anatomy of a Web Map"},"content":{"rendered":"

In this post, we’ll have a closer look behind how web maps combine map services with web pages.<\/em><\/p>\n

In an earlier post we looked at some of the web maps working off of our GIS server<\/a>. \u00a0In this post, we’ll have a closer look at just how web maps work. \u00a0We’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. \u00a0We’re about to start looking at some code.<\/p>\n

All hope abandon, ye who enter here<\/a>…<\/strong><\/em><\/p>\n

\"abandon-all-hope-ye-who-enter-here\"<\/a><\/p>\n

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. \u00a0Usually this is HTML which most of us are at least a little bit familiar with. \u00a0Another type of code used in webpages is called JavaScript<\/a>, \u00a0and often you have a combination of both. \u00a0As a start, let’s look at the staff\/student addresses map<\/a> again:<\/p>\n

\"AddressWebMap\"<\/a><\/p>\n

A combination of HTML and JavaScript give the page its look and feel. \u00a0In 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. \u00a0Map-wise there are several layers visible; the address points, suburb boundaries, a base map, and when zoomed in, bus lines and bus stops. \u00a0Not a lot of bells and whistles and a good one to start with for just those reasons.<\/p>\n

This web map began its life as an ArcMap map. \u00a0All it consists of are two layers: points to show address positions, symbolised as either staff, or domestic\/international students, and a layer of suburbs:<\/p>\n

\"MapView\"<\/a><\/p>\n

Once this was set up, the next step was to create a map service from this. \u00a0In ArcMap this is done from File > Share As… > Map Service. \u00a0This 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.) \u00a0 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. \u00a0Here I’ve called the map service “LUAddresses”. \u00a0I can get some information on the map service itself by looking\u00a0here<\/a>:<\/p>\n

\"ServicesDir\"<\/a><\/p>\n

I saved the map service to the Maps folder and you can see it listed here <\/a>along with the other map services in that folder:<\/p>\n

\"MapServices\"<\/a><\/p>\n

Clicking on the link for the LUAddresses Service<\/a>, we get:<\/p>\n

\"LUAddressService\"<\/a><\/p>\n

More gibberish, you may well say, but there’s some sense to be made here. \u00a0Under “Layers” there are two entries: 2012 Locations and Suburbs. \u00a0These correspond to the \u00a0layers from my original map. \u00a0One of the most important aspects of this page \u00a0is the URL in the address line of your browser, specifically:\u00a0http:\/\/gis.lincoln.ac.nz\/arcgis\/rest\/services\/Maps\/LUAddresses\/MapServer<\/a>. \u00a0We will need to know this when we write the web map’s script. \u00a0It’s literally the address of the map service. \u00a0Across the top you could click on one of the “View in” options to see what the map service looks like<\/a> (below I’ve clicked the JavaScript option):<\/p>\n

\"JavascirptMap\"<\/a><\/p>\n

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.<\/p>\n

Now, how are the other map layers added in in our final web map (the basemap and the bus routes\/stops)?<\/p>\n

If you’ve got any hope still left, please abandon it now.<\/p>\n

Web pages blend map services together via scripts that display them in a browser. \u00a0If you’ve still got the LUAddresses web map open in a browser, right-click anywhere on the page and go to “view page source<\/a>” (or something similar – you may be tempted to try “Translate to English” in Chrome instead…) \u00a0A 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.)<\/p>\n

\"PageSource\"<\/a><\/p>\n

There’s a lot to this and we’ll skip over much of it (for now…) \u00a0My aim here to dissect it enough so we get a sense of how it all fits together. \u00a0Those familiar with HTML will see some common things, but much of it is JavaScript. \u00a0You’ll see lots of tags, things like “<title>”. \u00a0The browser interprets those tags and does different things with them depending on what they are. \u00a0For 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. \u00a0These are instructions to the browser to treat what’s in-between the opening a closing tags a special way.<\/p>\n

The JavaScript on the page is a bit like a program that makes the webpage jump through various hoops. \u00a0Scroll down the pages of the source code and look for the “function init () {<\/strong>” portion. \u00a0This is where the map portion of the page is getting set up. \u00a0Here’s a snippet of it:<\/p>\n

\"Init\"<\/a><\/p>\n

The portion highlighted in blue should look a bit familiar – it’s the URL to the LUAddresses map service on gis.lincoln.ac.nz. \u00a0This line tells the web page to go out, find this map service and assign it to a variable called “locations”. \u00a0At the bottom note the “map.addLayers” line – this explicitly adds the map service to the page. \u00a0Above 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. \u00a0It’s looking for a map service called “newzealand” in the Generic folder. \u00a0This 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. \u00a0Click here<\/a> to see their services directory.<\/p>\n

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.<\/p>\n

Nestled in between is the code that adds in the legend. \u00a0At 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.<\/p>\n

\"Divs\"<\/a><\/p>\n

Yikes. \u00a0I’m sure that was a bit painful. \u00a0There 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.<\/p>\n

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. <\/strong>We covered how to do this in an\u00a0earlier post<\/a>. \u00a0You just need to know the server the map service lives on to connect. \u00a0You 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. \u00a0There are some other protocols we’ll cover another time.)<\/span><\/p>\n

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). \u00a0Dante would be proud. \u00a0If you’ve made it to the end of this, let me know<\/a> and I’ll shout you a Pixie Caramel.<\/p>\n

C<\/p>\n","protected":false},"excerpt":{"rendered":"

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. \u00a0In this post, we’ll have a closer look at just how web maps work. \u00a0We’ll use the staff\/student addresses […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-380","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":1,"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":4161,"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/posts\/380\/revisions\/4161"}],"wp:attachment":[{"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.lincoln.ac.nz\/gis\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}