Teaching Guide

Elvenware Logo

TOC

Walking Map

Let's learn a little about maps, how to create our own maps, and how to share them with others on computers and on phones.

Create Walks

Create a markdown document, that shows how to walk from one place to another in the Seattle area. Here, for instance, is an example walk, called Weowna to Lake Hills GreenBelt

Weowna to Lake Hills GreenBelt

This is a nice little walk you can take from Sammamish Lake up to the area near the Blueberry Farm on 148th. There is a bit of an uphill climb near the start of the hike, but there is lots of nice bucolic wandering in the hike. It is wonderful to live in a town that has so much park land so near the city center.

https://goo.gl/maps/wNCEu

Details on creating walks.

Create at least three walks, each in its own map, and place them all in a file called WalkingMap.md. When you are done, you should have three headings, and under each heading should be a map that outlines a walk.

Pick walks that you enjoy. If you like downtown Bellevue or Seattle best, then map your walks there. If you prefer to walk in the Issaquah Alps, then that is fine to. You could have one walk on Tiger, another along the Seattle waterfront. It's up to you.

Each walk should have:

Creating Walks

maps

Once you have your map planned out, click on the hamburger menu at the top of the window that opened on the left. Choose Share and embed map.

Here you can see how to find the Share and Embed map menu item:

maps

This screenshot shows how to create the short URL that you will turn into a hyperlink in your markdown document:

maps

Here you can see the beginning of the iframe element that you want to copy and paste into your markdown document. This is the one that creates the image of the walk that you planned. It looks like a screen shot, but it is more than that, in that you can interact with it. The element is not huge, but it is fairly large. It is mass of incomprehensible gibberish. Block copy from the opening <iframe> tag to the closing </iframe> tag.

maps

When you are done, your code should look much like the Weowna to Lake Hills GreenBelt section shown above in this document. The primary difference, of course, is that your map will show your walk, not mine.

Waypoints

Sometimes you need to select more than two points in order to properly define your walk. In the image shown below, I added links to the walk by pressing the + symbol shown on the far left about 2/3s of the way from the top. I believe that Google calls this the "Destinations" button, but I'll go on using the word waypoint since it more exactly describes what we are discussing in this context.

If I want to divide a route up into thirds, or specify more exactly how to pass through a certain part of the walk, then I can use waypoints. Use it to break a walk up into sections. Instead of going directly from A to C, you can go first from A to B, then press the plus button, then go from B to C. That is what I have done in the image shown below. Notice that there are now three "waypoints" (destinations) on the walk. You can see them at the top left of the screenshot. Note also that you can drag and drop the three waypoints to reorder them. You may have to drag them back and forth for a bit until the line you want appears on the map. In other words, the order of the waypoints is important. The point labeled Elliot Bay Trail above is not a known spot, it was just an unnamed spot on the map that I clicked on.

Google Map Chain

Here is a link to the map if you want to study it in more depth:

https://goo.gl/maps/tcTaXV8PAq32

Just to be clear, each walk that you create must contain a starting point and end point, and from 0 to n waypoints. For this assignment, you might create maps that contain only starting and ending points. But one or more of your three maps might also contain multiple waypoints.

Create and Upload your Bootstrap HTML files

To complete the exercise, do the following:

To copy the updated code in AllTest directory to the existing AllTest folder in your repository, use the instructions in the ApacheHtml assignment:

Turn it in

Take a screen shot of your page running on your local Apache Server. (localhost/WalkingMapLastName.html). Attach (upload) the image when you submit the assignment in Canvas. Provide a link to your page running on EC2.

Push your repository. By now I should be able to find it, but if you have any doubts, add your github url as a comment.

Check list:

Hint

Check ~/Source/MakeHtml/config/ElvenConfig.json to make sure it is compatible with your system. In particular, check the "base-dir", which assumes that your home path is /home/bcuser.

{
 "calvert": {
   "base-dir": "/home/bcuser/",
   "site-dirs": [
     "Documents/AllTest",
     "Documents/AllSite"
   ],
   "destination-dirs": [
     "/var/www/html/",
     "/home/bcuser/temp/test-site/"
   ]
 }
}

Responsive Maps

In your CSS:

.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

In your Markdown wrap the code you got from Goggle in a DIV with the google-maps class:

<div class="google-maps">
  <iframe src="https://www.google.com/maps/embed?pb=! ETC... ></iframe>
</div>