LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
  Home | IWEB Rev 2.0
  

    
    
    

    
    
    
  
  
    

Introduction to Web Development Using ArcGIS API for JavaScript (IWEB 2.0)

Monday, January 1st, 2018 — Monday, January 1st, 2018

Rudy Prosser
rprosser@esri.com
360.754.4727 x8912

Lessons

  1. Viewing maps in 3D
  2. Adding widgets to your web apps
  3. Drawing graphics

Resources

Activity Instructions

At the start of each activity step, complete the following process:

  1. Click the link to the starter Pen
  2. Fork the starter Pen
  3. Change the Pen's name
  4. Save the Pen as Private
  5. Add the Pen into the class event collection

Activity Starters

Lesson 0 |

Starters:

Example Solutions:

Additional Solutions:

Workflow

Resources

References

  • API Reference >
  • API Reference >
  • API Reference >
  • Sample Code >
  • Sample Code >
  • Sample Code >
  • Guide >
  • Guide >
  • Guide >
  • Demo >
  • Demo >
  • Demo >

Lesson 6 | Viewing maps in 3D

Starters:

  • Step 1 Starter — Implement a SceneView
    — Create a SceneView of Hamburg, Germany with the Camera positioned at (10, 53.52, 2820), tilt set to 50 and heading at 0
    — Add the Buildings_Hamburge SceneLayer to the map displayed in the SceneView.
    — Note: buttons are for Step 3
  • Step 2 Starter — Add environment to the SceneView
    Add to the SceneView's environment by setting the lighting and atmosphere. Set the lighting to show shadows on "Mon Jan 1 2018 12:00:00 GMT+0100 (CET)". Enable the atmosphere.
  • Step 3 Starter — Program navigation in SceneView
    Add functionality to two of the buttons. Button 1 should return the viewer to the SceneView's opening view point. Button 2 should take the viewer to an alternate view point.

Solutions:

Additional Solutions:

Workflow

  1. Create the SceneLayer, specifying the web scene
  2. Create the map, adding the scene layer
  3. Create the SceneView, adding the map
  4. Configure the SceneView

Resources

References

Lesson 7 | Adding widgets to your web apps

Starters:

Example Solutions:

Additional Solutions:

Workflow

  1. Add the widget module to the require statment
  2. Create an instance of the widget
  3. Set the widget's properties
  4. Add the widget to the view
  5. Use the widget

Resources

References

Lesson 8 | Drawing graphics

Starters:

Example Solutions:

Additional Solutions:

Workflows

Graphics layer

  1. Create a graphics layer object
  2. Add graphics layer to map

Graphic

  1. Construct a feature (Point, Polyline, Polygon)
  2. Create a symbol to display the feature
  3. Construct a graphic object, applying the feature and symbol
  4. Add the graphic to the graphics layer

Graphic with attributes

  1. Construct a feature (Point, Polyline, Polygon)
  2. Create a symbol to display the feature
  3. Create an attributes object
  4. Create popup template
  5. Create the graphic object, assigning the feature, symbol, attributes and popup template
  6. Add the graphic to the graphics layer

Resources

  • Point: [-122.9016, 47.050119]
  • Polyline: [-122.908921, 47.056043], [-122.908719, 47.052535], [-122.908214, 47.048682], [-122.908063, 47.047031]
  • Polygon: [-122.925834, 47.049852], [-122.913162, 47.049645], [-122.913364, 47.045930], [-122.925884, 47.046033]

References

CSS
html,
body {
  height: 99%;
  width: 99%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #28774F; /* original color: #ffebcd; */
  overflow: hidden;
  color : #768573; /* original color: #778899 */
  font-family: "Trebuchet MS", "Tahoma", sans-serif;
  padding : 10px;
}

p {
  font-size : larger;
}

h1, h2, h3, h4 {
  color : #0B502D;
}

#lessontabs {
  width : 97%;
  height : 98%;
  background-color : #28774F;
}

.tabpane {
  background-color : #95a792;
}

.panezone {
  float: left; 
  width: 46%; 
  height: 87%;
  padding : 10px;
  border-left : 2px solid #28774F;  
  margin : 5px;
}

h2{
  padding-bottom : 5px;
  border-bottom : 2px solid #28774F;
}

.color-primary-0 { color: #28774F } /* Main Primary color */
.color-primary-1 { color: #94CAAE }
.color-primary-2 { color: #549E79 }
.color-primary-3 { color: #0B502D }
.color-primary-4 { color: #002A14 }
JS
require([
  "dojo/parser", 
  "dojo/ready",
  "dijit/layout/TabContainer",
  "dijit/layout/ContentPane",

  "dojo/domReady!"
], function(
  parser,
  ready,
  TabContainer,
  ContentPane
) {
  // parse DOM for Dojo dijits
  parser.parse();
});
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv