Thomas: Erste Erstellung

2016-08-11T10:16:23Z

Erste Erstellung

Neue Seite

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
[http://openlayers.org/download/ 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 [http://test.byggvir.de/karte/map.php Freifunk-Node Karte].

<pre>
<!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>

<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>


</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>

</pre>

OpenLayers - Versionsgeschichte

Thomas: Erste Erstellung