Wikipedia on OpenStreetMap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Wikipedia on OpenStreetMap</title>  <script src="https://osm.toolforge.org/libs/jquery/latest/jquery-min.js" type="text/javascript"></script> <script src="https://osm.toolforge.org/libs/openlayers/2.12/OpenLayers.js" type="text/javascript"></script>   <script src="./Lang/en.js" type="text/javascript"></script> <script type="text/javascript"> // map object var map; var poiLayerHttp; var pois; var osmLabelsLang; var forcelocal; var lang = 'en';if(lang=="hsb"||lang=="ru") {forcelocal=false;} else {forcelocal=false;} // initiator function init() { OpenLayers.Lang.setCode('en'); /* // show an error image for missing tiles OpenLayers.Util.onImageLoadError = function () { if (urlRegex.test(this.src)) { var style = RegExp.$2; if (style == 'osm' || style == 'osm-no-labels') { var tile = RegExp.$3; var inst = RegExp.$1; this.src = '//' + inst + '.tile.openstreetmap.org/' + tile;; if (window.console && console.log) console.log('redirecting request for ' + tile + ' to openstreetmap.org: ' + this.src); return; } if (style == 'osm-labels-ru') { this.src = '//toolserver.org/~osm/libs/openlayers/latest/img/blank.gif'; return; } this.src = '//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}) //new OpenLayers.Control.KeyboardDefaults() ], // 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 = [ "//a.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", "//b.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", "//c.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" }); map.addLayer(new OpenLayers.Layer.OSM(OpenLayers.i18n("Translated names map"), "https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png?lang=en", { attribution:'Map by 漏 <a target="_blank" href="//www.openstreetmap.org/copyright">OpenStreetMap contributors</a>', type: 'png', serviceVersion:'',layername:'', visibility: false, tileOptions: { crossOriginKeyword: null }, transitionEffect: 'resize' } )); var urlRegex = new RegExp('^//([abc]).toolserver.org/tiles/([^/]+)/(.*)$'); var osm = new OpenLayers.Layer.OSM(OpenLayers.i18n("Local names map"), "https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png", { attribution:'Map by 漏 <a target="_blank" href="//www.openstreetmap.org/copyright">OpenStreetMap contributors</a>', transitionEffect: 'resize', tileOptions: { 'eventListeners': { 'loaderror': function(evt) { if(urlRegex.test(this.url)) { var style = RegExp.$2; if(style == 'osm'||style == 'osm-no-labels') { var tile = RegExp.$3; var inst = RegExp.$1; this.setImgSrc('//'+inst+'.tile.openstreetmap.org/'+tile); if(window.console && console.log) console.log('redirecting request for '+tile+' to openstreetmap.org: '+this.url); // alert ('test:URL' + this.url + ' //'+inst+'.tile.openstreetmap.org/'+tile ); return; } if(style == 'osm-labels-ru') { this.setImgSrc('//toolserver.org/~osm/libs/openlayers/latest/img/blank.gif'); return; } this.setImgSrc('//www.openstreetmap.org/openlayers/img/404.png'); } } }, crossOriginKeyword: null } } ) osm.setIsBaseLayer(true); osm.setVisibility(true); map.addLayer(osm); var osmNoLabels = new OpenLayers.Layer.OSM.Toolserver('osm-no-labels',{ attribution:'Map by 漏 <a target="_blank" href="//www.openstreetmap.org/copyright">OpenStreetMap contributors</a>', visibility: false, tileOptions: { crossOriginKeyword: null } } , {isBaseLayer:true} ); // un-maintained, doesn't work /** osmNoLabels.setIsBaseLayer(true); osmNoLabels.setVisibility(false); map.addLayer(osmNoLabels); /**/ //Place for OSM.org map.addLayer(new OpenLayers.Layer.OSM(OpenLayers.i18n("OSM.org map"), "//a.tile.openstreetmap.org/${z}/${x}/${y}.png", {attribution:'Map by 漏 <a target="_blank" href="//www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',visibility: false, tileOptions: { crossOriginKeyword: null },transitionEffect: 'resize' })); map.addLayer(new OpenLayers.Layer.OSM(OpenLayers.i18n("Public transport map"), "http://tile.memomaps.de/tilegen/${z}/${x}/${y}.png", {attribution:'Map 漏 OpenStreetMap contributors',visibility: false, tileOptions: { crossOriginKeyword: null },transitionEffect: 'resize' })); //map.addLayer(new OpenLayers.Layer.OSM("hires", // "//mull.geofabrik.de/osm2x/${z}/${x}/${y}.png", // {attribution:' <a target="_blank" href="//www.geofabrik.de">Geofabrik experiemental</a>', // visibility: false, tileOptions: { crossOriginKeyword: null },transitionEffect: 'resize' })); osmLabelsLang = new OpenLayers.Layer.OSM('osm-labels-en',"//tiles.wmflabs.org/osm-multilingual/en,_/${z}/${x}/${y}.png", {isBaseLayer: false, visibility: false, tileOptions: { crossOriginKeyword: null }, attribution:''}); // unmainted, doesn't work // map.addLayers([osmLabelsLang]); // Wikipedia-World Layer var bboxStrategy = new OpenLayers.Strategy.BBOX( { ratio : 1.1, resFactor: 1 }); poiLayerHttp = new OpenLayers.Protocol.HTTP({ url: "//wp-world.toolforge.org/marks.php?", params: { 'LANG' : 'en', 'coats' : '0', 'thumbs' : '0'}, format: new OpenLayers.Format.KML({ extractStyles: true, extractAttributes: true }) }); pois = new OpenLayers.Layer.Vector(OpenLayers.i18n("Wikipedia World"), { attribution:'<a target="_blank" href="//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(); //alert (lang); 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 || forcelocal) && map.baseLayer.id == osm.id) { map.setBaseLayer(osmNoLabels); osmLabelsLang.setVisibility(true); } if(map.getZoom() <= 6 || forcelocal) { osmLabelsLang.displayInLayerSwitcher=true; osmNoLabels.displayInLayerSwitcher=true; } // above zoom 6 we switch back to the usual osm layer else if(map.getZoom() > 6 && map.baseLayer.id == osmNoLabels.id && !forcelocal) { map.setBaseLayer(osm); osmLabelsLang.setVisibility(false); } if(map.getZoom() > 6 && !forcelocal && map.baseLayer.id == osm.id) { osmLabelsLang.displayInLayerSwitcher=false; osmNoLabels.displayInLayerSwitcher=false; } if (map.baseLayer.name=='Satellite' && (forcelocal || lang=='de')) {osmLabelsLang.setVisibility(false);} if (!(map.baseLayer.name=='Satellite' || map.baseLayer.id == osmNoLabels.id)) {osmLabelsLang.setVisibility(false);} /**/ } map.addControl(highlightCtrl); map.addControl(selectCtrl); highlightCtrl.activate(); selectCtrl.activate(); zoomEnd(); // default zoom and lon/lat var zoom = 12; args.lon = -1.228944; args.lat = 54.694972; // 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( OpenLayers.i18n("Marker"), { attribution:' <a target="_blank" href="//en.wikipedia.org/wiki/Help: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)); } // init() // // Thumbnails and coats markers (large images) // // show/hide image-markers options function hideInsetMenu() { $('#mapInsetMenuDropdown').css('visibility', 'hidden'); } function showInsetMenu() { $('#mapInsetMenuDropdown').css('visibility', 'visible'); } // load image-markers wikipedias list $.ajax({ type: "GET", url: "lang-select.php", data: "lang=en", success: function (html) { $('#mapInsetMenu-languages').empty(); $(html).appendTo('#mapInsetMenu-languages'); } }); // image-markers interactions $(function () { $('#mapInsetMenu-thumbs').change(function () { if ($(this).attr('checked') == true) { poiLayerHttp.params[$(this).val()] = 'yes'; $('#mapInsetMenu-coats').removeAttr('checked'); poiLayerHttp.params[$('#mapInsetMenu-coats').val()] = 'no'; } else { poiLayerHttp.params[$(this).val()] = 'no'; } pois.redraw(true); }); $('#mapInsetMenu-coats').change(function () { if ($(this).attr('checked') == true) { poiLayerHttp.params[$(this).val()] = 'yes'; $('#mapInsetMenu-thumbs').removeAttr('checked'); poiLayerHttp.params[$('#mapInsetMenu-thumbs').val()] = 'no'; } else { poiLayerHttp.params[$(this).val()] = 'no'; } pois.redraw(true); }); $('#mapInsetMenu-languages').change(function () { poiLayerHttp.params.LANG = $(this).val(); /** if ($(this).val() != '') { osmLabelsLang.name = "osm-labels-" + $(this).val(); osmLabelsLang.url = [ "//a.toolserver.org/tiles/" + osmLabelsLang.name + "/${z}/${x}/${y}.png", "//b.toolserver.org/tiles/" + osmLabelsLang.name + "/${z}/${x}/${y}.png", "//c.toolserver.org/tiles/" + osmLabelsLang.name + "/${z}/${x}/${y}.png" ]; osmLabelsLang.redraw(true); } /**/ pois.redraw(true); }); }); </script> <style type="text/css"> body { padding: 0; margin: 0; } .olImageLoadError { display: none; } .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 { } .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: 250px; box-shadow: 2px 2px 2px #666; -moz-box-shadow: 2px 2px 2px #666; } #mapInsetMenuDropdown label { font-weight: bold; } #mapInsetMenuDropdown .languages label { display: block; padding: .5em 0; } #mapInsetMenuDropdown .languages { padding-top: 0; margin-top: 0; margin-inline: .3em; } #mapInsetMenu-languages { width: 100%; box-sizing: border-box; } </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="hideInsetMenu()" onmouseover="showInsetMenu()"> <div id="mapInsetMenuI" class="mapBtnInner"> Options </div> <div id="mapInsetMenuDropdown"> <p class="languages"> <label for="mapInsetMenu-languages">Languages</label> <select id="mapInsetMenu-languages" size="5"> <option value="">ALL</option> <option value="de">Deutsch</option> <option value="en">English</option> </select> </p> <p class="thumbs"> <input id="mapInsetMenu-thumbs" type="checkbox" value="thumbs" /> <label for="mapInsetMenu-thumbs">Thumbnails</label> </p> <p class="coats"> <input id="mapInsetMenu-coats" type="checkbox" value="coats" /> <label for="mapInsetMenu-coats">Coat of arms</label> </p> </div> </div> </div> </body> </html>

CINXE.COM

Wikipedia on OpenStreetMap