Skip to content

Commit

Permalink
minor edits
Browse files Browse the repository at this point in the history
  • Loading branch information
lilydemet committed Jan 23, 2024
1 parent 73a8b79 commit c22bd63
Showing 1 changed file with 6 additions and 13 deletions.
19 changes: 6 additions & 13 deletions index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,43 +9,36 @@ nav_order: 1
<img src="leaflet_logo.png" alt="Leaflet Logo" style="margin: auto;" />


## Introduction
This beginner-level workshop is intended for anyone interested in getting started creating web maps. There are two main sections: an introduction to web maps, and a hands-on where we will copy/paste code to make an interactive map of UBC-V Campus powered by [Leaflet](https://leafletjs.com/). This workshop aims to develop the fundamental knowledge and skills to begin web mapping while providing opportunities to ask questions. Upon completion of this workshop you will have a [boilerplate code](https://www.freecodecamp.org/news/whats-boilerplate-and-why-do-we-use-it-let-s-check-out-the-coding-style-guide-ac2b6c814ee7/) which you can build upon and tinker with on your own.

This beginner-level workshop is intended for anyone interested in getting started with creating web maps. There are two main sections: an introduction to web maps, and a hands-on where we will copy/paste code to make an interactive map of UBC-V Campus powered by [Leaflet](https://leafletjs.com/). This workshop aims to develop the fundamental knowledge and skills to begin web mapping while providing opportunities to ask questions. Upon completion of this workshop you will have a [boilerplate code](https://www.freecodecamp.org/news/whats-boilerplate-and-why-do-we-use-it-let-s-check-out-the-coding-style-guide-ac2b6c814ee7/) which you can build upon and tinker with on your own.

## What you will build
<iframe src="./content/final_map.html" style="width:100%; height:500px; border:none;"> </iframe>

## Pre-Workshop Setup
### Workshop Data
All of the data for this workshop is free and openly available. However, to get started you'll need to download and save it to your computer. During the hands-on portion you'll work with this data in your source-code editor by copy/pasting the code provided to you.

Click on the 'Download Data' button below to start the download. Once complete, **extract the contents of the .zip file**.
All of the data for this workshop is free and openly available. However, to get started you'll need to download and save it to your computer. During the hands-on portion you'll work with this data in your source-code editor by copy/pasting the code provided to you. Click on the 'Download Data' button below to start the download. Once complete, **extract the contents of the .zip file**.

[Download Data](content/intro-leaflet-data.zip){: .btn .btn-blue }

### Software Used
- **Internet browser (and an internet connection)**. The most recent versions of [Mozilla Firefox](https://www.mozilla.org) and [Google Chrome](https://www.google.com/chrome/) are the recommended browsers.
- **Source code editor**. To make your life easier while viewing or editing code, it's good to use a [source code editor](https://en.wikipedia.org/wiki/Source_code_editor). In this workshop we'll use [Visual Studio Code](https://code.visualstudio.com/download), but other editors like [Notepad++](https://notepad-plus-plus.org/) and [Sublime Text](https://www.sublimetext.com/3) will work similarly.


### Prerequisites
Making maps is hard. And, without practice, working in the web is hard too. While there are no prerequisites for this workshop, familiarity with cartographic principles and a basic understanding of what code is and does will make diving into web mapping easier. Refer to these resources at any time:

- **Intro level knowledge of computer programming**. [Matt Adesanya's *A Gentler Introduction to Programming*](https://www.freecodecamp.org/news/a-gentler-introduction-to-programming-1f57383a1b2c/) is a great starting point, and will be more than you need for this workshop.
- **Intro level knowledge of HTML, CSS and JavaScript**. [Sololearn.com offers several courses on these topics and more](https://www.sololearn.com/Courses/), but there are several other educational resources to choose from on the web if you prefer something different. You're not expected to be a pro for this workshop, but understanding these concepts will provide some very useful perspective.
- **Understanding of basic cartographic design concepts**. What is map making without a consideration of cartography? Axis Maps has written a phenomenal [short guide to cartography](https://www.axismaps.com/guide/), and [the web map module](https://www.axismaps.com/guide/web/should-a-map-be-interactive/) is especially relevant.


All set? Let's begin!

### What you will build
<iframe src="./content/final_map.html" style="width:100%; height:500px; border:none;"> </iframe>

All set? Let's begin web mapping!


<br>
#### GIS Resources at UBC:

- General Informational website for all things UBC GIS: [gis.ubc.ca](http://gis.ubc.ca/)
- UBC Library's guide for finding and working with GIS resources: [guides.library.ubc.ca/gis](http://guides.library.ubc.ca/gis)
- UBC's GIS Slack (create your own channel or lurk!): [ubcgis.slack.com](https://ubcgis.slack.com/)
- Archive of all [Research Commons workshops](https://ubc-library-rc.github.io/all.html)
- Contact UBC Library’s Geospatial team: `library.gis@ubc.ca`
Expand Down

0 comments on commit c22bd63

Please sign in to comment.