ArcGIS API for JavaScript 1

Introduction:

The purpose of this activity was for me to learn how to utilize the ArcGIS JavaScript API to embed GIS services into any website. I used these services to create interactive maps featuring pop-up information, and routing services.

Methods:

Part 1: Creating a basic Web GIS mapping app

In order to create and style the first map page, I imported Esri's Dojo Dijit "claro" stylesheet, and the Esri stylesheet for web maps immediately below my basic meta tags (Figure 1). The Dijit themes establish how the map is going to look in the browser.

Figure 1: Basic HTML code with stylesheet references.

After importing the dijit theme, I wrote a CSS style for the web map extent (Figure 2).

Figure 2: Web map extent CSS.

Next I used a <script> tag to reference the ArcGIS JavaScript API (Figure 3). This allows my HTML page to implement the API.

Figure 3: Referencing the ArcGIS JavaScript API

After referencing the API, I created the body of the document, referencing claro, and creating the web map extent (Figure 4).

Figure 4: Creating the web map extent and referencing claro.

Next, I wrote JavaScript code to implement the web app. I created a new map, with a center coordinate just east of the US, and with a zoom level that shows most of the world (Figure 5, 6).

Figure 5: The JavaScript code to create a map.

Figure 6: The newly created map!

Part 2: Build a Web GIS app with operational layer functionality

In the next portion of the lab, I created a map of San Francisco, CA with pop-up windows showing tree species (Figure 7).

Figure 7: Trees of San Francisco, California.

I coded the pop-up windows, so that they would link the end-user to the wikipedia page related to each tree species (Figure 8).

Figure 8: The JavaScript code for the pop-up window.

I then adjusted the HTML, so that the extent would be centered on downtown Eau Claire, Wisconsin. I used a feature service of the schools, and created pop-up windows to show the name, elevation, and address of every school (Figure 9).

Figure 9: The pop-up window

Part 3: Developing a simple routing application

In the final portion of the lab, I created a routing application centered around downtown Eau Claire, but with the capability to route anywhere in the U.S.A.. In order to do so, I first created an HTML page with a viewport tag, so it will be responsive on iOS devices. Next, I referenced both the "esri" and the claro stylesheets, as well as the ArcGIS API for JavaScript.

After saving my HTML, I created used JavaScript to create a new map, and calibrated it to center in on downtown Eau Claire. Next, I referenced the network service from Esri's servers. I then added arguments to solve the task, symbolize the map, add stops to the map, show the route, and send an error message to the end-user if they demand an erroneous route. After finishing the JavaScript, I referenced it in the HTML, and added text to describe the app to the end-user.

Results:

The first map runs completely in the browser, without any additional plug-ins.

Figure 10: The first map, as viewed on an iPhone.
Notice how the zoom tool is barely visible,
this makes it impossible to click with a finger. 

The second map features pop-up windows, a scalebar for reference, and "viewport" tags to adjust the scaling of the map to be operable on iPhones (Figure 11).

Figure 11: The second map, as viewed on an iPhone.
The viewport tag resized the zoom tool to fit the screen.

The third map performs simple routing while embedded in an HTML page, with "viewport" tags to adjust scaling for iOS devices (Figure 12).

Figure 12: The third map, as viewed on an iPhone.

The viewport tag for HTML is truly a very useful tool, as it helps make the app more responsive on iOS devices (Figure 13).

Figure 13: The viewport tag.

Map One
Map Two
Map Three




Sources:
EC_Schools feature class was obtained from MapCruzin.com at
http://www.mapcruzin.com/geographic-names-shapefiles/#School
EC_Schools_Address was assembled by GEOG 455 class, fall 2013.
Widget_infowindow files were provided by Esri at
https://developers.arcgis.com/javascript/jssamples.html

Learning HTML, CSS and JavaScript

Goals:

This lab was to introduce the basics of creating an HTML page, styling it with CSS, and including JavaScript enabled features. The goal of this lab was to build coding confidence so I could build my own webpage. Later, I will use these skills to make web pages with ArcGIS API for JavaScript.

Methods:

Part 1: Developing a web page using HTML tags

In order to learn the basics of creating a webpage, we started with HTML. In order to create an HTML page, first you need to declare the document type at the top of the page, with <!DOCTYPE html>. After declaring the document type, all further code must be written between the tags <html> and </html>. The name shown at the top of your browser is called the title, and it is set by the <title> tags inside the <head> tags (Figure 1, 2).

Figure 1: The document type, <html> tag, and title.

Figure 2: The title, as it appears in google chrome.

Next, the body of the document is created between the <body> and </body> tags. I used a <div> tag with the id="header" to create a subdivision called "header" within the body text. Within the header I used varying levels of header tags from <h1> to <h3> to write important information in the heading of my website (Figures 3, 4).

Figure 3: My header text.

Figure 4: Examples of the varying header options
using taxonomic levels as an example.

After creating the headers, I make an unordered list of my hobbies, using the unordered list tag <ul>, and the list item <li> tags. I used the <strong> tag to bold the text "these are my hobbies" within its own paragraph made with the <p> tags.

Figure 5: Code for the unordered list.

Figure 6: The result of the code in Figure 5.
Note how <strong> formatted "These are my hobbies"

Part 2: Styling your web page with the use of CSS

Cascading Style Sheets (CSS) is how html pages are customized to be more aesthetically appealing. CSS allows the customization of background colors, margin sizes, text colors, fonts, and borders. CSS works with html by utilizing <div> id's. If I wanted to change the styling for the area holding most of my text, I would use put it within the  <div id="main"> my html code. In CSS, I would write the styling code within #main { } to have it link to the div id I placed in the html (Figure 7).

Figure 7: The CSS for my webpage.

Next, I wrote a form to receive sentences as inputs from viewers to the webpage (Figures 8,9).

Figure 8: Code for the input window.

Figure 9: The resulting input window.

After coding the form, I wrote code for a results box showing some JavaScript code I wrote, and added an image of a map I created as part of an earlier lab.

Figure 10: The image with the results box above it.

Part 3: Introduction to JavaScript

To gain a basic understanding of JavaScript, I created results to fill the box described in Part 2. The code first had to find where it was to place the answers, then create a paragraph. After creating the paragraph, it was to create a string of text to put inside the paragraph. After placing the new text in the paragraph, it put the new paragraph inside the div tagged "resultsBox".

Figure 11: The JavaScript Code, and the results above it.

Results:

After learning the basics of HTML, CSS and JavaScript, I was to make my own webpage. The webpage needed to have the following features:

• The name of your proposed company and other relevant information
• Company Logo.
• Links to resources that will be useful to your end-users.
• Links to the Web GIS application you developed in Lab 3 and two non-secured Web GIS applications from Esri JavScript website.
• An ordered list of six services that your company will be delivering. These services should be highlighted with a catchy color other than black.
• A form that will enable end-users to search your website and company services
• At least two pictures that are of importance to your proposed company.

Here's the resulting web site:

Figure 12: Website part 1

Figure 13: Website part 2

Figure 14: Website part 3

Sources:
Code abstracted from Sylia Richardson of Creative Commons Attribution-ShareAlike 3.0 Unported License

Web AppBuilder for ArcGIS

Goal and Background:

This exercise was designed to build familiarity with the Web AppBuilder for ArcGIS. In order become acquainted with the software, I created an application with services I had authored, customized widgets, and deployed the finished application to the development Server. We used both the Integrated and Developer Editions of Web AppBuilder to create apps.

Methods:

In order to create the first web app, I used the Integrated Edition of Web AppBuilder through ArcGIS Online. The first step of creating the app was for me to select a web map on which to base the app. After adding the web map and setting the extent, I choose to base my app off of the foldable theme. I added the Basemap Gallery and the measurement widgets without any customization. Next, I added the bookmark widget, and added customized bookmarks for each of the following regions: Western States, Eastern States, Southeastern States, Northeastern States, and Alaska.

The first web app had now reached a rudimentary level, but further customization was necessary to truly enhance its capabilities. The first step of this customization was to add and configure the chart widget to create charts of either magnitude or depth. The chart widget was further configured so it only created charts of earthquake occurrences within user-defined areas. I next added and configured the query widget, so earthquake occurrence points can be selected by magnitude, year, and location. I also added the draw widget.

To further customize the app, I imported the app into the Developer Edition of Web AppBuilder. I added a custom widget "Batch Attribute Editor" to Web AppBuilder by pasting it in the program's "widgets" folder in the C: drive. Next, I added the Batch Attribute Editor widget and customized it to only allow edits of the "Earthquakes" layer.

Deploying the app to the development server was a simple process requiring me to download the completed app from the Web AppBuilder as a zipped folder, unzipping the folder, and pasting the unzipped app folder to my folder in the development server.

Results:

The First Map, features several widgets. The Basemap Gallery widget grants the end-user the ability to choose from a selection of basemaps hosted by Esri (Figure 1). The measurement widget allows for the end-user to measure Euclidean distances and areas on the map (Figure 2). My customized bookmark widget allows the user to center the extent on a certain region of interest at the click of a button, without needing to try and pan and zoom using the built-in controls (Figure 3). The chart widget enables the end-user to select an area of interest and charts either the earthquake's magnitude or depth (km), per the user's choice (Figure 4). The query widget allows the end-user to investigate earthquake occurrences within specific states, excluding those below a user-defined magnitude and outside of a user-defined span of time (Figure 5). The draw widget allows the end-user to draw on the map viewer, and works as an expanded version of the measure tool (Figure 6).

The Second Map features the "Batch Attribute Editor", a tool that allows the end-user to edit the names of features within a user specified area (Figure 7). This tool will allow for crowd-sourcing of more specific names than the general area names the have features currently.

Figure 1: Basemap Gallery Widget

Figure 2: Measurement Widget

Figure 3: Bookmark Widget

Figure 4: Chart Widget

Figure 5: Query Widget

Figure 6: Draw Widget

Figure 7: Batch Attribute Editor Widget

Sources:
Fu, Pinde (2015). HERE, Census at:
\\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Earthquakes, courtesy of USGS National Atlas.
\\EsriPress\GTKWebGIS\Chapter3\Data.gdb\Hurricanes, courtesy of NOAA National Climatic
Data Center.