renamed markdown files

content/digital-vs-web.md

@@ -0,0 +1,31 @@
+---
+layout: default
+title: Digital vs Web Map
+parent: Introduction
+nav_order: 2
+---
+
+# Digital vs Web Map
+
+While we're talking about maps loading and working in the web, let's talk the difference between a **digital map** and a **web map**. The term digital map is used quite often. As a benchmark, Wikipedia's entry for "Digital Mapping" is:
+> The process by which a collection of data is compiled and formatted into a virtual image.    
+
+## Digital and Scanned Maps
+More specifically to our workshop, a digital map is a map that was somehow derived from a computer. Sometimes we use this term to refer to scanned paper maps which are scanned and reformatted into digital images of maps, like this old map of Vancouver:
+
+![Digital surrogate of a historical map of Vancouver](commonwealth_4m90fg11z_access800.jpg "Map reproduction courtesy of the Norman B. Leventhal Map & Education Center at the Boston Public Library")    
+<sub><sup>[Map reproduction courtesy of the Norman B. Leventhal Map & Education Center at the Boston Public Library](https://collections.leventhalmap.org/search/commonwealth:4m90fg11z)</sup></sub>     
+
+More commonly, we use this term for "born digital" maps like this cycling map from the City of Vancouver. This map was likely constructed with geospatial data and a Geographic Information System (GIS), and published at a static scale and dimension.
+
+![Front of City of Vancouver Cycling Map 2019](vancycle.jpg "Front of City of Vancouver Cycling Map 2019")     
+
+<sub><sup>[Front of City of Vancouver Cycling 2019 Map](https://vancouver.ca/streets-transportation/cycling-routes-maps-and-trip-planner.aspx)</sup></sub>
+
+## Web Maps
+Web maps are a means of visualizing and interacting with geographic data. Following the definition above, a web map is a type of digital map since it is derived from a computer. However, there are some important differences:
+- **Dynamic scales and content** Web maps are not static images. Different scales display varying levels of detail. For instance, zooming in may reveal information that wasn't apparent before. For this reason, web maps are not designed for print.
+- **Interactive** Web maps are built to be interacted with by an end user, often in order for the user to explore a dataset and learn something. Take for example Climate Central's [Surging Seas Risk Zone Map](https://ss2.climatecentral.org/#12/40.7298/-74.0070?show=satellite&projections=0-K14_RCP85-SLR&level=5&unit=feet&pois=hide). Or, listen to the radio anywhere in the world with [radio.garden](http://radio.garden/visit/vancouver/Lc5d7EdP)
+- **Display real-time data updates** Web maps are useful for geovisualizing real-time data like weather. Watch [the wind blow across the country.](https://www.ventusky.com/?p=43.8;-97.3;5&l=temperature-2m)
+- **Often relies on web and mobile technology**    
+Web maps are ubiquitous - we see and use them all the time. For example, [Google Maps](https://www.google.ca/maps). For small businesses, web maps are helpful for [finding directions](https://luppolobrewing.ca/contact/). For app builders, web maps might provide a [method for routing to locations](https://www.pogomap.info/) using a mobile device's geolocation features. For researchers, they may help [communicate important information](https://www.uvic.ca/research/centres/cisur/projects/map/index.php) in an area of study. For journalists, they may give spatial context to a story like [where Amazon locates its warehouses and why](https://storymaps.arcgis.com/stories/adc5ff253a3643f88d39e7f3ef1a09ee).

content/what-is-leaflet.md

@@ -0,0 +1,19 @@
+---
+layout: default
+title: What is Leaflet?
+parent: Introduction
+nav_order: 1
+---
+
+# Understanding Leaflet
+
+So, what exactly is Leaflet? Leaflet is a set of instructions that your web browser or mobile device uses to display maps and let you interact with them. For example, when you double click your mouse on a map, leaflet tells your browser to zoom in. Leaflet defines the style of your map and includes things like zoom controls, attribution links, pop-ups, colors for markers and more. Leaflet is made up of only 38kb of Javascript, so it is really fast and lightweight - meaning browsers don’t have to work very hard to load it. Leaflet is open source, free, and hugely customizable. And, because of this, Leaflet is widely used. There are lots of alternatives to Leaflet, like for example Google Maps, which you need an API key to use.
+
+### As Code
+Leaflet consists of JavaScript and CSS code libraries which power the ways your web browser interprets and interacts with geospatial data & displays colors and style. For instance, when you double click a map to zoom in, Leaflet is at work. When you add data to your map, Leaflet assigns it a default color. And because Leaflet is open-source, the code is hugely customizable and extensible. This means you can re-mix the code all you want - which you will do in this workshop. [Here are some examples](https://leafletjs.com/plugins.html) of Leaflet-based plugins to give you some idea of the variety of added functionality that comes from the community of developers.
+
+### In a Browser
+Take a look at this basic [Leaflet map example](./leaflet-example.html). You can zoom in, pan around, etc. It's meant to be displayed in your internet browser or a mobile application, so it loads and responds to you quickly.  
+
+<iframe src="./leaflet-example.html" style="width: 70%; height: 500px; margin-left: 15%;"></frame>
+