Simple JavaScript Mapping

Let’s Make a Map in Leaflet!

Moacir P. de Sá Pereira / @muziejus
Research Data Librarian, Columbia University Libraries
#nycdhweek19 New York, NY, 5 February 2019

The final map

Get the Files:

talks.moacir.com/files/
simple-js-maps.zip

Install and configure Atom:

atom.io

github.com/
plain-plain-text/atom-config

The files in the zip
The pieces of a webpage

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    
    SimpleJavaScript Mapping
    
    
  </head>
  <body>
    

Simple JavaScript Mapping

This is the #response div, where your work will appear.
</body> </html>
Intitial index.html
index.html after JavaScript

sandbox.js

setTimeout(function(){$("#response").html(function(){
//
//
// IGNORE EVERYTHING ABOVE THIS LINE

return "This text is coming from JavaScript." ;

// IGNORE EVERYTHING BELOW THIS LINE
//
//
}).addClass("alert alert-success");}, 1000);

Types in JavaScript 1

  • String: "Hello"
  • Number: 2.718
  • Boolean: true
return 2.718 + 3 ;

Variables

let two = 2 ;
let three = 3 ;
let result = two + three ;
return "The result of " + two + " and " + three + " is " + result ;

Types in JavaScript 2

  • Array: ["Hello", 1, 5.5]
  • Object: { name: "Leonardo", age: 16 }
  • Function: function(){ return "Hi!" ; }

Arrays

  • Lists of data, where each member can be any data type
  • Every member has an index value, beginning with 0
  • A member can be called using its index: array[1]
let turtles = ["Leonardo", "Donatello", "Raphael", "Michelangelo"] ;
return "The oneth turtle is " + turtles[1] ;

Objects

  • Have properties
  • Properties can be accessed with with dot notation: object.property
  • When properties are functions, they’re called methods
let turtle = { name: "Leonardo", age: 16 } ;
return turtle.name + " is " + turtle.age + " years old." ;

Functions

  • Can be passed parameters
  • Have a return value
return function(){ return "Functions inside functions!" ; } ;

sandbox.js, exploded

setTimeout(function(){ // run some function after some time
  $("#response") // use jQuery to grab the html chunk with the id of "response"
    .html(function(){ // change its html
      return function(){  // to the return value
        return "Functions inside functions!" ; // that is this string
      }
    })
    .addClass("alert alert-success") ; // add styles that make the div green
}, 1000) ; // set the time, in milliseconds, after which the function runs
Leaflet

could-be/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    
    “Could Be,” by Langston Hughes
    
    
    
  </head>
  <body>
    

“Could Be,” by Langston Hughes

Map TK

Could be Hastings Street,
Or Lenox Avenue,
Could be 18th & Vine
And still be true.

Could be 5th & Mound,
Could be Rampart;
When you pawned my watch
You pawned my heart.

Could be you love me,
Could be that you don’t,
Might be that you’ll come back,
Like as not you won’t.

Hastings Street is weary,
Also Lenox Avenue.
Any place is dreary
Without my watch and you.

</body> </html>
Initial version of the Could Be page

could-be/script.js

/*
let map = L.map("map"); // initialize the map
L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}", {
      attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
      subdomains: "abcd",
      minZoom: 0,
      maxZoom: 20,
      ext: "png"
  }).addTo(map); // set the tileLayer and add it to the map.
let nyu = [40.7305, -73.9925]; // define a place
map.setView(nyu, 14); // set the map’s center and zoom level
*/

could-be/script.js uncommented

let map = L.map("map"); // initialize the map
L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}", {
      attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
      subdomains: "abcd",
      minZoom: 0,
      maxZoom: 20,
      ext: "png"
  }).addTo(map); // set the tileLayer and add it to the map.
let nyu = [40.7305, -73.9925]; // define a place
map.setView(nyu, 14); // set the map’s center and zoom level

Drawing Markers in Leaflet

L.circleMarker(nyu)
  .addTo(map);
L.polyline([nyu, [40.735, -73.993], [40.733, -73.998]])
  .addTo(map);
L.polygon([[40.736, -73.993], [40.735, -73.998], [40.737, -74]])
  .addTo(map);
Drawing some objects on the map

Could Be (1949)

Could be Hastings Street,
Or Lenox Avenue.
Could be 18th & Vine
And still be true.

Could be 5th & Mound,
Could be Rampart:
When you pawned my watch
You pawned my heart.

Could be you love me,
Could be that you don’t.
Might be that you’ll come back,
Like as not you won’t.

Hastings Street is weary,
Also Lenox Avenue.
Any place is dreary
Without my watch and you.

could-be/places.js

let places = [
  { coords: [42.334, -83.037], name: "Hastings St.", mentions: 2 },
  { coords: [40.809, -73.944], name: "Lenox Avenue", mentions: 2 },
  { coords: [39.09, -94.561], name: "18th & Vine", mentions: 1 },
  { coords: [39.1, -84.524], name: "5th & Mound", mentions: 1 },
  { coords: [29.956, -90.073], name: "Rampart", mentions: 1 }
] ;

Looping and array.forEach()

places.forEach(function(location){
  L.circleMarker(location.coords)
    .addTo(map) ;
}) ;

Fitting Bounds

places.forEach(function(location){
  L.circleMarker(location.coords)
    .addTo(map) ;
}) ;
map.fitBounds([[23, -125], [50, -65]]) ;

Binding a Popup

places.forEach(function(location){
  L.circleMarker(location.coords)
    .bindPopup(location.name)
    .addTo(map) ;
}) ;
map.fitBounds([[23, -125], [50, -65]]) ;

Binding a Popup with a Template

places.forEach(function(location){
  L.circleMarker(location.coords)
    .bindPopup(`

This place is ${location.name}

`) .addTo(map) ; }) ; map.fitBounds([[23, -125], [50, -65]]) ;

Changing Options

places.forEach(function(location){
  let color = "green" ;
  let options = { color: color, fillColor: color } ;
  L.circleMarker(location.coords, options)
    .bindPopup(`

This place is ${location.name}

`) .addTo(map) ; }) ; map.fitBounds([[23, -125], [50, -65]]) ;

Conditional Statements

places.forEach(function(location){
  let color ;
  if(location.mentions === 2){
    color = "green" ;
  } else {
    color = "red" ;
  }
  let options = { color: color, fillColor: color } ;
  L.circleMarker(location.coords, options)
    .bindPopup(`

This place is ${location.name}

`) .addTo(map) ; }) ; map.fitBounds([[23, -125], [50, -65]]) ;
The final map
## Read the Fantastic Manuals to Learn about Methods * Leaflet: [leafletjs.com](http://leafletjs.com/) * jQuery: [jquery.com](https://jquery.com/) * Bootstrap: [getbootstrap.com](http://getbootstrap.com/) * JavaScript: [developer.mozilla.org/en-US/docs/Web/JavaScript/Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) (or google “javascript mozilla reference”) * My longer course: [the-javascripting-english-major.org](http://the-javascripting-english-major.org)
## Thanks! #### [http://talks.moacir.com/simple-javascript-mapping/](http://talks.moacir.com/simple-javascript-mapping/)