function map_add_marker(image) {
    if (map_markers.get(image.id)) {
	return;
    }
    var themarker = L.marker([image.latitude, image.longitude], {title: image.title})

    themarker.bindPopup(
        '<img'
            + ' class="thumbnail"'
            + ' title="' + image.title + '"'
            + ' src="' + image.thumb_url + '"'
            + ' width="' + image.thumb_width + '"'
            + ' height="' + image.thumb_height + '"'
            + ' onclick="zoom_gallery_item(' + "'" + image.zoom_url + "',"
                                         + "'zoom_image', event);" + '"'
            + '/>',
	{'maxWidth': image.thumb_width + 10,
	 'maxHeight': image.thumb_height + 10,
	 'autoPan': false}
    );

    themarker.addTo(map);
    image.marker = themarker;
    map_markers.set(image.id, image);
}

function map_update_markers() {
    bounds = map.getBounds();

    mapsize = map.getSize();

    // Calculate density of markers we can tolerate (using approx pixel size of markers)
    //
    xmarkers = Math.round(mapsize.x / 50)
    ymarkers = Math.round(mapsize.y / 80)

    // Get a list of images from this location
    $.ajax({
	url: "/location/search-markers",
	data: "north="+bounds.getNorth()+"&south="+bounds.getSouth()+"&west="+bounds.getWest()+"&east="+bounds.getEast()+"&xmarkers="+xmarkers+"&ymarkers="+ymarkers,
	type: "GET",
	success: function(result) {
	    visible_ids = []
	    for (const image of result.image_list) {
		visible_ids.push(image.id);
	    }
	    // Remove markers which are no longer visible. 
	    map_markers.forEach((image, id) => {
		if (!visible_ids.includes(id)) {
		    image.marker.removeFrom(map)
		    map_markers.delete(id);
		}
	    });
	    $('#marker_count').html(result.marker_count);
	    $('#image_count').html(result.image_count);
	    for (const image of result.image_list) {
		map_add_marker(image);
	    }
	}
    });
}

function update_gallery() {
    bounds = map.getBounds();

    $.ajax({
	url: "/location/gallery-reference",
	data: "north="+bounds.getNorth()+"&south="+bounds.getSouth()+"&west="+bounds.getWest()+"&east="+bounds.getEast(),
	type: "GET",
	success: function(data) {
	    const results = document.getElementById('results');
	    results.innerHTML = '';
	    const gallery = newGallery(data, results, scrollToFocus=true);
	}
    });
}

display_update_timeout = null;
function update_display() {
    // Use a delayed timer to avoid too many requests while the user is moving about.
    if (display_update_timeout) {
	x_log('Cancelling pending update');
	clearTimeout(display_update_timeout);
	display_update_timeout = null;
    }
    $('#marker_count').html('&hellip;');
    $('#image_count').html('&hellip;');
    display_update_timeout = setTimeout(function() { map_update_markers(); display_update_timeout=null;}
					,500);

    history.replaceState(null, "",
			 "/location/"
			 + "?lat="+map.getCenter().lat
			 + "&lon="+map.getCenter().lng
			 + "&zoom="+map.getZoom());
    set_map_cookie();
}

function setup_map(div_id, center_lat, center_lng, zoom) {
    map = setup_basic_map(div_id, center_lat, center_lng, zoom);
    map_markers = new Map(); // Markers are indexed by image ID

    map.on('resize', function(e) { update_display();});
    map.on('load', function(e) { update_display();});
    map.on('zoomend', function(e) { update_display();});
    map.on('moveend', function(e) { update_display();});
    update_display();
}