topic Re: How to adding esri leaflet relate results to map in ArcGIS JavaScript Maps SDK Questions

How to add esri leaflet related tables results to map

joepublic — Tue, 28 Oct 2014 19:15:28 GMT

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

Re: How to adding esri leaflet relate results to map

RobertScheitlin__GISP — Tue, 28 Oct 2014 23:58:32 GMT

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 &amp; 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>

Re: How to adding esri leaflet relate results to map

joepublic — Wed, 29 Oct 2014 17:56:10 GMT

Robert,

Thanks for the assist!! I'll let know if I have any questions

Re: How to adding esri leaflet relate results to map

RobertScheitlin__GISP — Wed, 29 Oct 2014 19:16:56 GMT

Joe,

I am glad to help. If the sample I provided works then you should mark it as the correct answer.

Re: How to adding esri leaflet relate results to map

joepublic — Fri, 31 Oct 2014 14:28:34 GMT

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>

Re: How to adding esri leaflet relate results to map

RobertScheitlin__GISP — Fri, 31 Oct 2014 16:28:21 GMT

Chris,

Show me what you have so far.

Re: How to adding esri leaflet relate results to map

joepublic — Fri, 31 Oct 2014 19:50:00 GMT

Robert,

I attached the file to my previous reply

Re: How to adding esri leaflet relate results to map

RobertScheitlin__GISP — Fri, 31 Oct 2014 20:20:28 GMT

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

Re: How to adding esri leaflet relate results to map

joepublic — Fri, 31 Oct 2014 21:17:11 GMT

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>

Re: How to adding esri leaflet relate results to map

joepublic — Sat, 01 Nov 2014 17:17:49 GMT

Robert, et al

I have on issue to resolve and I'll have a working domo!!

I am trying to remove the layer if it exist when click on a button. But I

can't seem to make that happen

if(map.hasLayer(countries))

{

map.removeLayer(countries);

getStyle();

}

See attached file

Thanks

Re: How to adding esri leaflet relate results to map

RobertScheitlin__GISP — Sun, 02 Nov 2014 20:12:34 GMT

Joe,

Here is that issue fixed and some other aesthetic changes. The issue was that the countries layer is defined as global and then it was getting recreated re-var'd in search button click.

Re: How to add esri leaflet related tables results to map

joepublic — Mon, 03 Nov 2014 16:16:17 GMT

Robert,

One of the downsides of copy and pasting!! Thanks for all your help!!

Now that I have a working version, I plan to review the code to make is better

So I may have more questions

Chris