Day 5

class: center, middle

# Day 5
### APIs

---

## APIs

* How machines communicate on the internet.

* We're going to be looking specifically about how machines communicate geospatial data.

---

## GeoJSON

* Data format standardized in 2007.
* JSON code written to a specific format to comply with the standard.
--

```
{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
        },
        "properties": {
          "name": "St Louis Lambert Int Airport",
          "abreviation": "STL"
        }
      },
  ]
}
```

---

## Breaking GeoJSON Down
FeatureCollection
--

* `Type` - `FeatureCollection`
    * `features` - List of features
        * `geometry` - A Point, Linestring, or Polygon.
        * `properties` - Data about the location on the map.
--

MultiGeometry
* `Type` - `MultiGeometries`
    * `geometries` - List of geometries (like a political border)
    * contain multiple lines or multiple polygons

---

## Geometry Types
* Point     - a spot on the map (one coordinate)
--

* LineString - a line drawn across a map (multple coordinates)
--

* Polygon    - a series of points that enclose an area (multple coordinates)
--

* MultiPolygon - you guessed it, multiple polygons that makeup one feature (like the shapes of the USA)
--

* [Examples here](https://macwright.org/2015/03/23/geojson-second-bite#geometry)

---

## WMS - Web Map Service

* Open protocol that provides a standard way of requesting map data.
    * `GetCapabilities` - allows a client to ask about how the map server can be configured to serve map data.
    * `GetMap`          - returns a map image.

***WMS provides an endpoint from which you can get Maps.***

---

## OpenLayers

OpenLayers is an open source javascript library that allows you to easily work with Maps in a browser.

```
  var map = new ol.Map({
    layers: layers,
    loadTilesWhileInteracting: true,
    target: 'map',
    view: new ol.View({
      center: [-6655.5402445057125, 6709968.258934638],
      zoom: 13
    })
  });
```
---

## OpenLayers Layers

After you have a base map, you can add as many layers to it as you like

```
let bingLayer = new ol.layer.Tile({
    visible: true,
    preload: Infinity,
    source: new ol.source.BingMaps({
        key: 'AsJ83NnvqsJdSmURSKt3ySErannO79P9g0V-AeoA1Ojc8dc60ogLqMtb1FL2DQrG',
        imagerySet: 'Road'
    })
});
```
![Bing|250x250](bing-map-london.png)

---

## jQuery

jQuery is a lightweight JavaScript library for interacting with the DOM

* Helpful methods

```
$('.blue');  // all elements on page with CSS class of blue
$('#map');   // all elements on page with ID of 'map'
$('#text').val();   // get value from input field with ID .text
$('#map').append('</br>');   // add </br> tag to the map div
$('#map').css('color', 'green'); // map div is green
$('#map').on('click', function() {...  // listen for click on map div
```

---

## jQuery - AJAX

AJAX allows the client to send to the server without causing entire page to refresh

```
$.ajax({
  method: "GET",
  url: "/routes",
}).done(function( msg ) { alert( "Data " + msg)  });
```

```
$.ajax({
  method: "POST",
  url: "/routes",
  data: { name: "route1", type: "road" }
}).done(function( msg ) {  alert( "Data Saved: " + msg );  });
```

---

## Walkthrough

A project using a WMS, jQuery, and GeoJSON.