60 lines
2.1 KiB
HTML
60 lines
2.1 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||
|
|
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
|
||
|
|
<!--[if lte IE 8]>
|
||
|
|
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" />
|
||
|
|
<![endif]-->
|
||
|
|
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
$(document).ready(function () {
|
||
|
|
var map = new L.Map('map');
|
||
|
|
var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
|
||
|
|
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
|
||
|
|
maxZoom: 18
|
||
|
|
});
|
||
|
|
var london = new L.LatLng(51.505, -0.09);
|
||
|
|
map.setView(london, 3).addLayer(cloudmade);
|
||
|
|
var geojson = new L.GeoJSON();
|
||
|
|
map.addLayer(geojson);
|
||
|
|
|
||
|
|
var socket = io.connect('http://localhost:8080');
|
||
|
|
socket.on('news', function (data) {
|
||
|
|
console.log(data);
|
||
|
|
socket.emit('my other event', { my:'data' });
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('#go').click(function () {
|
||
|
|
var sql = $("#sql_input").val();
|
||
|
|
socket.emit("sql_query", {sql:sql, id:'TUMADRE'});
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.on('sql_result', function(data){
|
||
|
|
if (data.state == 1){
|
||
|
|
//console.log(data.r['the_geom']);
|
||
|
|
geojson.addGeoJSON(JSON.parse(data.r['the_geom']));
|
||
|
|
}
|
||
|
|
|
||
|
|
//$('#sql_result').append(JSON.stringify(data));
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<input type="text" id="sql_input"></input>
|
||
|
|
<button type="submit" id="go">go</button>
|
||
|
|
<div id="map" style="height: 100%;width:100%;"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|