OpenLayers is an incredible open-source geospatial JavaScript library. Marc Jansen is a member of the steering committee and a core contributor to the project.

Marc studied geography, geology, and urban development and did his internship at a small local GIS company. In 2006 he made his first contribution to the OpenLayers library, and it was so well received that it was described as a “model contribution.” It was later reverted and removed, but that’s beside the point here. Marc saw the library’s potential and how aiming for less than the highest-quality contribution was not worth doing.

Here’s the thing.

Marc is self-taught with no formal education in programming or computer science. He tinkered with homepages during his studies and learned the building blocks of OpenLayers by himself.

IF YOU INVEST THE TIME, YOU CAN DO IT

Programming languages can feel out of reach for many because the technical standard is high. Open-source crowds are doing amazing things, and a newcomer might feel it’s difficult to get involved.

Sure, there are amazing people and code out there. But once you get to look into the code, it’s like text files; you experiment with them, and then you will be able to contribute somewhere. There’s great code out there—with at least the same volume of bad code. Small things always need enhancements, and anyone can do this who is familiar with the basics.

Basics, like JavaScript.

WHAT IS JAVASCRIPT?

It’s a fully grown-up programming language. It runs both in the client and on the server, such as when you visit modern websites where you can edit documents or spreadsheets.

JavaScript does the heavy work.

It’s also running on just about every device that exists—not only in browsers in the client, but on servers.

It’s a fun language that evolved a lot over the last decade. It started out as an experiment; it has nothing to do with Java, except for the name and some syntax.

If you’ve never programmed before, JavaScript is an excellent choice to start with. If you know stuff already, it’s also a superb choice for continuing your professional development because it’s still growing. There are many people earning money and solving problems with it.

WHERE ELSE DO WE COME ACROSS JAVASCRIPT APART FROM THE WEB BROWSER?

We need to dig deeper to see it elsewhere.

JavaScript can be used to run on a server to produce dynamic maps.

PHP is something that’s used on many servers. It produces dynamic sites to query databases and websites that are not statically written but fetch content from elsewhere and then present it to the user.

You can do this with JavaScript, too. It’s running on some other computer on the internet, not on your local machine. It can also solve geospatial problems, making use of the resources on big machines or servers.

WHAT IS OPENLAYERS?

It’s an open-source JavaScript library that helps create stunning, feature-rich maps to put on any webpage— fast.

WHAT’S THE VISUALIZATION LIKE?

OpenLayers reads all kinds of data formats with a geospatial component. For example, a simple GeoJSON file containing vector data and points that have some attributes.

It can also read and display KML, GML, and pre-rendered tiles.  OpenStreetMap produces great tiles of their database that you can use to create a nice background map on your map application.

OpenLayers combines the different sources and stacks them on top of each other. It’s a flexible solution for your mapping needs.

IS THERE ANYTHING FOR STACKING AND LAYERING DATA?

OpenLayers shines in many parts, including projections and handling different projections.

Any data format has an explicit or implicit specification of where those coordinates are located and how they should be interpreted. OpenLayers understands 99% of them.

How?

By using the Proj library for JavaScript. Not just for vector but for raster data too.

Vector data is raw coordinates and you can read it with many things. Raster data is pixels. Suppose all you have is tiles or geospatial raster data in one geographic projection. In that case, it’s a challenge to combine it with different projected coordinates or data from other web sources.

OpenLayers makes it easy to re-project vector and raster data to the specified projection.

IS OPENLAYERS A COLLECTION OF JAVASCRIPT LIBRARIES?

Not quite. It’s a platform for combining sources and interacting with other libraries.

OpenLayers have basic ways of handling the two most common projections. It delegates anything above basic to the real expert, which is Proj—the de facto standard of doing projections.

The small micro modules do one thing only—but they do it exceptionally well. When things become too hard or too specialized, you use a library that’s already out there to help fix your specific problem.

WHAT KINDS OF INTERACTIONS CAN WE DETECT AND USE?

There are a lot of interactions already built into the library.

The most basic ones, like zooming in and out on maps, are included. You can also pinch the map to rotate it, just like in Google maps.

OpenLayers doesn’t stop at displaying vector data. You get tools to edit it—create new points, digitize new polygons, rotate existing polygons, etc. Everything you can do on a map on the web, you can do in OpenLayers.

HOW’S PINCHING DETECTED ON DIFFERENT DEVICES?

When you put your fingers on the map, touch events are registered. Your fingers touch your display at two places (this process was standardized not so long ago). It’s easy to differentiate whether there were two touches (two fingers), and they’re now moving to the outside (with the distance between them getting bigger), or inside (the distance is getting smaller), or they’re also rotating something.

All this happens internally. It’s not detecting whether you’re using a mobile phone or a desktop, but it’s automatically detecting the device’s capabilities that’s running your code.

WHAT ABOUT IN-DEPTH ANALYSIS? 

Depends. How do you define in-depth?

There are basic ones available, like measurement, you can draw lines and measure their distances. There are utility functions to help you calculate how many meters are the two points of a line apart.

There’s also editing and snapping one vector to another.

OpenLayers concentrates on what it’s good at. The analysis part isn’t that. It’s basic, but it plays well with all the other geospatial JavaScript libraries that excel in analysis.

DOES IT ANALYZE RASTER DATA?

Few people know about it, but it does.

There’s a way of accessing raw pixel data of sources when they allow it, so you can either analyze it or produce your modeling ideas onto your map.

Imagine moving a slider on the page to show the impact of a 15-centimeter sea water level rise and the land affected by it.

Or calculating the vegetation greenness index on an arbitrary raster source. Move your mouse over a map and the greenness is calculated on the fly with a small formula built into it.

There are a lot of opportunities to extend on the building blocks in OpenLayers.

IS THERE ANY PARTICULARLY INTERESTING LIBRARY THAT WORKS WELL WITH OPENLAYERS?

Because OpenLayers is built in JavaScript proper (the way all libraries should be), it means you can play with all the modules you can find on, say, NPM.

For geospatial libraries, you have gazillions of choices. I recommend Turf.js and GSTs (part of the Java topology suite).

GSTs works great with OpenLayers and does standard vector analysis very well. Say you have two points and you buffer them each by 10 km. You calculate the intersection of those new polygons, take this intersection, rotate it around, and you see how big the covered area is.

There are smaller libraries out there, such as ArcGIS, that calculate circles. Give it two points, say San Francisco and Berlin, and it calculates a great arc or how you’d fly there.

These are just quick examples of creating stunning applications for geospatial projects where OpenLayers does some parts, and another library some other parts. Together, they give you outstanding results.

IS THIS 2D OR 3D?

All vector data in OpenLayers (v.6) is 3D by design.

Back when we started, we only knew about 2D (v.2). Later, we created all the basic building blocks for vector data with 3D in our heads.

For displaying 3D data, most people use Cesium. We’re toying with the idea to support 3D directly in OpenLayers in the near future.

Watch this space.

IS JAVASCRIPT A GEOSPATIAL LANGUAGE?

Yes. It can solve geospatial questions, especially for displaying stuff on the web where everything is moving.

It’s the future of the web and programming.

WHY IS JAVASCRIPT OVERLOOKED?

Users like to focus on Python, R, Java, and C#.

JavaScript is probably the same age as Python, which has academia written all over it.

Some big applications and programs that have been around forever were written with older languages, such as C. There weren’t that many choices at the time. C was a good choice for many things—geospatial data is extensive.

But it has a high entry barrier. I wouldn’t have started programming if I had been thrown into some company doing C# or C.

Learning JavaScript is easy. Open a webpage and hit F12 on your keyboard. Type some JavaScript on the right-hand side in the console, and you’re already programming.

Programming for geospatial is fun. You see something interesting every time you program with it. It’s visual. Maps, diagrams, modeling results. It’s practical and you can explain it to your parents. It’s a good choice to start with and excel later on.

SHOULD WE ALL LEARN JAVASCRIPT THEN?

Absolutely. The future is bright. It’s here to stay and evolve.

You get an easy start, but if you want to get the best out of it and produce easy, reusable code, you have to put in more. You’ll be well rewarded.

All languages have pros and cons. So does JavaScript. It’s wise for programmers not to concentrate on only one language because they all have different areas where they shine and other areas where they don’t.

What’s that famous interview question?

“What’s your favorite programming language?”

To which there is no perfect answer.

If someone says, “It depends… but I’m most familiar with X,” that means they thought of programming and solving stuff with X.

Others say, “I do everything with JavaScript.”

They haven’t really thought about it at all.

I WANT TO START. DO I NEED A SERVER?

No, you don’t.

You need a browser. Every computer has a browser, so you need nothing at all.

Open a page somewhere, then hit F12. It opens up the console in any browser I know of. Put in your JavaScript commands and execute them. As you learn, you’ll want to have a better programming environment.

There are brilliant editors (or IDEs) out there. I recommend Visual Studio Code. This is advanced, but you will want to do it as a real programmer, eventually.

JavaScript is easy to start with and to understand. You don’t need any compiler at first, nor to read an enormous book.

Just watch a 5-min course.

Then you’ll get thirsty for more.

WHAT COMMON MISTAKES ARE PEOPLE MAKING?

One is mixing up Lat and Long. I still have to find a developer that hasn’t done this regularly.

The other one is going for a full build and building a map that looks amazing, but it takes five seconds to load on a mobile device. Page visitors are gone, never to return.

Invest a little more time in your setup. OpenLayers plays by the same rules as all the others in the Java and JavaScript world.

Get a tiny JavaScript build that contains all the parts of OpenLayers you need for your app.

It’s all there on GitHub. Look into the sources, find something that you might want to address and enhance. Open an issue or send a pull request. Marc and his crew appreciate anybody helping them make the best JavaScript library out there for mapping.