Example of dynamic Leaflet popups from an AJAX request

by Alex Azuero

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

// set center coordinates
var coords = [33.767675, -84.537291];

// 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);

//GeoJSON data
var data = {
    "type": "FeatureCollection",
        "features": [{
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-84.537291, 33.767675, 0]
        },
            "properties": {
            "geometry": "Point",
                "name": "Test Marker 1",
                "tumblr_id": 76591313618
        }
    }, {
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-84.556685, 33.748580, 0]
        },
            "properties": {
            "geometry": "Point",
                "name": "Test Marker 2",
                "tumblr_id": 85619913283
        }
    }]
};

//attach popups to our marker layers
function onEachMarker(feature, layer) {

    //popup creation (i.e. the important part)
    layer.on('click', function (e) {
        if (layer._popup != undefined) {
            layer.unbindPopup();
        }
            var blog_url = 'concretechronology.tumblr.com';
            var api_key = 'ZgmKvshLBADI0ChGkv33TsDXws37H47e2tZtCtRNG4SxAyB76s';
            var post_id = feature.properties.tumblr_id;
            var api_url = 'http://api.tumblr.com/v2/blog/' + blog_url + '/posts?id=' + post_id + '&api_key=' + api_key + '&callback=?';

            //display a placeholder popup
            var pop =...