Put a map on it.

Learning basic JavaScript though the use of popular map JS API

Popular Map APIs out there

  • Google Maps API
  • Leaflet
  • MapBox
  • ArcGIS API for JavaScript

JavaScript

is the common denominator 

all configured a bit different

different 

base maps

functionality 

similarities

base maps

functionality 

JavaScript

JavaScript are scripts - sets of instructions

Tell the HTML

You still need to tell the HTML where to find these scripts and how to interpret them. 

You can include the script in the HTML

or in separate files

These API map libraries

  • Still require CSS calls
  • Different tutorials within the same API may look different!

A few rules about JavaScript

  • statements (instructions!) end with a semicolon;
  • curly braces indicate start and end of a code block {   }
  • JavaScript is case sensitive
  • Each statement should start on a new line and end with a ; (makes it easier for human to read code)

More tips for writing JavaScript

  • Leave lots of comments to explain what your code does 
  • /* for multiple lines of comments or // in the same line as the code

tips

  • create js folder and files to house scripts
  • Then you can call these scripts into an HTML page
  • JavaScript runs where it is found in the HTML

Variables

  • declare a variable
  • assign a value
  • data types =
    • String ('Hi, Class!')
    • Boolean (true)
    • Numeric (0.98)

Rules for Variables

  1. All variables are case sensitive (do not name two variables same name with different cases!)
  2. Do not use keywords or reserved words (example var is  a keyword for variable)
  3. variables must start with letter, $, or underscore, NOT a number
  4. You can't use a dash - or . period in a var name
  5. Use a name that describes the kind of info the variable stores
  6. if you need to use more than one word, capitalize letter after first word (ie. lastName)

JavaScript:

Objects and Methods

  • object is the thing
  • method tells it what to do
  • parameters of the method tell it specifically what to do

Google Maps API

control the map!

Add a point

<!DOCTYPE html>
<html>
  <head>
    <style> 
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>Hello Tacoma</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var Tacoma = {lat: 47.325, lng: -122.46};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: Tacoma
        });
        var marker = new google.maps.Marker({
          position: Tacoma,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn3zquptShb1gU_Esyo4EAwJa7DDvDeto&callback=initMap">
    </script>
  </body>
</html>

Google Maps API

Same thing,

slightly different code.

What are the differences?

   
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 47.225, lng: -122.46},
          zoom: 8
          
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn3zquptShb1gU_Esyo4EAwJa7DDvDeto&callback=initMap"
    async defer></script>
  </body>
</html>

Helpful

  • https://developers.google.com/maps/documentation/javascript/combining-data
  • Get your own key!

Change base map

Identifies for common map types. Constants. Properties.

https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapTypeId 

google.maps.MapTypeId.TERRAIN

Where does it go?

it depends...

Inside the google.maps class

Play on your own

Test it out!

MapBox: Load a map

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYnJpY2tlciIsImEiOiJULVRnSlZZIn0.LHt8a4ByC-_b4ytgeh7H5Q';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/satellite-streets-v9', // basemap style and stylesheet location
    center: [-122.46, 47.2587], // starting position for the map [lng, lat] - Hi Tacoma!
    zoom: 9 // starting zoom
});
</script>

</body>
</html>

Again - what are some differences you notice?

Text

Leaflet 

  • renders in the browser
  • small files
  • quickly

Leaflet is pretty much owned by MapBox

  • need an API key

Add Data

overlay

Add a geoJSON file to the server

and add a link to it

Now add style! Lots of it. See my example and leaflet example. 

File too big?

  • Convert Geojson to TopoJson to reduce size of file
  • https://mygeodata.cloud/converter/geojson-to-topojson

Put a map on it.

By Britta Ricker

Made with Slides.com

Put a map on it.

  • 1,023

More from Britta Ricker