Skip to content

Dosch Map #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ghost wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Dosch Map #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d6922b4
dosch-index.html
Nov 21, 2016
a2db20d
dosch-style.css
Nov 21, 2016
8b9f4fe
dosch-script.js
Nov 21, 2016
3cd50b3
Merge pull request #3 from DanielDosch/patch-3
Nov 29, 2016
f8a651d
Merge pull request #2 from DanielDosch/patch-2
Nov 29, 2016
6d00a1d
Merge pull request #1 from DanielDosch/patch-1
Nov 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 20 additions & 45 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,43 @@
<html>

<head>
<title>Brief Toronto Tour</title>
<meta name="description" content="a strapdown-based mapping exercise." />
<!-- these script tags load important javascript "libraries"
that our own little scripts depend on. These are complex
programs way beyond our capacities to construct; but we can
make use of them nonetheless -->
<title>History of Sailing in Toronto</title>
<meta name="description" content="" />

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<!-- this line is NOT present in the jsbin version -->
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

<!-- note the 'onload' attribute here.
it calls the function "initialize"
when the body has finished loading. That's because the
Javascript in the JS pane will not run properly unless it
waits for the elements inside the bode to load. Therefore
we don't run the most important parts of the code until the page has finished loading.
-->
<body onload="initialize();">
<textarea theme="united" style="display:none;">

# This Map will eventually Become some kind of tour of Toronto.
<textarea theme="cyborg" style="display:none;">

Your first task will be to locate some real places. You can get the precise locations at various services, e.g [latlong.net](http://www.latlong.net/].
# **The Evolution of Toronto and its Sailing Clubs over Time**
One may not consider this, but the audience, location and uses for local Toronto sailing clubs reveal a great deal about the change of Toronto as a whole. By covering some of the history of a few clubs based in Lake Ontario we can pinpoint certain changes in Toronto. The following clubs will be examined: The Royal Canadian Yacht Club (RCYC), The National Yacht Club (NYC), as well as Alexandra Yacht Club (AYC) with their respective locations on the map below. It is well known that Toronto’s shoreline was not always as far-reaching as it is today, with its original shore being just south of where Front Street is today. Just as the shoreline changed, so too did the community which inhabited it. These subtle changes can be seen just from looking at the brief history of each of the sailing clubs!

Then add those places to the marker array in [script.js](./script.js) (see instructions there).
Initially known as the Toronto Boat Club, the oldest and most prestigious sailing club, RCYC, was [ordered by Queen Victoria in 1854]( http://www.thenyc.com/about-the-nyc/the-nyc-present-and-past/) to serve as an auxiliary for the British Royal Navy in defense of Lake Ontario, becoming what it is known today. In 1881 the RCYC was also forced to move to the Toronto Island to make room for the ever-growing and industrializing harbourfront. From these two tidbits we can gain a better understanding about Toronto at the time of RCYC’s inception: there was a deep connection between Toronto (or Canada as a whole) and the metropol, where Toronto would act on behalf of the Royal Navy.

replace this text and the text with your essay. But be sure not to eliminate the html elements that
are contained inside this textarea, or your map won't work at all!
The NYC and AYC, both founded slightly later have a shared history which also highlights similar changes faced by RCYC. Neither of them have a military history or ties to the monarchy, but were strictly recreational clubs that featured sailing and boating in general as the core of their community.
In the case of Alexandra, they went from Ward’s island inland to the Aquatic Clubs reservation, by Bathurst st. in 1919. The NYC was founded on the west side of the Queens Quay Wharf by contrast, but moved close the Aquatic Clubs reservation ten years prior to Alexandra, becoming sisters from 1919 onwards. The clubs ran into problems because their location was suboptimal for boating (not deep enough for some vessels) as well as The Depression followed by the Second World War [leading to a sharp decline in membership](http://www.ayc.ca/Home/history.html). This highlights the fact that recreational activity and community entertainment dwindled in times of heightened stress as well as the fact that the shore, if it aims to include water sport clubs, must have appropriate docks. By 1950 the federal government had decided to construct steel walls in the area to protect the basin, Toronto saw itself in a time of revitalization with pavement laid and actual street signs, such as 24 Stadium Road. Leading to where both clubs are in present day, the [Toronto Harbour Commission proposed a new site for the clubs in 1983](http://www.thenyc.com/about-the-nyc/the-nyc-present-and-past/), and the new strip of land was completed and put to use in 1988. From that point onwards both Alexandra and NYC have called it home.

It makes sense to put an introductory paragraph here, above the map and buttons. To change the bootswatch thenme, change "united" to one of the other theme names listed at [strapdownjs.com](http://strapdownjs.com/).

<div class="">
<!-- these buttons hide/show all the markers -->
<!-- to hide/show blue or red markers instead, change my_markers below to blue_markers
to red_markers. If you have defined your own color (or other) arrays, use those instead -->
<button onclick="hideMarkers(my_markers)" class="rounded" id="hide">hide markers</button>
<button onclick="showMarkers(my_markers, my_map)" id="show"> show markers</button>
<p></p>
<div id="mapcontainer">
<div id="map_canvas"></div>
</div>
<div id="map_legend"></div>
</div>

# Next Section

The rest of your essay should go under the map, probably.

## in sections like this
also _italics_ and __bold__ which can also be written *like this* or **like this**
etc. Be sure to [make use of links](http://digital.hackinghistory.ca) -- that's one of the reasons we write on the Web, and I've asked you to use links for all yor footnotes/references as well.

</textarea>
<div id="map"></div>

<div class="container">
<button onclick="hideMarkers(my_markers)" class="button glow-button" id="glow-button">Hide Markers</button>
<button onclick="showMarkers(my_markers, my_map)" class=" button glow-button" id="glow-button2"> Show Markers</button>
<p></p>
<div id="mapcontainer">
<div id="map_canvas"></div>
</div>
</div>



<!-- this is the magic that makes markdown and Twitter Bootstrap styles work for us -->
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>

<!-- this line is NOT present in the jsbin version, and calls your custom js -->
<script src="./script.js"></script>

</body>
Expand Down
64 changes: 33 additions & 31 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,64 @@
// initialize the variables we need
// we do this here to make sure we can access them
// whenever we need to -- they have 'global scope'

var my_map; // this will hold the map
var my_map_options; // this will hold the options we'll use to create the map
var my_center = new google.maps.LatLng(41.9000,12.5000); // center of map
var my_center = new google.maps.LatLng(43.6344998,-79.3805541); // center of map
var my_markers = []; // we use this in the main loop below to hold the markers
// this one is strange. In google maps, there is usually only one
// infowindow -- its content and position change when you click on a
// marker
var infowindow = new google.maps.InfoWindow({content: ""});
var legendHTML = "";

// I'm complicating things a bit with this next set of variables, which will help us
// with marker colors

var blueURL = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";
var redURL = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
var red_markers = [];
var blue_markers = [];


/* a function that will run when the page loads. It creates the map
and the initial marker. If you want to create more markers, do it here. */
function initialize() {
my_map_options = {
center: my_center, // to change this value, change my_center above
zoom: 13, // higher is closer-up
mapTypeId: google.maps.MapTypeId.HYBRID // you can also use TERRAIN, STREETMAP, SATELLITE
};

// this one line creates the actual map
my_map = new google.maps.Map(document.getElementById("map_canvas"),
my_map_options);
// this is an *array* that holds all the marker info
var all_my_markers =
[{position: new google.maps.LatLng(41.9000,12.5000),
[{position: new google.maps.LatLng(43.6254364,-79.3693453),
map: my_map,
icon: blueURL, // this sets the image that represents the marker in the map to the one
// located at the URL which is given by the variable blueURL, see above
icon: blueURL,
title: "first Marker",
window_content: "<h1>Marker1</h1><p> and this would be the extended description</p>"
window_content: "<h1>Royal Canadian Yacht Club</h1><p>Founded in 1852, with deep colonial ties and prestige.</p>"
},
{position: new google.maps.LatLng(41.8902,12.4923),
{position: new google.maps.LatLng(43.633325,-79.4003356),
map: my_map,
icon: blueURL, // this sets the image that represents the marker in the map
icon: blueURL,
title: "second Marker",
window_content: "<h1>Marker2</h1><p> and this would be the extended description</p>"
window_content: "<h1>National Yacht Club</h1><p>Founded in 1894 at the Queens Quay Wharf.</p>"
},
{position: new google.maps.LatLng(41.8986,12.4768),
{position: new google.maps.LatLng(43.6353243,-79.4010072),
map: my_map,
icon: redURL, // this sets the image that represents the marker in the map
icon: redURL,
title: "third Marker",
window_content: "<h1>Marker3</h1><p> and this would be the extended description</p>"
}
window_content: "<h1>Queens Quay Wharf</h1><p>AKA Aquatics Club Reservation. Location of NYC in 1904 and AYC in 1919.</p>"
},
{position: new google.maps.LatLng(43.6329744,-79.4005928),
map: my_map,
icon: redURL,
title: "fourth Marker",
window_content: "<h1>Alexandia Yacht Club</h1><p>Founded in 1906.</p>"
},
{position: new google.maps.LatLng(43.639026,-79.348815),
map: my_map,
icon: blueURL,
title: "fifth Marker",
window_content:"<h1>Original Location of AYC</h1><p>Previously known as Fisherman's Island, now a park of Cherry Beach."
},
{position: new google.maps.LatLng(43.6439459,-79.3909462),
map: my_map,
icon: redURL,
title: "sixth Marker",
window_content:"<h1>Original Shoreline of Toronto</h1><p>Past this point is man-made shore."
}
];

for (j = 0; j < all_my_markers.length; j++) {
Expand Down Expand Up @@ -85,24 +92,19 @@ function initialize() {

}

// this hides all markers in the array
// passed to it, by attaching them to
// an empty object (instead of a real map)

function hideMarkers (marker_array) {
for (var j in marker_array) {
marker_array[j].marker.setMap(null);
}
}
// by contrast, this attaches all the markers to
// a real map object, so they reappear

function showMarkers (marker_array, map) {
for (var j in marker_array) {
marker_array[j].marker.setMap(map);
}
}

// I added this for fun. It allows you to trigger the infowindow
// form outside the map.
function locateMarker (marker) {
console.log(marker);
my_map.panTo(marker.marker.position);
Expand Down
77 changes: 23 additions & 54 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,43 @@
/* This is a very simple CSS setup that shows the size of the relevant divs and -- important! -- sets the size of the map container */

/* add any styling for the central column here */
div.container {
}

div#mapcontainer {
font-family:Arial, sans-serif;
font-size:11px;
font-family: sans-serif;
font-size:12px;
border:6px double #5E5C63;
}

/* you can change the size of the map here if you want
you can even use percentages instead of pixels.
We let the width be set by the containing element,
but constrain the height
*/
div#map_canvas {
height:450px;
}

/* this is the legend div. Can you make it into a right sidebar? you may
have to add some extra css to the mapcontainer div */
div#map_legend {

}

/* if you want, you can make the text in the legend less ugly by adding
extra css classes */
div#map_legend h1, div#map_legend h3 {
height:350px;

}

// make it obvious that the legend text is clickable
div.pointer {
cursor:pointer
button.glow-button:hover {
color: #C9EFF2;
box-shadow: 0 5px 15px rgba(145, 92, 182, .4);
}

/*just for fun, we can style the buttons using classes
button.rounded means "all buttons with the class of
rounded". button#hide meands "the button with the
id of hide"
*/
button.rounded {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border: 1px black solid;
}
button#hide {
background:orange;
button#glow-button {
background:#87aeb2
;
border: 2px solid;
border-radius: 12px 25px 11px;

}
button#show {
background:green;
button#glow-button2 {
background:#658D91;
border: 2px solid;
border-radius: 12px 25px 11px;

}

/* use these last three to style the text inside the
infowindows. They are pretty ugly at the moment,
consider making them prettier.

*/

div#map_canvas h1 {

}

div.address {

}

div.description {

font-family: Times, sans-serif;
color: #658D91;
font-size:25px;
border: 2px solid;
border-radius: 12px;
padding: 1px;
}