Web programming for cartographers
November 14, 2018
I’m a geographer, turned cartographer, turned web cartographer. After learning the basics of web development I felt like I hit a wall of advanced tools/frameworks that were too complicated for me to grasp. I couldn’t find the bridge between the beginner and the expert level. To be honest, it felt a bit like this, where I was the little stick man in the middle:
So this blog post is about the advice I wish I had received some years ago when I was struggling to get to the next level, which I’ll call the intermediate level. I think a combination of theoretical advice and practical examples works best, so I am using this sample project which is an example of how I apply the advice I mention in this blog post:
Set up a “you”-friendly development environment
I’m talking about tools that help you ease your work while developing, but are also helpful for building your application. In general, when working on small to medium web mapping projects all I need is:
- a linter to help you write tidy code — see next advice;
- a module bundler — see advice about modularizing your code.
You can see how I usually set up my environment for (smaller) projects in
step 1 of the sample project.
Once you get comfortable with
node and understand how to install and use the
node_packages, you can add some more tools that you find useful. This depends
a lot on your project, so I won’t go into details here.
Keep your code tidy — use a linter
Don’t copy-paste code
This advice is really important, but also difficult to follow. Sometimes typing in the code feels like a waste of time, so a softer way to put it is: if you copy-paste code, make sure you really understand what it does.
Separate concerns and modularize
Use code versioning to track your code changes
In a nutshell: use git! Its main advantage is that you can never lose your
code, you can try out several ideas in parallel without having to copy your whole project to another
location. On top of that you can share your code with everyone, just like I did with my sample
git is new for you, read the first 3 chapters in the Git book.
Another tip: if you use GitHub, a cool feature is GitHub Pages: you can
serve your project directly from the repository. See step 5 in my sample project.
Types are important
Practice makes the master!
Another advice is to always train your coding skills. You don’t need to be an algorithm ninja,
but you should be able to write a
for loop, recursively parse an object or flatten an array without
having to look up the syntax or the code. My favorite place to train my coding skills is Codewars,
a really cool programming platform where you have to solve challenges.
Learn by working on a project
This is a very popular advice that you’ve probably heard before. Choose a topic you’re passionate about and create a web map for it. Take the usual process of developing a map: think about the problem you want to investigate/visualize, figure out if there is data out there, think about the target audience, the user experience, create mock-ups. Then, before you start developing, think about that new technology that you want to learn and how you would incorporate it in your project: it could be learning TypeScript or CSS preprocessors or that new funky framework everyone talks about lately. However, a last advice would be to stick to one new “thing” to learn, otherwise learning too many things at once can get challenging and demotivating. I would also use it for several projects in a row, it takes time to get to really understand the principles behind a new framework/tool and the more you apply them, the better you’ll understand them. That’s about it. I’m pretty sure this experience of getting to the next level in coding is different for every cartographer. Some people give up coding and decide to focus on map design using only graphic design software, others become fully fledged software developers. I’m somewhere in the middle, but I find the combination of the design and code awesome, I think that’s where the magic happens. ✨
I’d love to know how it worked out for you and whether you have some other advice that we could add to this list.
Meanwhile, have fun web mapping!