add geo stuff
bert hubert
parent
0dc53e0aec
commit
14c161dae3
|
|
@ -0,0 +1,107 @@
|
|||
|
||||
var repeat;
|
||||
|
||||
var world={};
|
||||
d3.json("world.geojson", function(result) {
|
||||
world=result;
|
||||
update();
|
||||
});
|
||||
|
||||
var oldsats=[];
|
||||
|
||||
function update()
|
||||
{
|
||||
var seconds = 60;
|
||||
clearTimeout(repeat);
|
||||
repeat=setTimeout(update, 1000.0*seconds);
|
||||
|
||||
d3.queue(1).defer(d3.json, "../almanac").defer(d3.json, "../observers").awaitAll(ready);
|
||||
|
||||
function ready(error, results)
|
||||
{
|
||||
// var aProjection = d3.geoMercator().scale(100).translate([250,250]);
|
||||
|
||||
// all this complexity is so we can scale to full screen.
|
||||
// see: https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object
|
||||
|
||||
var mapDiv = document.getElementById("map");
|
||||
|
||||
var center = [0,0];
|
||||
var scale = 150;
|
||||
var offset = [mapDiv.clientWidth/2, mapDiv.clientHeight/2];
|
||||
|
||||
var aProjection = d3.geoEquirectangular().scale(scale).translate([mapDiv.clientWidth/2,mapDiv.clientHeight/2]);
|
||||
var geoPath = d3.geoPath().projection(aProjection);
|
||||
|
||||
// using the path determine the bounds of the current map and use
|
||||
// these to determine better values for the scale and translation
|
||||
var bounds = geoPath.bounds(world);
|
||||
var hscale = scale*mapDiv.clientWidth / (bounds[1][0] - bounds[0][0]);
|
||||
var vscale = scale*mapDiv.clientHeight / (bounds[1][1] - bounds[0][1]);
|
||||
scale = (hscale < vscale) ? hscale : vscale;
|
||||
var offset = [mapDiv.clientWidth - (bounds[0][0] + bounds[1][0])/2,
|
||||
mapDiv.clientHeight - (bounds[0][1] + bounds[1][1])/2];
|
||||
|
||||
// new projection
|
||||
aProjection = d3.geoEquirectangular().center(center)
|
||||
.scale(scale).translate(offset);
|
||||
|
||||
geoPath = d3.geoPath().projection(aProjection);
|
||||
|
||||
var svg =d3.select("svg");
|
||||
svg.html("");
|
||||
|
||||
svg.attr("width", mapDiv.clientWidth);
|
||||
svg.attr("height", mapDiv.clientHeight);
|
||||
|
||||
|
||||
svg.selectAll("path").data(world.features)
|
||||
.enter()
|
||||
.append("path")
|
||||
.attr("d", geoPath)
|
||||
.attr("class", "countries");
|
||||
|
||||
var arr=[];
|
||||
Object.keys(results[0]).forEach(function(e) {
|
||||
var o = results[0][e];
|
||||
o.sv=e;
|
||||
|
||||
if(o["eph-latitude"] != null) {
|
||||
arr.push(o);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
svg.selectAll("circle").data(arr)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("class", "sats")
|
||||
.attr("r", 3)
|
||||
.attr("cx", d => aProjection([d["eph-longitude"],d["eph-latitude"]])[0])
|
||||
.attr("cy", d => aProjection([d["eph-longitude"],d["eph-latitude"]])[1])
|
||||
.attr("fill", function(d) { if(d.gnssid==2) return "blue";
|
||||
if(d.gnssid==3) return "red";
|
||||
else return "green"; });
|
||||
|
||||
svg.selectAll("text").data(arr)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("dx", d => 5+aProjection([d["eph-longitude"],d["eph-latitude"]])[0])
|
||||
.attr("dy", d => 5+aProjection([d["eph-longitude"],d["eph-latitude"]])[1])
|
||||
.text(d => d.sv);
|
||||
|
||||
svg.selectAll("rect").data(results[1])
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("class", "sats")
|
||||
.attr("width", 8)
|
||||
.attr("height", 8)
|
||||
.attr("x", d => aProjection([d["longitude"],d["latitude"]])[0]-4)
|
||||
.attr("y", d => aProjection([d["longitude"],d["latitude"]])[1]-4)
|
||||
.attr("fill", function(d) { console.log("Hallo!"); return "black"; });
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// d3.select("body").onresize = update;
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body,
|
||||
svg {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
path.countries {
|
||||
stroke-width: 1;
|
||||
stroke: #75739F;
|
||||
fill: #5EAFC6;
|
||||
}
|
||||
circle.sats {
|
||||
stroke-width: 1;
|
||||
stroke: #4F442B;
|
||||
// fill: #FCBC34;
|
||||
}
|
||||
circle.centroid {
|
||||
fill: #75739F;
|
||||
pointer-events: none;
|
||||
}
|
||||
rect.bbox {
|
||||
fill: none;
|
||||
stroke-dasharray: 5 5;
|
||||
stroke: #75739F;
|
||||
stroke-width: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
path.graticule {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: #9A8B7A;
|
||||
}
|
||||
path.graticule.outline {
|
||||
stroke: #9A8B7A;
|
||||
}
|
||||
|
||||
path.merged {
|
||||
fill: #9A8B7A;
|
||||
stroke: #4F442B;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
#map {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
<svg width="100%" height="100%"></svg>
|
||||
</div>
|
||||
<script src="../d3.v4.min.js"></script>
|
||||
<script src="geo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue