![[GOOGLE PICASA]](./themes/speexx/images/picasa32x32.png "Sascha@Picasa"){kind=small}
![[GOOGLE BUZZ]](./themes/speexx/images/buzz37x32.png "Sascha@Buzz"){kind=small}
![ATOM FEED]](./themes/speexx/images/feed-icon-14x14.png "Atom 1.0 Feed"){kind=icon}
![[HAUPTSTADTBLOG]](http://www.hauptstadtblog.de/template/hsb-sticker-2.gif "Hauptstadt-Blog"){kind=small}
![[EMPHASIZE]](./images/icons/emphasize.80x15.gif "Martin Hartnagel"){kind=icon}
Der Schockwellenreiter baut gerade sein eigenes Streetview. Er experimentiert damit die Bilder mit OpenStreetMap Karten anzuzeigen. Ich wollte das auch schon immer mal mit meinen geotaggt Bildern machen – war nur zu träge. Dabei habe ich einen etwas anderen Weg als Jörg Kantel gewählt. Einen Weg der etwas weniger strikt mit <body onload='…'> umgeht. So wie er es beschreibt geht es bei mir nicht ganz. Die <div> ID würde bei dieser Blogsoftware einer globalen Variable entsprechen. Da ich eventuell mehr Maps einbinden möchte starte ich die Map innerhalb eines <script> Bereichs im Body. Das ist mehr der Weg, wie es die OpenLayers Implementierung von OpenStreetMap aktuell macht.
Daneben untersuche ich noch eventuelle URL Parameter. Sind sie nicht gesetzt, werden Default-Werte verwendet. Hierfür wird eine kleine Funktion auf RegExp Basis verwendet. Grund: ich wollte für diese inzwischen fünf Jahre alte Software kein Plugin mehr schreiben. Mit den Parametern lässt sich die Map weitestgehend steuern.
<div id='berlin_picture_map_20100612' style='height:480px; width:640px; '></div>
<script type="text/javascript" defer="defer">
// <!--
// Possible request parameters:
// div = name of the "div" ID for the map.
// Default: "berlin_picture_map"
// lon = center longitude of the map. If available also "lat" must be available.
// Default: 13.44989
// lat = center latitude of the map. If available also "lon" must be available.
// Default: 52.50776
// z = OpenStreetMap zoom level.
// Default: 12
// tsv = Name and path of the TSV file. Will be concatenate with the value of "url".
// Default: http://www.speexx.de/blog/files/openstreetmap/ol/"
// url = Base URL of the TSV file. Will be concatenate with the value of "tsv".
// Default: "berlin/berlin.tsv"
var baseUrl = "http://www.speexx.de/blog/files/openstreetmap/ol/";
var baseLat = 52.50776;
var baseLon = 13.44989;
var baseZoom = 12;
var baseDiv = "berlin_picture_map_20100612";
var baseTsv = "berlin/berlin.tsv";
var map;
function mapInit() {
var map_div = gup("div");
if (map_div == "") {
map = createMap(baseDiv);
} else {
map = createMap(map_div);
}
}
function createMap(divName) {
var lon = gup("lon");
if (lon =="") {
lon = baseLon;
}
var lat = gup("lat");
if (lat =="") {
lat = baseLat;
}
var zoom = gup("z");
if (zoom =="") {
zoom = baseZoom;
}
var proj4326 = new OpenLayers.Projection("EPSG:4326");
var projmerc = new OpenLayers.Projection("EPSG:900913");
var lonlat = new OpenLayers.LonLat(lon, lat);
var map = new OpenLayers.Map(divName, {
controls: [
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Attribution()],
maxExtent:
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
numZoomLevels: 18,
maxResolution: 156543,
units: 'm',
projection: projmerc,
displayProjection: proj4326
});
var mapnik_layer = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
var tah_layer = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
map.addLayers([mapnik_layer, tah_layer]);
var tsv = gup("tsv");
if (tsv == "") {
tsv = baseTsv;
}
var tsvUrlPrefix = gup("url");
if (tsvUrlPrefix == "") {
tsvUrlPrefix = baseUrl;
}
var tsvUrl = tsvUrlPrefix + tsv;
var berlin_pic_layer = new OpenLayers.Layer.Text("Berliner Bilder", {
location: tsvUrl, projection: map.displayProjection});
map.addLayer(berlin_pic_layer);
lonlat.transform(proj4326, projmerc);
map.setCenter(lonlat, zoom);
}
// from http://www.netlobo.com/url_query_string_javascript.html
function gup(name) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null) {
return "";
} else {
return results[1];
}
}
mapInit();
// -->
</script>
Ist noch nicht hundertprozentig, tut aber für micht.
Ich habe einen TAB separierte Datei erstellt. In der sind einige Berlin Bilder hinterlegt. Zur Zeit noch mit absoluten URLs. Muss mal schauen, ob ich das auch relativ machen kann. Bin jetzt aber zu müde dazu. Das Ergebniss sieht zusammen dann so aus: