-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
99 lines (80 loc) · 3.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Plotter.js Utility for Google Maps</title>
<!-- Minimal jQuery dependency... maybe help remove this? :) -->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<!-- IMPORTANT: INCLUDE &libraries=geometry -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script language="javascript" src="plotter.js" type="text/javascript"></script>
</head>
<body>
<h1>Plotter.js Utility for Google Maps</h1>
<button id="on">Turn Plotter.js ON</button>
<button id="off">Turn Plotter.js OFF</button>
<div id="map_canvas"></div>
<p id="data-catcher"></p>
<button id="coords">Get Coordinates</button>
<script type="text/javascript">
var map = null;
$(function() {
// Getch'ur map on!
var myLatlng = new google.maps.LatLng(15.623037,-16.171875);
var myOptions = {
zoom: 13,
center: myLatlng,
navigationControl: true,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Bind Plotter.js to your map
plotter.bind({
fillColor: '#3FA9F5',
icon: 'marker.png',
map: map,
multiple: 10.7639104, // Baseline is meters
report: $("#data-catcher"), // Declare an object to receive a .html() update of the plotted area's square-foot area (Optional)
strokeWeight: 1
});
// plotter.report = $("#data-catcher");
// Binding the On/Off switch to demo controls
$("button#off, button#coords").hide();
$("button#on").click(function(){
$("button#on").hide();
$("button#off, button#coords").show();
// Turn Plotter.js on
plotter.on();
});
$("button#off").click(function(){
$("button#off, button#coords").hide();
$("button#on").show();
// Turn Plotter.js off
plotter.off();
});
$("button#coords").click(function(){
alert(plotter.data());
});
// For demo purposes only... find your driveway or backyard and see how big it is!
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
update = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.panTo(update);
var marker = new google.maps.Marker({
position: update,
map: map,
title:"Found ya!"
});
});
}
});
</script>
<style type="text/css">
h1 { font: 24px/1 Georgia, "Times New Roman", Times, serif normal; margin: 3em 0 0; }
button { font: 14px/1.5 Helvetica, Arial, sans-serif normal; margin: 12px 0; }
#map_canvas { height: 500px; width: 100%; }
</style>
<a href="http://github.com/datafolklabs/plotter.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
</body>
</html>