Switching from Google Maps to OpenStreetMap

As you probably notice, Google Maps API started to be paid solution on July 16th, 2018. There is nothing wrong with it, we are paying for all features that are developed by the Google team. But what if you are an owner of the simple website and you just want to display a piece of the map with the location of your office? You can use OpenStreetMap.

Is it just that easy?

Below you can see the whole code required to create a map, position it, place a marker and create a popup with the office address.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
</head>

<body>
  <div id="mapDiv" style="width: 800px; height: 500px"></div>
  <script>
    // position we will use later
    var lat = 40.73;
    var lon = -74.00;

    // initialize map
    map = L.map('mapDiv').setView([lat, lon], 13);

    // set map tiles source
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      maxZoom: 18,
    }).addTo(map);

    // add marker to the map
    marker = L.marker([lat, lon]).addTo(map);

    // add popup to the marker
    marker.bindPopup("<b>ACME CO.</b><br />This st. 48<br />New York").openPopup();
  </script>
</body>

</html>

What have we done?

We used the Leaflet library to handle map displaying. In the example above, in the head section, I used the hosted version of the CSS and JS files, but you can download it on your server and host locally. In the body section, you can see the div element of id “mapDiv” which is configured to be 800 pixels wide and 500 pixels high.

The rest of the magic is simply placed in the script. At first, we are setting the latitude and longitude of the point we want to put the marker on (and this will be also the center of our map). Next, we are creating the map, which will be placed in our “mapDiv” element, centered on the position we have chosen and zoomed to level 13. You can change the zoom level to better fit your needs.

The important thing is the map source configuration. There are various map sources you can use, but in this example, I want to keep things straight so I simply configured OpenStreetMap tiles as the source. Please note that you have to keep copyright information in such a case.

We almost finished. Now we can place the marker on the map (on the latitude and longitude configured before). As the last step, we are placing the popup with the information about our company.

Is this really all I need?

This is the basic usage of Leaflet with OpenStreetMap. The Leaflet library, however, is much more powerful. You can draw on the map, place various objects, react to the events – you will find much more information in the Leaflet documentation.

Geolocation

The Leaflet library does not contain any functions to perform geolocation based on the address string. If you want to perform such operations, you should take a look at OpenStreetMap Nominatim API. It allows you to search using named locations (by street names, cities etc) and not named locations such as stores, pubs etc.

An alternative – static maps

There is also one more alternative worth mention. If you don’t want to deal with the JavaScript code and libraries, you can simply use static maps displayed as an image on your site. There is nice static map generator available.

12 Replies to “Switching from Google Maps to OpenStreetMap”

  2. Thank you from Argentina! I can pay for Google Maps, and this works and looks really great!

  3. Thanks, just implemented onto a site and looks and works great

  4. can it realtime ?
    gps location send long and lat into database, and give marker new location in 1 minute or 1 second ?

  5. Is it free for commercial usage? Can you point to license info or whatever?

    1. Looking at the licenses, Leaflet is under BSD 2-Clause “Simplified” license which allows commercial usage (see: https://github.com/Leaflet/Leaflet/blob/master/LICENSE and the OpenStreetMap is using Creative Commons Attribution-ShareAlike 2.0 Generic which also allows commercial usage (see: https://creativecommons.org/licenses/by-sa/2.0/

      For all basic usage capabilities, you should not worry about commercial usage. If you have doubts, consult a lawyer – your use case may be different.

    1. This is really simple, create another variable using the same methods as for the first marker, here is the piece of code (I changed the last lines of my example code):
      // add marker to the map
      marker = L.marker([lat, lon]).addTo(map);
      marker2 = L.marker([lat+0.01, lon+0.01]).addTo(map);

      // add popup to the marker
      marker.bindPopup("ACME CO., This st. 48, New York");
      marker2.bindPopup("FooBar INC., That st. 32, New York");

      As you can see, I also removed “openPopup” call since I don’t want to open any popups on the markers at the beginning. They will be displayed on click on the marker.

Comments are closed.