-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
104 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| --- | ||
| layout: default | ||
| title: 3. Map Boilerplate | ||
| parent: Hands On | ||
| nav_order: 3 | ||
| --- | ||
|
|
||
| # Map Boilerplate | ||
| A boilerplate is a chunk of code that can be used as-is in multiple contexts and often provides the basis for more advanced operations. The boilerplate code for this workshop renders a basemap which we will tinker with and add to in order to build an dynamic cluster map. It’s important that you don’t lose any of this code unless directed, and that it remains in its original structure and arrangement. | ||
|
|
||
|
|
||
| ## Boilerplate Code | ||
| Now that we've seen what the boilerplate basemap for this workshop looks like, let’s explore the code behind it. Return to VS Code and double click `boilerplate.html ` in the Explorer panel to open it. The contents of your boilerplate should look like this: | ||
|
|
||
|
|
||
| ```html | ||
| <html> | ||
| <head> | ||
| <title>Leaflet Boilerplate</title> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
||
| <!-- Source for your Leaflet JavaScript and CSS --> | ||
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" | ||
| integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" | ||
| crossorigin=""/> | ||
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js" | ||
| integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" | ||
| crossorigin=""></script> | ||
|
|
||
| <script src="./ubcbuildings.js" charset="utf-8"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- Your map's HTML container --> | ||
| <div id="mapid" style="height: 100%;"></div> | ||
|
|
||
| <!-- Script for your map between <script> and </script> --> | ||
| <script> | ||
| // Initialize your map, sets the initial view location and zoom level | ||
| var mymap = L.map('mapid').setView([49.2827, -123.1207], 11); | ||
| //Load the tile layer, paste in new tile layer of choice. | ||
| var OpenStreetMap_BZH = L.tileLayer('https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png', { | ||
| attribution: 'Map Tiles By <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles courtesy of <a href="http://www.openstreetmap.bzh/" target="_blank">Breton OpenStreetMap Team</a>', | ||
| subdomains: 'abcd', | ||
| minZoom: 0, | ||
| maxZoom: 20, | ||
| ext: 'png', | ||
| scrollWheelZoom: false, | ||
| }).addTo(mymap); | ||
| //Paste your marker here | ||
| //Paste the L.geoJSON function here | ||
| //Paste popup function here | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
||
| ``` | ||
|
|
||
| If you installed the Live Server extension to Visual Studio Code, in the blue ribbon at the bottom of your code editor there should be an option to “Go Live.” Click “Go Live” to launch a local server and watch your map automatically update in a web browser. This alleviates the need to constantly refresh your browser each time you make a change. | ||
|
|
||
|
|
||
| ## Anatomy of an HTML document | ||
| The HTML document is split into two main sections: the <code>head</code> and the <code>body</code>. Each of these sections are contained within opening < tags > and closing </ tags >. Notice that because the document is in HTML format, everything is contained within the html tag. | ||
|
|
||
| ```html | ||
| <html> | ||
| <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 “Boilerplate Code” - so that it can used for things like being | ||
| displayed in your browser’s tab. Additionally, there are links to the source | ||
| code for Leaflet's JavaScript and CSS rules. 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. | ||
| </head> | ||
|
|
||
| <body> | ||
| The body contains what you see formatted in your browser. In the code above, | ||
| the body contains directions for rendering and displaying an interactive | ||
| map centered on Vancouver. | ||
|
|
||
| <div> | ||
| This element states how tall and how wide the map should be on the screen. | ||
| </div> | ||
|
|
||
| <script> | ||
| //Included in the body is a block of JavaScript that loads the map on the screen. | ||
| //Continue to the next section for a better understanding of this script... | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
|
|
||
|
|