Wiki

Information and Resources

User Tools

Site Tools


api:pagination_example

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
api:pagination_example [2015/01/21 08:45]
jkarl
api:pagination_example [2015/01/21 08:46] (current)
jkarl
Line 99: Line 99:
 </​code>​ </​code>​
  
-==== 3. Get the list of publications to populate the dropdown box ====+==== 4. Get the list of publications to populate the dropdown box ====
 The next step is to start digging into the API and getting some data. The next block of code uses D3's JSON method to hit the publication endpoint of the API and request a list of publications. This list is then used to populate the drop-down select box with the journal names (with their article counts) and their ID numbers. Lastly, we turn event listening on for the select box and trigger the //​pubChanged//​ function when changes in the selected journal happen. The next step is to start digging into the API and getting some data. The next block of code uses D3's JSON method to hit the publication endpoint of the API and request a list of publications. This list is then used to populate the drop-down select box with the journal names (with their article counts) and their ID numbers. Lastly, we turn event listening on for the select box and trigger the //​pubChanged//​ function when changes in the selected journal happen.
  
Line 118: Line 118:
 </​code>​ </​code>​
  
-==== 4. Initialize the map ====+==== 5. Initialize the map ====
 Now it's time to set up the Leaflet map that we're going to use. The setup of the map is pretty straightforward from the Leaflet documentation. The only new twist here is that we define a new object for the heatmap layer (we'll add it to the map later on). Finally, we call the function //​buildMap//​ that will pull the data from the API and create the points for the map. Now it's time to set up the Leaflet map that we're going to use. The setup of the map is pretty straightforward from the Leaflet documentation. The only new twist here is that we define a new object for the heatmap layer (we'll add it to the map later on). Finally, we call the function //​buildMap//​ that will pull the data from the API and create the points for the map.
  
Line 133: Line 133:
 </​code>​ </​code>​
  
-==== 5. Iterate over the pages for the publication and assemble the coordinates for the map points ====+==== 6. Iterate over the pages for the publication and assemble the coordinates for the map points ====
 The //​buildMap//​ function is where all the work happens in making the map. This function takes as an argument the publication ID number. Initially this is set to 1 (for Journal of Arid Environments),​ but it gets updated if a different journal is selected from the drop-down box. Here's what's happening in this function: The //​buildMap//​ function is where all the work happens in making the map. This function takes as an argument the publication ID number. Initially this is set to 1 (for Journal of Arid Environments),​ but it gets updated if a different journal is selected from the drop-down box. Here's what's happening in this function:
   - The first thing this function does is call the articles endpoint of the API for that publication ID to get the number of pages (from the response header) that we'll need to deal with to get all the articles (37 pages for all the articles from Journal of Arid Environments). ​   - The first thing this function does is call the articles endpoint of the API for that publication ID to get the number of pages (from the response header) that we'll need to deal with to get all the articles (37 pages for all the articles from Journal of Arid Environments). ​
Line 183: Line 183:
 </​code>​ </​code>​
  
-==== 6. Define the function for responding to changing publications in the dropdown ====+==== 7. Define the function for responding to changing publications in the dropdown ====
 This last function defines what happens when the selected value from the dropdown box changes. First we get the new selected value (publication ID) and corresponding pub name. We update the header text with the new pub name. We need to remove the existing marker (point) layer and then call //​buildMap//​ with the new selected publication ID. This last function defines what happens when the selected value from the dropdown box changes. First we get the new selected value (publication ID) and corresponding pub name. We update the header text with the new pub name. We need to remove the existing marker (point) layer and then call //​buildMap//​ with the new selected publication ID.
  
api/pagination_example.txt ยท Last modified: 2015/01/21 08:46 by jkarl

FEEDBACK    DOWNLOADS    ABOUT    SUPPORT US    HELP    BLOG    WIKI

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