Skip to content

Instantly share code, notes, and snippets.

@phpmaps

phpmaps/portal-test-leaflet

Created September 14, 2015 16:52
Show Gist options
  • Save phpmaps/ece4fabdf9d1863d36e9 to your computer and use it in GitHub Desktop.
Save phpmaps/ece4fabdf9d1863d36e9 to your computer and use it in GitHub Desktop.
Download ZIP
Portal test leaflet
Raw
portal-test-leaflet
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portal Pagnation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
<script src="../../js/esri-leaflet.js"></script>
<style>
#results div{
display:block;
border: 1px solid black;
padding: 6px;
margin-bottom: 4px;
}
#sign-in-area{
margin-top:.5%;
margin-right:10%;
float:right;
}
.btn .caret {
margin-left: 10px;
}
</style>
<script>
var clientID = 'bn2zfH74dj0Vjo30';
var accessToken;
var callbacks = [];
var callbackPage = 'http://localhost/work/dev/leaflet-portal/esri-leaflet/site/build/examples/oauth/callback.html';
var callbackPageProd = 'http://esri.github.io/esri-leaflet/examples/oauth/callback.html';
var portal;
var signInButton;
var signInButtonAction;
var signInMenu;
var signInArea;
var portal;
function oauth(callback) {
if(accessToken){
callback(accessToken);
} else {
callbacks.push(callback);
window.open('https://www.arcgis.com/sharing/oauth2/authorize?client_id='+clientID+'&response_type=token&expiration=20160&redirect_uri=' + window.encodeURIComponent(callbackPage), 'oauth', 'height=400,width=600,menubar=no,location=yes,resizable=yes,scrollbars=yes,status=yes');
}
}
function updateIdentityButton(){
signInButton.removeEventListener("click", signInButtonAction);
var node = document.createElement("span");
node.className = "caret";
signInButton.innerHTML = "My Account";
signInButton.appendChild(node);
signInMenu = document.getElementById('sign-in-menu');
var a = document.createElement("a");
var textnode = document.createTextNode("Sign out");
a.appendChild(textnode);
var li = document.createElement("li");
li.appendChild(a);
signInMenu = document.createElement("ul");
signInMenu.appendChild(li);
signInMenu.className = "dropdown-menu";
signInArea = document.getElementById('sign-in-area');
signInArea.appendChild(signInMenu);
document.getElementById("header").style.display = 'block';
}
function fetchPortalItems(evt){
console.log(evt.target.text);
var start = (evt.target.text - 1) * 10
portal.query({
'token': accessToken,
'where': 'owner:doogle_startups',
'start': start,
'callback': function(error, result){
var results = document.getElementById("results");
while (results.firstChild) {
results.removeChild(results.firstChild);
}
for(i=0;i<result.results.length;i++){
var item = result.results[i];
var pre = document.createElement("pre");
var textnode = document.createTextNode(JSON.stringify(item));
pre.appendChild(textnode);
var div = document.createElement("div");
div.appendChild(pre);
results.appendChild(div);
}
}
});
}
function updatePagnationArea(totalNeeded){
var totalNeeded = totalNeeded + 1;
var pagination = document.getElementById("pagination");
for(i=1;i<totalNeeded;i++){
var node = document.createElement("a");
var textnode = document.createTextNode(i);
node.appendChild(textnode);
var li = document.createElement("li");
li.addEventListener('click', fetchPortalItems);
li.appendChild(node);
pagination.appendChild(li);
}
}
window.oauthCallback = function(token) {
updateIdentityButton();
accessToken = token;
portal = new L.esri.Portal({
'url':"https://www.arcgis.com",
'token':accessToken,
'callback': function(error, result){
document.getElementById("self").innerHTML = "<pre>" + JSON.stringify(result) + "</pre>";
}
});
portal.on('portal-loaded', function(evt){
portal.query({
'token': accessToken,
'where': 'owner:doogle_startups',
'callback': function(error, result){
console.log(result.total);
updatePagnationArea(Math.ceil(result.total / 10));
}
});
});
};
window.onload = function(){
signInButton = document.getElementById('sign-in');
signInButtonAction = function(e){
oauth();
e.preventDefault();
}
signInButton.addEventListener('click', signInButtonAction);
}
</script>
</head>
<body>
<div class="container">
<div>
<div id="sign-in-area" class="btn-group">
<button id="sign-in" class="btn btn-default btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sign in
</button>
</div>
</div>
<h2>ArcGIS Portal Query w/ Pagination using Leaflet</h2>
<p>ArcGIS Portal is great for hosting services and storing your GIS data</p>
<ul id="pagination" class="pagination">
</ul>
<div class="row" id="header" style="display:none; border-bottom:8px;">
<div class="col-sm-8" style="background-color:lavender;"><h3>Listed portal content</h3></div>
<div class="col-sm-4" style="background-color:azure;"><h3>Portal self (metadata)</h3></div>
</div>
<div class="row">
<div id="results" class="col-sm-8" style="background-color:lavender;"></div>
<div id="self" class="col-sm-4" style="background-color:azure;"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment