GeoJSON
FREE     Duration: 13:32
 

Takeaways:

  • Geographic Information Systems (GIS) is defined by Wikipedia as a system designed to capture, store, manipulate, analyze, manage, and present any and all types of geographical information
  • GeoJSON is a geospatial data interchange format based on the JavaScript Object Notation
  • GeoJSON has a strict set of specifications that allow you to ingest, digest, and produce the GeoJSON data in a standardized way
  • A GeoJSON Object always consists of a single object
  • A GeoJSON Geometry Object can represent: a) a "Point", b) a "MultiPoint", a "LineString", a "MultiLineString", a "Polygon", a "MultiPolygon", and a "GeometryCollection".
  • A GeoJSON Feature Object encapsulates a GeoJSON Geometry Object and adds to it a Feature Object (a JSON object with non-spatial attributes related to the Geometry Object)
  • A GeoJSON Feature Collection Object is a collection of GeoJSON Feature Objects

Resources:

D3 Video Tutorial Lessons:

Transcript:

GeoJSON

Geographic Information Systems


Geographic Information System is a term first used in 1968 by Roger Tomlinson in a paper titled "A Geographic Information System for Regional Planning".

[ Image : Image of Globe ]
cc 2.0 attribution => http://www.flickr.com/photos/toasty/

The Geographic Information System also goes by the abbreviation GIS.

Wikipedia defines a GIS system as a system designed to capture, store, manipulate, analyze, manage and present any and all types of geographical data.

Generically, the terms usually points to applications and tools that help users create queries, analyze spatial information, edit data in maps as well as present the results of these operations.


GIS data can represent real objects such as roads, land use, elevation, trees, waterways, natural objects and man-made objects in the real world.

[ Image : Image of World Map ]
cc 2.0 attribution => http://www.flickr.com/photos/newportgeographic/

Points, lines and polygons are used to represent these objects.

Through these objects, we can reference places and things.

There are many ways to capture the data and then to store the captured data.

What we are most interested in, is how to map said real objects given a data set.


When we talk about the real world most of the time we are talking about the plant earth.

[ Image: Image of Wikimedia Longitude and Latitude ]
cc 2.0 attribution => http://upload.wikimedia.org/wikipedia/commons/7/73/ECEF_ENU_Longitude_Latitude_relationships.svg

So when we want to put points, lines and polygons on a map to represent things, we have to think about how we are going to represent these objects.

The first thing we have to think about is the fact that the earth is not flat.

So we have to think about how to represent 3 dimensional spherical coordinates in an easy to understand system.

The most common way to represent the spherical coordinates is to take a zero point and then discuss how far north we are from that point, how far east we are from that point and how far up we are from that point.

As you can see on the globe, for small distances, we can assume away curvature and treat the issue of mapping things as a flat surface.


If we ignore the up coordinate, we can focus on the north, south, east and west directions.

[ Image: Image of Wikimedia Mercator Grid ]
cc 2.0 attribution => http://upload.wikimedia.org/wikipedia/commons/5/5c/Mercator_grid.png

Which lead us to longitude and latitude as measures of how far north, south, east and west we are from the 0, 0 point.

Now that we have longitude and latitude we can encode the points, lines and polygons in terms of numbers to represent the GIS data of real objects.

Which is all well and good except for one thing.

The world is not flat, it is a sphere.

So when we try to flatten it out to represent different regions, some regions will get stretched out versus other regions.


To counteract these distortions we use geographic projections.

[ Image: Image of Geographic Projections ]

Wikipedia tells us that a map projection is a systematic transformation of the latitudes and longitudes of a location on the surface of a sphere into locations on a plane.

A webpage is a 2 dimensional plane, so this is very important to us.

We want to be able to take the points, lines and polygons that represent real objects on a sphere and put them on a 2-d map on our screen.

On the screen you can see some of D3's standard geo projections.

D3 will help us with this.

But we are now getting ahead of ourselves.

Now that we have an idea of where we want to go, which is drawing and placing real objects on a map, let's go to the beginning.

And the beginning is how to represent the actual location of these objects.

Which as we are using D3, which stands for data driven documents, means we have to talk about the data.

This is where JSON and GeoJSON come in.



JSON Revisited


JSON is a text-based open standard designed for human-readable data interchange.

// JSON = JavaScript Object Notation

It was initially based on JavaScript Objects

It is derived from the JavaScript for representing simple data structures and associative arrays, called objects.

It is now an open standard that is programming language independent.


We have been using JSON objects for the D3 Margins in almost every visualization we have done.

var margin = {"top": 25, "right": 25, "bottom": 25, "left": 25 }

The important thing about JSON is that it is an object of key, value pairs.

The keys in this object are the strings "top", "right", "bottom" and "left".

Note that they are strings that use double quotes.

Also note that it is very easy for us to read what the data interchange format is telling us.


JSON can be used as a Data Interchange Format in many different programming languages.

// Programming Languages able to parse/generate JSON
// ASP, Ada, Bash, BlitzMax, C, C++, C#, Ciao, Clojure, Cobol, ColdFusion, D, Dart, Delphi, E, Erlang, Fantom, Go, Haskell, haXe, Java, JavaScript, Lisp, LotusScript, Lua, LabVIEW, M, Matlab, Objective C, OCaml, OpenLaszlo, Perl, PHP, Pike, PL/SQL, pljson, PowerShell, Prolog, Puredata, Python, Qt, R, Racket, Rebol, RPG, Ruby, Scala, Scheme, Squeak, Symbian, Tcl, Visual Basic, Visual FoxPro

As of the time of this recording, these are all the programming languages that are able to parse and generate JSON data structures.

So you can see that even outside of JavaScript, the JSON format can be used with many other systems and languages.

This is very powerful because it means any system coded in these languages will be able to read and use JSON data.

Which is where GeoJSON comes in.



GeoJSON Introduction


GeoJSON is a geospatial data interchange format based on the JavaScript Object Notation.

[ Image: Image of GeoJSON ]

Which means this geospatial format can be used by all the different programming languages we saw before.

As well as all the different varieties of systems coded up in these languages.

Wikipedia describes GeoJSON as an open format for encoding collections of simple feature objects along with their non-spatial attributes using JavaScript Object Notation.

The simple features can be points, line-strings, polygons and multi-part collections of some or all of these types of features.

Which are the points, lines and polygons of GIS Systems.


GeoJSON is a format for encoding a geographic data structure. [ Image: Image of Data Structures ]

As such the GeoJSON data structure must follow a collection of rules so that it is coherent and consistent across the board.

GeoJSON Basic Specifications

  1. A complete GeoJSON data structure is always a JSON Object
  2. A GeoJSON object consists of a collection of name/value pairs
  3. For Name/value pair, the name is always a string
  4. The values of a name/value pairs can be a string, number, object, array or booleans
  5. Booleans can be "true", "false" or "null"
  6. An array consists of elements where each element is a value as described above.

The basic GeoJSON rules specify that it must be a JSON object.

The specifications also specify rules for the key, value pairs.

This is an example of a GeoJSON Object.

{ 
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [2.3470, 48.8742]},
            "properties": {"name": "Paris"}
        }
    ]
}

This GeoJSON Object represents a point on a map.

We will come back shortly to all the different key, value pairs and what they mean.

For now, notice that this is a JSON object that has key, value pairs.

BROWSER: highlight parentheses.

One of the values is an array of JSON objects.

Within the JSON object inside of the array is another set of key, value pairs.

And within those key, value pairs some of the values contain other JSON Objects.

So you can see that we can encode a great deal of feature objects as well as non-spatial attributes within this data interchange format.

Let's next talk about this GeoJSON Object.



GeoJSON Object


The GeoJSON object always consists of a single object.

// GeoJSON Object
// => Geometry
// => Feature
// => Collection of Features

This object represents either a geometry, a feature or a collection of features.

A collection of features has one or more features.

A feature has one or more geometries.

A geometry is where we find the point, line and/or polygon.



GeoJSON Geometry Object


This is a GeoJSON Geometry Object.

// GeoJSON Geometry Object
{
    "type": "YYYYY",
    "coordinates": [ ...... ] 
}

// where "YYYYY"
//    => "Point" => array of x and y coordinates
//    => "MultiPoint" => array of many coordinates
//    => "LineString" => array of many coordinates
//    => "MultiLineString" => array of arrays of coordinates
//    => "Polygon" => array of arrays of coordinates
//    => "MultiPolygon" => multidimensional array of coordinates
//    => "GeometryCollection" => collection of geometry objects
// 
//    => coordinates => longitude and latitude

A GeoJSON Geometry Object has two key, value pairs.

The first is the type and the type of geometry object it represents.

The second is the coordinates and an array or arrays of arrays of x,y coordinates.

The coordinates are longitude and latitude coordinates.

The longitude is always listed first.


This is from the example GeoJSON Object we looked at earlier.

// GeoJSON Geometry Object
{
    "type": "Point",
    "coordinates": [2.3470, 48.8742]
}

This is the GeoJSON Geometry Object.

You can see that the type is a point.

You can see that the value for the key coordinates is an array of 2 points.

The first point, 2.3470 is the longitude of Paris France.

The second point, 48.8742 is the latitude of Paris France.

So this is an example of a GeoJSON Geometry Object.


Just as a double check and a heads up - you can look up the longitude and latitude of almost anywhere in the world with Google.

[ Image: Image of Paris France Longitude and Latitude ]

You just enter the name of the place with the words latitude and longitude after it and google will return to you the coordinates.

The coordinates we used for the GeoJSON Geometry Object example came from Google.


Going back to the GeoJSON Geometry Object - remember that longitude goes first and latitude goes second.

{
    "type": "Point",
    "coordinates": [longitude, latitude]
}

The longitude is how far east slash west we are from the zero point.

The latitude is how far north slash south we are from the zero point.

Next, let's look at the GeoJSON Feature Object.



GeoJSON Feature Object


This is a GeoJSON Feature Object.

// GeoJSON Feature Object
{ 
    "type": "Feature",
    "geometry": { GeoJSON Geometry Object },
    "properties": { JSON Object or JSON null value }  
}

A GeoJSON Feature Object has three key,value pairs.

The first key is the string "type".

The "type" value for a Feature object is always the word Feature with the capital letter "F".

The second key is the string "geometry".

The "geometry" value for a Feature object is going to be a GeoJSON Geometry Object.

The third key is the string "properties".

The "properties" value for a Feature object is a JSON object with non-spatial attributes or a JSON null value.


This is from the example GeoJSON Object we looked at earlier.

// GeoJSON Feature Object
{
    "type": "Feature",
    "geometry": {"type": "Point", "coordinates": [2.3470, 48.8742]},
    "properties": {"name": "Paris"}
}

This is the GeoJSON Feature Object.

You can see that the first key is the string "type".

The "type" value is the string "Feature" with the first letter capitalized.

The second key is the string "geometry".

The "geometry" value is the GeoJSON Geometry Object we explored in the GeoJSON Geometry Object section.

The third key is the string "properties".

The "properties" value has one non-spatial attribute.

The attribute is a key, value pair.

The key is the string "name".

And the value is the string "Paris".

Which as you have probably guessed signifies that the feature is a point identifying the longitude and latitude of the city of Paris, France.

Next, let's look at the GeoJSON Feature Collection Object.



GeoJSON Feature Collection Object


This is a GeoJSON FeatureCollection Object.

// GeoJSON Feature Collection Object
{ 
    "type": "FeatureCollection",
    "features": [ GeoJSON Feature Object(s) ]
}

A GeoJSON Feature Collection Object has two key,value pairs.

The first key is the string "type".

The "type" value for a Feature Collection object is always the string "FeatureCollection" where the letter F and the letter C are capitalized.

Also - note that there is no a space in between the words feature and collection.

The second key is the string "features".

The "features" value for a Feature Collection object is an array of GeoJSON Feature Objects.

There can be one object inside or many objects.


This is the full GeoJSON Example we showed at the beginning of this video

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [2.3470, 48.8742]},
            "properties": {"name": "Paris"}
        }
    ]
}

This is the GeoJSON FeatureCollection Object.

You can see that the first key is the string "type".

The "type" value is the string "FeatureCollection" with no spaces in between the words feature and collection.

Note that the letter F and the letter C are both capitalized.

The second key is the string "features".

The "features" value is an array that contains a GeoJSON Feature Object.

Inside that GeoJSON Feature Object is a GeoJSON Geometry Object.

So now we understand a basic example of how GeoJSON encodes spatial and non-spatial attributes.

Again, Wikipedia describes GeoJSON as an open format for encoding collections of simple feature objects along with their non-spatial attributes using JavaScript Object Notation.

Which now makes perfect sense.

As a small preview of the next video, let's take our FeatureCollection Object and run it through a web service called GeoJSONLint.com.


We go to the website GeoJSONLint.com


There we click on the FeatureCollection Option on the top toolbar.


Then we click into the text box on the left of the page and delete what is already in there.


Then we paste in our FeatureCollection GeoJSON Object we have been working with.

{ 
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point",
            "coordinates": [2.3470, 48.8742]},
            "properties": {"name": "Paris"}
        }
    ]
}

Then we press the blue "Test GeoJSON" button.


Next, we zoom out of the map in order to get a better point of view of where the map is pointing to.

BROWSER press the zoom out (negative arrow) thirteen times.


And there we go, once we zoom out enough to see France and most of the rest of Europe, we can see that we have indeed gotten the location for the city of Paris, France.


And with that, we have covered the basics of the GeoJSON geospatial data interchange format, how it relates to Geographic Information Systems and how to construct a GeoJSON Object.


We covered the different parts that make up a GeoJSON Object and showed a sneak preview of the GeoJSONLint website that allows us to test our GeoJSON Objects.

<< Back To D3 Screencast and Written Tutorials Index