Course info
Apr 14, 2016
1h 37m

Interactive maps are an extremely useful feature for users on your web page. This course, Web Mapping with OpenLayers 3, introduces web developers to OpenLayers 3, the OpenGeo Suite JavaScript library that allows developers to quickly add customizable, interactive maps to web pages. You'll be introduced to the basics of mapping, including projections and scales. You'll then dive into the OpenLayers library and see how to create a map using free, publicly available geographic data, as well as using various built-in controls to interact with the map while building a fun, geography-based game. By the end of the course, you'll know how to add a detailed map to your website that users can interact with and customize for their needs.

About the author
About the author

Jon Oxtoby has spent the majority of his career on developing web and desktop applications related to the analysis and display of weather and other geospatial data. He is currently a senior software engineer with AvMet Applications.

More from the author
Section Introduction Transcripts
Section Introduction Transcripts

Mapping Basics
In this module, we're going to talk about everything you need to know about mapping to be able to work with OpenLayers. The Merriam-Webster dictionary defines a map as a representation usually on a flat surface of the whole or a part of an area. That word representation is very important. A map is often not an exact replica of the area depicted. It's a picture that represents an area much like the sketch of a person is representation of that person and not an exact copy of the person's features. For example, here's a representation that you may be familiar with. This map depicts the lower 48 states of the US. Most people would probably agree this is an accurate representation. So if that map is accurate, then does that mean that this one is inaccurate, or is the one on the right actually more accurate? Would you believe me if I told you that these two maps were generated using the exact same data? How can that be when they clearly don't look the same? Answering those questions is what this module is all about. The practice of drawing maps is called cartography, and it's an expansive subject. Fortunately for us, we only need understand a couple of concepts to understand everything we need to know to create maps using OpenLayers. Those concepts are scale and projection.

Your First Map
In this module, you're finally going to get into some coding. We're going to create your first map in OpenLayers, and then we're going to take what we learned from that and apply it to the Catch the Hacker game to create the game board. You'll learn both the HTML and CSS required for OpenLayers, as well as all the JavaScript of getting set up with views, layers, and the map object itself. So let's get going.

More Controls
OpenLayers has a large variety of built-in controls and features that can really help your map stand out. The OpenLayers documentation lists over 100 different examples of these features, way too many for us to go into in one course, so I've just picked out my top five favorites, and we'll look at those in more detail.