0

Your Cart is Empty

Openlayers - Geospatial JavaScript

December 14, 2020 9 min read

Openlayers - Geospatial JavaScript

 

 Subscribe here

 

Join the Newsletter

Subscribe to get our latest podcast content by email.

    We won't send you spam. Unsubscribe at any time.

     

     

    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 isself-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, andanyone can do this who is familiar with the basics.

     

    Basics, like JavaScript.

     

    WHAT IS JAVASCRIPT?

     

    It’s afully 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’sa 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 becauseit’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 toproduce 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 thathelps create stunning, feature-rich mapsto put on any webpage—fast.

     

    WHAT’S THE VISUALIZATION LIKE?

     

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

     

    It can also read and display KML,GML, and pre-renderedtiles.  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’sa 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 theProj 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.

     

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

     

    IS OPENLAYERS A COLLECTION OF JAVASCRIPT LIBRARIES?

     

    Not quite. It’s aplatform 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—thede 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, youuse 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, likezooming in and out on maps, are included. You can alsopinch the map to rotate it, just like in Google maps.

     

    OpenLayers doesn’t stop at displaying vector data. You gettools 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’sautomatically detecting the device’s capabilities that’s running your code.

     

    WHAT ABOUT IN-DEPTH ANALYSIS? 

     

    Depends. How do you define in-depth?

     

    There arebasic 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 partisn’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, butit 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 JavaScriptproper (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 recommendTurf.js andGSTs (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 asArcGIS, 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) is3D 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 useCesium. 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 iseasy. 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 isfun. You see something interesting every time you program with it. It’svisual. Maps, diagrams, modeling results. It’s practical and you can explain it to yourparents. 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 recommendVisual 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 ismixing up Lat and Long. I still have to find a developer that hasn’t done this regularly.

     

    The other one isgoing 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.

     

     

    Be sure to subscribe to our podcast for weekly episodes that connect the geospatial community. 

    SUBSCRIBE HERE

    APPLE PODCASTS  -STITCHER -GOOGLE PODCASTS -SPOTIFY

    THE PODCAST RSS FEED:HTTPS://MAPSCAPING.PODBEAN.COM/FEED.XML

    OR SEARCH FOR THE MAPSCAPING PODCAST WHEREVER YOU GET YOUR PODCASTS

     

    For more exclusive content, join our email. No spam! Just insightful content about the geospatial industry.

    Join the Newsletter

    Subscribe to get our latest podcast content by email.

      We won't send you spam. Unsubscribe at any time.

       



      Also in THE MAPSCAPING PODCAST

      GeoNode open source geospatial content management system, GIS and Geospatial podcast
      GeoNode - Open Source Geospatial Content Management System

      September 15, 2021 5 min read

      GeoNode is an open-source geospatial platform, catalog, and content management system (CMS). The general functionality can be most likened to ArcGIS Online. Users can create filtered searches for their choice of geospatial data, by using keywords, and even filtering locations by selecting a bounding box on a map.
      Read More
      mapping drones, LiDAR from Drones, geospatial data collection from drones
      LiDAR From Drones

      September 08, 2021 6 min read

      Drones generate a lot of data. So much data, that the software intended to process it needs for it to be thinned before it can be used. It can be tricky to dumb the data down, intelligently. You may be needing to reduce 300 points in a 1x1m square, down to a single point. Generally, these complicated decisions will be streamlined through use of algorithms that can help smooth the overall data.
      Read More
      Hiring And Being Hired For Geospatial Jobs
      Hiring And Being Hired For Geospatial Jobs

      September 08, 2021 6 min read

      Crafting a quality application for a job you really want takes time, so you do not want to spread yourself too thin. When constructing your CV, it is important to keep your audience in mind. Realistically, the first set of eyes will likely be a computer algorithm, scraping the submitted CVs for certain keywords.

      Read More