jQuery / REST - Generate HTML Page

BrianO_keefe · ‎05-01-2015

Example

User visits a web page called 'Parks List'. A list of Parks is populated from the REST service with the name of each Park as an HTML Link that goes to the ParksFinder map TO THAT PARK.

Question

Let's assume that I have the ParksFinder application running and going smooth. We developed the Feature ID field to be the first 3 letters in the name of the Park, a hyphen, and the first 3 digits in the address.

For instance, Darlington Park is located at 5179 East 29th Street South.

The Feature ID for Darlington Park is Dar-517.

The URL that jumps you DIRECTLY to that Park is: http://maps.cityoftulsa.org/parksfinder/?selectedFeatureID=Dar-517

These are all things pulled from the REST service which is located at:

http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/MapServer/0

Current Test

I have a tiny amount of experience with jQuery and REST. Other than my work with WAB, it is actually very little. Enough that this is going over my head right now. So I went out to get some working samples of REST with jQuery to see if I couldn't hobble together a basic concept. Here is what I have (that doesn't work) at the moment.

// hello.js
// MapServer: http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/MapServer/0
// Feature Servcer: http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/FeatureServer/0
$(document).ready(function() {
    $.ajax({
        url: "http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/MapServer/0"
    }).then(function(data) {
       $('.greeting-id').append(data.name);
    });
});

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Hello jQuery</title>
        <script src="../../js/jquery-1.11.2.min.js"></script>
        <script src="hello.js"></script>
    </head>


    <body>
        <div>
            <p class="greeting-id">The Park name is </p>
        </div>
    </body>
</html>

It's not doing anything. I can't tell if I need to pass a query? And if so, what would that query be? (1=1) or something similar? How should I format it best? I feel like if I am going to populate a page with ALL 100+ Parks from our ArcGIS Server that I need to reformat my jQuery, but I'm not 100% sure how.

I shouldn't have to worry about cross-domain scripting because this is on the same server as all our webmaps.

http://maps.cityoftulsa.org/jsdev/RESTTEST/

Confused but hopeful. There are a plethora of pages on our City site that would benefit GREATLY from something like this.

Any help would be greatly appreciated.

BrianO_keefe · ‎05-01-2015

Robert,

Thank you for the suggestion. It didn't work. I would dig into it and try to figure it out but before I saw your post I already figured it out. Here is how...

Solution

$(document).ready(function() 
{
    $.ajax ( {
  type: 'GET',
  url: 'http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/FeatureServer/0/query?where=1%3D1&objectIds...',
  data: { get_param: 'value' },
  dataType: 'json',
  success: function (data) { $.each( data.features, function(index, element) {
  $('body').append($('<div><a href="http://maps.cityoftulsa.org/parksfinder/?selectedFeatureID=' + element.attributes.FACILITYID + '">' + element.attributes.NAME + '</a></div>') );  } ); } } );
});

Working Example

I don't know how long this will sit here, as this is my 'playground,' but if you want to see it in action, here you go!

City of Tulsa Master Park List

Purpose

I work on a 'Map Book' for our Fire Department. But because it was developed years ago, before we even HAD ESRI, it is a fairly manual process with interspersed Map Info tools. My boss is the only person with Map Info fluency. So basically, when a new Apartment (for instance) is built I have to acquire the conceptual plans showing building layout, etc. Then I open Microsoft Visio and trace the drawings showing the layout for each building and paving, etc. Once completed I have to save as PDF whereupon I then save a copy to the Apartments folder using the naming convention of "Apartment Name - Address.pdf" and then I save to the ApartmentsByNumber folder where I use the naming convention of "#APARTMENTNUMBER.pdf" But this isn't the end. I then have to edit a webpage document that is split amongst 4 different HTML files in order to support whatever Microsoft product built the original HTML page. ONE of those HTML documents has the LIST of PDF files with links to each file. I then have to create a new entry and enter the basic details of the Apartment I just created... THEN I have to go to ESRI and drop a dot on a map and update the DB.

Needless to say, this is a MASSIVE waste of time since we have ArcMAP and ArcServer with Web Map capabilities.

My goal is to just put the basic information necessary for each apartment INTO the Local Government Model in ESRI. Come up with a data-driven map book concept for the Apartments (based on the ReferenceData dataset). Thereby as I convert all of these Visio / PDF monstrosities into the LGM I can then create an HTML page on our Intranet (or whatever) for the Fire Department listing out ALL Apartments on a page directly from the REST service and providing them links to each Apartment.

Either way, I like bunny trails like this because it let's me build something that does more than just fix this one problem, it allows me to create useful tools in MULTIPLE places. Now if I can just figure out how to get this Javascript code into a Google Spreadsheet... hmmmmm

View solution in original post

RobertScheitlin__GISP · ‎05-01-2015

Brain,

Try this for the hello.js:

// hello.js
// MapServer: http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/MapServer/0
// Feature Servcer: http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/FeatureServer/0
$(document).ready(function () {
  $.ajax({
    url: "http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/MapServer/0/query?where=1%3D1&outFields=NAM..."
  }).then(function (data) {

    var rslts = $.parseJSON(data);
    console.info(rslts.displayFieldName);
    $.each(rslts.features, function(i, item) {
      $('.greeting-id').append('<br>' + item.attributes.NAME );
    });
  });
});

BrianO_keefe · ‎05-01-2015

Robert,

Thank you for the suggestion. It didn't work. I would dig into it and try to figure it out but before I saw your post I already figured it out. Here is how...

Solution

$(document).ready(function() 
{
    $.ajax ( {
  type: 'GET',
  url: 'http://maps.cityoftulsa.org/gis/rest/services/LGDM/Parks/FeatureServer/0/query?where=1%3D1&objectIds...',
  data: { get_param: 'value' },
  dataType: 'json',
  success: function (data) { $.each( data.features, function(index, element) {
  $('body').append($('<div><a href="http://maps.cityoftulsa.org/parksfinder/?selectedFeatureID=' + element.attributes.FACILITYID + '">' + element.attributes.NAME + '</a></div>') );  } ); } } );
});

Working Example

I don't know how long this will sit here, as this is my 'playground,' but if you want to see it in action, here you go!

City of Tulsa Master Park List

Purpose

I work on a 'Map Book' for our Fire Department. But because it was developed years ago, before we even HAD ESRI, it is a fairly manual process with interspersed Map Info tools. My boss is the only person with Map Info fluency. So basically, when a new Apartment (for instance) is built I have to acquire the conceptual plans showing building layout, etc. Then I open Microsoft Visio and trace the drawings showing the layout for each building and paving, etc. Once completed I have to save as PDF whereupon I then save a copy to the Apartments folder using the naming convention of "Apartment Name - Address.pdf" and then I save to the ApartmentsByNumber folder where I use the naming convention of "#APARTMENTNUMBER.pdf" But this isn't the end. I then have to edit a webpage document that is split amongst 4 different HTML files in order to support whatever Microsoft product built the original HTML page. ONE of those HTML documents has the LIST of PDF files with links to each file. I then have to create a new entry and enter the basic details of the Apartment I just created... THEN I have to go to ESRI and drop a dot on a map and update the DB.

Needless to say, this is a MASSIVE waste of time since we have ArcMAP and ArcServer with Web Map capabilities.

My goal is to just put the basic information necessary for each apartment INTO the Local Government Model in ESRI. Come up with a data-driven map book concept for the Apartments (based on the ReferenceData dataset). Thereby as I convert all of these Visio / PDF monstrosities into the LGM I can then create an HTML page on our Intranet (or whatever) for the Fire Department listing out ALL Apartments on a page directly from the REST service and providing them links to each Apartment.

Either way, I like bunny trails like this because it let's me build something that does more than just fix this one problem, it allows me to create useful tools in MULTIPLE places. Now if I can just figure out how to get this Javascript code into a Google Spreadsheet... hmmmmm

RobertScheitlin__GISP · ‎05-01-2015

Brain,

Strange that the code I provided did not work for you. When I tested it, it made a list of parks like yours (although I did not go through the trouble of doing the hyperlinks part). Anyway glad you figured it out.

BrianO_keefe · ‎05-01-2015

Could the versions of jQuery matter? I had the newest MINIFIED version? Maybe there was an issue? Because it flatout did nothing...

RobertScheitlin__GISP · ‎05-01-2015

Brain,

Not sure. Here is the html I used.

<!DOCTYPE html>

<html>

<head>

<title>Hello jQuery</title>

</head>

<body>

<div>

</div>

</body>

</html>