Skip to Content

Blog

The sdg Blog is designed to show you who we are and what we're all about. Whether you're looking to read up on the latest technologies, trying to improve your soft skills, or wondering what we've been up to, our blog offers something for everybody.

Back

Using Leaflet to Find Your Next Cup of Coffee

According to Pew, “74% of adult smart phone owners age 18 and older say they use their phone to get directions or other information based on their current location.” 

We’ve all been there before: an unfamiliar town, desperate for a cup of coffee, unsure where to get it. You pull out your smart phone, head to your favorite coffee chain website, hoping to have it tell you how far away you are from your next cup of coffee, but alas, it’s an alphabetical list of locations by state. You are in the rental car, ready to pull out of the hotel and get to your appointments for the day, but when looking at the list you have no idea if you are closer to the Hill Valley store, or the Whoville location. Unsure where those cities are, and short on time, you decide to stop at the gas station across the street. 

If only the coffee chain had built a map that displayed their locations, they may have sold at least one extra cup of coffee that day. As technologists, it is our job to ensure this data can be represented in an easy, informative way to end users, so that the coffee shop gets that extra sale, rather than its competitor.

Leaflet – An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps makes this so easy, the excuse that maps are too complicated to develop is no longer an option. Let’s take a look at how easy they make it.

Here’s an html page we can start with – it’s a basic page, including the Leaflet libraries from a CDN, and a div for the map to display in, along with a few style guidelines for the map’s div. 

<!DOCTYPE html>
<html>
 <head>
    <title>My Leaflet Sample</title>
    <script src="http://cdn.jsdelivr.net/leaflet/0.7.3/leaflet-src.js"></script>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css">
    <style>
            #map {
                width:100%;
                height:500px;
                margin-left:auto;
                margin-right:auto;
            }
    </style>
</head>
<body>
    My Sample Leaflet Map:
    <div id="map"></div>
</body>
</html>

Let’s add a map to our page, centered on sdg World Headquarters. At this point we know sdg’s address is:

7500 Olson Memorial Highway
 Golden Valley, MN 55427

Before we do that…

Leaflet requires Latitude and Longitude parameters out of the box rather than an Address. For the sake of keeping our example simple, we will hard code the lat and long for our address to 44.983731, -93.376633. If you were developing an application with a multiple addresses, storing their lat and long may not be feasible. For that purpose, Leaflet has GeoCoding plugins, which, depending on the plugin, allow you to add the plugin to your code, sign up for a given Geocoding providers API (if applicable), and then configure which Geocoding service you wish to use. These plugins typically allow you to access geolocation data via services like Mapquest, Google, Bing maps, or OpenStreetMaps.

Adding the Map, Centered on sdg’s Office

Let’s create a JavaScript function called loadMap. This function will leverage the Leaflet libraries we included from a CDN in our main .html page.

We are going to do two things here:

1. Instantiate a map, this is where we tell it where to center the map via lat long. We also need to pass a zoom level – how far zoomed in or out should the map be? For our case, let’s choose 15 (the higher the number, the closer the zoom).

2. We need to choose a tile layer. This is how your map will look. For our demo we will use Open Street Maps. Not a fan of Open Street Maps? The layer structure allows you to interchange other provider layers. Want to use Mapquest layers instead? Change the URL’s in L.tileLayer per Mapquest’s documentation.

1
2
3
4
5
6
7
<script language="javascript">
        function loadMap() {
            var map = L.map('map').setView([44.983731, -93.376633], 15);
   L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
        }

If you are coding along at home and have added the above javascript into the head of your html document, modify the to load the function onload, like this:

<body onload='loadMap();'>

Reload the html file in your browser, and you should now see a map of the area of sdg’s office.

Adding a Pin

At this point, we want to add a pin to pronounce the exact location of the office. In our JavaScript function we created above, we can add the following line of code:

L.marker([44.983731, -93.376633], {}).addTo(map).bindPopup('sdg World Headquarters');

Saving our html, and reloading the page, you will see a blue marker at the lat long coordinates previously specified. Clicking that will show the text specified in the bindPopup call.

Adding Multiple Pins

At sdg, we like to attend St. Paul Saints baseball games. Let’s add their new stadium to the map to illustrate the relationship between the sdg World Headquarters and the stadium.

To do this we need to do a few things:

1. Change the zoom level so we can show both pins at the same time
2. Add a second pin to illustrate the stadium

Changing the Zoom Level

Recalling from our earlier JavaScript function where we define var map, the last parameter there is the zoom level. We need to be able to display multiple markers on our map, and they are not near each other, so we want to zoom out to wider view. To do this, change the 15, to an 11…

var map = L.map('map').setView([44.983731, -93.376633], 11);

Adding a Second Pin

latlong.net tells me that CHS Field’s address 360 N Broadway St, St Paul, MN 55101 has a lat long of 44.950069, -93.084979, so we will add a second marker there.

The first few lines of your JavaScript should now look like this:

var map = L.map('map').setView([44.983731, -93.376633], 11);
 L.marker([44.983731, -93.376633], {}).addTo(map).bindPopup('sdg World Headquarters');
 L.marker([44.950069, -93.084979], {}).addTo(map).bindPopup('CHS Field');

And should produce an output like this:

Draw a Polygone Line Between Two Pins

Following the API docs for polyline, we can connect the two map pins with a polyline, with the following code at the end of our JavaScript function:

new L.Polyline([[44.983731, -93.376633], [44.950069, -93.084979]], {
                }).addTo(map);

In summary, Leaflet does so much more than plotting addresses. Whether you want to get complex with your data visualization, and display your sales data as a heat map, or you need to add a map to your website, so your coffee shop doesn’t lose that sale again, Leaflet is a JavaScript library you should consider for your project.

Find a full sample of our code here.