D3.js Tips and Tricks: Adding a line to a leaflet.js map

The following post is a portion of the Leaflet Tips and Tricks book which is free to download. To use this post in context, consider it with the others in this blog or just download the the book as a pdf / epub or mobi .

----------------------------------------------------------

Adding a line to our map is a great way to provide an indication of a path or border. Leaflet provides thepolyline function to do this;

The following is the full code to show a simple map with a line drawn with 4 lines;

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link 
        rel="stylesheet" 
        href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
    />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script
        src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>

    <script>
        var map = L.map('map').setView([-41.2858, 174.78682], 14);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; ' + mapLink,
            maxZoom: 18,
            }).addTo(map);
        var polyline = L.polyline([
            [-41.286, 174.796],
            [-41.281, 174.786],
            [-41.279, 174.776],
            [-41.290, 174.775],
            [-41.292, 174.788]]
            ).addTo(map);
    </script>
</body>
</html>

The only difference between this code and the simple map code is the addition of the var polyline = section at the bottom of the JavaScript portion;

        var polyline = L.polyline([
            [-41.286, 174.796],
            [-41.281, 174.786],
            [-41.279, 174.776],
            [-41.290, 174.775],
            [-41.292, 174.788]]
            ).addTo(map);

Here we are defining a path going from one lat/long point to another. We declare a variable with the L.polylinemethod and step through our points in the array. Then we simply add that to our map by adding .addTo(map).

And here’s our map complete with path…

Map with polyline

Obviously this hasn’t been set to follow any logical route :-).

Adding options to our polyline

There are a range of options that can be incorporated into our path and these are added after the array (separated by a comma) and contained in curly braces. The following is an example of the same line but with the colour changed to red, the width (weight) of the line set to 10 pixels, the opacity (transparency) set to 0.7 (on a scale of 0 (transparent) to 1 (opaque)), drawn with dashes of 20 pixels followed by a space of 15 pixels (dashArray) and with rounded corners where the lines join.

        var polyline = L.polyline([
            [-41.286, 174.796],
            [-41.281, 174.786],
            [-41.279, 174.776],
            [-41.290, 174.775],
            [-41.292, 174.788]
            ],
            {
                color: 'red',
                weight: 10,
                opacity: .7,
                dashArray: '20,15',
                lineJoin: 'round'
            }
            ).addTo(map);

And here’s our path with options…

Map with polyline (and options)

The full code of a live example of a map incorporating a the polyline and options is available online atbl.ocks.org or GitHub. A copy is also in the appendices and a copy of all the files that appear in the book can be downloaded (in a zip file) when you download the book from Leanpub.

The description above (and heaps of other stuff) is in the Leaflet Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).