diff --git a/content/change-base-map.md b/content/change-base-map.md deleted file mode 100644 index effc364..0000000 --- a/content/change-base-map.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: default -title: Change Base Map -parent: Hands On -nav_order: 4 ---- - -# Change Base Map - -Suppose we want our data to stand out from the green base map more than it does now. One thing we can do is change the source of the map tiles to one that has a more appropriate style for our blue data. As mentioned earlier, there are several out of the box options to choose from with a variety of different styles. [This page lists a number of different map tile sources](https://leaflet-extras.github.io/leaflet-providers/preview/), and provides the text to paste into our map document for each one (minus the important .addTo(mymap) which needs to be inserted before the final semi-colon). **some of these sources require an access token or api-key, so you won't be able to use them unless you sign up for an account**. - - -The boilerplate basemap works well for this workshop, but try playing around with different tile layers. - - -To Do -{: .label .label-green } -Copy the text below and replace the existing map tile variable in your HTML document. - - -```js -var Stadia_StamenTonerLite = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.{ext}', { - minZoom: 0, - maxZoom: 20, - attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap contributors', - ext: 'png', - scrollWheelZoom: false, - }).addTo(mymap); -``` - -If it all went as planned, you should see the new basemap rendered by your browser. diff --git a/content/starting-view.md b/content/starting-view.md deleted file mode 100644 index 12e42a5..0000000 --- a/content/starting-view.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -layout: default -title: Starting View -parent: Hands On -nav_order: 2 ---- - -# Configure the Starting View - -Ok so we have our map boilerplate, and its a good starting point for making a map of UBC. One thing that we’ll notice is that when the map loads, it’s just starting over Vancouver, and not UBC. So let’s change that. - -In the mymap variable you can see a couple of recognizable elements - most noticeably the latitude and longitude coordinate pair (49.2827, -123.1207). That location is the geographic center point for the city of Vancouver. When your browser loads the map, it starts with that point in the center of your screen. - -Say we want to load the map over UBC, which is about 5 km to the west. We'd need to change that coordinate pair to be the center point of UBC. There are several ways to find this, but an easy one is to use [latlong.net](https://www.latlong.net/). Type in UBC in latlong.net, and you return a coordinate pair of 49.260605 and -123.245995. - - -To Do -{: .label .label-green } -Modify the coordinate pair so your map loads over UBC. - - -Save your .html file, and reload your browser. If everything went as planned, you should see this: - - -![Map loads over the center of UBC](map02.png "Your second map loads over UBC") - -If you don't see a map like the one above, undo your edit in your source code editor (**ctl + z**), and save (**ctl + s**) when it's working again. At that point try again making sure your code syntax is exactly as shown: - -```js -var mymap = L.map('mapid').setView([49.260605, -123.245995], 11); -``` - -## Zoom Levels -Your map currently loads at a zoom level which requires a user to zoom in immediately toward UBC. Ideally, if this map is meant to show information for UBC's campus, it would load as close to campus as possible, but not so close that different screen dimensions cut off parts of the campus area. So we'll need to change the loading zoom level. - -Looking again at our mymap variable, the loading view is set at the coordinate pair over UBC, and at a zoom level of 11. In our case, the map best loads at zoom level 14. - - -To Do -{: .label .label-green } -Change your loading zoom level your map loads at zoom level 14. - - -You should see this if you save and refresh your map: - -![Map loads over the center of UBC!](map03.png "Map loads over the center of UBC!")