ffmap-backend/html/geomap.js

164 lines
5.3 KiB
JavaScript
Raw Normal View History

2012-06-12 01:58:29 +02:00
var map;
var vectorLayer;
var nodes_json = "nodes.json"
2012-06-12 01:58:29 +02:00
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control);
function init()
{
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition()],
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
arrayOSM = ["http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg",
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg",
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg",
"http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"];
2012-09-05 03:47:22 +02:00
var baseOSM = new OpenLayers.Layer.OSM("MapQuest-OSM Tiles", arrayOSM, {opacity: 0.6});
map.addLayer(baseOSM);
2012-06-12 01:58:29 +02:00
2012-08-09 19:33:47 +02:00
var center = new OpenLayers.LonLat(10.688, 53.866).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
2012-06-12 01:58:29 +02:00
var zoom = 13
2012-06-12 01:58:29 +02:00
map.setCenter(center, zoom);
vectorLayer = new OpenLayers.Layer.Vector("Nodes");
map.addLayer(vectorLayer);
selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);
selectControl.activate();
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
load_json(vectorLayer, map)
2012-09-06 20:13:09 +02:00
d3.selectAll("#gpsbutton").on("click", function() {
function clickhandler(e) {
var lonlat = map.getLonLatFromViewPortPx(e.xy).transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"))
alert(lonlat.lon + " " + lonlat.lat)
map.events.unregister("click", map, clickhandler)
}
var clickevent = map.events.register("click", map, clickhandler)
})
2012-06-12 01:58:29 +02:00
}
function resizeMap()
{
if (map !== undefined) {
map.updateSize()
// Did someone say Chrome bug?
map.removeLayer(vectorLayer)
map.addLayer(vectorLayer)
}
}
2012-06-12 01:58:29 +02:00
function onPopupClose(evt)
{
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature)
{
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,150),
"<div class='nodePopup'><span class='label'>Name:</span> "+feature.attributes.name+"<br><span class='label'>Description:</span> "+feature.attributes.description+"</div>",
2012-06-12 01:58:29 +02:00
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature)
{
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function kmlLoaded()
{
map.zoomToExtent(vectorLayer.getDataExtent());
}
function load_json(layer, map) {
d3.json(nodes_json, function(json) {
2012-06-12 01:58:29 +02:00
// replace indices with real objects
json.links.forEach( function(d) {
if (typeof d.source == "number") d.source = json.nodes[d.source]
if (typeof d.target == "number") d.target = json.nodes[d.target]
})
json.nodes.filter( function(d) {
return d.geo !== null
}).forEach( function(d) {
var lonlat = new OpenLayers.LonLat(d.geo[1], d.geo[0])
.transform( new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var img = d.flags.online?"router-up.png":"router-down.png"
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat),
{name: d.name, description: d.id},
{externalGraphic: img, graphicHeight: 32, graphicWidth: 32}
)
layer.addFeatures([feature])
})
json.links.filter( function(d) {
return d.source.geo !== null && d.target.geo !== null &&
d.type != "vpn"
}).forEach( function(d) {
var a = new OpenLayers.LonLat(d.source.geo[1], d.source.geo[0])
.transform( new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var b = new OpenLayers.LonLat(d.target.geo[1], d.target.geo[0])
.transform( new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
2012-09-05 03:34:39 +02:00
var color;
switch (d.type) {
case "vpn":
color = linkcolor['default'](Math.max.apply(null, d.quality.split(",")))
break;
default:
color = linkcolor['wifi'](Math.max.apply(null, d.quality.split(",")))
}
2012-06-12 01:58:29 +02:00
var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(
[new OpenLayers.Geometry.Point(a.lon, a.lat),
new OpenLayers.Geometry.Point(b.lon, b.lat),
]),
{name: d.name, description: d.id},
{
2012-09-05 03:47:22 +02:00
strokeColor: d3.rgb(color).brighter(1),
2012-09-05 03:34:39 +02:00
strokeOpacity: 0.8,
strokeWidth: 3
2012-06-12 01:58:29 +02:00
})
layer.addFeatures([feature])
})
})
}