Interactive Example • Workshops 8 & 9

Spatial Radius Map Demo

Click anywhere on the map or adjust the coordinates below to call GET /data/:lat/:lon/:radius. Click any marker to load its metadata from GET /data/photoDescription/:pid.

City Presets

Latitude

Longitude

Radius (km) 10 km

Ready to search.

fetch(`/data/${lat}/${lon}/${radius}`)
  .then(res => res.json())
  .then(photos => {
    photos.forEach(p => {
      L.marker([p.lat, p.lon]).addTo(map);
    });
  });

$.getJSON(`/data/${lat}/${lon}/${radius}`, function(photos) {
  $.each(photos, function(i, p) {
    L.marker([p.lat, p.lon]).addTo(map);
  });
});