-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
128 lines (118 loc) · 4.71 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MapEdit</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />
<link rel="stylesheet" href="css/ge.css" />
</head>
<style>
#map {
width: 960px;
height: 500px;
}
svg {
position: relative;
}
path {
visibility: hidden;
/*fill: #000;*/
/*fill-opacity: .2;*/
/*stroke: #fff;*/
/*stroke-width: 1.5px;*/
}
</style>
<body>
<form>
<label class="mode-radio-labels"><input type="radio" name="mode" value="explore" checked> Explore</label>
<label class="mode-radio-labels"><input type="radio" name="mode" value="draw"> Draw</label>
<label class="mode-radio-labels"><input type="radio" name="mode" value="edit"> Edit</label>
<label class="mode-radio-labels"><input type="radio" name="mode" value="delete"> Delete</label>
</form>
<div id="map">
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
<script src="lib/underscore.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="lib/leaflet-plugins-1.3.11/layer/tile/Google.js"></script>
<script src="src/Graph.js"></script>
<script src="src/GraphEdit.js"></script>
<script>
// D3 + Leaflet: http://bost.ocks.org/mike/leaflet/
var map = new L.Map("map", {center: [38.8961, -76.9916], zoom: 18, maxZoom: 20})
.addLayer(new L.Google());
//.addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));
// var ggl2 = new L.Google('TERRAIN');
// map.addLayer(ggl2);
var graph = new Graph(_),
v0 = graph.addVertex(0, -76.99275076389313, 38.89646892251579),
v1 = graph.addVertex(1, -76.99255764484406, 38.89654824802582),
v2 = graph.addVertex(2, -76.99255228042603, 38.89625599570857),
v3 = graph.addVertex(3, -76.9927453994751, 38.89619337005556),
v4 = graph.addVertex(4, -76.99366271495819, 38.895825965112095),
v5 = graph.addVertex(5, -76.99367344379425, 38.89607229363646),
e0 = graph.addEdge(0, v0, v1),
e1 = graph.addEdge(1, v1, v2),
e2 = graph.addEdge(2, v2, v3),
e3 = graph.addEdge(3, v3, v4),
e4 = graph.addEdge(4, v4, v5);
var graphEdit = new GraphEdit(d3, _, map, graph);
// var svg = d3.select(map.getPanes().overlayPane).append("svg"),
// g = svg.append("g").attr("class", "leaflet-zoom-hide");
// var collection = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[0,90],[-360,90],[-360,-90],[0,-90],[0,90]]]}}]};
// var transform = d3.geo.transform({point: projectPoint}),
// path = d3.geo.path().projection(transform);
//
// var feature = g.selectAll("path")
// .data(collection.features)
// .enter().append("path");
//
// var circle = g.selectAll("circle")
// .data([[-77.036548, 38.897729]])
// .enter().append("circle")
// .on("mouseover", function (d) {
// d3.select(this).classed("active", true);
// })
// .on("mouseout", function () {
// d3.select(this).classed("active", false);
// });
//
//
// map.on("viewreset", reset);
// reset();
//
// // Reposition the SVG to cover the features.
// function reset() {
// var bounds = path.bounds(collection),
// topLeft = bounds[0],
// bottomRight = bounds[1];
//
// svg .attr("width", bottomRight[0] - topLeft[0])
// .attr("height", bottomRight[1] - topLeft[1])
// .style("left", topLeft[0] + "px")
// .style("top", topLeft[1] + "px");
//
// g .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
//
// feature.attr("d", path);
// circle.attr("cx", function (d) {
// var point = map.latLngToLayerPoint(new L.LatLng(d[1], d[0]));
// return point.x;
// })
// .attr("cy", function (d) {
// var point = map.latLngToLayerPoint(new L.LatLng(d[1], d[0]));
// return point.y;
// })
// .attr("r", 5);
// }
//
// // Use Leaflet to implement a D3 geometric transformation.
// function projectPoint(x, y) {
// var point = map.latLngToLayerPoint(new L.LatLng(y, x));
// this.stream.point(point.x, point.y);
// }
</script>
</html>