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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
//Utility functions for map info window
function mapit(lat,lon,zoom,id) {
var map;
//create a new map
var centerCoord = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: zoom,
center: centerCoord,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
};
map = new google.maps.Map(document.getElementById('map-wrapper-'+id), mapOptions);
//get the geojson for this map
$.ajax({
url: "/projects/data/"+id+".json",
dataType: "json",
success: function(data, text, request) { draw_poly(data); }
//complete: function(xhr, status) {console.log(status); return false; },
});
//draw the polygon
function draw_poly(data) {
var poly = createPolygons(data.features[0].geometry);
for (i=0;i<=poly.length-1;i++) {
poly[i].setMap(map);
}
}
}
// utility functions to create/remove map container
function create_map(obj) {
//break up the variable passed from the map link's title element
var lat = parseFloat(obj.title.split(',')[0]);
var lon = parseFloat(obj.title.split(',')[1]);
var zoom= parseInt(obj.title.split(',')[2]);
var id= obj.title.split(',')[3];
//create container divs
$(obj).parents().eq(3).append('<div class="map-container" id="map-container-'+id+'">');
$('#map-container-'+id).append('<div class="map-wrapper" id="map-wrapper-'+id+'">');
//deal with the variable height of div.legend
//$('#map-container').css({
// bottom: function(index, value) {
// return parseFloat($(obj).parent().parent().css("height"))-2;
// }
// });
mapit(lat,lon,zoom,id);
}
function remove_map(id) {
$(id).remove();
}
//function to parse and render polygons for GMaps
//# taken from http://friism.com/drawing-geojson-based-polygons-on-google-maps
function createPolygons(areajson, bounds){
var coords = areajson.coordinates;
var polygons = _(coords).reduce([], function(memo_n, n) {
var polygonpaths = _(n).reduce(new google.maps.MVCArray(), function(memo_o, o) {
var polygoncords = _(o).reduce(new google.maps.MVCArray(), function(memo_p, p) {
var mylatlng = new google.maps.LatLng(p[1], p[0]);
if(bounds){
bounds.extend(mylatlng);
}
memo_p.push(mylatlng);
return memo_p;
});
memo_o.push(polygoncords);
return memo_o;
});
var polygon = new google.maps.Polygon({
paths: polygonpaths,
strokeColor: "#201a11",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#201a11",
fillOpacity: 0.35
});
memo_n.push(polygon);
return memo_n;
});
return polygons;
}
//functions to handle the "more" link
// utility functions to create/remove camera info container
function get_exif(obj,id) {
//$(obj).parents().eq(2).append('<div id="exif-container">');
$(obj).parents().eq(3).append('<div class="more-container" id="'+id+'">'); $(obj).parents().eq(2).children('.meta').clone().appendTo('#'+id).css('visibility', 'visible');
//deal with the variable height of div.legend
$('#exif-container').css({
bottom: function(index, value) {
return parseFloat($(obj).parent().parent().css("height"))-14;
}
});
}
function remove_exif(id) {
$('#'+id).remove();
}
$(document).ready(function(){
//set up click events for map button
$('.map-link').click( function() {
var more_id = 'more-container-'+$(this).parent().next().children('.more-link').attr('id').split('-')[1];
var id = '#map-container-'+this.title.split(',')[3];
if ($('#'+more_id).is(":visible")){
remove_exif(more_id);
}
if ($(id).is(":visible")) {
remove_map(id);
} else {
create_map(this);
}
return false;
});
//set up click events for more info button
$('.more-link').click( function() {
var map_id = '#map-container-'+$(this).parent().prev().children('.map-link').attr('title').split(',')[3];
var id = 'more-container-'+this.id.split('-')[1];
if ($(map_id).is(":visible")){
remove_map(map_id);
}
if ($('#'+id).is(":visible")) {
remove_exif(id);
} else {
get_exif(this, id);
}
return false;
});
});
|
