Open Web Mapping: An educational resource for creating online maps using free and open source software

Video in TIB AV-Portal: Open Web Mapping: An educational resource for creating online maps using free and open source software

Formal Metadata

Open Web Mapping: An educational resource for creating online maps using free and open source software
Title of Series
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date
Open Source Geospatial Foundation (OSGeo)
Production Year
Production Place
Portland, Oregon, United States of America

Content Metadata

Subject Area
Free and open source software (FOSS) for GIS continues to increase in functionality and usability, and offers a flexible and economic option for organization that want to create online maps; however, beginners face a broad array of software choices and may not know which FOSS products and packages to deploy in each tier of the web map architecture. Compounding the problem is the fact that much documentation for FOSS GIS is fragmented among these tier-specific products and does not provide end-to-end workflows for designing and publishing cartographic web services and assembling them into an online map product. In response to these needs, The Pennsylvania State University has introduced an open online course entitled Open Web Mapping. The course lessons explain the theory and architecture of web mapping, while walking beginners through the process of deploying online maps with FOSS. Software such as QGIS, GDAL, GeoServer, TileMill, and OpenLayers is introduced as students start from the data processing stage and work their way to the final display of interactive web service layers in a browser-based map. The course is intended as an open resource for the entire FOSS community; therefore, the lesson materials are freely accessible through a Creative Commons license.
Keywords Open Source Web GIS Online Maps Online Education Open Courseware Web Services
Web page World Wide Web Consortium Computer program Server (computing) Texture mapping Open source Bit Open set Uniform resource locator Software Robotics Hybrid computer Telecommunication Quicksort
Axiom of choice Suite (music) Server (computing) Open source Multiplication sign Connectivity (graph theory) Modal logic 1 (number) Online help Client (computing) Perspective (visual) Theory Computer icon Product (business) Latent heat Computer configuration Different (Kate Ryan album) Energy level Computer architecture World Wide Web Consortium Electronic data processing Texture mapping Mapping Software developer Multitier architecture Data storage device Bit Database Process (computing) Software Table (information)
Installation art Web page Electronic data processing World Wide Web Consortium Vapor barrier Perfect group Texture mapping Web browser Open set Cartesian coordinate system Usability Revision control Type theory Software Term (mathematics) Blog Window
Point (geometry) World Wide Web Consortium Texture mapping Mapping Divisor State of matter Open set Theory Computer architecture
Computer program Slide rule Functional (mathematics) Group action Multiplication sign Materialization (paranormal) Bit Login Product (business) Loop (music) Energy level Series (mathematics) Fundamental theorem of algebra Form (programming)
World Wide Web Consortium Computer program Server (computing) Texture mapping Point cloud Open set
Point (geometry) World Wide Web Consortium Server (computing) Dependent and independent variables Texture mapping Open source Key (cryptography) Projective plane Open set Client (computing) Theory Frequency Web service Software Fundamental theorem of algebra
Medical imaging World Wide Web Consortium Texture mapping Software Open source Architecture Student's t-test Symbol table Social class
Default (computer science) World Wide Web Consortium Server (computing) Connectivity (graph theory) Multiplication sign Virtual machine Fitness function Database Student's t-test Cartesian coordinate system Web service Integrated development environment Self-organization Window
Latent heat Link (knot theory) Vector space File format State of matter Order (biology) Database Bit Open set Flow separation Fundamental theorem of algebra E-learning
Point (geometry) World Wide Web Consortium Server (computing) Computer file Projective plane Bit Student's t-test Parameter (computer programming) Entire function Web service Process (computing) Boundary value problem Cuboid Utility software Remote procedure call Library (computing)
Server (computing) Open source Neighbourhood (graph theory) Bit Mass Student's t-test Open set Product (business) Power (physics) Revision control Medical imaging Category of being Latent heat Web service Software Personal digital assistant Single-precision floating-point format Energy level Spectrum (functional analysis)
Revision control Medical imaging Web service Group action Texture mapping Set (mathematics) Student's t-test Product (business)
World Wide Web Consortium Server (computing) Scaling (geometry) Texture mapping Mapping Computer file Tesselation Markup language Code Planning Set (mathematics) Student's t-test Mereology Graphic design Goodness of fit Energy level Right angle Utility software Analytic continuation
World Wide Web Consortium Computer program Server (computing) Texture mapping Mapping Multiplication sign Sampling (statistics) Content (media) Similarity (geometry) Online help Student's t-test Medical imaging Web application Web service Software design pattern Website Pattern language Object (grammar)
Overlay-Netz Point (geometry) Server (computing) Mapping Computer file Information Code Sampling (statistics) Fitness function Interactive television Bit Student's t-test Client (computing) Mereology Type theory Web service Natural number Task (computing)
Filter <Stochastik> Functional (mathematics) Computer file Code Workstation <Musikinstrument> 1 (number) Set (mathematics) Bit Student's t-test Rule of inference Graph coloring Symbol table Field (computer science) Number Attribute grammar Different (Kate Ryan album) Personal digital assistant Order (biology) Electronic visual display Geometry Physical system
Web page World Wide Web Consortium Presentation of a group Server (computing) Mapping Projective plane Content (media) Bit Student's t-test Revision control Medical imaging Bootstrap aggregating Software framework Damping Library (computing)
Trail Building Mapping Open source Projective plane Student's t-test Mereology Attribute grammar Element (mathematics) Process (computing) Software Term (mathematics) Website Text editor Right angle Metropolitan area network
Scripting language World Wide Web Consortium Computer program Server (computing) Texture mapping Open source Java applet System administrator Electronic program guide Database Cartesian coordinate system Mereology System call Theory Web service Spring (hydrology) Software Right angle PRINCE2 Booting Local ring
Boss Corporation Computer program Open source Link (knot theory) Direction (geometry) Multiplication sign Electronic mailing list Interactive television Set (mathematics) Bit Water vapor Student's t-test Rule of inference Machine vision Twitter Goodness of fit Software Computer configuration Different (Kate Ryan album) Right angle
are it'll go ahead and get started in describing this an open web mapping costs of my name is sterling Klainerman instructor in the department geography it has many a State University of Penn State at each further the Education Institute in online geospatial programs but prior to coming here i worked for entry for a while on RGS server teams if you recognize my face from Israel and that's where that comes from the about a year ago I went back to school started working on PT and got the open source world from a robot documentation it as Rio's into writing and and technical communication and it's it's been able to work on that a little bit with open source software and so I can bring this hybrid sort of background in the next hopefully that will that will be apparent today as I discussed this course and I put the URL the course appear so you're welcome to go through follow along much my talk is just going to be so I invite you look at these pages with me let me explain
some the motivation behind working on this course I'm I believe that the most massive air not printed on paper and the delivered digitally and company see this and they wanna put their maps on the web and a lot of times I think they have desired use open source software but they needed to understand how to get started I believe that there is a great need 1st start to finish help at the beginning at the beginner level I'm a lot of people at this conference seem to be pretty advanced able to figure things out that's good I think there's a large pool of people that wanna migrated free and open source software that let me just a little bit of a little bit beginner guidance and that's where I was a year ago so and I I can't bring that perspective as well maybe these are people that have a lot of prior desktop GIS experience just in the proprietary realm and they wanna open source and that's the purpose of this course that other purpose is to take somebody all the way through the process starting with raw data on the desktop and going through the tears you creating web map I'd like to comment on to some of
the how I view fostered yesterday where it is and and some of the challenges that exist that make this course necessary but I think this is an exciting time be using fast with with GIS and when set up a web mapping architecture you have to understand some of the the theory behind how set up the different here's going from the database data storage tier to their desktop data processing tier to the web server and entered finally to your client application we have lots of choices and you can see in this table i just put a couple different options for each of these is a great advantage of FOSS that when we use open our specifications these components can play nicely with each other we can choose the ones that we want so but I propose that this also have presented challenge to beginners you're come in they see all these icons easier for products and they may not know how these things fit together or how to make the right choice for each level of the stack now we've seen some of positive development well with things like OpenGeo Suite that attempt to package and uh a whole stack of software together that allows you to go from database all the way to the end of the but the components there still developed individually and the people still need understanding of how to choose each 1 with
usability I also believe that some making great headway but especially I believe it's especially important improvements in set up experience and occurring so when people migrate over an even using Windows GIS software proprietary software with a click-through installer where you can just click next next next just works and they want that that use of experience it's intimidating for those type of users to go to a web page and they see 20 different versions of the fossil they've got download the source and build it themselves they don't they don't want that you know that a barrier to migration from another but it's turning out the you have to do this anymore if you go the cutest just webpages nicely download button and you can just get an install on you can be up and running in a few minutes now I know a lot of people in this audience like to do that the whole way that's great that I'm talking about beginners had we increase that viscosity that my past I've talked about yesterday allowing people the fall in these new in this new workflows also and in terms the documentation there's great documentation out there for the software but it can be scattered sometimes maybe find a perfect blog post explains exactly what to do at the data processing here but maybe that bloggers and talk about how to take your data on the Web for how to develop a web client application and so the water content out there but we need a
start-to-finish to guide and that's the purpose of this open web mapping cost from at Penn State
this is an open educational resource factor and state makes a lot of its courses available this way all the lessons are visible online this course combines theory in architecture web mapping with a lot hands-on work the point is to get you working with the software and understand what you're doing and start from the desktop go all the way up to a web map anybody can use this as I mentioned
there's no login required the there some prerequisites so the audience for this course is somebody who's used GIS in the past in 1 form or another and also somebody who has little bit of programming experience meaning they understand the fundamentals of what is a variable what is a function what is a loop that's about what we expect if you have that level of programming experience there some other prerequisite courses the open and stay offers and that you can work through a note at the end of put up a slide that shows some options for for getting started but the other way you can work on this course is to formally role with fancy world campus and this model you get instructor-led guidance that you get and interaction with your peer group you degraded and obviously get credit but the lessons are the same so well so the materials themselves are available and the available under Creative Commons license
the now let me just give you a tour of this course uh for the remainder of the time the the for 1st of all I'd like to show that if the and want of way you way
who was really know other traveling at a conference OK what some people do all during the session when you go to Google and you just look for Penn State Open Educational Resources you'll see a lot of the course where they put online what is that this is just from the College of for the mineral sciences which is Robina leader at this I'm going out of the geography courses a lot of online geospatial courses and here's a programming 1 and the kinky started Python for example that we have a cloud in server course we've also got open web mapping so um so that's those
courses going into the open web mapping course itself yeah other stem lessons designed be
done over a 10 week period obviously you could go faster if you're just doing on your own so we start with just some of the theory of web mapping and uh in the free and open source software I we talk about early open source attempts and and the reasons that those projects developed we also talk about the importance of Web services so it's important actors from the outset understand understand that Web services are really the key to getting your day off the desktop in other people's hands and that we cover the fundamentals of how a client and server talk to each other what is a requesting was a response found just so people I don't get too bogged down at this point we want them to get started with the software right away so there's a walk through
where they install Q just images work symbolizing and all the data for these exercises I believe I derived this from OpenStreetMap so I could write appear for download that means you can download and walk through this yourself as step by step exercise
where symbolize embedded in Q just we talk about how they could make it look nice and they feel good because they've already got their hands on some open source software right from the very 1st lesson the the next lesson we talk about architectures for web mapping so the students in this class
run everything I just 1 machine tell you might do it in a development environment and that's really practically the way we can do within this time we tied for it but they will need to know that these components can be distributed among multiple machines in their organizations more likely than not to have a separate machine hosting their database 1 it's hosting a web services was hosting their applications so they need understand how that all fits together and when they need to set up their own places of work but the walk through in this lesson is setting up GeoSUR so we just
use the by default GeoServer installation on windows with the jetty packaged web service a web server and in we have students installing and get used to it they the preview the demo at and then later in the course they'll set up their own web service so they've got all the stuff installed it got the
fundamentals down outside work with data processing so we cover open formats for spatial data what is mean having
open specification why is that so important we also talk a little bit about the database here but not too much here that there's a whole separate online course depends State offers 1st spatial databases teachers PostGIS so in order to stay within the scope of this course we don't get into that here we just use shapefiles stand-alone adjacent things like that we have a separate course just for a database I'll put a link to that at the end of the talk of 1 thing that we do is a walk through where we work with vector data
processing in huge is that we also use the GDL processing library and OG our goal G utility and so we've got some OpenStreetMap data for Philadelphia and students learn how to put that to the city boundary and then this is all enqueued just the dual projection so here some gas stations that were projected and this is great but we wanna show students how they can automate this a little bit and how they could do it from the command line so here's where we get you using the GL library it the so they're gonna take care of the good and here again take a whole entire folder of files
include projectiles all at once using a command of from remote yard OG art and so the command syntax is here and you can follow along practice this yourself we also do some processing with rostas both in Q just ng del so this is fun we take care elevation of Philadelphia and take things like Hill shaded slope and we put those out and put them all together in something that looks really nice using the same principles that is the point of click through q just we show how q just will give you the nice GDL syntax in the dialog box which is wonderful for learning those parameters then how you can automate it from the command line this point the students are done with their desktop data processing so we move on to the next year which is serving at the web services and there's a couple of approaches you can do with serving as a web service 1 of them is to have the web server
dynamically driving image return it and this is like the classic case for a WMS server so we talk about the Open Geospatial Consortium and the specifications that they've released we don't get into all the details of every single property and tag you consent to a WMS mass has not really the purpose of this course were doing is just saying there's a specification it pretty important to whoever implemented the open source software needs to follow it in its abstract a little bit so that you can work with it and when students known at that level then they're able to be successful that creating a web service and 1 reason that we rewrote this course is that the previous version and a little more detail that and we said OK we rewrite this 1 back up a little bit and just say show a broader spectrum of open source products without getting into that that might use and so students use
GeoServer is set up a double they do at same Philadelphia data this is neighborhoods but what say we want style that's inducer hard we do that so we teach style where descriptors a SL these and so students use their so the cookbook which is online and create a basic SLT here they can copy and pasted into GeoServer and now they have some styling so they got labels on their they've got their own power that they were n that's not the coolest thing yet in huge is you can actually In
recent versions of Q 2 so you can actually set up the style that you want and then save it
out as an SOB so you can design using that Q is and then to say about that axis at the SLT and bring into GeoServer you don't have to mess around the XML and so that's a lot of fun we have students at work was more Philadelphia did you do that and then they bring it into their own DBMS service in any set of a group where so a lot of hands-on exercise WMS in the GeoServer the other model for mapping Web services as you could serve reptiles so let's say you want to have a lot of layers in there you want to be fast and scalable and pre generate all your images and store them on the
server and then you can return them very quickly as piled map now a lot of students are familiar with this because when they go to google maps a OpenStreetMap they see the tiles coming in in a lot of people want to do this with their data conceptually you have to cover some background houses work it's like a pyramid you know as you zoom down each level there's more more tiles you got a plan for this this is going to take you a while if you choose a very large scales to drive tiles that so we cover a lot of that background and then we show 2 ways you can make tiles and right Bill into GeoServer is GeoWebCache so we have a walk-through shows how to do that and we also teach had used Heilmittel so let me show this walk students
just use the same Philadelphia didn't they process earlier we're trying to provide some continuity here showing how that can go from the desktop all the way up on the web they learned part of CSS markup to style the 2 style the data then they learn how to design it at different scales so knows you back to see less detail as you zoom in see more how do you do that in part CSS and how do you think about that even as a cartographer in designing of multiscale basement disease is a huge graphic design challenge and it's good for the students to realize that that is an element of of what mapping it's not just what code they can write but also the design they put into the into the maps so we try to cover that what we do is we have to generate the tiles with tile milk and then they unpack them using utility called MVU tilt and that just gives them a set of rock files that they can host on
their own web server so they've got all the unpacked images just sitting there they could draw the map very quickly so that's how they set up the Web services once you've got all that it's time to glue everything together make a web application so that that's where we get into the programming and programming patterns with web mapping API that we really wrestled with the question
of whether API to teaching this course I try to teach all them would be too much probably confusing but in the end I decided to write this course using OpenLayers of because the amount of help that is out there and existing samples it's perhaps not the most nimble API but it is very broad and it also has a lot of existing community content that's been given over the years of places like GIS stackexchange or the OpenLayers site so but we did want to teach that the the general patterns applied across all API while mapping API as workers similar way we create this map object in then have layers that you add to it and then you have styles so we want abstract out those concepts so that when the students got to the workplace and the Boston right now use leaf litter whatever they could just adapt the things available in this course but another thing we want to teach is that when you the your program with web maps of
you wanna find the samples the out there the the closest thing you wanted to you then you just want tweak those little bit and adjust them to fit thing students I think can be intimidated by seeing a lot of JavaScript code at the beginning and what I wanted the point I would make clear is that if you write a whole bunch javascript code from the outset you're probably doing it wrong the you define the samples that work best for you and just learned how to adapt those and that's the approach that we took in this course so in the 1st lesson they got this task that says hey this bringing your tiled map bring in a WMS then allow DBMs to be quite so that if of part and then we walk through what are the 3 overlayer samples the closest to this was an overlay a sample for bringing a tiled map there's no sample for displaying a WMS and there's an open sample for querying and seeing a pop assume they put all those together and they can be successful in this example has all the JavaScript code and hopefully it will be a resource for you if you are programming with all the layers here's all code at the end of another thing we teachers that sometimes maybe you don't need a web service for certain types of data so if your data is pretty static
and is limited in nature maybe you just make a duties on file or occasional and put them on the server then you can draw the layer on the client side that allows interactivity with your layer so for example you can restyle the layer on the wire somebody hovers over in the Quixote and we talk about how data can be drawn as clients I graphics in this way and then how do you do that with OpenLayers so the walk through in this lesson students learn about a clicker feature highlighted and then but it's matter the information in a sidebar on the map finally we talk about thematic styling using OpenLayers this is a place where you had to
rummage around a little bit in order to figure out how to do it so I hope this lesson will be of value people who need these these code examples of the
easiest cases I guess if you have like a color or something that's stored in a field you just pull in that color do the styling the the subway lines in 1 of scientists and but getting a little more complicated you might need a set of rules filters on what data you wanna show so let's say you have a Geo J. file with just some metro systems in South America and you want display that in different ways for we talk about I could put a function in there to make proportional symbols based on an attribute like the number of stations in the system but we also talk about could you act colors and different classifications for your data using OpenLayers rules and and then we also talk about hated filter out things based on certain attribute values so that let's suppose that we wanted to do so shows as subway systems with a certain number of stations we can filter out the ones we don't need and so all this code is that this hopefully helpful we put it to use in a walk later on now where students
said to have a little bit in web presentation frameworks so we wanted them to know that Paterson help out there you don't have to design a web page from scratch others libraries that will help you do the layout so we got a little bit in bootstrap and this is a walk through that they do where they've gotten Opalina's map they've got bootstrap just holding everything together and then the pulling in some third-party content from flicker and a legend image and that the students actually they really take this to heart and I'll show you later how they combine together in their own final projects but we conclude that the course with the fun lesson on VGI and we
teach that openstreetmap the pros and cons of using OpenStreetMap data so we have a walk through where they get data out of OpenStreetMap and so we show and there's people that put servers online there really great for this this is that the bike 1 that we also show how to do it in Q just in recent versions of Q just commands we can just out OpenStreetMap data very easily so we walk through that and then for the assignments they
did add stopped OpenStreetMap and so we walk them through how to use the ID editor how to find appropriate attributes in the graded on whether they've used at tributes from the also wiki as document there and by the community so that the culminating part of the course is this term project the students do and
they can use any technology they was was as free and open source software we are are realistic in the sense in the workplace they may use proprietary software but there acquired using in this course just to get the practice of here's an example of something somebody did uh uh Christopher Dunn was a student who just completed this course couple weeks ago this is the other Portland and I'm glad nobody axially with their instead of this 1 and beautiful place with lots of trails and so he was interested in making a trails man so he designed this base map using title mill using the things he learned he put your J. on top and then he has a queriable you learn that abuse of the trail and you can click this read more like right here to go to the official trailer website so he really did a nice job of pulling in the different elements in the course we another student who decide to use leaflet for her project she lives in Tobago so she had 4 King George that's historic people he put on buildings and C. attributes about the buildings of the 4 so I was happily surprised at the different variety and and at the good use to which the students but these uh skills just to
conclude that of we've seen how local web mapping discourse can act as a start-to-finish guide for my getting using fostered take your data put it on the web it's our way of contributing to the to the FOSS community and contributing to the to the usefulness of these tools and again as in the plenary us the the keynote yesterday we learn that documentation and examples and In lessons like this are a key part of and making open source software successful hopefully you've seen how whether you're working on just the desktop or on the server over the some lessons in here that might be of use to you maybe you're familiar with 1 of the technologies that not so many others so use this cost piecemeal as it makes sense to you even if you're working with proprietary software hopefully some of the theory about how to make your application more performance or more esthetically pleasing and will be helpful so encouraging use the course if
you wanna take the course for credit and the offering is in Spring 2015 you can contact the prince they were campus and then here's some links so that hopefully useful and how you can get to the course if you google all these cost names it comes right to the top so you have to write down any long U R L's just write down the title of course now we have 1 uses Python that's for very beginners so if you have coded before this is recommended and it does use art GIS if you are just getting started anyone use Java script instead others course uses Google Maps API and then I mention the database course which uses a posters got just a couple minutes I think or I could take questions but without at the so when you doing the initial web boot up there it's just on local host on her own she's so the question is when you when you run the web services are you writing them off local host yes on GeoServer they're using local calls because they use that embedded jetty web server that comes with the problem that we tell them that in their own place of work they will either need to work with an IT administrator to connect into their own existing web server or they'll have to set that up themselves that's out of the scope of the course of but we I tried warn them about that I told make friends with the radio part 1 before and 1 having this in euro GIS program there In the beginning courses they're using commercial software such as use to the right like intro gyre use commercial software of from that big company that all talk about but they're down the coast n so the more the more introductory courses in the program and we use commercial software
that i we were starting to incorporate more open source software here and there in in this place who can do so what like as my mind my main question is if they're working with the commercial software that you take him into the FOSS world 3 getting can push back like you know don't you suddenly changed all the rules because of buttons on different places in it you're getting into that's a good question London STD and my to the guy right in front of you and me Robinson had not because he I think he has a lower interaction with the instructors those introductory courses here on the boss I know us us slightly the programs that's really teachers and we're really lucky to have him obviously but but we have not had been push back about offering lots of different options and a list of my vision is that we're not really dogmatic any particular direction I want us to be rather flat and my links said we have over things across a courses that's that's the trend going forward in our students are asking for a diverse set of experiences thank you things question thinks setting informaiton others not much a question or comment as 1 they for presenting this because I senior courses listed there before you make up a bit and we can I didn't have time to really look at and I didn't realize that the full tutorials are there and I put together small tutorials and I really appreciate how much work it looks like you put into this incredibly detailed so that thanks very much thank you thank you for helping us the water and then you know how to reach me and I'll send feedback OK thank you


  454 ms - page object


AV-Portal 3.20.1 (bea96f1033d39fbe77f82542458e108105398441)