Lab 6: ArcGIS API for JavaScript 2: Mobile responsive apps

Introduction:

In this lab, two mobile responsive web map applications were made using the ArcGIS API for JavaScript. These two both utilized <meta> tags in their html code to make the applications run more smoothly on mobile platforms. The first application, in its two variations (part 1 sections 1 and 2), was written so that A search bar could be used to search for senators, congressional districts, universities, or addresses and other items using ESRI's world geocoder service. The second application utilized a query to find statistics on counties in an ESRI sample Census MapServer.

Methods:

 Part 1 Section 1:

 Part 1 Section 1 utilized the lines in the below screenshot of the html document in order to make the application compatible with mobile devices.

Part 1: Compatibility Meta Tags

The html document also referenced the ESRI Claro CSS document for the template of the application, and another esri stylesheet for styling of other elements. It then created a division for both the map and the search bar, and included CSS styling directly in the html document as it was very simple.

Part 1: HTML


The JavaScript of part 1 created a new map object and a new search object. It then created a sources variable, and sources were created and then pushed to this variable. Finally, these sources were added to the search object. The code for all of this can be seen below.

Part 1: JavaScript
Part 1 Section 2:

 In this section, copies of the html and JavaScript files were made and the JavaScript was edited so that instead of senators being able to be searched, universities could be searched. To do this, one of the sources that was pushed was edited. What was changed can be seen below, in the resulting code of the change. Functionality of these two searches can be seen in the below results section of the report.

Part 1: Universities

Part 2:

HTML for this part was written first, as usual. Meta tags were used so that the content was compatible with mobile devices, then the tundra template CSS file and the esri.css file were imported for styling. The document then includes a script in the head. This script enables parsing to be completed that looks for and finds the "data-dojo-type="dijit/layout/ContentPane" line from which it creates a dijit. The html then cites the ArcGIS API for JavaScript and the JavaScript file to be created as sources, and creates divisions for many different elements that are to be created in the JavaScript file. This HTML document can be seen below.

Part 2: HTML
The JavaScript file for this part is fairly involved. The code instantiates an app, which it then initializes a basemap into. The code next get counties from a layer on the ESRI sample Census MapServer service and draws borders around them. It also highlights them using SimpleFillSymbol, and onMouseOver, it turns the highlight on, and shows information about the highlighted county. This information is created by the query that is created. This query uses a StatisticDefinition object which uses the ststistic type, field, and output name properties set to find the statistic. Later on, in the updateGauge function, this statistic is used in order to find the population percentage of the highlighted county of Milwaukee county, and that information is displayed. The JavaScript code also creates a gauge using a new function createGauge, which creates the gauge based on the inputted gdiv and start value function definition parameters. The start value is self explanatory, but the gdiv parameter is filled by a value elsewhere in the code when the function is called which finds the properties of the html division created for the gauge (with the id = "gauge") and returns them (dojo.byId("gauge")). The createGauge function then creates the new AnalogArcIndicator (the gauge) object by using the values for the division for the sizing properties of the new object. The JavaScript code is shown below.



Results:

Part 1 Sections 1 and 2:

When visiting the site created by Part 1 Section 1, the page looks like Results: Figure 1. If you click on the search symbol in the site for Section 1, then click on the dropdown menu, you are given the choices shown in Results: Figure 2. For Section 2, the choices are shown in Results: Figure 3. If you search in any different choice of dataset, there will be a dropdown menu. This is shown in Results: Figure 4. In Figures 5, 6, and 7, the results of specific searches are shown. The webpages can be found at http://webgis.uwec.edu/blouinwd/lab_6/part_1/searchapp_sec1_wb.html and
http://webgis.uwec.edu/blouinwd/lab_6/part_1/searchapp_sec2_wb.html


Results: Figure 1
Results: Figure 2
Results: Figure 3
Results: Figure 4
Results: Figure 5

Results: Figure 6

Part 2:

Results: Figure 7
In Part 2, there is a basemap, a Wisconsin counties layer drawn, and the highlighted county's population is shown in the window. The gauge shows the percentage of Milwaukee's population that specific population is. This application is shown in Results: Figure 7.

Sources:


  • Data from ESRI services
  • Directions from instructor: Dr. Cyril Wilson






Comments

Post a Comment

Popular posts from this blog

Lab 3: Web AppBuilder for ArcGIS

Image
Background: This lab focuses on building web apps using the ESRI Web AppBuilder in both of it's varieties, ArcGIS Online, and Developer Edition running on a desktop. A web app is created with ArcGIS Online that uses a web map and feature service created in past labs, then it is attempted to be imported to Web AppBuilder Developer Edition, then when it fails it is recreated on the desktop version of the software. After this is all finished, it is uploaded to a local network server where it can then be accessed via URL. Methods: Part 1: Building webGIS apps through Web AppBuilder Integrated Edition This part focuses on creating a web app for the hurricane and earthquake mapped in Lab 2. To begin, a web app was created in ArcGIS Online through the create button and the Using the Web AppBuilder option. With the   Web AppBuilder open, the Foldable theme was chosen, then on the map tab the map that was created in Lab 2 from the service published in Lab 2 was chosen. The initial e...
Read more

Lab 7: Volunteered Geographic Information

Image
Introduction: This lab introduced a workflow and skills for the creation of a very basic Volunteered Geographic Information (VGI) application that could be used by citizens of Eau Claire to collect information for the city. The information that is needed to be collected is the locations of fire hydrants and their color, green spaces and their condition, and sidewalks and their condition. This application can be viewed and edited by anyone give that they have the URL for the page. Features that are created can have images attached to aid the city's efforts. The VGI was made by publishing an enterprise geodatabase with specialized domains and subtypes to an ArcGIS server and publishing a map service with feature access enabled (feature servers created) for the document with the three feature classes. These services were then used in JavaScript code that interacted with html and CSS to create a webpage with VGI functionality. Methods: Part 1 Section 1: This section crea...
Read more