Information and Resources

User Tools

Site Tools


JournalMap API Pagination with Dynamic Point Loading

This example is a derivative of the previous JournalMap API Pagination Example. The difference here is that the points are loaded onto the map as each page is read from the API rather than waiting for all pages to be loaded first. As a result you see the map constantly update as more points are added. It's kind of a cool way of showing progress without relying on the “spinning wheel”. For this simple example, the map points are populated with only the article title and the link back to JournalMap for that article. This example is also simpler in that it uses only D3.js, Leaflet, and the Leaflet Marker Cluster plugin.

Article Locations for Journal of Arid Environments

Change publication:

Steps for creating the example

To see the full script put together, see our example on GitHub.

Modifying the buildMap function

The code for this example is pretty much the same as the JournalMap API Pagination Example except for two things:

  1. References for queue.js and spin.js were removed and the HTML blocks and styles for the spinner aren't needed.
  2. The buildMap function is different.

The new buildMap code is below. Notice that we construct a new marker layer before calling the API pages. We also assemble and add the markers to the marker layer and then add the marker layer to the map after reading each page.

function buildMap (id) {
	d3.xhr(""+apikey+"&page=1&publication_id="+id+"&version=1.0", function(error,pubjson) {
			var pages = pubjson.getResponseHeader('X-Pages');
			var articles = [];
			markers = L.markerClusterGroup();  // Empty out the markers if they exist already
			for(page=1;page<=pages;page++) {
				d3.json(""+apikey+"&page="+page+"&publication_id="+id+"&version=1.0", function(error,articles) {
					// Assemble the markers for the map
					for (i=0;i<articles.length;i++) {
						var article = articles[i];
						var locations = articles[i].locations;
						for (j=0;j<locations.length;j++) {
							var marker = L.marker([locations[j].latitude,locations[j].longitude]);
							marker.bindPopup("<strong><a href='""/' target='_blank'>"+article.title+"</a></strong>"); 
				});  // Close d3.json
		}  // Close iteration over API pages
	}); // Close d3.xhr
};  // Close buildMap function
api/pagination_dynamic_load.txt · Last modified: 2015/01/21 08:52 by jkarl


JournalMap data is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
Creative Commons License