Вы находитесь на странице: 1из 24

Do-It-Yourself Geo Apps MOOC

Exercise
Use JavaScript to Extend a Web App

Section 6 Exercise 1
09/2018
Do-It-Yourself Geo Apps MOOC

Use JavaScript to Extend a Web App

Instructions
Use this guide and ArcGIS Online to reproduce the results of the exercise on your own.
Note: ArcGIS Online is a dynamic mapping platform. The version that you will be using for
this course may be slightly different from the screenshots you see in the course materials.

Time to complete
Approximately 40-50 minutes

Technical note
To take advantage of the web-based technologies available in ArcGIS Online, you need to
use a fairly new version of a standard web browser, such as Google Chrome, Firefox, Safari,
or Internet Explorer. Older web browsers may not display your maps correctly.
For information on supported browsers, visit the documentation (https://bit.ly/2pIIN2T).

Introduction
As you have seen in other sections of this course, and in the lectures for this section, Esri
provides many geo app templates that do not require coding. Most of this course focuses on
those types of apps, like the various configurable app templates and app builders. These
apps provide great functionality, but they may not always meet all of your project
requirements. In such cases, a little coding to customize or extend an app can be very helpful.
You can add a little bit of code to an existing app and change its appearance or functionality,
or write a lot of code and program a brand-new app. In this exercise, you will just work with a
little bit of code as an introduction to the programming behind the app templates.
One way to use code is to use an API, or application programming interface, to extend an
existing web app. API is a term that can take many forms. The ArcGIS API for JavaScript, for
example, is a body of code and documentation that you can use to change things about your
web apps or embed functions into them. Some examples of functions are tools that perform
querying, analysis, routing, and more.
You can also can use an SDK, or software developers kit, to program new apps from code. An
interface (API) gives you ways to extend or connect applications using code. An SDK contains
everything you need to code complete software applications on a platform, including tools,
libraries, documentation, code samples, and interfaces. You will not use an SDK in this
exercise; you will only use the ArcGIS API for JavaScript.

Copyright © 2018 Esri. All rights reserved. 1


Do-It-Yourself Geo Apps MOOC

JavaScript is a popular programming language, commonly used in conjunction with HTML


and CSS to create web apps. This is client-side programming. HTML defines the content of
web pages, CSS their layout and style, and JavaScript their behavior. For example, HTML can
be used to create a button on a website, CSS can define the button's appearance, and
JavaScript can control what happens when you click the button.

We won't get into a lot of detail about HTML, CSS, and JavaScript in this exercise, but there
are many resources available for those of you who are new to web development. Look at the
Resources section at the end of the exercise if you would like to explore these topics more.
To introduce you to custom app development and the ArcGIS API for JavaScript, you will
investigate a sample web app and see the underlying code. Then, you will add some simple
HTML and JavaScript to change the displayed elements and behavior of the web page.

Part I - Guided
The exercises in Sections 2 through 6 have two parts: the Guided part, which provides step-
by-step instruction, and the Do-It-Yourself part, where you can explore further and build your
own geo apps.
In the Guided part of this exercise, you will find a sample app and use it as the basis for your
exploration. The Do-It-Yourself part contains optional stretch goals to apply what you have
learned.

Step 1: Find a sample app


a Open a new private (or incognito) web browser tab or window and go to
developers.arcgis.com.

Copyright © 2018 Esri. All rights reserved. 2


Do-It-Yourself Geo Apps MOOC

We recommend that you open a private or incognito browser window whenever you need to
work in ArcGIS Online to help prevent conflicts with your accounts.

b If necessary, sign in with your course credentials.


Note: The Section 1, Exercise 1 PDF explains how to determine your ArcGIS Online
credentials (username and password) for this course. If you have trouble signing in, you can
check the Common Questions on the Help tab, search for other students with the same issue
in the forum, or use the Have A Question form at the bottom of the Help tab.

c Below the landing image, review the links to all the different APIs and SDKs.

d Click the first icon for ArcGIS API for JavaScript.

e On the ArcGIS API for JavaScript page, click the Sample Code tab.

f On the left side of the page, in the list of code samples organized by topic, expand
Mapping And Views.

Copyright © 2018 Esri. All rights reserved. 3


Do-It-Yourself Geo Apps MOOC

g Click Load A Basic Web Map.

h On the right side, read the description below the map, and explore the map interface.

i Below the map, click Explore In The Sandbox.


You will see the HTML, CSS, and JavaScript code in the editor pane on the left and the app
preview on the right. You can use the sandbox to make edits to the code, and then click
Refresh to see the changes in the app. The app previewed is pretty basic, as it simply displays
a web map.

j Find the <body> section of the web page, which contains a <div> component.
Hint: Scroll down in the editor pane to view the <body> section.
An HTML div is just a division, or section, that acts as a container. In this case, it contains the
map component.

Copyright © 2018 Esri. All rights reserved. 4


Do-It-Yourself Geo Apps MOOC

Both the body and the div are HTML tags. Tags are keywords surrounded by angle brackets,
like this: <keyword>. They tell the browser what the content within them is and, in some cases
(like with <body> and <div> tags), how to display content. In this code, the <div> tag and its
attribute, id, is telling the browser to display the web map.

Step 2: Explore an HTML document


a At the top of the HTML page, examine the following components:

1. Metadata tags that help with web search


2. The title of the web page, which is displayed in the title frame of your app
3. Style tags for internal CSS, which is style information for elements of the web page
4. Links to external CSS stylesheets, or documents, which is another way to style different
elements of the page

This exercise will not cover CSS in depth, but if you are interested in learning more, you can
start here (https://bit.ly/1ofYbbT).

Copyright © 2018 Esri. All rights reserved. 5


Do-It-Yourself Geo Apps MOOC

b After the external CSS links, examine the <script> tags in the document.

The first script tag in the graphic above provides a reference to the location where the API can
be accessed. This reference is required so that you can use the API code along with your own
code on your HTML page. The src attribute in the script tag is the URL where the API code is
accessed.
The second script tag lists specific modules individually. Each module provides a single class
that gives a specific set of functionality to develop applications. For example, the "esri/views/
MapView" module provides the MapView class, which allows you to render web maps from
ArcGIS Online in 2D. You can find a quick tutorial on how to use the MapView class here
(https://bit.ly/2nLgAG4).
Hint: All the code you need to build the application is at the end of the online tutorial. If you
want to try the tutorial from start to finish, open up the sandbox with the finished code, delete
the code in the editor pane, and follow the tutorial from Step 1. Click Refresh every time you
want to preview the code you have written. Look to the complete code at the end of the
tutorial for guidance if you get stuck.
There is documentation on all of the classes in the API for JavaScript in the API Reference
(https://bit.ly/2mY1FLl).
Hint: Most modules have an alias, or common name, that allows you to access the module
quickly without typing in the full path. For example, you can type "MapView" in your code
rather than "esri/views/MapView." You can add any alias in the function, but it is a best
practice to use the preferred aliases. You can find out the preferred alias for a module from
the module's entry in the JavaScript API Reference. In the graphic below, the preferred alias
for the MapView module is circled.

Copyright © 2018 Esri. All rights reserved. 6


Do-It-Yourself Geo Apps MOOC

The code in the following graphic creates a WebMap instance from the ID of an existing web
map in ArcGIS Online (1) and displays that web map (2). Does anything look familiar? The
code uses the module aliases from the code above!

Item 2 in the graphic above creates a variable, named view, which uses the class MapView:

Copyright © 2018 Esri. All rights reserved. 7


Do-It-Yourself Geo Apps MOOC

var view = new MapView({


map: webmap,
container: "viewDiv"
});
If "esri/views/MapView" and the alias MapView above had not been loaded, the map would
not display.
Again, you do not need to understand everything about the code. Just know that you need to
load modules from the ArcGIS API for JavaScript in order to access that code and do things
with it in your app. If you want to know more, there are great HTML (https://bit.ly/1dFrjEb),
CSS (https://bit.ly/1ofYbbT), and JavaScript (https://bit.ly/1hlOsle) tutorials out there, as well
as specific tutorials for the ArcGIS API for JavaScript (https://bit.ly/2i11o8M) after you have
learned the basics.
Now, let's make some changes to the code to see some of the things it can do. First, you will
change the web map in your app using the web map ID.

Step 3: Change the web map in your app


The web map ID is a unique set of characters stored in ArcGIS Online that represents a web
map. When you are looking at a web map in ArcGIS Online, you can see the web map ID in
the URL, as shown in the graphic. To you, this map is the Vision Zero Safety web map, but to
computers, it is the 22ce3ec6eb784101a1d3d5b3f97efed6 web map.

You will use the sandbox to change the map from the Accidental Deaths map to the Vision
Zero Safety map using the web map ID.

a In the editor pane, navigate to line 42.

Copyright © 2018 Esri. All rights reserved. 8


Do-It-Yourself Geo Apps MOOC

Note: Depending on your line spacing, your code may appear on a different line. Look for the
web map ID, a unique identifier that contains numbers and letters:

b Delete f2e9b762544945f390ca4ac3671cfa72, and replace it with


22ce3ec6eb784101a1d3d5b3f97efed6, as shown in the graphic below:
Note: Be sure to copy only the numbers and letters, not the comma.

c Click Refresh to see your preview update.


You have now added a new web map into your app. Your screen should resemble the graphic
below.

Copyright © 2018 Esri. All rights reserved. 9


Do-It-Yourself Geo Apps MOOC

When you assigned a different web map ID property for the WebMap instance, it changed the
web map that is being rendered in the app.

Step 4: Explore the Search widget class


You have seen some examples of using classes to add functionality to your app with the
loading of the WebMap and MapView modules earlier. Each of those modules is for a class of
the same name, and the class provides a group of properties. Properties can be set to define
the behavior for an instance of the class (also referred to as an object).
In Step 3, when you changed the ID of the web map, that code was creating an object that
was of the WebMap class. The ID that controlled which web map gets displayed in the app is
one of the properties. You set that property by passing in the ID of an existing web map.

a Look at the MapView code, discussed in Step 2.

Copyright © 2018 Esri. All rights reserved. 10


Do-It-Yourself Geo Apps MOOC

The code uses the MapView class to display a web map in 2D. Both a map property and a
container property are passed to the view object (the MapView).
Here are the values passed in to those two properties:

• webmap is the object of type WebMap, created on line 40


• viewDiv is an ID selector that was defined on line 11, which basically says the MapView
will render in the entire browser space (height: 100%, width: 100%)

Now you will take a look at another class, Search.

b Open a new browser window or tab, and look at the documentation for the Search widget
(https://bit.ly/2MYihuL) in the API Reference.

Copyright © 2018 Esri. All rights reserved. 11


Do-It-Yourself Geo Apps MOOC

The Search widget would allow a user of the web app to search for an address or place using
a locator service like Esri's World Geocoding Service (https://bit.ly/1MsqCAr) (the default).

c Scroll down to the Search class' Constructors section.


A constructor is what is used to create an object and prepare it for use, often accepting
parameters. You will see that the Search class constructor takes one parameter, one or more
properties, which are optional.

Copyright © 2018 Esri. All rights reserved. 12


Do-It-Yourself Geo Apps MOOC

In the API documentation below the Constructors section for every class, you will find the
Property Overview. These sections list all the properties that can be passed to the class
referenced. You will also find a Property Details section that provides more information and
links to other resources for the properties listed in the Property Overview.

d Scroll down to the Property Overview.

If you keep scrolling, you will see a long list of properties that can be passed to objects of the
Search class. Rather than go through all of these, let's take a look at one from the Example
code.

Copyright © 2018 Esri. All rights reserved. 13


Do-It-Yourself Geo Apps MOOC

e Scroll up above the Constructors to the Example code.

Here, searchWidget is only being passed one property, view, which associates the Search
widget with a specific view. At the beginning of this step, you saw the code that created the
MapView. If you want more information about the view property, you can scroll down to the
Search class's Property Details section.
We don't need to dig any deeper into the API reference for this exercise. Just know that there
is a lot of information there, and with a little patience and experimentation, you can learn to
create some pretty amazing custom geo apps. Documentation is a developer's best friend!
Next, you will go back to the code and add the Search widget to the Load a Basic WebMap
sample app. You will use the example code from the API Reference documentation.

Step 5: Add the Search widget to the Basic WebMap sample


You will copy and paste the code that you need from the example section.

a In the Example code section, copy all of the code .

Copyright © 2018 Esri. All rights reserved. 14


Do-It-Yourself Geo Apps MOOC

b Return to the Load a Basic WebMap sample sandbox you were working in previously.
Hint: If you lost it, the instructions are in Step 1.
Note: Make sure you have switched out the web map IDs so that the Washington D.C. Vision
Zero Safety layer is displayed in the app preview.
If you haven't switched the IDs, reference Step 3.

c In the editor pane of the sandbox, click after the semi-colon on line 52, after the view was
created.

d Press Enter (Return for Apple computers).

Copyright © 2018 Esri. All rights reserved. 15


Do-It-Yourself Geo Apps MOOC

e Paste the code copied from the Example code into the new line.

f Highlight the code from lines 54 to 61, all the code you pasted except the first line, as
shown in the graphic below.

g On your keyboard, press Tab three times so that the code you pasted is in proper
alignment with the rest of the code sample, as shown in the graphic below.
This is a best practice that makes your code easier to read and troubleshoot.

Copyright © 2018 Esri. All rights reserved. 16


Do-It-Yourself Geo Apps MOOC

You have just done the following:

• Created a search widget, an object of the class Search


• Associated a view to the MapView by setting the view property to an instance of the
MapView that was instantiated (created) on line 49
• Added the Search widget to the MapView in the top-left corner on lines 58 and 59.

But, in order for the Search widget to be added, you also need to load the Search module,
which tells the app which widgets are going to be used.

h In the editor pane, click just to the right of the comma on line 26.

i Press Enter.

Copyright © 2018 Esri. All rights reserved. 17


Do-It-Yourself Geo Apps MOOC

j On line 27, type "esri/widgets/Search", making sure to capitalize Search and include the
quotes and a comma at the end.
Note: Typing the entry as indicated above, instead of copying and pasting, is recommended.

k On line 30, add a comma after WebMap and type Search, as shown in the graphic below.

l In the Sandbox, click Refresh.


In the preview window, you should see the Search widget appear in the top-left corner of the
app, as shown in the graphic below. If you have errors, you will not see an error message, but
either the widget or the map itself will not display.

Copyright © 2018 Esri. All rights reserved. 18


Do-It-Yourself Geo Apps MOOC

Now you will test the Search widget.

m In the Search widget, copy and paste (or type) the text Lincoln Memorial, and then press
Enter or click the magnifying glass icon.

Copyright © 2018 Esri. All rights reserved. 19


Do-It-Yourself Geo Apps MOOC

The Search widget works as intended. You have just extended an existing web app by
modifying the underlying code.
This is the end of the Guided part for the Section 6 exercise. You could use the information
you have learned any time you are working with configurable apps. For example, you can
share a web map using an app template, and then customize it. Please continue and try
applying what you've learned in the Do-It-Yourself part. Don't forget the developer and
training resource links at the end.

Part II - Do It Yourself
Programming does not have to mean that you must learn a new language and develop a
program from scratch. It can also mean extending or modifying an existing program, like a
web app, to change it or add functionality. In this section's Guided exercise part, you altered
some code to change the web map shown in a web app. You also added code to add a new

Copyright © 2018 Esri. All rights reserved. 20


Do-It-Yourself Geo Apps MOOC

widget in Esri's JavaScript sandbox. The Do-It-Yourself part contains more optional goals to
apply what you have learned.
We do ask you that you read through this section even if you choose not to complete a DIY
project so that you will find and learn from your fellow students' work. And don't forget the
additional developer and educational resources and samples, found under Learning
Resources at the end.

Further explore the ArcGIS API for JavaScript


In this part of the exercise, we encourage you to challenge yourself and grow your custom-
app development skills. You can do either or both of these options:
1. If you are new to JavaScript development
If you are a new developer, try working with some of the other JavaScript samples (https://
bit.ly/1NoZO77) or one of Esri's DevLabs (https://bit.ly/2mQTjEu) to make something new.
Read through the resources at the end of this exercise to help you, and don't be afraid to
experiment and ask questions.
2. If you are experienced with JavaScript
If you are not new to development, you can try building an app without using a template,
relying on the API for JavaScript guide (https://bit.ly/1IHzv7d). Or, you can download existing
template source code from GitHub (https://bit.ly/2MjMYhK) and modify it to suit your needs,
or use an SDK. You will need to host your custom app on a web server and then register
(https://bit.ly/2waqfKd) it in ArcGIS Online before you can share it with the MOOC
community.

Share your work with the class


If you created a custom app with the ArcGIS API for JavaScript or any of the other APIs or
SDKs, please share it with your peers in the class forums.

Copyright © 2018 Esri. All rights reserved. 21


Do-It-Yourself Geo Apps MOOC

As with the other sections, in order to share your work with the class, you must post about it in
the forums.

• If you created a new app, share your app with Everyone (public).
• Create a new forum post to tell students and instructors what you did.
• Add the link to your app in the body of the post. This can be a shortened link from the
Share dialog box or the full URL, copied from the web browser when viewing the app.
• If you customized an existing app and didn't publish a brand-new app, just describe what
you did and add a screenshot, if that would be helpful.
• Give the post a descriptive title, and add the hashtag #DIYSection6.

Be sure to share your app or other work with us. Esri instructors are watching the forums and
will award special recognition for high-quality work, especially unique or creative apps, or
anything else that shows you've learned a lot in this class. Only properly tagged posts will be
eligible for recognition.

Finding the work of other students


Now that you have shared your work in the forum, go find and review the work of others.
Feedback from the MOOC community will help everyone learn and improve.

1. In the forums, search by the hashtag #DIYSection6.


2. Read other student posts and open their geo apps if they made one.
3. Give any helpful feedback or ask questions by replying to the forum post.

The recognition for the best student work by Esri staff at the end of the course will be based
on the quality of the app or other work, as well as the quality reflected in the comments in the
forum post.

Learning Resources
Congratulations! You just customized the code of a web app while learning a thing or two
about the API Reference along the way. Developing is not always intuitive, but there are many
resources out there from Esri and others that allow you to learn anything that you are
motivated to learn. With a little time and dedication, you can create powerful geo apps,
customized to your needs, for yourself or an employer.
Here are some more resources to continue learning:
Free developers account (https://bit.ly/2vQdIMI)

Copyright © 2018 Esri. All rights reserved. 22


Do-It-Yourself Geo Apps MOOC

ArcGIS Platform documentation (https://bit.ly/1DiXbKg)


ArcGIS DevLabs (https://bit.ly/2mQTjEu)
Web AppBuilder (Developer edition) (https://bit.ly/1C5rYQb)
Script and Extend ArcGIS Products (https://bit.ly/2PfzmBY)
GeoNet developers community (https://bit.ly/2BlghLV)
ArcGIS Geodev Hackerlabs (https://bit.ly/2OJjSFj)
More Esri training:
Esri course catalog search (https://bit.ly/2nOdlwW)
Web course: Basics of JavaScript Web Apps (https://bit.ly/2nXm5mh)
Instructor-led course: Introduction to Web Development Using ArcGIS API for JavaScript
(https://bit.ly/2MjlOYu)
Training seminar: Building 3D Web Apps with ArcGIS API for JavaScript (https://bit.ly/2MloEfy)
Web course: Introduction to the ArcGIS for Server REST API (https://bit.ly/2vR6XKo)
Training seminar: Develop Offline Apps Using the ArcGIS Runtime SDKs (https://bit.ly/
2nNvTOG)

Copyright © 2018 Esri. All rights reserved. 23

Вам также может понравиться