diff --git a/content/boilerplate.md b/content/boilerplate.md deleted file mode 100644 index 2c1fea2..0000000 --- a/content/boilerplate.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -layout: default -title: Map Boilerplate -parent: Hands On -nav_order: 1 ---- - -# Map Boilerplate - -Below is a block of code - this is our map boilerplate. This was included in the .ZIP file that was downloaded at the start of this workshop. Now we need to open it in our source code editor. It’s important that you don’t lose any of this text, and that it remains in its original structure and arrangement. - -```html - - - - Leaflet - - - - - - - - - - - - -
- - - - - - -``` - - -To Do -{: .label .label-green } -Navigate into your "intro-leaflet-workshop" folder and open the boilerplate.html in your web browser. You may need to "right-click" and "open with" your browser of choice. - - -### In a Browser - -In your web browser, you should see a map that looks something like this: - -![Map loads over the center of Vancouver](map01.png "Your first map loads over Vancouver") - - -### In a Source Code Editor -Let's look at what is making this file work using our code editor. The HTML document is split into two main sections: (1) the head and the (2) body. Each of these sections are contained within opening and closing tags. -``` - some stuff - some other stuff -``` - -## Head -The stuff inside the head is the metadata for your browser about the document. Inside the head are things like the document’s title - in this case "Leaflet" - so that it can used for things like being displayed in your browser's tab. Additionally, there are some lines with links to the source code for Leaflet's JavaScript and CSS rules: - -```html - - - - -``` - -If you copy either one of those links and paste it in a new tab in your browser, you’ll see a lot of raw code. By linking to the source, we avoid having to carry this text into our own document, while also being assured that the code we're using is up-to-date. - -You'll also see a link to something called ubcbuildings.js. -```html - -``` -This is a [relative path](https://www.w3schools.com/html/html_filepaths.asp) to a file that we will add to our map later on in the workshop. For now, all you have to know that this file is included in the .ZIP package that you downloaded to start, and not a link to an external web resource. - -## Body -The body is the container for the what you see formatted in your browser. Here, you have an HTML container for your map, which is styled to be the height of a full page. -```html -
-``` -Also included in the body is a script that loads the map to your page. -```js -var mymap = L.map('mapid').setView([49.2827, -123.1207], 11); - -var OpenStreetMap_BZH = L.tileLayer('https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png', { - attribution: 'Map Tiles By OpenStreetMap contributors, Tiles courtesy of Breton OpenStreetMap Team', - subdomains: 'abcd', - minZoom: 0, - maxZoom: 20, - ext: 'png', - scrollWheelZoom: false, - }).addTo(mymap); -``` -The first line is our map variable. A JavaScript variable is something that holds values, and our mymap variable holds values for the initial starting view location and zoom level of the loading map. - -The other variable OpenStreetMap_BZH hold values for the map tile layer that we are using for our base layer including where the tiles are coming from, a limit on the max and min zoom level, and attribution. diff --git a/content/map-tiles.md b/content/map-tiles.md deleted file mode 100644 index 60f7c0a..0000000 --- a/content/map-tiles.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -layout: default -title: Tiles -parent: Basic Components -nav_order: 2 ---- - -# Map Tiles - -Map tiles are squares of geographic data that are loaded to your frame of view whenever you zoom or pan your map. Each tile is 256px by 256px (traditionally a .png image at roughly 20-40kb each), making them quick to load over an internet connection. These tiles provide a geographic reference for other data layers that you might add later (we'll get to that in a minute). You've probably noticed them if you've had choppy internet connection and had to wait for data to load: - -![tiles](tiles.gif) - -Every time you pan your map, new tiles are loaded to fill that frame of view. The tiles outside of that view are not loaded because loading the entire world's tiles would be time consuming, especially if you were just focused on a small area. When you zoom in or out, new tiles are loaded to correspond with the level of detail needed at each **zoom level**. - -## Zoom Levels - -Because web maps refresh content as you zoom in, they don't have a traditional map scale. Instead, there are different levels associated with the amount of detail shown on the map. -Web maps typically have around 20 zoom numbered levels. Zoom level 0 has the least amount of detail, and is from a viewpoint as far away as earth as it gets. As the zoom level number goes up, so does the detail. Zoom level 18 has enough detail that displaying building labels makes sense without a mess (imagine what building labels would look like on a web map zoomed all the way out!). Zoom level 0 consisting of only 1 tile for the entire world (this zoom level loads the fastest!). Zoom level 18 consists of around 69 billion tiles. That's a lot of data!!!! - -| Level 0 | Level 18 | -| --------------------------------------------------- | ------------------------------------------------------------ | -| ![tiles](http://a.tile.openstreetmap.org/0/0/0.png) | ![tiles](http://a.tile.openstreetmap.org/18/41325/89736.png) | -| 1 tile covers the world | 69 billion tiles cover the world | - - - -## Tile Servers - -You might be thinking: **_Where are all these tiles loading from?_** Well, there are services that render these tiles for consumption. The main two are Google and [OpenStreetMap](https://wiki.openstreetmap.org/wiki/Tile_servers), but there are many others. - -You might also be thinking: **_Can I customize my own tiles to make them look cool?_** You can, with services like [Mapbox Studio](https://www.mapbox.com/mapbox-studio/). Or you can [set up your own server](https://medium.com/@Nithanaroy/create-your-own-tile-server-and-map-client-5f7515fff28) to render your own. But these options are both way beyond the scope of this workshop, so for now, don't worry about it. There are several out-of-the-box options to make your map tiles look sleek. - -Here are some interesting styles for the tile covering the south part of UBC Campus at zoom level 13: - -![tiles](dark.png) ![tiles](fire.png) ![tiles](otd.png) -![tiles](pio.png) ![tiles](stm.png) ![tiles](wtc.jpg) - -## Raster and Vector Tiles - -Another thing to understand about map tiles is that there are both raster and vector tiles. Raster tiles have been around longer, and so are a little simpler to tinker with when beginning to web map. That's why we're using raster tiles for this workshop. Features and attributes on raster tiles are static because such tiles are just images. - -Vector tiles contain vector data like feature names and other attribute data. While they have been around for several years, they are still newer and faster, and offer more customization options than raster tiles. These tiles are rendered as soon as your browser requests them from a tile server, freeing us from discrete zoom levels and map orientation. To learn more about vector tiles, we recommend Mapbox's [Vector Tiles Introduction](https://docs.mapbox.com/data/tilesets/guides/vector-tiles-introduction/). diff --git a/content/understanding-leaflet.md b/content/understanding-leaflet.md deleted file mode 100644 index 9d9084c..0000000 --- a/content/understanding-leaflet.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: default -title: Understanding 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. - -