GeoJSON For Pirates, Kittehs And Coders

or, How I learned to stop worrying and love the geo-spatial coordinate system.

Kendo UI’s map control has a lot of great features built in to it, as I’ve shown already. One of those feature is the ability to display GeoJSON based maps. But, what exactly is GeoJSON? How can I built awesomeness with it? Can I use it to take over the world, or should I just go back to bed and eat cheese puffs while watching cartoons? Ok, sorry. I guess we can all dream of cheese-puffed-cartoons, but chances are we won’t be able to take over the world with GeoJSON… OR CAN WE?!

So, What Is GeoJSON?

Before you get in to GeoJSON, you need to understand JSON (pronounced “jiff”… err, I mean “jay-son”), what it is and what it does. If you’re not familiar with that, head over to my post explaining who this JaSON guy is and read that before continuing here. I’ll wait.

Ok, good. Now that you’re familiar with JSON, the gist of what GeoJSON is becomes that much easier. In a nutshell, GeoJSON is a JSON document that describes geographic features for use in maps… in other words… you get to draw your own maps!

No Really. It’s JSON To Draw Maps.

When it comes down to it, GeoJSON really is a JSON document. You format it with all the rules and constraints of a JSON document, but you also follow a specific schema in order to be compatible with systems that can use GeoJSON.

The document structure allows you to specify the type of object being defined, the geometry of the object, meta-data properties for the object and more.

A Simple Example

Pulling a small example from GeoJSON.org, for example, creates a single point at a latitude and longitude of 125.6 / 10.1:

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

But this doesn’t really show up on the screen. Instead, you need something a little more meaningful, such as the GeoJSON example on the Kendo UI Demo pages.

Now you have some functionality and usability in this little GeoJSON map data. There are plenty of other things you could do with GeoJSON as well, but this all relies on your ability to create GeoJSON documents. So how do you go about doing that?

Create Your Masterpiece

There are several methods of creating GeoJSON. The first of which is to just write it all out by hand. This is a JSON document, after all. You only need a text editor. If you’re brave enough to want to try this, I would suggest reading up on the GeoJSON specification.

From there, you can start producing the ever-lovable and oh-so-easy-to-remember lattitude and longitude coordinate sets and geometry specifications, like this example from GeoJSON.org again:

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [102.0, 0.5]
        },
        "properties": {
            "prop0": "value0"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [102.0, 0.0],
                [103.0, 1.0],
                [104.0, 0.0],
                [105.0, 1.0]
            ]
        },
        "properties": {
            "prop0": "value0",
            "prop1": 0.0
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [100.0, 0.0],
                    [101.0, 0.0],
                    [101.0, 1.0],
                    [100.0, 1.0],
                    [100.0, 0.0]
                ]
            ]
        },
        "properties": {
            "prop0": "value0",
            "prop1": {
                "this": "that"
            }
        }
    }]
}

Or, instead of poking yourself in the eye repeatedly, you could use a tool to help you draw the GeoJSON visually.

Some Available Tools

There are some tools available to help make your adventures in GeoJSON easier. I’ve used a few of them for fun, and have been able to produce some masterpieces such as the geo-kitteh that you saw above, and the pirate treasuremap as shown here:

I drew this one using GeoJSON.io. This is an editor that saves everything as a Github Gist, and loads the file back in from there, to render and edit. GeoJSON.io is pretty simple to use, but doesn’t provide a ton of features. It can draw shapes, edit them, export files, and give you the raw JSON as well. Over-all, it does what I need most of the time.

Another tool you might want to use is GeoJSONLint.com. This is a “lint” style service that will verify and validate your GeoJSON against a set of rules. You can even make requests via an HTTP API to validate JSON that someone else provided to you. This makes it more useful for apps that take JSON input from users, giving you confidence that the GeoJSON is good to go.

Lastly, I’ll mention Github again. They have direct support for GeoJSON built in to their system, and a great blog post that walks through the basics of setting it up and using it.

Additional Resources

There are a lot more resources around the web than what I’ve listed and shown here. Hopefully this will get you down the path to get started, with a small list of other places you might want to look.

• Kendo UI GeoViz Maps
• Wikipedia’s GeoJSON Entry
• GeoJSON.org
• GeoJaSON.info
• GeoJSON.io
• GeoJSONLint.com