Robert,
I did get the updated plugin from github!! and thankr for showing me how to get the countries based on the button clicked on. I have been playing with it so I can understand what you did.
The next question I have is: How do I add the results of rquery.run(error, response,raw ) to my map (i,e display the countries to my map).
Do I wrap the queries like so:
countries = new L.esri.featureLayer(featureURL,
{
query statements and execution goes here
}.addTo(map)
See the file relatedtab3.html attached to the original post
Thanks
Solved! Go to Solution.
Chris,
I think this is what you are looking for then:
function highlightFeature(e)
{
var layer = e.target;
layer.setStyle(
{
weight: 2,
color: 'red',
fillOpacity: 0.5
});
if (!L.Browser.ie && !L.Browser.opera)
{
layer.bringToFront();
}
$('#sidecol').empty();
$('#sidecol').html('<center>'+layer.feature.properties.NAME + '</center><br>');
var xquery = L.esri.Tasks.query(featureURL).where("OBJECTID like '" + layer.feature.properties.OBJECTID + "'");
var rxquery = L.esri.Tasks.queryRelated(featureURL).relationshipId("0");
xquery.ids(function(error, ids, response){
rxquery.objectIds([ids.join(',')]);
rxquery.run(function(error, featureCollection, response){
console.log(featureCollection.features);
data = featureCollection.features
for (var i = 0; i < data.length; i++){
if (data.properties && data.properties.hyperlink && buttonType.value == buttonPicked){
$('#sidecol').append("<b>Abstract:</b> " + data.properties.abstract + "<br>"
+ "<b>Description:</b> " + data.properties.description + "<br>"
+ "<b>Development Goals</b> " + data.properties.dev_goal + "<br>"
+ "<b>Audience:</b> " + data.properties.audience + "<br>");
$('#sidecol').append("<b>Map Title:</b> " + data.properties.title + "<br>"
+ "<b>hyperlink: </b><a href =' " + data.properties.hyperlink + " ' target= _blank>click here </a> <br></p>");
}
}
if (data.properties && !data.properties.hyperlink){
$('#sidecol').empty();
}
});
});
} //hghlghtFeature
Joe,
Here is a sample:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<html>
<head>
<title>ICGC WEB MAP</title>
<!-- leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.ie.css" />
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.3/esri-leaflet.js"></script>
<script src="js/esri-leaflet-related.js"></script>
<!-- script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script -->
<!--<script src="../js/basemap.js"></script>
<script src="../js/buttonPick.js"></script>-->
<script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script src="http://fgnass.github.io/spin.js/jquery.spin.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/ebrelsford/Leaflet.loading/master/src/Control.Loading.css" />
<script src="https://rawgithub.com/ebrelsford/Leaflet.loading/master/src/Control.Loading.js"></script>
<style>
body
{
margin:0;
padding:0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#sidecol{
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 300px; /*Width of frame div*/
height: 100%;
overflow: auto;
background: #686868;
color: white;
border-left-width: thick;
border-left-color: white;
border-left-style:solid;
}
#map{
position: fixed;
top: 35px;
left: 0;
right: 305px; /*Set right value to WidthOfFrameDiv*/
bottom: 0;
overflow: hidden;
background: #fff;
}
#topsection{
position: absolute;
top: 0;
left: 0;
right: 305px; /*Set right value to WidthOfFrameDiv*/
background: #EAEAEA;
height: 35px; /*Height of top section*/
}
.innertube{
margin: 7px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
</style>
<script>
$(document).ready(function()
{
//basemap();
//buttonPick(map);
}); //end of ready
</script>
</head>
<body>
<div name="container" id="container">
<div id="topsection">
<div class="innertube">
<button type="button" class="btn btn-default" id="NSM" value="NSM">News</button>
<button type="button" class="btn btn-default" id="SDG" value="SDG">SDG Status</button>
<button type="button" class="btn btn-default" id="CMP" value ="CMP">City Models/Plans</button>
<button type="button" class="btn btn-default" id="CSM" value ="CSM">Story Maps</button>
<button type="button" class="btn btn-default" id="EDU" value ="EDU">Educational Games</button>
<button type="button" class="btn btn-default" id="USR" value ="USR">User Submitted</button>
<button type="button" class="btn btn-default" id="OPM" value ="OPM">Project Map</button>
</div>
</div>
<div id="map"></div>
<div id="sidecol">
<div id="sidecolcontent" class="innertube">SIDE PANEL</div>
</div>
</div>
<script>
var countries;
var admin;
var buttonPicked;
var buttonType;
var data = {}, key = [], value= [];
var map = L.map('map',{minZoom: 2}).setView([11.505, -0.09], 2);
var loadingControl = L.Control.loading({
spinjs: true
});
map.addControl(loadingControl);
L.esri.basemapLayer("Topographic").addTo(map);
var tileURL = 'https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png'
var featureURL = "http://dev.consciousglobalchange.org/arcgis/rest/services/MEP/webmap_catalog/FeatureServer/0"
var tableURL = "http://dev.consciousglobalchange.org/arcgis/rest/services/MEP/webmap_catalog/FeatureServer/1";
L.tileLayer(tileURL,
{
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>'
}).addTo(map);
cntrycodes = new L.esri.featureLayer(tableURL, {}).addTo(map);
$('#NSM').click(function(evt){
//$('#sidecolcontent').empty();
$('#sidecolcontent').html('Querying News...');
buttonPicked = 'NSM';
buttonType = document.getElementById('NSM');
var query = L.esri.Tasks.query(tableURL).where("type like '" + buttonType.value + "'");
var rquery = L.esri.Tasks.queryRelated(tableURL).relationshipId("0");
query.ids(function(error, ids, response){
rquery.objectIds([ids.join(',')]);
rquery.run(function(error, featureCollection, response){
var geojson = L.geoJson(featureCollection, {
style: function () {
return {color: 'blue'};
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.NAME);
}
}).addTo(map);
$('#sidecolcontent').html('Done');
map.fitBounds(geojson.getBounds().pad(0.5));
});
});
})
</script>
</body>
</html>
Robert,
Thanks for the assist!! I'll let know if I have any questions
Joe,
I am glad to help. If the sample I provided works then you should mark it as the correct answer.
Robert,
Thank you for the sample code!! I have made major progress but having an
issue where the info from the related table is being displayed in the side
panel when you click on the button instead of the country (line 130
function onEachFeature).
It should only be displayed when you click on the country
Any idea what I am doing wrong??
Chris
On Wed, Oct 29, 2014 at 3:18 PM, Robert Scheitlin, GISP <geonet@esri.com>
Chris,
Show me what you have so far.
Robert,
I attached the file to my previous reply
Chris,
I think this is what you are looking for then:
function highlightFeature(e)
{
var layer = e.target;
layer.setStyle(
{
weight: 2,
color: 'red',
fillOpacity: 0.5
});
if (!L.Browser.ie && !L.Browser.opera)
{
layer.bringToFront();
}
$('#sidecol').empty();
$('#sidecol').html('<center>'+layer.feature.properties.NAME + '</center><br>');
var xquery = L.esri.Tasks.query(featureURL).where("OBJECTID like '" + layer.feature.properties.OBJECTID + "'");
var rxquery = L.esri.Tasks.queryRelated(featureURL).relationshipId("0");
xquery.ids(function(error, ids, response){
rxquery.objectIds([ids.join(',')]);
rxquery.run(function(error, featureCollection, response){
console.log(featureCollection.features);
data = featureCollection.features
for (var i = 0; i < data.length; i++){
if (data.properties && data.properties.hyperlink && buttonType.value == buttonPicked){
$('#sidecol').append("<b>Abstract:</b> " + data.properties.abstract + "<br>"
+ "<b>Description:</b> " + data.properties.description + "<br>"
+ "<b>Development Goals</b> " + data.properties.dev_goal + "<br>"
+ "<b>Audience:</b> " + data.properties.audience + "<br>");
$('#sidecol').append("<b>Map Title:</b> " + data.properties.title + "<br>"
+ "<b>hyperlink: </b><a href =' " + data.properties.hyperlink + " ' target= _blank>click here </a> <br></p>");
}
}
if (data.properties && !data.properties.hyperlink){
$('#sidecol').empty();
}
});
});
} //hghlghtFeature
Thanks Robert!!
I had tried putting it in that function but got an error so I took it out. Come find out that it was as simple as adding layer. to the rxquery statement
Thanks for all your help!!
Hopefully I wont have any problems setting up the other buttons!!
On Fri, Oct 31, 2014 at 4:21 PM, Robert Scheitlin, GISP <geonet@esri.com>