GeoDev Summit Presentation
Tour de Spatial - take a tour through the current gis development landscape while building a real-world application.
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:
- Visual Studio Code (local IDE)
- StackBlitz (advanced online IDE)
- REPL (simple online IDE - no setup required)
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:
- Docker Community Edition
- QGIS or ArcGIS for Desktop (note, Python will automatically be installed)
- Visual Studio Code (for local development)
Tutorial
1) Getting Started
Clone or download the tutorial repository:
Clone:
git clone https://github.com/rustygreen/geodev-summit-2018.git
Download: https://github.com/rustygreen/geodev-summit-2018/archive/master.zip
2) View Data
View and analyze data using desktop GIS software.
- Open QGIS Desktop
- Go to Layer > Add Layer > Add Vector Layer
- Select Source Type of "File"
- Browse to the downloaded repository folder > data
- Selct data > "tdf-2017routes.geojson" and "tdf-2017transition.geojson"
- Click "Add"
- Click "Close"
Style the data
- Double click the "tdf-2017_routes" layer
- Change color, width, opacity, and layer name (blue, 2, 77%, routes)
- Double click the "tdf-2017_transition" layer
- Change color, style, and layer name (blue, dashed, routes)
Analyze the data
- TODO
Export to web map
- TODO
3) Publish Spatial Data
Publish spatial data to a map service to be consumed by others.
Start GeoServer
-
Navigate to repository "geoserver" folder
cd ~/Workspace/geodev-summit-2018/geoserver -
Start the server using docker
docker-compose up - Navigate to localhost:8080/geoserver
- Sign in with default admin account (admin/geoserver)
- Create a new workspace
Publish to GeoServer
- Install QGIS GeoServer Explorer plugin
- Open GeoServer Explorer in QGIS (Web > GeoServer > Explorer)
- Add new Catalog (right click > New Catalog)
- Enter conneection info:
- URL http://localhost:8080/geoserver
- Username admin
- Password geoserver
- Right click on new catalog
- Click "Publish QGIS project to this Catalog"
- Click OK
5) Consume Spatial Data
Create an application to consume spatial data from the map services. Open the starter template at https://stackblitz.com/edit/geodev-summit-2018
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:
html,
body {
height: 100%;
width: 100vw;
padding: 0;
margin: 0;
}
#map,
#pano {
height: 50%;
width: 100vw;
}
Additional Resources and Links
Tutorial Links
- Presentation repository (coming soon...)