Reusing knowledge about OpenLayers renderers from Chapter 3, Charting the Map Class and OpenStreetMap from Chapter 4, Interacting with Raster Data Source, let's review how to manipulate the DOM and changing OpenStreetMap tiles sources on the fly.
So, let's start with the official OpenLayers example from http://openlayers.org/en/v3.0.0/examples/simple.html using Page inspector.
Open the file and at the end of the URL you get from your browser add ?renderer=dom
Click on the Page Inspector icon (or right-click on image and click Inspect in the menu) and hover over the images. .
Then, on one of the
imgtags, right-click on Edit attributes, as illustrated in the following screenshot:
Next, you will see that you can change the value in our example, http://b.tile.openstreetmap.org/2/2/1.png, of the
srcattribute. So, replace its value with http://tile.stamen.com/toner/2/2/1.png and see the result. In the Elements panel, theimg(for the image tag)srcattribute contains http://b.tile.openstreetmap.org/2/2/1.png. If you remember, URL can be separated in two parts. The first part, http://b.tile.openstreetmap.org/, (called base URL), will change when the second part,2/2/1.png, will change according to images you hover on. Here, we only change the first part.Repeat the process by changing the image you hover on and the base URL you use. The value you can use for base URL can be http://d.tile.stamen.com/watercolor/, http://b.tile.opencyclemap.org/cycle/, and http://otile2.mqcdn.com/tiles/1.0.0/osm/.
The result obtained will look like the screenshot that follows:
We saw how to modify attributes of HTML elements using the Page Inspector on images. You also saw the correspondence between highlight on the web page and code content in the Elements panel when hovering over. You also rediscovered some different OpenStreetMap backgrounds.
Chrome DevTools's Network panel is a tool we often use throughout this book. It basically provides a way for us to monitor a network activity by viewing all the requests and responses the web page is making. In addition to the initial page load network activity, we are also able to monitor all of the asynchronous JavaScript requests that are made by the web page. Without AJAX, we will have to refresh our entire page any time we want to do anything with our OpenLayers map. So, for example, every time you zoom in, OpenLayers makes a series of requests to the map server to get new map images, and the map server's response is a new map image that OpenLayers then displays. This request/response method is handled via AJAX; without it, we would have to refresh the entire page after every request.
Note
See Appendix B, More details on Closure Tools and Code Optimization Techniques, where a small web history and a diagram covers AJAX.
The Network panel allows us to see the URL that is being requested, the GET or POST parameters, the server's status response, the type of resource requested, the size of the response, and the time it took to complete the request. Let's take a look at what the Network panel looks like for the example from the previous official example used when reviewing Elements panel:
Before we talk about the requests being made, take a look at the buttons above the lists of requests—the first one is dedicated to Record Network Log and the second Clear helps you remove the list of network calls. Then, you can activate Filter, which displays a submenu to filter by resources types for example, Documents, Stylesheets, Images, but also by the type of requests such as XHR or WebSockets. The Filter icon also activates a full text search box. The fourth icon is Use small resource rows. The two checkboxes are available, Preserve Log will cause the list of requests to persist, or not get deleted, on page reloads, while Disable cache will not allow you to use cache. For better performances, some assets such as scripts or images can be kept in your browser memory to speed your browsing experience when you visit the same website again. The drawback is when you debug, you can use an outdated file.
Now, let's break down the actual request list.
The request list shows us all the requests the page makes. Each URL in the previous screenshot is a URL that OpenLayers is making a request to. By clicking on each request, we can see more information about the request, including the full request URL and the response. When we are in the Headers sub-tab, we get a Request URL, Request Method, and Status Code, and after we get all details of Request Headers and Response Headers. The Request URL tab gives all the parameters. The Response tab provides us with the server's response to our request:
Take a look again at the list—when we look at the first image in the screenshot, the row has the name 1.png. The method, GET in this case, specifies that the request type is GET, which basically means we are embedding variables inside the URL itself, with optional key=value pairs, separated by an & sign.
When we mouse over a URL, we can see more of it; we see the full URL, which may contain a bunch of variables in the key=value&key=value&.... format. In our case, we only have a full URL like http://c.tile.openstreetmap.org/2/1/1.png when hovering.
As we saw in all OpenStreetMap examples through the book, we didn't need parameters. If you remember in Chapter 1, Getting Started with OpenLayers, we told you that OpenLayers consumes cartographic data; some can come from dynamic web mapping server, others from pregenerated data. Our example relies on pregenerated data so that there are no parameters added contrary, for instance, to a WMS data source.
The Sources panel is very powerful. It enables you to view and edit JavaScript and CSS files loaded from the web page. You are not restricted to only view all the JavaScript code associated with the page in this panel; you can use it to do real-time code debugging. You can set watch expressions, view the stack, set breakpoints, and so on. If these terms are foreign, don't worry, we will review some of them.
For example, we want to quickly talk about enabling Pause on exceptions. With this option enabled, Chrome DevTools will stop the web page whenever a JavaScript error is encountered. This makes it very easy to quickly pinpoint where your page is blowing up at. To enable it, simply click on the Pause on exceptions button icon (be careful, it's not the same as an Pause Script Execution icon).
Keep note of this when you enable it. We've been frustrated more than once when developing because we forgot that it had been enabled. When it is enabled, the button isn't gray, as demonstrated with the icon:
Another tip in this panel, is the ability to unminify JavaScript. It's really useful to track errors. You can open a web page with a compressed JavaScript file. If you click on the icon with open/close brackets called Pretty Print, you will see the difference.
You are maybe wondering why we spoke so much about this panel. When you start to make complex web mapping applications, this panel is the best way to analyze how an application works. When you're developing or reusing an already existing code, you can already guess the behavior of the code, but you can't confirm it. The key feature of the debugger is to make this confirmation. Let's see an example of how you can use it.