Add Icons to Layer Control in Leaflet

When you have multiple layers, it can help to add a legend to the map. This tutorial shows how to add icons to the layer control in Leaflet. This tutorial shows only marker layers, but you could create icons for polygon layers and use those as well.

Legend with marker icons

The following code sets up our map, layers, and the layer control. This is the standard way maps look in Leaflet, with no visual indication of which layer goes with which markers, without checking the boxes on and off.

var map = L.map('map', {
  center: [33.8, -84.4],
  zoom: 11,
    layers: [trainLayer, treeLayer]
});

var overlayMaps = {
  "Train": trainLayer,
  "Tree": treeLayer
};

L.control.layers(null, overlayMaps, {
  collapsed: false
}).addTo(map);

Default legend

In order to add a legend to the layer control, you can simply change the overlayMaps code to add any HTML you'd like. In this case, we'll add the map icon pngs with a small height so they will look okay in the layer control:

var overlayMaps = {
  "<img src='http://mollietaylor.com/skills/js/leaflet/train.png' height=24>Train": trainLayer,
  "<img src='http://mollietaylor.com/skills/js/leaflet/arbol.png' height=24>Tree": treeLayer
};

It's really that simple! I searched the documentation and the web, and I couldn't figure out how to do this, so I figured I'd just try adding the HTML. Turns out it looks great!

Full code available on CodePen. Map icons by Nicolas Mollet and Axel Rodriguez.

Changing Leaflet Slidemapper to a Side-by-Side View

The default setup in slidemapper is to have the slides either above or below the map. However, it is also possible to place the slides to one side of the map.

Slides beside map

CSS changes

We need to make a couple of changes to how the smapp-show and smapp-map classes are displayed. You'll want to play around with these some, but this is what worked well for me:

    .smapp-show { 
      width:50%; 
    }
    .smapp-show .slide { 
      overflow-y:visible; 
    }
    .smapp-map { 
      margin:10px; 
      width:48%; 
      height:95%; 
      position:absolute; 
      top:0; 
      right:0; 
    }

Slidemapper changes

On the slidemapper side of things, the only edit we need to make is changing the options of our slideshow. Specifically, we need to edit the slideHeight and mapHeight to something appropriate for having the slides beside the map. For example, I chose:

    $mySlideMap = $('#slideshow-container').slideMapper({
      slideHeight: 540,
      mapHeight: '98%'
    });

And that's all the changes you need to make to have a side-by-side slideshow in slidemapper! The full code is available as a gist.

References

• https://github.com/cavis/slidemapper

Link to Another Slide in Leaflet Slidemapper

The slidemapper plugin for Leaflet is very useful, but when building large slideshows, it can be annoying that there is no easy way to link to specific slides. For example, you might want to create a table of contents or link from the last slide back to the first. Fortunately, there's a way to move to specific slides, instead of just advancing or moving back by 1. We'll use jQuery to do this. We already have jQuery loaded for slidemapper.

Specify Where Links Will Go

After the $mySlideMap code in your html file, you can create a list of links that you will later add to the slides. Generally, this will be the last thing in the <script> tag at the end of the body.

For example, in the sample code from the slidemapper example, the <script> initially contains:

    $mySlideMap = $('#slideshow-container')
    .slideMapper();

    $mySlideMap.slideMapper('add', EXAMPLEDATA);

At the end of the script, let's add a link to the first slide and a link to the last slide. The jQuery we use allows any code with a specific class to be transformed into a link. We can combine that with the slidemapper move method to create links to specific slides.

    $('.toc').click(function() {
      $mySlideMap.slideMapper('move', 0, true);
    });

    $('.end').click(function() {
      $mySlideMap.slideMapper('move', EXAMPLEDATA.length - 1, true);
    });

Add the Links

Next, we need to actually include the links in the slides. The links references will go in the data file. In the example, the file is named data.js.

Here's a link to the last slide from the first slide:

  // intro marker
  {
    icon: 'other.png',
    marker: [42.516846, -70.898499],
    center: [40.423, -98.7372],
    html: '<table style="margin:0 40px; padding:10px"><tr>' +
            '<td><img src="http://placehold.it/300x180&text=Map+Stuff"/></td>' +
            '<td style="padding-left:10px">' +
              '<h1>SlideMapper FTW!</h1>' +
              '<p>This is a demo of the different sorts of slides you can setup using slidemapper.</p>' +
              '<p><a class="end">Skip to the end.</a></p>' +
            '</td>' +
          '</tr></table>',
    popup: 'So it begins!'
  },

And here's a link from the last slide to the first slide:

  // empty slide
  {
    html: '<div style="margin:0 40px; padding:20px 10px">' +
            '<div>' +
              '<h2>The End</h2>' +
              '<p>Goodbye.</p>' +
              '<p><a class="toc">Return to Table of Contents.</a></p>' +
            '</div>' +
          '</div>'
  }

Prettifying

Because of the unusual way these links are made using jQuery, we should probably add some css to make them look like links. I added the following css to the <head>, but you can add any css to the head or as a separate stylesheet.

  <style type="text/css">
    a {
      color: orange;
      cursor: pointer;
      text-decoration: underline;
    }
  </style>

Here's an example of a link from one slide to another

And now you have an easy way to navigate through a long slidemapper deck. You could even create a table of contents at the beginning and then link back to that from each slide.

The full code is available in a gist.

References

• http://stackoverflow.com/questions/950087/how-to-include-a-javascript-file-in-another-javascript-file
• https://github.com/cavis/slidemapper#methods