168 lines
4.2 KiB
HTML
168 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #999;
|
|
}
|
|
|
|
#wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#categories {
|
|
position: absolute;
|
|
top: 10px;
|
|
width: 60%;
|
|
left: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
#categories table {
|
|
height: 200px;
|
|
width: 60%;
|
|
margin-left: 20%;
|
|
-moz-box-shadow: 0px 0px 1em;
|
|
-webkit-box-shadow: 0px 0px 1em;
|
|
box-shadow: 0px 0px 1em;
|
|
}
|
|
|
|
#categories table tr {
|
|
|
|
}
|
|
|
|
#categories table tr td {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.imageCategory {
|
|
background: #ffd055;
|
|
}
|
|
|
|
.videoCategory {
|
|
background: #ff6066;
|
|
}
|
|
|
|
.textCategory {
|
|
background: #69fd6c;
|
|
}
|
|
|
|
.audioCategory {
|
|
background: #7d69fd;
|
|
}
|
|
|
|
#map {
|
|
position: absolute;
|
|
top: 220px;
|
|
bottom: 0px;
|
|
right: 40%;
|
|
left: 0px;
|
|
}
|
|
|
|
#media {
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 40%;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="/static/js/jquery.js"></script>
|
|
<script type="text/javascript" src="/static/js/openlayers/OpenLayers.js"></script>
|
|
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAsn1j-ZGGtRgZ9aMJPCZbRxTEwe8r4EmncxniwLCEI2F-aeUoNRTBAUi3uvVAsZpLkcO78Ryd18Hfaw'></script>
|
|
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
var center = new OpenLayers.LonLat(72.855211097628413, 19.010775291486027);
|
|
map = new OpenLayers.Map('map');
|
|
var layers = [];
|
|
layers[0] = new OpenLayers.Layer.Google(
|
|
"Google Streets", // the default
|
|
{numZoomLevels: 20, isBaseLayer: true}
|
|
);
|
|
var geojson_format = new OpenLayers.Format.GeoJSON();
|
|
layers[1] = new OpenLayers.Layer.Vector({'geometryType': 'Point'});
|
|
// map.addLayer(vector_layer);
|
|
map.addLayers(layers);
|
|
map.setCenter(center, 12);
|
|
var control = new OpenLayers.Control.SelectFeature(layers[1], {hover: false});
|
|
map.addControl(control);
|
|
control.activate();
|
|
$.getJSON("geojson", {}, function(json) {
|
|
layers[1].addFeatures(geojson_format.read(json));
|
|
layers[1].events.on({
|
|
'featureselected': onFeatureSelect
|
|
});
|
|
});
|
|
});
|
|
|
|
function onFeatureSelect(f) {
|
|
var id = f.feature.attributes.id;
|
|
$.getJSON("flyover", {'id': id}, function(json) {
|
|
$('#media').html(json.name + "<br /><br />");
|
|
$.each(json.media.images, function(i, v) {
|
|
var img = $('<img />').attr("src", v.url).css({'width': '100px', 'height': '100px'});
|
|
$('#media').append(img);
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<div id="categories">
|
|
<table>
|
|
<tr>
|
|
<td class="imageCategory" data-id="11">Flyover sweeps</td>
|
|
<td class="imageCategory" data-id="1">Central underview</td>
|
|
<td class="imageCategory" data-id="9">Models</td>
|
|
<td class="imageCategory" data-id="16">Skywalk sweeps</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="imageCategory" data-id="6">Signs</td>
|
|
<td class="imageCategory" data-id="7">Piers</td>
|
|
<td class="imageCategory" data-id="15">Columns</td>
|
|
<td class="imageCategory" data-id="13">End surfaces</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="imageCategory" data-id="4">Unfinished</td>
|
|
<td class="imageCategory" data-id="12">Construction</td>
|
|
<td class="videoCategory" data-id="2">Construction</td>
|
|
<td class="textCategory" data-id="">Text1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="imageCategory" data-id="2">Regulation</td>
|
|
<td class="imageCategory" data-id="10">Fencing</td>
|
|
<td class="videoCategory" data-id="4">In The Way</td>
|
|
<td class="textCategory" data-id="">Text2</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="imageCategory" data-id="14">Greenspace</td>
|
|
<td class="imageCategory" data-id="8">Posters</td>
|
|
<td class="videoCategory" data-id="1">Routes</td>
|
|
<td class="textCategory" data-id="">Text3</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="imageCategory" data-id="5">Life underneath</td>
|
|
<td class="imageCategory" data-id="3">Storing / Selling</td>
|
|
<td class="videoCategory" data-id="3">Stills underneath</td>
|
|
<td class="audioCategory" data-id="">Sounds</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="map">
|
|
|
|
</div>
|
|
<div id="media">
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|