GeoJSON data is here (and there. And also over there.) to stay.
It is data that takes geometry and geography and melds them together in a beautiful harmony that can make your data sing for your users (in case you missed it, that was a class A pun).
As data grows bigger and bigger, we have to come up with equally bigger ways to manage the presentation of the data, and geoJSON data is one such solution. GeoJSON gives you a way to present data--and of course, especially geo data--in novel, more engaging, and more digestible ways. Consider this.
Nobody can look at that, and frankly nobody wants to. When faced with a ton of info, if we're not careful, we'll end up with a slop of a mess of a chart/graph/etc that no one will ever take the time to understand. As purveyors of info, it's our job to both give the people the info they want and to also give it them in a way that they'll find easy to digest.
GeoJSON data to the rescue. Yes, you can use it for maps, but let's consider outside-the-box ways that we can use space, too. If, say, I wanted to present some information in an interesting way, even if that data didn't actually necessitate spatial analysis, using a map can still be super fun.
Plus, there are really quick and straightforward tools for using geospatial data. One of my most recent favs is Leaflet.
Leaflet is an open source, JavaScript library that's used to create mobile-friendly, interactive maps.
To start off with a simple map, you just grab these lines from Leaflet, and put them in in the head section of your HTML file:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
Then add a div for your map. I'll include some styling here, to give a sense of how simple Leaflet can be, but of course in best practices, we'd have a CSS file where we implement all styling.
<div id="map" style="width: 1105px; height: 700px"></div>
Then finally, inside a script tag, I'll use this map from OpenStreetMap (sidenote: all the code from here out will be inside this one script tag in the HTML page). Notice the L.map in the code. The L is a way to reference Leaflet's library, and the .map is a Leaflet function; the [29.959053, -90.064704] is a latitude/longitude point that I want to use for the center of my map; and we'll call the map "bourbonBartender" which is short for, "A Night in the Life of a Bourbon Street Bartender."
const bourbonBartender = L.map('map', { center: [29.959053, -90.064704], zoom: 14 });
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(bourbonBartender);
After that simple code, ta-da, we have ourselves this map.
From there, let's add the first stop our Bourbon bartender will make, which is grabbing food on the way into work, since the shift lasts about 14 hours with no break, so you gotta eat something behind the bar with one hand while you open seven Bud Lites at the same time with the other hand (no joke. I've done this. And it always gets great tips.)
This is super simple in Leaflet. We just add a point on the map. Let's use a polygon, and give it a little style to make it stand out.
const dinner = L.polygon([
[29.955428, -90.070693],
[29.956620, -90.069639],
[29.956081, -90.068554]
], {
color: 'turquoise',
fillColor: 'blue',
fillOpacity: 1
}).addTo(bourbonBartender);
To do this, we're using L.polygon which is of course really similar to L.map, and then we throw in a few lat/lngs to represent the area around Killer Poboys, where we're going to grab dinner to go. Inside the options object, that comes as the second argument in the polygon function, we have a ton of options. You can style all kinds of amazing ways in Leaflet to make your maps as singular and stylized as you'd like. I'm using turquoise and blue and a high fillOpacity to make it really stand out against the backdrop of the map.
Then, just to make it clear to the viewer why we're going to Killer Poboys, let's add a popup on click that gives a description of the location. Here's the super simple code for that.
dinner.bindPopup("You haven't lived until you've had the roasted
cauliflower sandwich.")
And with that bindPopup attached to the name of the polygon, we get this
Next, we send our bartender to work. This time, instead of a polygon, we'll use a nice-sized circle around the bar where they work, since it's the place of most significance on our map. Most of the options for the circle are similar to the polygon, except that you can determine the size of the circle based on the radius.
const work = L.circle([29.959528, -90.064869], {
color: 'turquoise',
fillColor: 'blue',
fillOpacity: 1,
radius: 150
}).addTo(bourbonBartender);
For this spot on our map, let's add a popup with a little more info this time, in pictorial form, using Leaflet's icon functionality.
const actorPortrayal = L.icon({
iconUrl: 'https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQZ0lL1CtsOCHO-Xl95NsrROf7Vo6NSuDdPbu_YfIurU560523n-g',
iconSize: [125, 125], // size of the icon
iconAnchor: [22, 94], // point of the icon which will correspond
to marker's location
popupAnchor: [-3, -76] // point from which the popup should open
relative to the iconAnchor
});
L.marker([29.959528, -90.064869], { icon: actorPortrayal
}).addTo(bourbonBartender);
You can grab a URL of an image and make that your icon--in this case, we're using a wildly inaccurate actor portrayal of what being a bartender is like: note the distinct lack of customers' vomit on Tom Cruise's shirt, the absence of glaring, neon Miller Lite signage, and not a single drunk dude screaming "More cowbell!" at the band. Then use L.marker() to attach the icon to a spot inside our circle, and voila.
Finally, after our bartender gets off work around 2 or 3am, it is their turn to be a bar patron. So the last stop of the night will be at the go-to spot for a bartender fresh off work: Erin Rose, where everybody does know your name, and everybody else just got off work too, and the bartender Jeff will make sure no one hits on you because Lord knows that's about the last thing you want to deal with right now, and the bartender Rhiannon will keep your shot glass full of Jameson no matter how many times you empty it.
const afterWork = L.polygon([
[29.956405, -90.068105],
[29.956854, -90.067648],
[29.956245, -90.067468]
], {
color: 'turquoise',
fillColor: 'blue',
fillOpacity: 0.5
}).addTo(bourbonBartender);
afterWork.bindPopup("<br/><a href='https://www.youtube.com/watch?v=wq_BkebIa8g'>Erin Rose</a>")
This time we're adding a really cool popup feature which is a link to this Esquire video, where you can see Jeff (super awesome guy, amazing bartender) in action and Rhiannon in a few shots (not sure why Esquire didn't feature her too. Big oversight on their part there, as she is an incredible person and a bartender extraordinaire).
And with that in place our map looks like this:
That's very little code to get across a whole night of adventure. With Leaflet and OpenStreetMaps, it's quick and clear code that you can easily customize and detail. From here, you can get way deeper into making the maps even more complex and detailed.
Of course this is great for representing spatial data, but I think it's also a nifty way to get across all kinds of information that might otherwise just be a boring list or a chunk of text.
GeoJSON data and Leaflet give us the ability to turn info into an interactive experience for users in a novel way, and since it's so simple to use, I hope this basic intro to the concepts encourages you to give it a try.
Top comments (0)