Skip to content

Map #11

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
pratyush1312 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Map #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
198 changes: 198 additions & 0 deletions Module 1 - HTML and CSS/Map&exlore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
body, html {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
overflow: hidden;
font-size:9pt;
font-family:"Trebuchet MS", Helvetica, Tahoma, sans-serif;
background-color:#BBDDFF;
}
a.button:hover, a.button:active {
color:white;
border: 1px solid black;
background-color: #3333FF;
text-decoration: none;
cursor:pointer;
}
.button a:link, .button a:visited {
background-color: #000099;
color:white;
text-decoration: none;
cursor:auto;
}
#map {
position: absolute;
top:300px;
bottom:0px;
left:400px;
right:0px;
overflow:hidden;
}
#map * {
cursor:crosshair;
}
#inputbox {
position: fixed;
top:0px;
bottom:300px;
height:100%;
left:400px;
right:0px;
overflow:auto;
padding:5px;
}
#waypoints {
position: fixed;
left: 0px;
top: 0px;
right:400px;
height: 100%;
width: 400px;
overflow:auto;
}
* html body {
padding: 0 0 0 0;
}
* html #map {
height:100%;
width:75%;
}
img {
line-height: 0;
}
table.wpttable {
font-size:8pt;
border: 1px solid black;
border-spacing: 0px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}
table.wpttable td, th {
border: solid black;
border-width: 1px;
padding: 0px 2px;
}
table.wpttable tr td {
text-align:right;
}
.button {
background-color: #000099;
color:white;
border: 1px solid #0000FF;
padding: 0px 3px;
text-decoration:none;
}
.cellbutton {
color: #000099;
/*background-color: inherit; */
border: 1px solid #000099;
cursor:pointer;
}
.cellbuttonhover {
background-color: #3333FF;
color:white;
border: 1px solid white;
cursor:pointer;
}
</style>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;key=AIzaSyD9J85QdcbogCpDnhVcpHD6L5bHLbbaHcc"></script>
<script type="text/javascript" src="http://cmap.m-plex.com/hb/maptypes.js"></script>
<script type="text/javascript">
<!--
//<![CDATA[
function OSMUrl(lat, lon) {return "http://www.openstreetmap.org/?lat=" + lat.toFixed(6) + "&amp;lon=" + lon.toFixed(6);};
function YahooUrl(lat, lon) {return "http://maps.yahoo.com/#mvt=m&amp;lat=" + lat.toFixed(6) + "&amp;lon=" + lon.toFixed(6) + "&amp;zoom=16";};
function GoogleUrl(lat, lon) {return "http://maps.google.com/maps?ll=" + lat.toFixed(6) + "," + lon.toFixed(6) + "&amp;z=15";};
function BingUrl(lat, lon) {return "http://www.bing.com/maps/?v=2&amp;cp=" + lat.toFixed(6) + "~" + lon.toFixed(6) + "&amp;lvl=15";};
function GMSVUrl(lat, lon) {return "http://maps.google.com/?ll=" + lat.toFixed(6) + "," + lon.toFixed(6) + "&amp;cbp=12,0,,0,5&amp;cbll=" + lat.toFixed(6) + "," + lon.toFixed(6) + "&amp;layer=c";};
var map;
var infowindow;
var trace;
function loadmap() {
var typeMQOpenMap = new google.maps.ImageMapType(MQOpenMapOptions);
var typeMQOpenSat = new google.maps.ImageMapType(MQOpenSatOptions);
var typeMapnik = new google.maps.ImageMapType(MapnikOptions);
var typeMQMap = new google.maps.ImageMapType(MQMapOptions);
var typeMQSat = new google.maps.ImageMapType(MQSatOptions);
var typeCHMSys = new google.maps.ImageMapType(CHMSysOptions);
var typeCHMPct = new google.maps.ImageMapType(CHMPctOptions);
var typeYahooMap = new google.maps.ImageMapType(YahooMapOptions);
var typeYahooSat = new google.maps.ImageMapType(YahooSatOptions);
var typeBingMap = new google.maps.ImageMapType(BingMapOptions);
var typeBingSat = new google.maps.ImageMapType(BingSatOptions);
var maptypelist = ['MQOpenMap', 'MQOpenSat', 'Mapnik', 'MQMap', 'MQSat', 'CHMSys', 'CHMPct', 'YahooMap', 'YahooSat', 'BingMap', 'BingSat', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN];
var maptypecontroloptions = {mapTypeIds: maptypelist, position: google.maps.TOP_RIGHT, style: google.maps.MapTypeControlStyle.DROPDOWN_MENU};
var mapopt = {center: new google.maps.LatLng(0., 0.), zoom: 2, mapTypeId: 'MQOpenMap', mapTypeControl: true, mapTypeControlOptions: maptypecontroloptions, streetViewControl: true, disableDefaultUI: true, panControl: true, zoomControl: true, scaleControl: true, overviewMapControl: true, keyboardShortcuts: true, disableDoubleClickZoom: true};
infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("map"), mapopt)
trace = new google.maps.Polyline({map: null});
lotrace = new google.maps.Polyline({map: null});
hitrace = new google.maps.Polyline({map: null});
map.mapTypes.set('MQOpenMap', typeMQOpenMap);
map.mapTypes.set('MQOpenSat', typeMQOpenSat);
map.mapTypes.set('Mapnik', typeMapnik);
map.mapTypes.set('MQMap', typeMQMap);
map.mapTypes.set('MQSat', typeMQSat);
map.mapTypes.set('CHMSys', typeCHMSys);
map.mapTypes.set('CHMPct', typeCHMPct);
map.mapTypes.set('YahooMap', typeYahooMap);
map.mapTypes.set('YahooSat', typeYahooSat);
map.mapTypes.set('BingMap', typeBingMap);
map.mapTypes.set('BingSat', typeBingSat);
google.maps.event.addListener(map, "center_changed", UpdateCoords);
google.maps.event.addListener(map, "click", function () { infowindow.close()});
google.maps.event.addListener(map, 'dblclick', function (theevent) {map.panTo(theevent.latLng);});
window.onbeforeunload = WptClose;
}
//]]>
-->
</script>
<title>CHM Waypoints Editor v2.1b</title>
<script src="wptfunctions.js" type="text/javascript"></script>
</head>

<body onload="javascript: ChangeLayout(); loadmap();">

<div id="waypoints">
<p id="output"></p>

</div>

<div id="inputbox">
<p><a onclick="javascript:LoadText(false);" class="button">Load</a> <a onclick="javascript:LoadText(true);" class="button">Load and Pan</a> <a onclick="javascript:ReverseWaypoints();" class="button">Reverse order</a> <a onclick="javascript:RestoreWaypoints();" class="button">Undo</a> <a onclick="javascript:WriteTabText();" class="button">Save to Tab</a> <a onclick="javascript:ClearText();" class="button">Clear</a> <a onclick="javascript:ChangeLayout();" class="button">Change Layout</a>
<select name="thickness" onchange="ChangeLineThickness(this.value);">
<option value="0.25" selected >Th. -2</option>
<option value="0.5" selected >Th. -1</option>
<option value="1" selected >Th. Hwy.</option>
<option value="2">Th. +1</option>
<option value="4">Th. +2</option>
<option value="8">Th. +3</option>
<option value="16">Th. +4</option>
<option value="32">Th. +5</option>
</select>
</p>
<textarea id="inputtext" style="font-size:x-small;" rows="7" cols="80"></textarea>
<p id="inuselabelsbar"><a onclick="javascript:LoadInUseLabels()" class="button">Load In-use Labels</a> <a onclick="javascript:ClearInUseLabels()" class="button">Clear</a> <textarea id="inuselabelstext" style="font-size:x-small;" rows="1" cols="55"></textarea></p>
<p id="errorbar">Paste .wpt file lines in the text area above. Click Load and Pan above.</p>
<p id="coordbar">&nbsp;</p>
</div>

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


</body></html>