Skip to content

Latest commit

 

History

History

Unit 13

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

Watch this video

ArcGIS API for JavaScript: Getting Started

Check out ArcGIS JSAPI Samples

ArcGIS API for JavaScript Sample Code

Learn JS using Esri Hackerlabs

These have not been updated in three or four years, but they used to be awesome. Check out the hackerlabs

CodePen.io

If you continue with the Advanced course next semester, you will learn JavaScript. We will use CodePen.io as a tool to write and test code.

Web Mapping Development Intro

Jacob Wasilkowski

Twitter @JWasilGeo

https://jwasilgeo.github.io

Intro to HTML, CSS, and JavaScript

What's the purpose of each and how do they work together?

READ 👏 THE 👏 DOCS 👏

https://developer.mozilla.org/en-US/docs/Web

JavaScript: syntax intro

// variable declaration
let myString;

// and then later assignment
myString = 'sample string';

// variable declaration and assignment at same time
let myNumber = 90210;

console.log(myNumber - 90209); // simple math

// strings
let question = 'Is pizza awesome?';
let answer = 'Without a doubt.';
let qAndA = question + ' ' + answer; // concatenate strings

console.log(qAndA);

// format with template strings
console.log(`${question} ${answer}`);

// booleans
console.log(1.5 === 1.5); // true
console.log(1 + 1 === 3); // false

// arrays
let myArray = [1, 2, 3, 'x', 'y', 'z'];

console.log(myArray[3]);

myArray.push(100);

let stringFromArray = myArray.join(' and ');

console.log(stringFromArray);

// functions
let sumThreeNumbers = function(a, b, c) {
  // do something with the function arguments
  console.log(a, b, c);
  // return the sum
  return a + b + c;
};

// objects
let myObject = {
  name: 'Greg',
  totalCats: 15,
  faveLanguages: ['Python', 'JavaScript'],
  isInCharge: true,
  tellMeSomethingInteresting: function() {
    return this.name + ' has ' + this.totalCats + ' cats.'
  }
};

console.log(myObject.name);

console.log(myObject.tellMeSomethingInteresting());

// conditional statements
let whatHappened;
if (1 === 2) {
  whatHappened = 'bad math';
} else if (true && false) {
  whatHappened = 'bad logic';
} else {
  whatHappened = 'we got to the "else!"';
}
console.log(whatHappened);

Start thinking in terms of user interaction "events" instead of top-to-bottom script execution.

Obligatory JS meme

JS meme

HTML and CSS and JavaScript

Exercise: create index.html page, insert <script> tag, and try out the Chrome developer tools.

<!DOCTYPE html>
<html>

<head>
  <title>Title for browser tab.</title>

  <style>
    /* this is a CSS comment */

    .green {
      color: green;
      /* color: rgb(0, 128, 0); */
      /* color: #008000; */
    }

    .italic-sans-serif {
      font-style: italic;
      font-family: sans-serif;
    }
  </style>
</head>

<body>
  <!-- this is an HTML comment -->

  <h1>
    Hello, World! (I'm an "h1" element).
  </h1>

  <h2>
    Subtitle (I'm an "h2" element).
  </h2>

  <p>
    Hello, World! (I'm a "p" element.)
  </p>

  <p class="green">
    Hello, World! (I'm a "p" element with a CSS class.)
  </p>

  <div>
    This is a "div" element.
  </div>

  <div class="green italic-sans-serif">
    This is a "div" with several CSS classes.
  </div>

  <a href="https://www.slu.edu/arts-and-sciences/earth-atmospheric-sciences/" target="_blank">
    This is a link that will open in another window.
  </a>

  <p>
    Next are a "button" element followed by a "p" element, both of which are inside of a "div" element.
  </p>

  <div>
    <button id="coolButton">
      Increase the "clickCount" JavaScript variable.
    </button>

    <p id="clickCountDisplay"></p>
  </div>

  <script>
    // this is a JavaScript comment

    let coolButtonReference = document.querySelector('#coolButton');

    let clickCountDisplayReference = document.querySelector('#clickCountDisplay');

    let clickCount = 0;

    clickCountDisplayReference.innerText = clickCount;

    coolButton.addEventListener('click', function () {
      console.log('Hey, I got clicked!');

      clickCount = clickCount + 1;
      // another way to write the same command would be:
      // clickCount += 1;

      console.log('clickCount: ', clickCount);

      clickCountDisplayReference.innerText = clickCount;
    });
  </script>
</body>

</html>

Let's get mappy in the browser

  • Intros to ArcGIS API for JavaScript and LeafletJS

  • Getting started with CodePen

    • Why? Your browser will block functionality if browsing files directly from hard drive. You must use a web server. CodePen is interactive and easy to experiment with, just like Python Notebooks.

  • Leaflet exercise

    1. Copy and paste the contents of leaflet-demo.html into a new CodePen.

    2. Set the map's initial position to be centered at and zoomed to St. Louis.

    3. Change the basemap to a different Esri basemap.

    4. Add a "marker" positioned at SLU onto the map.

  • Esri exercise

    1. Copy and paste the contents of esri-demo.html into a new CodePen.

    2. Make the Esri demo into 3D! You can instruct the code to use a SceneView instead of a MapView.

Resources

Optional Unit 13 Assignment

This is optional, but the students who complete it tell me that they got a lot out of it. If you want to learn more about Javascript and the ArcGIS JSAPI, complete the following two lessons:

  1. Create a starter app
  2. Add layers to a map

Copy and past the code into text files and submit the text files.