GeoDev Summit Presentation

Tour de Spatial - take a tour through the current gis development landscape while building a real-world application.

main image

This tutorial will guide you through the "Tour de Spatial" session presented by Rusty Green at the 2018 Harrisburg University GeoDev Summit. The session will consist of a tour through various GIS solutions – exposing users to a wide range of spatial technologies, frameworks, and services. We will build a real-world full stack GIS application (client and server) and explore different software and techniques to accomplish GIS-centric tasks.

The purpose of this session is to gain a broad understanding of the capabilities of GIS development while exploring the current GIS-technology landscape. We will build a real-world GIS application and compare/contrast various GIS solutions along the way. The session will touch on various JavaScript frameworks, mapping servers, and python solutions – both open source as well as proprietary (Esri software).

The course will start off with a tour of GIS technologies, a demonstration of their use, followed by a hands-on activity to build a map-based web application (built on top of the previous demonstration).

Session Agenda

  • Introduction ~2 min
  • Overview of session objectives ~3 min
  • View and explain the application we're going to build ~5 min
  • Tutorial with presentation (total of ~40 min)

    • Process attribute data into spatial data (using Python) ~5 min
    • Analyze spatial data (hands-on w/ GIS desktop software) ~5 min
    • Publish spatial data to a map service ~10 min
    • Create an application to consume map service data ~20 min

Tutorial Prerequisites

There are two levels of participation in this tutorial, intermediate and advanced. Intermediate users, or users without the specific software installed, can watch during the advanced development components and continue with the hands-on tutorial on the last step (the application development step).

Intermediate Participants

For general/intermediate developers a basic foundational understanding of web development is required - such as JavaScript, HTML, and CSS. Developers can use a local IDE for development or can use a free online web-programming environment – such as REPL(recommended), Plunker, JSFiddle, etc.

Suggested IDEs:

Advanced Participants

Advanced developers, or developers with the necessary software installed, can follow along through each of the tutorial steps - which will cover the full gamut of creating a GIS-centric application from scratch. Due to the complexities of some of the tutorial steps, such as running a map server, tools such as Docker, will be utilized to help simplify special environment requirements.

Suggested Tools to Install:


1) Getting Started

Clone or download the tutorial repository:


git clone


2) View Data

View and analyze data using desktop GIS software.

  1. Open QGIS Desktop
  2. Go to Layer > Add Layer > Add Vector Layer
  3. Select Source Type of "File"
  4. Browse to the downloaded repository folder > data
  5. Selct data > "tdf-2017routes.geojson" and "tdf-2017transition.geojson"
  6. Click "Add"
  7. Click "Close"

Style the data

  1. Double click the "tdf-2017_routes" layer
  2. Change color, width, opacity, and layer name (blue, 2, 77%, routes)
  3. Double click the "tdf-2017_transition" layer
  4. Change color, style, and layer name (blue, dashed, routes)

Analyze the data

  1. TODO

Export to web map

  1. TODO

3) Publish Spatial Data

Publish spatial data to a map service to be consumed by others.

Start GeoServer

  1. Navigate to repository "geoserver" folder

    cd ~/Workspace/geodev-summit-2018/geoserver
  2. Start the server using docker

    docker-compose up
  3. Navigate to localhost:8080/geoserver
  4. Sign in with default admin account (admin/geoserver)
  5. Create a new workspace

Publish to GeoServer

  1. Install QGIS GeoServer Explorer plugin
  2. Open GeoServer Explorer in QGIS (Web > GeoServer > Explorer)
  3. Add new Catalog (right click > New Catalog)
  4. Enter conneection info:
  5. URL http://localhost:8080/geoserver
  6. Username admin
  7. Password geoserver
  8. Right click on new catalog
  9. Click "Publish QGIS project to this Catalog"
  10. Click OK

5) Consume Spatial Data

Create an application to consume spatial data from the map services. Open the starter template at

App Structure:

  • index.html - main page that contains content (the skeleton of the app)
  • style.css - the app styling
  • constants.js - holds static constant values such as API keys, etc
  • index.js - the main code (place to create the map and core functionality)
  • panoramic.js - holds the code to create the panoramic viewer

Add page and map styling style.css:

body {
  height: 100%;
  width: 100vw;
  padding: 0;
  margin: 0;

#pano {
  height: 50%;
  width: 100vw;

Additional Resources and Links

Tutorial Links

  • Presentation repository (coming soon...)


Desktop GIS

Server GIS

Client-side Mapping Libraries


Rusty Green

When performance counts!
  • Web Design
  • Software Development
  • Geospatial Solutions