<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Wikipedia on OpenStreetMap</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.olControlAttribution
{
bottom: 5px !important;
right: 80px !important;
}
.olControlPermalink {
bottom: 5px !important;
right: 5px !important;
width: 60px;
text-align: center;
}
.olControlAttribution, .olControlPermalink {
background-color: white;
border-color: black;
border-style: solid;
border-width: 1px;
cursor: pointer;
padding: 2px 4px;
opacity: 0.5;
}
.olPopupContent, .olControlAttribution, .olControlPermalink {
font-family: arial, sans-serif;
font-size: 12px;
}
.olControlAttribution:hover, .olControlPermalink:hover {
opacity: 1.0;
}
.olPopupContent a, .olControlAttribution a, .olControlPermalink a {
color: #0645AD;
text-decoration: none;
}
.olPopupContent a:hover, .olControlAttribution a:hover, .olControlPermalink a:hover {
text-decoration: underline;
}
#activetooltip {
background-color: #ffffcb !important;
overflow: hidden;
border: 1px solid #DBDBD3 !important;
font-family: arial, sans-serif;
font-size: 12px;
height: 8px;
text-align: center;
}
#activetooltip .olPopupContent {
padding: 5px 0 0 0 !important;
}
.olPopupContent {
}
</style>
<!--- //position: var zoom = 12;
args.lon = 11.329722222222;
args.lat = 50.979444444444;
--->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="./OpenLayers/OpenLayers-original2-9.js.php"></script>
<script src="http://toolserver.org/~osm/libs/openstreetmap/latest/OpenStreetMap.js"></script>
<script type="text/javascript">
// map object
var map;
var poiLayerHttp;
var pois;
// initiator
function init()
{
var urlRegex = new RegExp('^http://([abc]).www.toolserver.org/tiles/([^/]+)/(.*)$');
// show an error image for missing tiles
OpenLayers.Util.onImageLoadError = function()
{
if(urlRegex.test(this.src))
{
var style = RegExp.$2;
if(style == 'osm')
{
var tile = RegExp.$3;
var inst = RegExp.$1;
this.src = 'http://'+inst+'.tile.openstreetmap.org/'+tile;;
if(console && console.log)
console.log('redirecting request for '+tile+' to openstreetmap.org: '+this.src);
return;
}
this.src = 'http://www.openstreetmap.org/openlayers/img/404.png';
}
};
// get the request-parameters
var args = OpenLayers.Util.getParameters();
// main map object
map = new OpenLayers.Map ("map", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine({geodesic:true})
],
// mercator bounds
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
// create the custom layer
OpenLayers.Layer.OSM.Toolserver = OpenLayers.Class(OpenLayers.Layer.OSM, {
initialize: function(name, options) {
var url = [
"http://a.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
"http://b.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
"http://c.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png"
];
options = OpenLayers.Util.extend({numZoomLevels: 19}, options);
OpenLayers.Layer.OSM.prototype.initialize.apply(this, [name, url, options]);
},
CLASS_NAME: "OpenLayers.Layer.OSM.Toolserver"
});
// add the osm.org layers
var osm = new OpenLayers.Layer.OSM.Toolserver('osm', {
attribution:'map by <a target="_blank" href="http://www.openstreetmap.org/">OpenStreetMap</a> (CC-BY-SA)'});
map.addLayer(osm);
var osmNoLabels = new OpenLayers.Layer.OSM.Toolserver('osm-no-labels');
map.addLayer(osmNoLabels);
map.addLayer(new OpenLayers.Layer.OSM.Mapnik("osm.org mapnik"), {visibility: false});
map.addLayer(new OpenLayers.Layer.OSM.Toolserver('hikebike'));
map.addLayer(new OpenLayers.Layer.OSM.Toolserver('germany'));
var osmLabelsEn = new OpenLayers.Layer.OSM.Toolserver('osm-labels-en', {isBaseLayer: false, visibility: false});
var osmLabelsde = new OpenLayers.Layer.OSM.Toolserver('osm-labels-de', {isBaseLayer: false, visibility: false});
map.addLayers([osmLabelsEn, osmLabelsde]);
var bboxStrategy = new OpenLayers.Strategy.BBOX( {
ratio : 1.1,
resFactor: 1
});
poiLayerHttp = new OpenLayers.Protocol.HTTP({
url: "http://toolserver.org/~kolossos/geoworld/marks.php?",
params: { 'LANG' : 'de', 'thumbs' : '0'},
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true
})
});
pois = new OpenLayers.Layer.Vector("Wikipedia World", {
attribution:'<a target="_blank" href="http://de.wikipedia.org/wiki/Wikipedia:WikiProjekt_Georeferenzierung/Wikipedia-World/en">Wikipedia</a> (CC-BY-SA)',
projection: new OpenLayers.Projection("EPSG:4326"),
strategies: [bboxStrategy],
protocol: poiLayerHttp
});
map.addLayer(pois);
var feature = null;
var highlightFeature = null;
var tooltipTimeout = false;
var lastFeature = null;
var selectPopup = null;
var tooltipPopup = null;
var selectCtrl = new OpenLayers.Control.SelectFeature(pois, {
toggle:true,
clickout: true
});
pois.events.on({ "featureselected": onMarkerSelect, "featureunselected": onMarkerUnselect});
map.events.register("zoomend", map, zoomEnd);
function onMarkerSelect (evt) {
eventTooltipOff(evt);
if(selectPopup != null) {
map.removePopup(selectPopup);
selectPopup.feature=null;
if(feature != null && feature.popup != null){
feature.popup = null;
}
}
feature = evt.feature;
//console.log("feature selected", feature) ;
//console.log("features in layer", pois.features.length);
selectPopup = new OpenLayers.Popup.AnchoredBubble("activepopup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(220,170),
text='<b>'+feature.attributes.name +'</b><br>'+ feature.attributes.description,
null, true, onMarkerPopupClose );
selectPopup.closeOnMove = false;
selectPopup.autoSize = false;
feature.popup = selectPopup;
selectPopup.feature = feature;
map.addPopup(selectPopup);
}
function onMarkerUnselect (evt) {
feature = evt.feature;
if(feature != null && feature.popup != null){
selectPopup.feature = null;
map.removePopup(feature.popup);
feature.popup = null;
}
}
function onMarkerPopupClose(evt) {
if(selectPopup != null) {
map.removePopup(selectPopup);
selectPopup.feature = null;
if(feature != null && feature.popup != null) {
feature.popup = null;
}
}
selectCtrl.unselectAll();
}
var highlightCtrl = new OpenLayers.Control.SelectFeature(pois, {
hover: true,
highlightOnly: true,
renderIntent: "temporary",
eventListeners: {
featurehighlighted: eventTooltipOn,
featureunhighlighted: eventTooltipOff
}
});
function eventTooltipOn (evt) {
highlightFeature = evt.feature;
if(tooltipPopup != null) {
map.removePopup(tooltipPopup);
tooltipPopup.feature=null;
if(lastFeature != null) {
lastFeature.popup = null;
}
}
lastFeature = highlightFeature;
//document.getElementById("map_OpenLayers_Container").style.cursor = "pointer";
tooltipPopup = new OpenLayers.Popup("activetooltip",
highlightFeature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(220,20),
highlightFeature.attributes.name, null, false, null );
if(tooltipTimeout) clearTimeout(tooltipTimeout);
tooltipPopup.closeOnMove = true;
tooltipPopup.autoSize = true;
map.addPopup(tooltipPopup);
}
function eventTooltipOff (evt) {
highlightFeature = evt.feature;
//document.getElementById("map_OpenLayers_Container").style.cursor = "default";
if(tooltipPopup)
{
tooltipTimeout = setTimeout(function() {
map.removePopup(tooltipPopup);
tooltipPopup = null;
}, 500);
}
if(highlightFeature != null && highlightFeature.popup != null){
map.removePopup(highlightFeature.popup);
highlightFeature.popup = null;
tooltipPopup = null;
lastFeature = null;
}
}
function zoomEnd() {
var scale = map.getScale();
if (scale>10000000) {
$(".olControlScaleLine").css('display', 'none');
} else {
$(".olControlScaleLine").css('display', 'block');
}
// below zoom 6 we switch from layer "osm" to layer "osm-no-labels" + "osm-labels-de"
if(map.getZoom() < 6 && map.baseLayer.id == osm.id)
{
map.setBaseLayer(osmNoLabels);
osmLabelsde.setVisibility(true);
}
// above zoom 6 we switch back to the usual osm layer
else if(map.getZoom() >= 6 && map.baseLayer.id == osmNoLabels.id)
{
map.setBaseLayer(osm);
osmLabelsde.setVisibility(false);
}
}
map.addControl(highlightCtrl);
map.addControl(selectCtrl);
highlightCtrl.activate();
selectCtrl.activate();
// default zoon
var zoom = 12;
args.lon = 11.329722222222;
args.lat = 50.979444444444;
// lat/lon requestes
if(args.lon && args.lat)
{
// zoom requested
if(args.zoom)
{
zoom = parseInt(args.zoom);
var maxZoom = map.getNumZoomLevels();
if (zoom >= maxZoom) zoom = maxZoom - 1;
}
// transform center
var center = new OpenLayers.LonLat(parseFloat(args.lon), parseFloat(args.lat)).
transform(map.displayProjection, map.getProjectionObject())
// move to
map.setCenter(center, zoom);
}
// bbox requestet
else if (args.bbox)
{
// transform bbox
var bounds = OpenLayers.Bounds.fromArray(args.bbox).
transform(map.displayProjection, map.getProjectionObject());
// move to
map.zoomToExtent(bounds)
}
// default center
else
{
// set the default center
var center = new OpenLayers.LonLat(0, 0).
transform(map.displayProjection, map.getProjectionObject());
// move to
map.setCenter(center, zoom);
}
var markers = new OpenLayers.Layer.Markers( "Marker", {
attribution:' <a target="_blank" href="http://de.wikipedia.org/wiki/Hilfe:OpenStreetMap"> Help </a> ' } );
map.addLayer(markers);
var size = new OpenLayers.Size(16,16);
var offset = new OpenLayers.Pixel(-(size.w/2), -(size.h/2));
var icon = new OpenLayers.Icon('Ol_icon_red_example.png',size,offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(map.center.lon,map.center.lat),icon));
map.addLayer(new OpenLayers.Layer.OSM(
'hillshading',
'http://toolserver.org/~cmarqu/hill/${z}/${x}/${y}.png',
{
displayOutsideMaxExtent: true,
isBaseLayer: false,
transparent: true,
visibility: false,
numZoomLevels: 16
}
));
}
function hideInsetMenu() {
$('#mapInsetMenuDropdown').css('visibility', 'hidden');
}
function showInsetMenu() {
$('#mapInsetMenuDropdown').css('visibility', 'visible');
}
$(function() {
$('.menuSelect').change(function() {
if ($(this).attr('checked')==true) {
poiLayerHttp.params[$(this).val()] = 'yes';
} else {
poiLayerHttp.params[$(this).val()] = 'no';
}
pois.redraw(true);
});
});
$(function() {
$('.menuSelectlist').change(function() {
poiLayerHttp.params.LANG = $(this).val();
pois.redraw(true);
});
});
</script>
<style>
.mapBtnOuter {
border: 1px solid #444;
background-color: #fff;
z-index: 2000;
}
.mapBtnInner {
cursor: pointer;
font-size: 12px;
font-family: arial, sans-serif;
border-color:white #bbb #bbb white;
border-style:solid;
border-width:1px;
padding: 2px 4px 2px 4px ;
}
#mapInsetMenu {
position: absolute;
left: 50px;
top: 7px;
}
div.olLayerDiv {
-khtml-user-select: none;
}
.olControlScaleLineBottom {
display: none;
}
#mapInsetMenuDropdown {
visibility: hidden;
padding: 2px 4px 2px 4px ;
font-size: 12px;
font-family: arial, sans-serif;
background-color: #fff;
border-color: #444;
border-style:solid;
border-width:1px;
position: absolute;
left: -1px;
top: 20px;
width: 180px;
box-shadow: 2px 2px 2px #666;
-moz-box-shadow: 2px 2px 2px #666;
}
</style>
</head>
<body onload="init();">
<div id="mapContainer" style="width: 100%; height: 100%">
<div style="width: 100%; height: 100%" id="map">
</div>
<div id="mapInsetMenu" class="mapBtnOuter" onmouseout="javascript:hideInsetMenu()" onmouseover="javascript:showInsetMenu()">
<div id="mapInsetMenuI" class="mapBtnInner">
Options
</div>
<div id="mapInsetMenuDropdown">
<b>Languages</b><br />
<select class="menuSelectlist" name="top5" size="5">
<option value=""> All </option>
<option value="als">Alemannisch</option>
<option value="ar">العربية</option>
<option value="bar">Boarisch</option>
<option value="ca">Català</option>
<option value="cs">Česky</option>
<option value="da">Dansk</option>
<option value="de">Deutsch</option>
<option value="el">Ελληνικά</option>
<option value="en">English</option>
<option value="es">Español</option>
<option value="fi">Suomi</option>
<option value="fr">Français</option>
<option value="hr">Hrvatski</option>
<option value="hsb">Hornjoserbsce</option>
<option value="hu">Magyar</option>
<option value="it">Italiano</option>
<option value="ja">日本語</option>
<option value="ksh">Ripoarisch</option>
<option value="la">Latina</option>
<option value="lb">Lëtzebuergesch</option>
<option value="li">Limburgs</option>
<option value="nds">Plattdüütsch</option>
<option value="nl">Nederlands</option>
<option value="no">Norsk (bokmål)</option>
<option value="pdc">Pennsylvania Dutch</option>
<option value="pl">Polski</option>
<option value="pt">Português</option>
<option value="rm">Rumantsch</option>
<option value="ro">Română</option>
<option value="ru">Русский</option>
<option value="sk">Slovenčina</option>
<option value="sl">Slovenščina</option>
<option value="sq">Shqip</option>
<option value="sr">Српски / Srpski</option>
<option value="stq">Seeltersk</option>
<option value="sv">Svenska</option>
<option value="tr">Türkçe</option>
<option value="uk">Українська</option>
<option value="yi">ייִדיש</option>
<option value="zh">中文</option>
</select>
<p>
<b>Thumbnails</b><br />
<input class="menuSelect" type="checkbox" name="thumbs" value="thumbs"/>
<br>
</div>
</div>
</div>
</body>
</html>
