Skip to content

I think I'm done #6

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
ChoJohn wants to merge 2 commits into
base: master
Choose a base branch
from
Open

I think I'm done #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b683ffa
I think I'm done
ChoJohn Nov 15, 2016
a7ca4bb
essay compoonent added
ChoJohn 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
36 changes: 26 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
<!-- 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" />

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>

<!-- note the 'onload' attribute here.
Expand All @@ -23,7 +25,7 @@
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;">
<textarea theme="united" style="display:none">

# This Map will eventually Become some kind of tour of Toronto.

Expand All @@ -43,19 +45,33 @@
<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 id="container">
<div id="mapcontainer">
<div id="map_canvas"></div>
</div>
<div id="map_legend"></div>
<h1>The Importance of Fort York</h1>
</div>
</div>



# Next Section

The rest of your essay should go under the map, probably.
<p>Toronto is one of the well known cities in Canada, the land has many history. A memorable war that happened in Toronto is the Battle of York. The Battle of York was part of the war of 1812. On April 27, 1813, the Americans landed on shore and advanced to capture the fort. The fort was ordered to be constructed by the Lieutenant Governor John Graves Simcoe. The location of Fort York was a strategic move by the Lieutenant Governor. The importance of Fort York is highlighted in the location of the fort, and the history it represents till this day.</p>


<p>John Graves Simcoe decided to position the fort in the location it exists today. He thought it was an ideal location for a settlement and a great military advantage. It was an ideal location because the fort was the only western entrance from Lake Ontario. The fort was a natural place to defend against enemy attacks. (https://en.wikipedia.org/wiki/Fort_York) The distance of the fort was far enough from the Americans. The natural harbour and the wide open space with a high rise ground made it easy to spot enemies approaching the fort (http://www.historicplaces.ca/en/rep-reg/place-lieu.aspx?id=3677). Because of the security of the fort with many military advantages, settlers were attracted to the location. Soon developed and created the city of Toronto (https://en.wikipedia.org/wiki/York,_Upper_Canada). Although Fort York was captured by the Americans, Major General Roger Hale Sheaffe, the Lieutenant Governor of Upper Canada, was outnumbered greatly and had to retreat back to Kingston (https://en.wikipedia.org/wiki/Battle_of_York#American_planning).</p>


<p>May 25 1934, Fort York opened as a historic site museum to the public. The City of Toronto restored Fort York in 1932 and finished 1934. Fort York holds the largest collection of the war of 1812 buildings. The fort has seven original buildings and one reconstructed building (The Blue Barrack). A significant amount of the Blue Barrack is materials of 1814. It was reconstructed to create employment during the Great Depression. The buildings are examples of the British military structures (http://fortyork.ca/history-of-fort-york.html).</p>


<p>The buildings contain artifacts from the war of 1812. They have a collection of dining cutleries to muskets and pistols from that timeline. Fort York has actors reenacting the soldiers and the wives of the soldiers. The actors demonstrate the drills done by the soldiers of 1812. They also do a musket demonstration.They explain the battle strategies used and explain the formations used in combat. Afterwards, the soldiers would show a live musket demonstration. There are activities children can participate in that are real activities children from the 1812 would do in the fort (http://fortyork.ca).</p>


<p>Fort York played an important role back in the 1800s. The location being a critical military strategy that aided in the growth of the settlement which eventually became the city of Toronto. It still plays an important role today. Fort York brings the 1812 back to life. Visitors can travel back in time and experience the life in 1812. Showing the visitors what the life was back in 1812 help spark the history fanatic within us. Exposing children to a different form of learning and experiencing a fun way to learn history rather than through textbooks. Inspiring the history passion to the younger generation.</p>


## 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>


Expand Down
32 changes: 19 additions & 13 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// 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.639028,-79.403333); // 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
Expand All @@ -24,7 +24,7 @@ var blue_markers = [];
function initialize() {
my_map_options = {
center: my_center, // to change this value, change my_center above
zoom: 13, // higher is closer-up
zoom: 19, // higher is closer-up
mapTypeId: google.maps.MapTypeId.HYBRID // you can also use TERRAIN, STREETMAP, SATELLITE
};

Expand All @@ -33,24 +33,30 @@ function initialize() {
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.639028,-79.403333),
map: my_map,
icon: blueURL, // this sets the image that represents the marker in the map to the one
icon: redURL, // 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
title: "first Marker",
window_content: "<h1>Marker1</h1><p> and this would be the extended description</p>"
title: "Fort York",
window_content: "<h1>Fort York</h1><p>The fort was built in the late 18th century and early 19th century. Fort York was built to take control of Lake Ontario. It was Lieutenant Governor John Graves Simcoe who ordered the Bristish and Canadian military to build the fort against the United States.</p>"
},
{position: new google.maps.LatLng(41.8902,12.4923),
{position: new google.maps.LatLng(43.6393,-79.40215),
map: my_map,
icon: blueURL, // this sets the image that represents the marker in the map
title: "second Marker",
window_content: "<h1>Marker2</h1><p> and this would be the extended description</p>"
title: "Brick Powder Magazine",
window_content: "<h1>Brick Powder Magazine</h1><p>The powder magazine was the building holding the entire fort's gun powder. The building was the only building made out either brick or stone. The were built sturdy so that a bullet can't go through the walls and ignite the gun powder. They are also built below ground level so that the enemey can't spot the building.</p>"
},
{position: new google.maps.LatLng(41.8986,12.4768),
{position: new google.maps.LatLng(43.6389,-79.4043),
map: my_map,
icon: redURL, // this sets the image that represents the marker in the map
title: "third Marker",
window_content: "<h1>Marker3</h1><p> and this would be the extended description</p>"
icon: blueURL, // this sets the image that represents the marker in the map
title: "Barrack",
window_content: "<h1>Barrack</h1><p>The barrack is the building where all the men would sleep. Inside the building, is a row of bunk beds. If the men had a family, their family would have a spot in the barrack. A British soilder were allowed to bring his wife and one child to Canada.</p>"
},
{position: new google.maps.LatLng(43.63909,-79.40286),
map: my_map,
icon: blueURL, // this sets the image that represents the marker in the map
title: "Blockhouse",
window_content: "<h1>Blockhouse 1</h1><p>The blockhouse had no weapons. It was a building for defense. There would be holes in all directions allowing soliders to shoot their musket at the enemy. The second level would have holes on the floor of the parameter of the building allowing the soliders to shoot their muskets down at the enemy.</p>"
}
];

Expand Down
20 changes: 12 additions & 8 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@

/* add any styling for the central column here */
div.container {
background-color: black;
color: white;
}

div#mapcontainer {
font-family:Arial, sans-serif;
font-size:11px;
font-family: 'Montserrat', Arial, sans-serif;
font-size:15px;
color: white;
border:6px double #5E5C63;
}

Expand All @@ -16,19 +19,20 @@ div#mapcontainer {
but constrain the height
*/
div#map_canvas {
height:450px;
height:600px;
}

/* 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 {

font-family: 'Montserrat', Arial, sans-serif;
color:white;
}

/* 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 {

}

// make it obvious that the legend text is clickable
Expand All @@ -48,10 +52,10 @@ button.rounded {
border: 1px black solid;
}
button#hide {
background:orange;
background:skyblue;
}
button#show {
background:green;
background:lightblue;
}

/* use these last three to style the text inside the
Expand All @@ -61,7 +65,7 @@ button#show {
*/

div#map_canvas h1 {

font-size: 15px;
}

div.address {
Expand Down