OpenLayers
Mit Hilfe der JavaScript OpenLayers 3 Library können Open Street Map Karten in eine Webseite eingebunden werden. Die Library kann in der aktuellen Version von OpenLayers.org als ZIP-Archiv heruntergeladen werden.
Nach dem Herunterladen wird die Libray in einem eigenen Verzeichnis ol3 entpackt und über folgende Befehle eingebunden.
<link rel="stylesheet" href="ol3/ol.css" type="text/css"> <script src="ol3/ol.js"></script>
Einbetten der Karte in den HTML-Code
Die Karte wird über folgenden HTML-Code in die Seite eingebunden. Wichtig ist die Bezeichnungen der Tags mit id=map, da die Library hierüber den Bereich der Karte anspricht.
<div class="chart-area">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
</div>
Ansprechen der Karte in JavaScript
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
]),
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([6.948952,50.625882]),
zoom: 14 })
});
Vollständiges Beispiel
Ein vollständiges Beispiel zeigt die Freifunk-Node Karte.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Freifunk-Node Karte</title>
<!-- script src="/js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script -->
<link rel="stylesheet" href="css/ol.css" type="text/css">
<script src="js/ol.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<style>
#map {
position: relative;
}
#popup {
padding-bottom: 45px;
}
</style>
</head>
<body>
<nav class="menue">
<ul class="back-button">
<li class="menu-button"><a href="index.php">Home</a></li>
<li class="menu-button"><a href="map.php">Karte</a></li>
<!-- li class="menu-button"><a href="test.html">Test</a></li-->
</ul>
</nav>
<h1>Freifunk-Node Karte</h1>
<p class="text-normal">
Die Karte soll die ungefähre Abdeckung mit Freifunk verdeutlichen. Um die registrierten Freifunk-Router sind dazu drei Kreise (10m, 30m und 50m) um die Standorte eingezeichnet.
</p>
<div class="chart-area">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
</div>
<script>
// Kreis mit Radius in Metern um einen Geografischen Punkt zeichnen.
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
]),
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([6.948952,50.625882]),
zoom: 14 })
});
var circleFill = [
new ol.style.Fill({
color: 'rgba(255,0,0,0.1)'
}),
new ol.style.Fill({
color: 'rgba(255,255,0,0.2)'
}),
new ol.style.Fill({
color: 'rgba(0,255,0,0.5)'
})
];
var circleStroke = new ol.style.Stroke({
color: 'blue',
width: 0.25
});
var circleStyle =
[
new ol.style.Style({
image: new ol.style.Circle({
fill: circleFill[0],
stroke: circleStroke,
radius: 5
}),
fill: circleFill[0],
stroke: circleStroke
}),
new ol.style.Style({
image: new ol.style.Circle({
fill: circleFill[1],
stroke: circleStroke,
radius: 5
}),
fill: circleFill[1],
stroke: circleStroke
}),
new ol.style.Style({
image: new ol.style.Circle({
fill: circleFill[2],
stroke: circleStroke,
radius: 5
}),
fill: circleFill[2],
stroke: circleStroke
})
];
// Kreis mit Radius in Metern um einen Geografischen Punkt zeichnen.
var drawCircleInMeter = function(map, lat, long , radius, circleStyle ) {
var view = map.getView();
var projection = view.getProjection();
var resolutionAtEquator = view.getResolution();
var center = ol.proj.fromLonLat([lat,long]);
var pointResolution = projection.getPointResolution(resolutionAtEquator, center);
var resolutionFactor = resolutionAtEquator/pointResolution;
var radius = (radius / ol.proj.METERS_PER_UNIT.m) * resolutionFactor;
var circle = new ol.geom.Circle(center, radius);
var circleFeature = new ol.Feature(circle);
circleFeature.setStyle(circleStyle);
// Source and vector layer
var vectorSource = new ol.source.Vector({
projection: 'EPSG:4326'
});
vectorSource.addFeature(circleFeature);
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
} // End drawCircleInMeter
var oOrtsfilter = document.getElementById('Ortsfilter');
var Ortsfilter = '';
var xmlhttp = new XMLHttpRequest();
var url = "data/nodes.json";
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
var NodesData = JSON.parse(response);
var i;
var out = "";
var count = 0;
NodesData.nodes.sort(function(a,b) {
return a["nodeinfo"]["hostname"].localeCompare(b["nodeinfo"]["hostname"]) ;
});
var re = new RegExp(Ortsfilter,"i");
for(i = 0; i < NodesData.nodes.length; i++) {
if ((Ortsfilter == "//i") | ( NodesData.nodes[i].nodeinfo.hostname.search(re) != -1))
{
if ( !((typeof NodesData.nodes[i].nodeinfo.location === 'undefined') || (NodesData.nodes[i].nodeinfo.location === null))) {
lat=NodesData.nodes[i].nodeinfo.location.latitude;
lon=NodesData.nodes[i].nodeinfo.location.longitude;
drawCircleInMeter(map,lon,lat,50,circleStyle[0]);
}
}
}
for(i = 0; i < NodesData.nodes.length; i++) {
if ((Ortsfilter == "//i") | ( NodesData.nodes[i].nodeinfo.hostname.search(re) != -1))
{
if ( !((typeof NodesData.nodes[i].nodeinfo.location === 'undefined') || (NodesData.nodes[i].nodeinfo.location === null))) {
lat=NodesData.nodes[i].nodeinfo.location.latitude;
lon=NodesData.nodes[i].nodeinfo.location.longitude;
drawCircleInMeter(map,lon,lat,30,circleStyle[1]);
}
}
}
for(i = 0; i < NodesData.nodes.length; i++) {
if ((Ortsfilter == "//i") | ( NodesData.nodes[i].nodeinfo.hostname.search(re) != -1))
{
if ( !((typeof NodesData.nodes[i].nodeinfo.location === 'undefined') || (NodesData.nodes[i].nodeinfo.location === null))) {
lat=NodesData.nodes[i].nodeinfo.location.latitude;
lon=NodesData.nodes[i].nodeinfo.location.longitude;
drawCircleInMeter(map,lon,lat,10,circleStyle[2]);
}
}
}
}
</script>
<h2>Filter</h2>
<div class="ff-form-box">
<form action="" method="post">
<label>Ort:</label><br />
<input type="text" id="Ortsfilter" name="Ortsfilter" size="32" maxlenght="255" value=""><br>
<input type="submit" name="submit" value="Neu laden und filtern">
</form>
</div>
</body>
</html>