-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.php
86 lines (79 loc) · 3.64 KB
/
map.php
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
<!DOCTYPE html>
<html>
<head>
<?php include 'meta.php'; ?>
<title>DPLA Visualizations</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<link rel="stylesheet" href="Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js?2"></script>
<script src="Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#d3-dpla').submit(function(e) {
e.preventDefault();
var q = $('#q').val();
var hide = $('#hide');
var maps = $('#map');
var message = $('#message');
message.text('');
if(maps.html() != '') {
maps.detach();
var map_div = document.createElement('div');
map_div.id = 'map';
$(map_div).appendTo('body');
}
if(q) {
hide.removeClass('hide');
$.getJSON("DplaMap.php?q=" + q, function(data) {
var map = L.map('map').setView([36, -88], 2);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 21
}).addTo(map);
var markers = L.markerClusterGroup();
for (var i = 0; i < data.length; i++) {
if(data[i].lat == null || data[i].lat == '') {
continue;
}
var title = data[i].title;
var marker = L.marker(L.latLng(data[i].lat, data[i].lon), { title: title });
marker.bindPopup('<strong>' + title + '</strong><br />' +
'<img src="' + data[i].path + '" width="100" height="100" style="border:1px solid gray"> ' +
'<br />View this item <a target="_blank" href="' + data[i].link +'">here</a>');
markers.addLayer(marker);
}
map.addLayer(markers);
hide.addClass('hide');
message.text("Your search term(s): " + q);
});
} else {
message.text('Please enter a search phrase');
}
});
});
</script>
<style type="text/css">
#map {
height: 600px;
clear: both;
}
</style>
</head>
<body>
<?php include 'header.php'; ?>
<h1>DPLA Visualizations - See where your term(s) are located geographically</h1>
<p>Note: Most DPLA items don't have latitude and longitude information.
Depending on your search terms it can take some time to return your graph</p>
<form action="#" method="post" id="d3-dpla">
<input type="text" name="q" id="q" placeholder="Search the DPLA"/>
<input type="submit" value="Search">
</form>
<p id="message"></p>
<img src="ajax-loader.gif" alt="load indicator" id="hide" class="hide" />
<div id="map"></div>
<?php include_once 'google.php'; ?>
</body>
</html>