Benutzer:Kolossos/Zeichnungen

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

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


<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=''+feature.attributes.name +'
'+ 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 ; }

  1. mapInsetMenu {

position: absolute; left: 50px; top: 7px; }

div.olLayerDiv {

  -khtml-user-select: none;

}

.olControlScaleLineBottom {

  display: none;

}

  1. 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();">

           Options
            Languages

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

Thumbnails
<input class="menuSelect" type="checkbox" name="thumbs" value="thumbs"/>

</body> </html>