Tagged with jQuery

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')

$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>' +
    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>' +


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;

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.


Tagged , , , , , , ,

LWIMW3: Trail Magic

I just finished my submission for Look What I Made Weekend 3. Look What I Made Weekend (LWIMW) is a chance for people to create something over the course of 48 hours. The concept is based on Ludum Dare and other game jams, but for LWIMW you don't have to make a game. Instead, you are free to pursue any creative endeavor and show off your results at the end.

NB: The content below is mostly a reprint of my submission at LWIMW.

My project is an interactive website that will be part of the companion site to a book my friend Scott Thigpen is writing. I didn't quite start from scratch on this project. This image shows the progress I had made before the weekend. You can also view it on the web.


The other images show the current status after the weekend.

I made a lot of progress this weekend. I added GPS routes to the map, added a table of contents, added marker clustering, improved the graphic design (CSS and basemap), and added about 25% of the final content.



The only essential things I have left to do are adding the rest of the content, working with my friend on palette and graphics, and tweaking some small things.

You can view the current state of the Trail Magic site here.

Tagged , , , , ,

Import JSON Data from an External File in Leaflet

If your JSON or GeoJSON data is long, you might want to store it in a separate file to make your code more readable or to reduce repetition and allow you to access the same data file from multiple pages. You can do that with jQuery.

First, load jQuery 1.10.2 or the newest version of jQuery (2.0 onward does not support Internet Explorer 6, 7, or 8) in the header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Next, in your leaflet script at the bottom of the body, you'll need to add all your other code and your basemap, like normal, for example:

var map = L.map('map').setView([38.0740, -55], 3);

function onEachFeature(feature, layer) {
    layer.bindPopup(feature.properties.City + ", " + feature.properties.State + ", " + feature.properties.Country);

Then, you can just use jQuery to get the JSON or GeoJSON file. A simple version of this would be:

$.getJSON("cities.geoJSON", function (cities) {

But you can also add more options to your L.geoJson code, just like you would if using data stored in the HTML file. For example:

$.getJSON("cities.geoJSON", function (cities) {
    L.geoJson(cities, {
        onEachFeature: onEachFeature,
        pointToLayer: function (feature, latlng) {
            switch (feature.properties.Remember) {
                case '1': return L.marker(latlng, {icon: visitedIcon});
                case '?': return L.marker(latlng, {icon: uncertainIcon});
                case '0': return L.marker(latlng, {icon: uncertainIcon});

So just a couple lines of jQuery allow you to store your JSON or GeoJSON data in a separate file.

The example code is available in a gist and the example is viewable here.

Further Reading

Tagged , , , , , ,