Tagged with geojson

Embed Audio in Leaflet Pop-up

Here's how to embed audio in a leaflet map. This example will also show you how to embed most other HTML in a leaflet map, or how to embed audio in an HTML file.

In your map code:

function onEachAudio(feature, layer) {
    layer.bindPopup(feature.properties.name + "<br>" + feature.properties.html);
};

new L.GeoJSON.AJAX("audio.geojson", {
    onEachFeature: onEachAudio,
    pointToLayer: function(feature, latlng) {
      return L.marker(latlng, {icon: audioIcon});
    }
}).addTo(map);

And here's the geojson format where you'll include your audio HTML and the coordinates where you want to view each file:

{
    "type": "FeatureCollection",
    "features": [
    {
        "type": "Feature",
        "properties": {
            "name": "<a href='http://www.freesound.org/people/genghis%20attenborough/sounds/212798/'>Deep basement</a>",
            "html": "<p><audio width='300' height='32' src='http://www.freesound.org/data/previews/212/212798_205108-lq.mp3' controls='controls'><br />Your browser does not support the audio element.<br /></audio></p>"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-100,34]
        }
    },{
        "type": "Feature",
        "properties": {
            "name": "<a href='http://www.freesound.org/people/John%20Sipos/sounds/125696/'>Atlantis docks then lands.</a>",
            "html": "<p><audio width='300' height='32' src='http://www.freesound.org/data/previews/125/125696_593024-lq.mp3' controls='controls'><br />Your browser does not support the audio element.<br /></audio></p>"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-84,40]
        }
    }
    ]
}

Just substitute in the address of your audio files for the sample files above in the "html" property of the geojson features.

Example Leaflet map with audio

The full code is available in a gist.

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) {
    L.geoJson(cities).addTo(map);
})

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});
            }
        }
    }).addTo(map);
})

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 , , , , , ,