Practical GIS

Gabor Farkas

• Publisher: Packt Publishing
• Year: 2017
• ISBN:
  9781787128514
• Edition: 1
• Topic: Computer Science
• Subtopic: Data Visualisation
• Index: Computer Science

Learn the basics of Geographic Information Systems by solving real-world problems with powerful open source toolsAbout This Book• This easy-to-follow guide allows you to manage and analyze geographic data with ease using open source tools• Publish your geographical data online• Learn the basics of geoinformatics in a practical way by solving problemsWho This Book Is ForThe book is for IT professionals who have little or no knowledge of GIS. It's also useful for those who are new to the GIS field who don't want to spend a lot of money buying licenses of commercial tools and training.What You Will Learn• Collect GIS data for your needs• Store the data in a PostGIS database• Exploit the data using the power of the GIS queries• Analyze the data with basic and more advanced GIS tools• Publish your data and share it with others• Build a web map with your published dataIn DetailThe most commonly used GIS tools automate tasks that were historically done manually—compiling new maps by overlaying one on top of the other or physically cutting maps into pieces representing specific study areas, changing their projection, and getting meaningful results from the various layers by applying mathematical functions and operations. This book is an easy-to-follow guide to use the most matured open source GIS tools for these tasks.We'll start by setting up the environment for the tools we use in the book. Then you will learn how to work with QGIS in order to generate useful spatial data. You will get to know the basics of queries, data management, and geoprocessing.After that, you will start to practice your knowledge on real-world examples. We will solve various types of geospatial analyses with various methods. We will start with basic GIS problems by imitating the work of an enthusiastic real estate agent, and continue with more advanced, but typical tasks by solving a decision problem.Finally, you will find out how to publish your data (and results) on the web. We will publish our data with QGIS Server and GeoServer, and create a basic web map with the API of the lightweight Leaflet web mapping library.Style and approachThe book guides you step by step through each of the core concepts of the GIS toolkit, building an overall picture of its capabilities. This guide approaches the topic systematically, allowing you to build upon what you learned in previous chapters. By the end of this book, you'll have an understanding of the aspects of building a GIS system and will be able to take that knowledge with you to whatever project calls for it.

Creating a Web Map

In the previous chapter, we learned how to style spatial data in GeoServer. We started with a simple symbology for raw vector and raster data and proceeded to more advanced and also more aesthetic cartographic representations. We ended with a group layer resembling the composition we created with QGIS's print composer. We also looked at some other independent vector and raster layers, styled and ready for use.

Now we will use our styled data and create some client-side interactive maps to showcase our results. We will use JavaScript to create a web map that can not only use our already styled vector and raster data as image layers using WMS, but can also use raw vector data with WFS. We will cover how to make our maps more interactive by styling vector data on the client side and enabling our users to query them without sending additional requests to the server.

In this chapter, we will cover the following topics:

• The basic JavaScript syntax
• Using the Leaflet API
• Displaying styled maps as images
• Using raw vector data

Understanding the client side of the Web

In Chapter 11, Showcasing Your Data, we discussed how data is transferred over the Web and how servers work. In order to have a better understanding of the Web, let's discuss how web clients interpret server responses in more detail. As we already know, servers either store web content in a static format, or they generate it on the fly with CGI scripts or other web applications. We also know that these contents are usually plain text, structured text, or media files. The most common content a web client has to interpret is in structured text format, containing elements we would like to show, styles we would like to apply to our elements, and scripts we would like to run on the client side:

• HTML: Hypertext Markup Language is the standardized form of transferring visual elements from web servers to web clients. They are XML-based documents that describe each visual element between tags. Although HTML is XML-based, a valid HTML document is not necessarily a valid XML document. For example, the HTML standard does not make self-closing single tags mandatory. If we write <br> in a HTML document, it is a valid HTML; however, we have to write <br/> to get a valid HTML and XML document.
• CSS: Cascading Style Sheets is the standardized way to describe the custom styling of HTML elements. Every web client has a default set of styling options that are applied to HTML elements with no custom styles. If the web client gets custom rules in the form of CSS declaration blocks, it overrides the default styling with them.
• JavaScript: We can also use custom scripts written in JavaScript in order to send executable code to the client. The client interprets and runs the code contained in the JavaScript file, enhancing the user experience by making the web page more dynamic. It is very useful to automate smaller tasks without wasting the server's resources. For example, interactive web maps are created with web mapping libraries. Web mapping libraries are essentially collections of JavaScript functions creating interactive maps based on some parameters we provide.

What happens to these documents in the web client? First of all, the client sends a request to the destination URL. If we did not provide a resource name and just a path, the request will default to the index.html document in the provided path. Then, if a web server listens on the other side, the communication gets established, and the transaction we discussed earlier occurs. The client receives a response, which is some kind of resource (most often an HTML document). If the HTML document contains links to other resources (for example, stylesheets, scripts, and media elements), the client requests these items individually and interprets their content. If a stylesheet is requested, the client applies the styles found in there, while if a script is requested, it parses and executes it.

Modern web browsers are smart. They try to get the most out of the received data. For example, they can open raw PDF or media files and automatically generate a DOM model when there is a raw file in a recognized format on the other side of the connection.

Let's assume the resource is an HTML document. The client parses the elements written in HTML and creates an object model from it, called a DOM (Document Object Model). The DOM is the object-oriented representation of the HTML document using a tree structure. Every element is an object, with the various attributes the element can hold. We can interact with the DOM, query, modify, insert, and remove individual elements in it. Of course, we need a way to interact with the DOM. As web clients expose their DOM trees through their JavaScript interfaces, we can manipulate DOM elements through JavaScript. For example we can query input values and act accordingly. To make this interaction more convenient, the JavaScript DOM API comes with a built-in event model, that is, we can register event listeners on DOM elements, and the registered functions get executed automatically every time the event occurs.

Creating a web page

To understand the client side better, let's make a simple web page containing some basic information about our map. First of all, we need to get our web server's root directory. As web servers can only see a portion of the filesystem, they can only serve our documents if they are placed in the portion they can use. Apache comes with a default web page, which can help us locate this root folder without searching for configuration files. If we open http://localhost in a browser, we can see the greeting document we are searching for. The document's name in the filesystem is index with a varying extension (for example, html, html.en, and phtml).

Note that on Windows you have to start Apache manually every time you start your system, if you're using the OSGeo4W version of it.

The location of the web server's root folder can vary between different operating systems, versions, and distributions.

• On most Linux distributions, the web server's root folder is located somewhere in /var/www. On Red-Hat-based distributions (for example, Fedora, CentOS), it is in /var/www/httpd.
• On macOS systems, it is either located in /Library/WebServer/Documents or /usr/htdocs.
• On Windows, it is located in C:\OSGeo4W\apache\htdocs, assuming Apache was installed with the OSGeo4W installer and the default path.

If none of these paths work, you can search for the Apache configuration containing Apache's root folder on your filesystem, which is called either 000-default.conf, apache.conf, or httpd.conf depending on your OS and Apache version. The line you should be looking for looks like DocumentRoot /var/www, where instead of /var/www, you will see your Apache root folder's absolute path. If nothing helps, a Google search with your OS's name and version can also help.

After we locate the root folder of our Apache web server, we are only a few steps away from creating our first web page:

1. Make sure you have write permission to Apache's root folder.
2. Create a new file called map.html.
3. Open the file with a text or a code editor. A good code editor with syntax highlighting can gradually help correct typing errors. More advanced editors (for example, Atom, Visual Studio Code) can even spot some syntax errors.

Writing HTML code

HTML has a syntax similar to XML and SLD. The basic principles are the same; we use opening and closing tags, tag attributes, and content. The content can be plain text or other HTML elements. There are only a few elements that we will use to create our web map:

• <html>: The root element of every HTML document grouping the whole content.
• <head>: The group of important elements that are not visualized but alter the default behavior of the web page in some way.
• <body>: The group of visual elements rendered by the web client.
• <title>: The title of the page. It goes inside the <head> element.
• <meta>: The various kinds of metadata of the web page. Very useful to explicitly set the character encoding of the web page.
• <link>: A reference to an external resource, usually a stylesheet.
• <script>: Inline JavaScript code or a reference to an external resource containing valid JavaScript code.
• <h1>: A first-level header emphasized with a large font size.
• <p>: A paragraph of plain text.
• <div>: A division without much purpose on its own. When it contains other elements, it groups them together. This way, visually coherent parts of the website (e.g. ...