MapUtopia
World Map (1689 - Amsterdam)

GeoAmateurs Presentation May 12, 2015

A few weeks ago I was asked to share my experience in transitioning from a traditional desktop based GIS role into someone who now probably spends the majority of my time on web development.

I’ve had a pretty good response to that talk, so I wanted to share my main points for those who weren’t there, and maybe even reiterate a few things for those who were present.

I’ll begin with the most important thing, in case my post gets too long-winded…

Just start!

You don’t need to take a class or read a programming book before you’ve made your first map.  Here’s the basics:

  1.  Download QGIS.  Convert your favorite shapefile to a GeoJSON file (use WGS 84 when you save).

  2.  Download Notepad++.  This is a very basic code editor.

  3.  Go search the internet and find any example that loads a GeoJSON file into Leaflet.  Like this one:

<!doctype html>
<html>
<head>
	<title>Leaflet Layers Control Example</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<style>
		#map {
			width: 800px;
			height: 500px;
			}
	</style>
</head>
<body>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="co_counties.geojson"></script>
	<div id="map"></div>
	<script>
		var map = L.map('map').setView([37.8, -96], 4);
		
		L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
			attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);
		
		L.geoJson(data).addTo(map);
		
	</script>
</body>
</html>
  1.  Copy and paste all the example code into Notepad++.  Save as an .html file.

  2. If you’re using my example above, open your geojson file in Notepad++ and add

var data = 

to the beginning of the file. Without getting into too much detail, your geojson file will be loaded into memory along with the rest of your web page. Adding the code above gives your geojson a name (‘data’) that the rest of your code can refer to.

  1.  Find the piece of code that loads the GeoJSON file.  
<script src="co_counties.geojson"></script>

Replace co_counties with the name of your geojson file. Save. (Make sure you put your geojson file in the same directory where you saved the .html file.)

  1.  Double click on your .html file.  (You may have to pan the map to find your data).  Voila. No web server required. (For now)

  2.  It’s annoying having to pan to your data.  Change the startup lat long coordinates….

var map = L.map('map').setView([37.8, -96], 4);
  1. Try a different basemap, add another geojson layer, add a layer control

(rinse repeat for a million other things you’d like to change about your webmap).

The Takeaway…

…in my opinion, is that writing code feeds on itself. Once you get a basic webmap operational, each additional feature is just a few more lines of code away. This is especially true for base functionality; styling, popups, plugin controls, etc. With each new feature added, confidence grows.

Stack Overflow for Everything

And this is the main reason you can just start now. You’re going to run into problems, expect it. A book or a class can’t begin to imagine the trouble you’re going to find yourself in. In the first year of coding it is a rare situation indeed where anything works 100% correctly the first time. There will be syntax errors, there will be logic errors, and there will be cryptic javascript console errors. The upside to all of this is that people have come before you and have already made these mistakes. And they’ve posted about them online (mostly on Stack Overflow). So go ahead, ask away. The internet won’t judge you.

Learn Javascript Carefully

There’s typically been a huge emphasis on using Python with GIS. While that’s an important skill, I recommend you start with Javascript. While yes, it’s not as easy to learn, not as concise, and not as powerful for crunching data (though certainly capable), Javascript has become the language of the internet. It is deceptively powerful and complex, yet at the same time, you can do some amazing things with only a basic level of knowledge.

My advice is to read roughly the first 3 chapters, and stop when you get confused. Hopefully that will still take you through a fair amount of material. Understand the basic structure of a webpage. Learn how to declare a variable. Figure out what an object is. Learn ‘if…then’ statements and ‘for’ loops. Understand scope. Write a function. With that basic level of knowledge you will be more than capable of creating a webmap.

(…and yeah, don’t forget to read the rest of the book once you’re comfortable)

Somebody has already done that!

The great thing about javascript is the massive open source community that surrounds it (especially in the geo world). Basically, most everything you can think of has already been done. Don’t like the way I load my GeoJson files? Here’s a better way. Searchbox? Already been done. Prettier basemaps? Try Mapbox.
I’m personally up to 17 libraries for my Census Mapping Application, and I don’t think that’s atypical for a larger project.

Get to know Git

Once you start doing anything more complex than copy-paste-tweak, you’re going to need to find some way to organize yourself.
Learn from my mistakes! I have a directory of about 100 cryptically named folders containing all sorts of things that I’m not sure what they are.
Git (more specifically, Github) has changed the way I develop so dramatically that I feel I really have to emphasize it.
Honestly, I can’t understate this. Now I write my code in one place. And then when I want to update the application on my production server? I log in to my server. Type:

git pull

Done.
No keeping track of individual files. No wondering whats up to date. Very simple.
Far beyond version control, Github is also instrumental for getting your work discovered by others. It’s almost like social media for coders.
Speaking of social media.

Twitter… it’s not what you think

I used to think Twitter was only for preteen girls and reality TV stars. Well, yeah, it kinda is, but not exclusively so. It’s also an amazing tool for keeping yourself up to date in the geo field. Follow some key geo thought leaders, (some suggestions: @mourner, @LeafletJS, @briantimoney, @tmcw, @cageyjames) and you’ll be exposed to a wide variety of current topics such as new web mapping libraries and plugins, cartographic and data visualization techniques (@PetersonGIS), UAVs (@colocarto), and lots of job postings (@MyGISJobs).

So what should I learn?

I think the answer to this question is more clear than it’s ever been – at least for the near-future. (Anything can and will happen 5+ years from now).
Primarily: You need to learn Javascript. Along with that will necessitate learning HTML and CSS. You’ll also need to get comfortable using data in JSON format.

Server side: As someone in the geo field, you should learn PostgreSQL / PostGIS. I can’t say with any certainty that the company you will work for will be using Postgres (it takes a monumental effort for an established company to switch database platforms), but the skills you learn will be largely transferable.

As far as a server side language, I would suggest learning NodeJS. This is perhaps a shaky recommendation considering I know very little of the language myself (I’ve yet to branch out from PHP). But it’s been fairly evident, considering the meteoric rise of Node and the plethora of tools built for/with it, that it is the future of server side coding.

You’re never done

Have I overwhelmed you yet? It’s okay. No matter your skill level, just accept that there are only so many hours in a day, and there will always be something new and cool to learn. There will never be a time where you can sit back and say ‘welp, guess I’m all caught up’. The Web Development / Geo world does not work that way. My own personal list is a mile long, and includes many technologies that other developers might consider essential (for me: NodeJS and Linux). I don’t mind at all… it keeps life interesting. A better way of doing something is always just around the corner.