Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Building Web and Mobile ArcGIS Server Applications with JavaScript ??? Second Edition
  • Table Of Contents Toc
Building Web and Mobile ArcGIS Server Applications with JavaScript ??? Second Edition

Building Web and Mobile ArcGIS Server Applications with JavaScript ??? Second Edition - Second Edition

By : Mark Lewin, Eric Pimpler
close
close
Building Web and Mobile ArcGIS Server Applications with JavaScript ??? Second Edition

Building Web and Mobile ArcGIS Server Applications with JavaScript ??? Second Edition

By: Mark Lewin, Eric Pimpler

Overview of this book

The ArcGIS API for JavaScript enables you to quickly build web and mobile mapping applications that include sophisticated GIS capabilities, yet are easy and intuitive for the user. Aimed at both new and experienced web developers, this practical guide gives you everything you need to get started with the API. After a brief introduction to HTML/CSS/JavaScript, you'll embed maps in a web page, add the tiled, dynamic, and streaming data layers that your users will interact with, and mark up the map with graphics. You will learn how to quickly incorporate a broad range of useful user interface elements and GIS functionality to your application with minimal effort using prebuilt widgets. As the book progresses, you will discover and use the task framework to query layers with spatial and attribute criteria, search for and identify features on the map, geocode addresses, perform network analysis and routing, and add custom geoprocessing operations. Along the way, we cover exciting new features such as the client-side geometry engine, learn how to integrate content from ArcGIS.com, and use your new skills to build mobile web mapping applications. We conclude with a look at version 4 of the ArcGIS API for JavaScript (which is being developed in parallel with version 3.x) and what it means for you as a developer.
Table of Contents (15 chapters)
close
close

Basic HTML page concepts

Before we dive into the details of creating a map and adding layers of information you need to understand the context of where the code will be placed when you're developing applications with the ArcGIS API for JavaScript. The code you write will be placed inside an HTML page or JavaScript file. HTML files typically have a file extension of .html or .htm and JavaScript files have an extension of .js. Once you have created a basic HTML page you can then go through the necessary steps to create a basic map with the ArcGIS API for JavaScript.

The core of a web page is an HTML file. Coding this basic file is quite important as it forms the basis for the rest of your application. Mistakes that you make in the basic HTML coding can result in problems further down the line when your JavaScript code attempts to access these tags.

The following is a code example for a very simple HTML page. This example is about as simple as an HTML page can get. It contains only the primary HTML tags <DOCTYPE>,<html>, <head>, <title>, and <body>:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Topographic Map</title> 
   </head> 
  <body> 
      Hello World 
  </body> 
</html> 

There are a number of flavors of HTML currently in use. Most new HTML pages developed today use HTML5, so we'll focus on HTML5 throughout the book, but without delving into many of its advanced features. Other versions of HTML you are likely to encounter in the wild include HTML 4.0.1 and XHTML 1.0.

DOCTYPE

The first line of your HTML page will contain the DOCTYPE. This is used to tell the browser how the HTML should be interpreted. We'll focus on HTML5 in this book so the first example you see in the following uses the HTML5 DOCTYPE. The two other common doctypes are HTML 4.01 Strict and XHTML 1.0 Strict:

  • HTML5:
<!DOCTYPE html>      
  • HTML 4.01 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

Primary tags

At a minimum, all your web pages will need to contain the <html>, <head>, and <body> tags. The <html> tag defines the whole HTML document. All other tags must be placed inside this tag. Tags that define how the web page will appear in the browser are placed inside the <body> tag. For instance, your mapping applications will contain a <div> tag inside the <body> tag that is used as a container for displaying the map.

Loading this HTML page in a browser would produce the content you see in the following screenshot. Most of the ArcGIS API for JavaScript code that you write will be placed between the <head></head> tags, either within a <script> tag or inside a separate JavaScript file. As you gain experience you will likely begin placing your JavaScript code inside one or more JavaScript files and then referencing them from the <head> section. We'll explore this topic later. For now just concentrate on placing your code inside <script> tags, within the <head> tags:

Validating HTML code

I've mentioned that it is very important that your HTML tags be coded correctly. This is all well and good you say, but how do I know my HTML has been coded correctly? Well, there are a number of HTML code validators that you can use to check your HTML. The W3C HTML validator (http://validator.w3.org/) shown in the following screenshot can be used to validate HTML code by URI, File Upload, or Direct Input:

Assuming that your HTML code successfully validates you will get a nice screen with a message indicating a successful validation as seen in the following screenshot:

On the other hand, it will identify any problems with a red error message as shown in the following screenshot. Errors are described in detail which makes it easier to correct problems. Often a single error can lead to many other errors so it is not uncommon to see a long list of error items. Don't panic if this is the case. Fixing one error often resolves many others:

To correct the errors in the preceding document you would need to surround the text Hello World with paragraph tags:

<p>Hello World</p>
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Building Web and Mobile ArcGIS Server Applications with JavaScript ??? Second Edition
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon