Dynamically generating Leaflet popups based on the results of an AJAX request.

This script uses the tumblr API to grab image URLs associated with features on a Leaflet map, then attaches the images to the popups for those features. The tumblr post ID for each feature is stored as a property within the GeoJSON database. Clicking on a marker for the first time initiates an AJAX/JSONP call to the tumblr API based on the post ID. From the returned JSON data, we extract the URL for the 250p thumbnail image and attach it to the marker popup. To avoid unnecessary API calls, clicking on the marker a second time will simply re-use the data returned from the first click. Though slow, this is a more resilient method than storing static URLs, because static image URLs expire as tumblr re-caches its content on different servers. More generally, this script can be a prototype for dynamically generating a Leaflet popup based on the data returned from an AJAX request.

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://makinacorpus.github.io/Leaflet.Spin/spin.js/dist/spin.min.js"></script>
<script src="http://makinacorpus.github.io/Leaflet.Spin/leaflet.spin.js"></script>
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    width:100%;
    padding:0px;
    margin:0px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}
.infopop h4 {
    font: 14px/16px Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 0 0 0px;
    color: #777;
}

JavaScript

/*
This script uses the tumblr API to grab image URLs associated with features on a Leaflet map, then attaches the images to the popups for those features. 

The tumblr post ID for each feature is stored as a property within the GeoJSON database. Clicking on a marker for the first time initiates an AJAX/JSONP call to the tumblr API based on the post ID. From the returned JSON data, we extract the URL for the 250p thumbnail image and attach it to the marker popup. To avoid unnecessary API calls, clicking on the marker a second time will simply re-use the data returned from the first click.

Though slow, this is a more resilient method than storing static URLs, because static image URLs expire as tumblr re-caches its content on different servers. 

More generally, this script can be a prototype for dynamically generating a Leaflet popup based on the data returned from an AJAX request.
*/

// set center coordinates
var coords = [34.069, -118.293];

// set default zoom level
var zoomLevel = 11;

// initialize map
var map = L.map('map').setView(coords, zoomLevel);

// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

//big ol' GeoJSON database dumped here (skip to the bottom for the code)
var stamps = {
    "type": "FeatureCollection",
        "features": [{
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-118.3322972, 34.10834904, 0]
        },
            "properties": {
            "altitude": "0",
                "geometry": "Point",
                "name": "Geo. A. Shepard, 1926",
                "description": "On the Bella Vista Way stairway, Whitley...