Web mapping workshop for ITP Camp 2020, a 4 week crash course for experimentations and skill sharing in art, media, and technology organized by the Interactive Telecommunications Program (ITP) at New York University. In Part 1 of this Introduction to Web Mapping, we will go through the process of setting up a web map by using Javascript and the Leaflet.js library. For the purpose of this workshop we will be building our own simple dataset, then geocoding it to use it in a map. The workshop takes place online through Zoom.
Co-taught by Winnie Yoe and Karina Hyland.
- Learn about map and web mapping fundamentals through the lense of critical cartography
- Introduce to Leaflet.js an open-source Javascript library for interactive maps
- Publish a map project using Glitch
Duration: 2 hours
- Introduction to Maps
- Setting a base web map
- Creating a simple data set
- Placing points in the map
- Finishing detalis (title, description, legend and source)
- No coding experience is required
- If you loved this session or couldn't make it, make sure to come to Part 2
-
Open this project and click on Remix to start
-
Include Leaflet CSS and Javascript inside
<head>in theindex.htmlfile:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
- Add a
<div>inside the<body>of theindex.htmlwith the map ID
<div id="mapid"></div>
- Give a height to your map in the
style.cssfile using the same ID you gave it before
#mapid {
height: 600px;
}
- Initialize the map in the
script.jsfile. The coordinates will be the initial geographic center from which the map draws when it loads, and the number is the initial zoom.
let mymap = L.map('mapid').setView([40.69, -73.98], 13);
See more about this step here
- Add the base map using Mapbox API as provider of tiles
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/outdoors-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: mytoken
}).addTo(mymap);
You can check out some other tiles by Mapbox, Stamen or Thunderforest or design your own using Mapbox Studio
- Add an access token at the beginning of
script.js, you can find some in thetokens.jsfile on your Glitch project.
For future projects you should create your own by setting up an account in Mapbox, but for this workshop you can use the ones provided.
let mytoken = "";
- Place a marker!
L.marker([40.69, -73.98]).addTo(mymap);
To search for other location coordinates use Geojson.io
At this point you should be seeing this:
See source code here
-
Make a new spreadsheet using Google Drive
-
Add a column called places and write down as many as you like
-
(optional) Add a second column with some additional information (ie. year, kind of trip, who)
-
In Google Spreadsheet go to the menu and click on Add-ons > Get Add-ons
-
Search for “Geocode by Awesome Table” > Install
-
Once installed, click again on Add-ons > Geocode
-
Make sure you select the column where you wrote the places and click “Geocode!”
-
Voilá > It will automatically add columns for latitude and longitude and fill them with the information it finds
-
Download your spreadsheet as a .CSV
-
Convert CSV to JSON. You can do it online
-
Copy the JSON output to your clipboard
-
In
script.jsload the data by making a variablemydata =and paste your JSON -
Make a the for loop
for (let i = 0; i < mydata.length; i++) {
let myplace = mydata[i];
L.marker([myplace.Latitude, myplace.Longitude]).bindPopup(popupText).addTo(mymap);
}
- Add a popup
let popupText = myplace.Place;
- Add the popup onto the marker
L.marker([myplace.Latitude, myplace.Longitude]).bindPopup(popupText).addTo(mymap);
- Add more information to your popup and add some style to it
let popupText = "<h3>" + myplace.Place + "</h3>" + myplace.Year;
At this point you should be seeing this:
See source code here
- Add a title in the
index.html
<h1>My Map</h1>
- Add a description in
index.html
<p>This is a map of all the places I've been and would like to got that I made during the ITP Camp 2020.</p>
- Change the marker icon
Please fill out the workshop feedback form
- All Maps Lie (class taught by Joey Lee for ITP, Spring 2020)
- Book: Mapping: A Critical Introduction to Cartography and GIS, by Jeremy W. Crampton
- Book: Experimental Geography: Radical approaches to landscape, cartography, and urbanism, by Nato Thompson
Curriculum templates is inspired by Eyebeam