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
- All variables are case sensitive (do not name two variables same name with different cases!)
- Do not use keywords or reserved words (example var is a keyword for variable)
- variables must start with letter, $, or underscore, NOT a number
- You can't use a dash - or . period in a var name
- Use a name that describes the kind of info the variable stores
- 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.
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
Put a map on it.
- 1,001