What is OpenStreetMap and how it is better than Google Maps

About OpenStreetMap

OpenStreetMap, or “OSM”, is a Wikipedia for the maps. It is a free, open, and global community project. OpenStreetMap mission is to map everything that worth to be mapped. And, similar to Wikipedia, OSM data can be added, edited and used by everyone.

I say “data” and not “maps” because that’s what OSM essentially is. Open Street Map is a big open database full of free geospatial data, available for everyone!

Indeed, OSM is widely used to create digital maps. But it can do way more than that. OSM applications include routing and navigation, converting GPS coordinates to addresses, searching places by name, analyzing map data and many many more.

Driving route from Berlin to Potsdam, Germany, calculated on OSM data
Driving route from Berlin to Potsdam, Germany, calculated on OSM data

In 2019, OpenStreetMap with its more than 5 000 000 members and more than than 1 200 000 contributors is clearly the biggest and most successful crowd-sourced mapping project in human history. And as Facebook, Uber, Microsoft and thousands of others are utilizing OSM data in their products, almost anyone can be counted as OSM user, direct or indirect.

Power of crowdsourcing

OpenStreetMap project was started in 2004. Back then map data were controlled by commercial organizations and governments, hard to use and expensive to buy. Mapping itself was done primarily by the teams of GIS specialists. Most of the time, they were not in a position to know how well data they map reflecting the reality, to validate and timely update them.

OpenStreetMap managed to disrupt the industry and change all of that in just a few years. It helped to demystify cartography and geography as a science and has given everyone the possibility and tools needed to contribute. No long formalities, no expensive licenses or equipment – anyone with a computer and Internet access could join and start making the world better.

And that approach worked amazingly well!

First 10 years of OpenStreetMap mapping progress

In fact, OpenStreetMap became so successful that Google had to play a “catch-up” game. The company introduced Google Map Maker, with familiar OSM-like interface, to allow people around the world to contribute.

Of course, it was not the same. The main difference is – if you contribute to OSM, data belong to you and OSM community, and stay free and open for everybody, under creative commons license. And when you contribute to Google Maps – well, all changes you make belong to Google, and it is up to Google to decide who and how can use that data.

Number of monthly edits for OpenStreetMap exceeds 8 000 000
Number of monthly edits for OpenStreetMap exceeds 8 000 000

In addition, every change made to OpenStreetMap is immediately visible to others, when in the case of Google it is delayed by long moderation and review process.

Crowdsourced mapping with immediate access to the changes appeared to be especially important for mapping crisis and natural disaster areas. In 2010, when Haiti suffered from a disastrous earthquake, OSM volunteers managed to map the whole island in just a couple of days from satellite imagery.

OpenStreetMap volunteers mapping Haiti after 2010 earthquake

This would not be possible with any existing commercial provider. Businesses are bound to mapping data that are profitable to sell. Also, most of the time they only capable of publishing results on a particular schedule and cannot do it every second, as OSM does. And, even Google with huge investments, cannot match the scale and the power local knowledge of the OSM community.

History of OpenStreetMap

Like most many things, OpenStreetMap started small. In August 2004, Steve Coast, back than a physics student at UCL, came up with an initiative to create free, editable maps of UK.

Just a few months later, by the end of 2004, web site openstreetmap.org was up and running, based on 100% open source software. It contained community email list, wiki documentation and first versions of map editing software.

By the end of 2005, OpenStreetMap had more than 1000 registered users. And in August 2006 OpenStreetMap Foundation was formally registered as a non-profit, UK based company. At that time OSM community included more than 3000 members.

Following infographic depicts major and noteworthy OpenStreetMap milestones.

Moments of OpenStreetMap history infographic, by Martin Elmer, from Visually
Moments of OpenStreetMap history infographic, from Visually

Part of OSM success related to its explosive community growth and perfect timing. OSM growth matched with the global adoption of smartphones, which at the same time can benefit from the quality offline map data and ideal for the “on-the-go” mapping. Most of the smartphone map and navigation applications are fully or partially based on the OpenStreetMap.

Explosive growth of OSM community year-to-year
Explosive growth of OSM community year-to-year

Another important component of success is related to the active position of the OpenStreetMap Foundation. Successful negotiations with companies like Bing, DigiGlobe, and Ersi allowed using their high-quality satellite and aerial imagery for the OpenStreetMap mapping efforts. Thanks to this, the ever-growing OSM community had enough raw material to work on.

Arcgis satellite imagery as base layer in OSM map editor
Arcgis satellite imagery as base layer in OSM map editor

OpenStreetMap vs Google Maps

OpenStreetMap data widely used to create “digital maps” or “slippy maps“, similar to Google Maps. Both OpenStreetMap and Google Maps support searching places by name and route calculations.

OpenStreetMap vs Google Maps

No surprise that Google Maps, as a state-of-the-art commercial product backed by one of the biggest tech companies in the world, has more polish on it.

It has smarter place search, better user interface, fast 3D accelerated map rendering. Google Maps also gives its users the possibility to submit new and corrected information, which may be added to the map after moderation.

Google Maps also has amazing satellite and aerial imagery, and very cool “street view” mode – something that current OpenStreetMap cannot offer.

How can OpenStreetMap compete or be better than that? By offering features that Google Maps, as a cloud service, cannot offer.

OpenStreetMap is more than just a map of the world, place search and navigation. It gives free and unlimited access to the entire dataset, with a complete history of changes, without limiting who and how can use it. OpenStreetMap is a perfect foundation for emerging innovative and creative solutions and targeted products.

With OSM, map data for the whole planet can be downloaded and used completely offline. Google Maps can only cache small region and generally can not work without an Internet connection.

OSM dataset can be used to large-scale geocoding, routing and analysis, which would be impossible using Google Maps.

OpenStreetMap for business

OpenStreetMap is awesome, yet using it for your business may be quite challenging. As a non-profit organization, OSM does not provide uptime SLAs, support and consulting.

We at Geoapify believe that this limits OSM adoption, and happy to support you by providing stable, affordable, business-friendly OpenStreetMap mapping service. In addition to maps, we also provide a complete set of tools, including places search, geocoding, routing and reachability analysis.

And the best thing – you can register and start to use this all for free, also for commercial purposes. Give our services a try with our interactive Playground – no registration required.

You can reach us at any time at [email protected]. We will be happy to help!

Why do need more interactive maps if we have Google Maps?

Google Maps is one of the best interactive maps. We use it every day to build routes, get more information about places and plan our trips. But does it cover 100% of our needs and requirements? Or even more generic question: can one product cover all users needs and requirements?

Just recently I planned a journey by car with my family. It was 678 km or 7 hours of driving one way. I needed to choose a route and plan intermediate stops. Of course, I used Google Maps to do that, but it took me quite a lot of time and effort to solve my problem. Even if Google Maps gives very good results for general cases, it still needs improvements to cover more specific needs.

As professionally I work with spatial analytics and digital maps, I hear the “Why do need to create more interactive maps if we have Google Maps?” very often. In this article, I provide some ideas, which could give the answer.

Why do we need interactive maps at all?

It’s a silly question, isn’t it? Maps allow exploring locations and places, which we do not know very well or which are new for us. In other words, maps give us answers to location related questions, help to plan trips and optimize them. Ideally, a map should answer all your location questions from a box. So you do not need to use other tools or services.

Of course, it’s difficult or maybe even impossible to make one tool answer all the questions. That’s why it happens that we have a dozen browser tabs opened trying to solve a small trip planning task. For example, split a 6-hour driving route as well as find pleasant and interesting places for stops.

Should we have a separate map website for each and every use case?

Don’t think so. It doesn’t make sense to compete with Google Maps. But a map could be a part of a website. So it’s not a separate web service but a part of your main website. Moreover, if your customers can find all the answers on the website it will make it more informative, attractive and useful.

What should the map contain?

It should answer questions! Where is it located? How can I get there? What interesting can I find nearby? Moreover, the map should help to find a location which fits the chosen criteria and allow filter locations by criteria. A map nowadays is more than a map, but the location intelligence solution.

For example, if your website offers beach holidays planning, the map could show hotels within walking distance from a beach, sights nearby, restaurants & cafes. Further allow to build routes to those amenities, give information about tolls or local public transport tariff.

Beach vacation map
Beach vacation planning map

Geoapify Mapping APIs and components to create interactive maps

Only you know how an ideal map for your website should look like. We at Geoapify can support you by providing the required APIs and tools. You can register and start to use the APIs for free or try them in our Playground right now – no registration required.

Reach us at [email protected] if you need help or missing some features! We are interested in improving and extending our services!

Map animation with Mapbox GL

What can be more eye-catching than smooth, interactive, three-dimensional map animation? Impress your visitors by displaying your map data in stunning 3D!

Previously we have compared OpenLayers and Leaflet map libraries. Both are great choices if you want to add interactive map to your website. They are free, battle-tested, extensible and supported by active communities.

But what if you need a very fast, animated, eye-catching 3D map? Both Leaflet API and OpenMapLayersAPI do not support 3D and free-form map rotation. In this case Mapbox GL map library can be a great option.

Mapbox GL JS is one of the most advanced JavaScript map rendering libraries when it comes to smooth interactive animation. Mapbox GL API is slightly harder to use and not compatible with existing Leaflet plugins and examples. But it is using hardware-accelerated WebGL technology to dynamically draw data with the speed and smoothness of a video game.

In this article I’ll show you how to animate and implement 3D map rotation around a selected point. The end result should look like this:

Map rotation animation in 3D with Mapbox GL

If you short on time and just looking for the complete HTML code, you can find it at the bottom of the page.

Setting up our 3D map

As first step, we need to add imports for Mapbox GL library and its CSS style sheet into the HEAD of our page

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.js"></script>

Once imported, we can define a <div> element which will host map visualization and add Javascript code which will initialize Mapbox GL to render our map in 3D with specified initial location, zoom, pitch and bearing. Please do not forget to put your real API key instead of “YOUR_API_KEY” placeholder in the map tiles URL.

<div id='map'></div>
<script>
var map = new mapboxgl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "basemap": {
                "type": "raster",
                // map tile source 
                "tiles": [
                    "https://maps.geoapify.com/v1/tile/carto/{z}/{x}/{y}.png?api_key=YOUR_API_KEY"
                ],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "basemap",
            "type": "raster",
            "source": "basemap",
            "minzoom": 0,
            "maxzoom": 22
        }]
    },
    center: [-73.991462, 40.724637], // starting position
    zoom: 12, // starting zoom
    pitch: 60, // starting pitch in degrees
    bearing: 0, // starting bearing in degree
});

This should give us basic interactive 3D map. You should be able to move the map to a different locations, zoom in and out, and change view angle.

Interactive 3D map view of Manhattan, NY
Interactive 3D map view of Manhattan, NY

Adding map rotation animation

As next step, let’s add dynamic map animation, which will change view angle to create effect of flying around the map center. Please add the following code into our <script> block and refresh the page:

function rotateCamera(timestamp) {
    // rotate at approximately ~10 degrees per second
    map.rotateTo((timestamp / 100) % 360, {duration: 0});
    // request the next frame of the animation
    requestAnimationFrame(rotateCamera);
}

map.on('load', function () {
    // start the animation
    rotateCamera(0);
});

Final steps

As the last step, let’s add basic map navigation controls and basemap attribution.

// map navigation controls
map.addControl(new mapboxgl.NavigationControl());

// attribution
map.addControl(new mapboxgl.AttributionControl({
	compact: false,
	customAttribution: 'Powered by <a href="https://geoapify.com/">Geoapify</a> | © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}));
Complete map with controls and attribution
Complete map with controls and attribution

Complete HTML code

Final version of the HTML page could look like this. Please feel free to copy the code, insert API key and open it in your browser to see how it works.

<html>
<head>
    <meta charset='utf-8' />
    <title>Mapbox GL example: rotate map animation in 3D</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.js"></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
var map = new mapboxgl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "basemap": {
                "type": "raster",
                // map tile source 
                "tiles": [
                    "https://maps.geoapify.com/v1/tile/carto/{z}/{x}/{y}.png?api_key=YOUR_API_KEY"
                ],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "basemap",
            "type": "raster",
            "source": "basemap",
            "minzoom": 0,
            "maxzoom": 22
        }]
    },
    center: [-73.991462, 40.724637], // starting position
    zoom: 12, // starting zoom
    pitch: 60, // starting pitch in degrees
    bearing: 0, // starting bearing in degree
});

function rotateCamera(timestamp) {
    // rotate at approximately ~10 degrees per second
    map.rotateTo((timestamp / 100) % 360, {duration: 0});
    // request the next frame of the animation
    requestAnimationFrame(rotateCamera);
}

map.on('load', function () {
    // start the animation
    rotateCamera(0);
});

// map navigation controls
map.addControl(new mapboxgl.NavigationControl());

// attribution
map.addControl(new mapboxgl.AttributionControl({
	compact: false,
	customAttribution: 'Powered by <a href="https://geoapify.com/">Geoapify</a> | © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}));
	
</script>

</body>
</html>

Summary

Mapbox GL generally requires more JavaScript code to be written than Leaflet and can be more complicated to maintain.

So, you may ask when to use Leaflet and when to use Mapbox GL?

The answer is simple – if you don’t need 3D and extremely fast animation then Leaflet would be the best choice. It has biggest community, best documentation, extensive set of plugins and works well in any situation. And if you really need advanced 3D maps with animations and top rendering speed on modern devices – then Mapbox GL is your friend.

Create a map with Location Intelligence components

Does it make sense to create a custom map for your website? Sure, a custom map brings a lot of benefits and advantages to your website. For instance, with your own map you are able to show the important locations to customers, highlight areas you want to pay attention to, and visualize data which could be potentially very interesting for both sites.

Geoapify helps you to create a map from the beginning and add Location Intelligence components into it. Read how to add a map to your website.

However, location visualizations are not only what people look for on a map. It’s also important to make the map interactive and “alive”. So the users can interact and “play” with it and make location decisions.

Make your custom map “alive”

But what does make a custom map “alive”? How to make the map interactive? The answer is simple: add components to your custom map, where a user can enter his data and analyze outcome.

This could be an input to search a location, popups opening on a click and giving some details or location analytics components like routing or isochrones.

Turn your map into Location Intelligence application

Geoapify offers APIs and map components which help to turn your map not just into the interactive map but into a Location Intelligence application of the full value.

Geocoding API to create a location input field

It’s always great to have a location input on your map. However, it’s forgotten by many map developers. The service which allows you to look for locations address details by search string is called Geocoding.

As a result, with Geoapify Geocoding API you are able to specify the search and retrieve accurate results. As well as implement autocomplete fields.

Location autocomplete input

Check our Geoacoding API in the Playground.

Reverce Geocoding API to get a location address by its coordinates

Another useful geospatial tool is Reverse Geocoding API. It returns a place address by its coordinates. With Reverse Geocoding API you are able to answer the question “What is located here?”, when a user clicks on the map.

Check our Reverse Geoacoding API in the Playground.

Routing API to build a path

Often people search locations on a map which are close to their route. Although route building is so popular, it’s present only on very several maps. By using Routing API together with Geocoding API, you can create a convenient routing tool for your map on your website.

Routing for your web site

Check our Routing API in the Playground.

Isolines API to analyse travel times

Can you show your customers what can the get from their living or working place? Sure! With Isolines API! By using the API you will be able to highlight areas on a map reachable within a given time. Together with driving and walking modes, our Isoline APIs work with transit and bicycle modes.

Isochrone for travel time analytics

Check our Isoline API in the Playground.

Places API to show amenities near by

Last but not least are amenities and points of interest. Show your customers places they interested in. Restaurants, fitness studios, schools, and other places.

Check our Places API in the Playground.

Use Geoapify APIs to create a map for your website

Read more about our APIs here.

OpenStreetMap is more than just a map

Even if OpenStreetMap has a “map” in its name, it’s not just a map. It’s a collaborative project, which allows collecting and structuring geodata into a database. The OpenStreetMap database, in turn, becomes a base for detailed and up to date maps, map components and map solutions on top of it.

The OpenStreetMap community is the biggest GIS community in the world and counts more than 1.000.000 active contributors so far and grows every day. As a result, we have accurate and up to date maps data for the whole planet. Read OpenStreetMap wiki to learn more.

Are OpenStreetMap data and maps free to use?

OpenStreetMap data is absolutely free! Everybody can download and use OpenStreetMap data for personal or commercial purposes (do not forget about attribution). In addition, there are many open-source projects with a permissive license, which use the OpenStreetMap database and allow creating maps, components, and tools based on them.

But what is the cost of setup, running and maintaining map services? It requires a lot of time, resources and expertise to start, run and keep up to date your own OpenStreetMap database instance, map tiles servers and map components.

That’s why there are third-party commercial companies offering products and components based on OpenStreetMap data.

Products based on OpenStreetMap data

Besides the maps by itself, there are many applications based on OpenStreetMap data – everything around maps, geospatial analytics, and location intelligence. The applications and services could be split by type. Some of the types are listed below.

Map tiles servers

Map tiles it’s prepared parts of maps. During map rendering a mapping library requests required map tiles from a server. Map tile servers could provide different map styles and even different formats. For example, raster or vector formats.

Geocoding and reverse geocoding

Geocoding and reverse geocoding are two base map operation you usually perform. The first one gives a place coordinates from the place address, the second one returns an address by coordinates.

You use geocoding applications for search on a map and input autocomplete.

Routing

Routing applications build a route between two or multiple points. Moreover, some of them are able to calculate the optimal routes and provide turn-by-turn directions. Together with driving or walking transportation modes, a lot of routing applications are able to build routes for public transport.

Places and amenities search

Places and amenities search services allow searching locations for given criteria. For example, “restaurants near me which are open now”, “all P+R in the city” and so on.

Some services provide geodata and polygons for some features. Which could be useful when drawing administrative or political boundaries or other regions on a map.

Isodistances and Isochrones (reachability and travel time maps)

How far can I get within 30min from my home? Where to book a hotel not to spend more than 20 min traveling to my points of interests? Isodistances and isochrones show areas reachable within a given distance or within a given time from a location.

As well as routing, iisolines are built for a transportation mode or a combination of transportation modes (for example, public transport + walking, park + ride).

Travel Time Map
Travel time map

Geoapify offers APIs and components built on OpenStreetMap data

We provide everything you need to create a map or extend an existing map with Geospatial analytics features. Starting from Free tariff plan we offer tariff plans for different load and usage. Register and try our APIs and components for Free.

Leaflet vs OpenLayers. What to choose?

The first step you do when creating a map from scratch is choosing a client mapping library. There are many JavaScript libraries, which allows building a custom map. In this article, we would like to compare 2 widely used mapping libraries: Leaflet vs OpenLayers.

Leaflet

Leaflet holds the leading position among open-source JavaScript libraries for interactive maps. Developed originally by Vladimir Agapkin and maintained by a big contributes of the community. Moreover, the library is completely free to use and distributed under BSD-2 Clause license.

https://leafletjs.com

OpenLayers

OpenLayers is a powerful open-source JavaScript library for dynamic maps. It provides a rich API which allows creating simple as well as very complex map applications. The same as Leaflet, it’s free to use and distributed under the BSD 2-Clause license.

https://openlayers.org/

Is quickstart possible?

Leaflet

The Leaflet is designed as easy-to-use and light-weight library. So you can start to develop a map just by copy & paste from the QuickStart tutorial.

OpenLayers

The OpenLayers offers more functionality than Leaflet and requires more time to start. For example, you need to use projections, just to create a simple map.

Moreover, it may also confuse you if you have already experience with other map libraries, that coordinates in OpenLayers not in LatLon format, but in LonLat. Which is by the way correct from GIS point of view.

Maintenance

Leaflet

More than 600 contributes. As a result, releases at least every half year.

OpenLayers

About 240 contributors. Consequently, releases every 3-4 months.

Documentation

Leaflet

The Leaflet has well-structured documentation with a lot of examples and tutorials. In addition, great API documentation allows you to quickly find the functionality required.

However, the basic documentation contains only basic examples. So you have to research on the Internet if you need to learn more.

OpenLayers

The documentation contains QuickStart’s, tutorials and a lot of examples. But, unfortunately, some of them already outdated.

The API documentation is well-structured, but as it’s very large, you may be lost there at begin.

Leaflet and OpenLayers community

Leaflet

The Leaflet is the most popular JavaScript library for maps. So it has a huge community. The lack of example in the official documentation website is refined by many examples from the community.

“leaflet stackoverflow” google request returns 398.000 results.

OpenLayers

As the library is used mainly for complex GIS applications development. So the OpenLayers community is smaller than Leaflet community.

“openlayers stackoverflow” google request returns 52.700 results, consequently.

Flexibility and Power

Leaflet

It contains all the features the most developers ever need by building a map. Furthermore, the additional power is added by Leaflet plugins.

OpenLayers

The power and flexibility are the two most strong characteristics of OpenLayers. The library has all the required features in the core functionality.

Supported GIS formats

Leaflet

The core functionally supports only the GeoJSON format. Nevertheless, support for other formats, like CSV, WKT, TopoJSON, GPX, provided by plugins.

OpenLayers

OpenLayers supports GeoJSON, GeoRSS, KML, GML, and map data from any source using OGC-standards as WMS or WFS.

Amount of code

Leaflet

The Leaflet is designed to be able to achieve the desired result with a minimal amount of code.

For example, a simple map with a marker uses only 3 classes:

var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

var map = L.map('map').setView([51, 12], 12).addLayer(osmLayer);
L.marker([51, 12]).addTo(map);
OpenLayers

More code with OpenLayers. However, the code looks more structured and provides better MVC-separation.

The same example with OpenLayers has 6 classes:

var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
var position = new OpenLayers.LonLat(12, 51).transform(fromProjection, toProjection);
 
map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());
map.setCenter(position, 12);
 
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);

var marker = new OpenLayers.Marker(position);
markers.addMarker(marker);

Leaflet vs OpenLayers summary

Leaflet

Use Leaflet if you are developing just a map, but not a complicated GIS application. Similarly, if the most complex data you deal with is GeoJSON and you do not need to deal with projections.

In the other hand, if you are new in maps world and not a GIS expert, Leaflet may save you a lot of time.

Switch to OpenLayers when you have to use a lot of plugins to make it work.

OpenLayers

Using projections, different Geo data sources, developing integration with other GIS applications? Then OpenLayers will be the right choice!

Geoapify provides maps and components

Geoapify offers maps and map components to create a custom map. Even if “Leaflet vs OpenLayers” is more a matter of taste, both Leaflet and OpenLayers could be used with our map tiles. Certainly, we provide different map designs for you. So you are able to setup “look&feel” for your custom map.

Our APIs, for example, Geocoding, Routing and others, will help you to build interactive and useful map!