User Tools

Site Tools


playground:playground

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Last revision Both sides next revision
playground:playground [2014/12/09 13:03]
jasonkarl
playground:playground [2014/12/10 16:32]
jasonkarl
Line 1: Line 1:
 ==== test2 ==== ==== test2 ====
 +
 +<​PRELOAD>​
 +  http://​ajax.googleapis.com/​ajax/​libs/​jquery/​1.6.4/​jquery.min.js?​ver=1.4.2
 +  http://​cdn.leafletjs.com/​leaflet-0.7.3/​leaflet.js
 +  http://​cdn.leafletjs.com/​leaflet-0.7.3/​leaflet.css
 +  http://​leaflet.github.io/​Leaflet.markercluster/​dist/​MarkerCluster.css
 +  http://​leaflet.github.io/​Leaflet.markercluster/​dist/​MarkerCluster.Default.css
 +  http://​leaflet.github.io/​Leaflet.markercluster/​dist/​leaflet.markercluster-src.js
 +  https://​rawgit.com/​JournalMap/​API_examples/​master/​jmap_widget.js
 +</​PRELOAD>​
  
 <​HTML>​ <​HTML>​
-<​code>​ 
-//// 
-//// 
-// 
-// 
-// 
-//// 
-</​code>​ 
- 
 <div id="​jmap"​ style="​height:​500px;​ width:​600px"​ ></​div>​ <div id="​jmap"​ style="​height:​500px;​ width:​600px"​ ></​div>​
-<​code>​ +</HTML>
-<​script>​ +
- var collectionID = 2; +
- var centerLat = 42; +
- var centerLon = -100; +
- var Zoom = 3; +
- +
- var buildCitation = function(title,​authors,​year,​journal,​vol,​iss,​spage,​epage) { +
- authorlist = '';​ +
- for (i = 0; i <​authors.length;​ i++) { +
- if (i===0) { +
- var sep = '';​ +
- } else if (i===(authors.length-1)) { +
- sep = ' and '; +
- } else { +
- sep = ', '; +
-+
- authorlist += sep+authors[i];​ +
-+
- return(authorlist+'​ '​+year+'​. '​+title+'​. '​+'<​em>'​+journal+'​</em>'​);​ +
- }; +
-</​code>​ +
- +
-<​code>​ +
- var buildDOIlink = function(doi) { +
- return('<​a href="​http://​dx.doi.org/'​+doi+'"​ target="​_blank">'​+doi+'</​a>'​);​ +
- }; +
-</​code>​ +
- +
-<​code>​ +
- $(document).ready(function() { +
-   ​ $.getJSON("​http://​www.journalmap.org/​api/​collections/"​+collectionID+"​.json?​key=aKesQixBxBcyA4SaucuD&​version=1.0",​function(collection){ +
-  var title = collection.title;​ +
-  var description = collection.description;​ +
-  var intro = collection.intro;​ +
-  $("#​jmap"​).before("<​h3>"​+title+"</​h3><​em>"​+intro+"</​em>"​);​ +
- }); +
- +
- var map = L.map('​jmap'​).setView([centerLat,​ centerLon], Zoom); +
- maplink = '<a href="​http://​openstreetmap.org">​OpenStreetMap</​a>';​ +
- landlink = '<a href="​http://​thunderforest.com/">​Thunderforest</​a>';​ +
- cclink = '<a href="​http://​creativecommons.org/​licenses/​by-sa/​2.0/">​CC-BY-SA</​a>';​ +
- leaflink = '<a href="​http://​leafletjs.com">​Leaflet</​a>';​ +
- L.tileLayer('​http://​{s}.tile.thunderforest.com/​landscape/​{z}/​{x}/​{y}.png',​ { +
-</​code>​ +
- +
-maxZoom: 18, +
- +
-<​code>​ +
- }).addTo(map);​ +
- +
- var markers = L.markerClusterGroup();​ +
- +
- $.getJSON('​http://​www.journalmap.org/​api/​articles.json?​key=aKesQixBxBcyA4SaucuD&​version=1.0&​filters[collection_id][]='​+collectionID,​function(articles){ +
-  $.each(articles,​function(i,​article) { +
- authorlist = [] +
- $.each(article.authors,​function(a,​authors) { +
- authorlist[authorlist.length] = authors.last_name + ", " + authors.first_name;​ +
- }); +
-  var citation = buildCitation(article.title,​authorlist,"​9999",​article.publication.name,​article.volume,​article.issue,​article.start_page,​article.end_page);​ +
-  $.each(article.locations,​function(j,​loc) { +
-  //​console.log(loc.latitude);​ +
-  var marker = L.marker([loc.latitude,​loc.longitude]);​ +
-  marker.bindPopup("<​strong>"​+article.title+"</​strong><​p>"​+citation+"<​p><​strong>​DOI:​ </​strong>"​+buildDOIlink(article.doi));​ +
-  markers.addLayer(marker);​ +
-  }); +
-  }); +
-  map.addLayer(markers);​ +
-  }); +
- +
- //​map.attributionControl.setPrefix('<​a href="​http://​www.journalmap.org"><​img src="​jmap_logo.png"​ width="​100px"></​a>'​);​ +
- map.attributionControl.addAttribution('​Maps © '​+landlink+',​ Data © '​+maplink+',​ '​+cclink+'​ | <a href="​http://​www.journalmap.org">​JournalMap</​a>​ data provided CC-BY-SA'​);​ +
-</​code>​ +
- +
-<​code>​ +
- $("#​jmap"​).after('<​a href="​http://​www.journalmap.org"><​img src="​jmap_logo.png"​ width="​150px"></​a>'​);​ +
-</​code>​ +
- +
-<​code>​ +
- }); +
-</code>+
  
-<code+<JS
-</​script>​ +  var apikey = '​aKesQixBxBcyA4SaucuD';​ var collectionID = 2; var centerLat = 42; var centerLon = -100; var Zoom = 3; 
-</code>+  JMap(apikey,​collectionID);​ 
 +</JS>
  
 </​HTML>​ </​HTML>​
  
playground/playground.txt · Last modified: 2014/12/10 16:38 by jasonkarl