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:

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:

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.

Derick Bailey

About the AuthorDerick Bailey is a Developer Advocate for Kendo UI, a developer, speaker, trainer, screen-caster and much more. He's been slinging code since the late 80’s and doing it professionally since the mid 90's. These days, Derick spends his time primarily writing javascript with back-end languages of all types, including Ruby, NodeJS, .NET and more. Derick blogs atDerickBailey.LosTechies.com, produces screencasts atWatchMeCode.net, tweets as @derickbailey and provides support and assistance for JavaScript, BackboneJS,MarionetteJS and much more around the web.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.