Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- playground:karten [2011/10/28 13:26] – admin
+++ playground:karten [2015/05/12 12:10] (aktuell) – admin
@@ Zeile 1: / Zeile 1: @@
+====== Test Karten ======
+<html>
+<div id="map" style="width: 512px; height: 512px; border: 1px solid black; background-color: white;"></div>
+<small>&copy; <a href="http://www.openstreetmap.org" target="_blank">OpenStreetMap</a> und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
+<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a></small>
+<div id="info" style="width: 512px"></div>
+<script src="http://openlayers.org/api/OpenLayers.js"></script>
+<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
+<script type="text/javascript">
+var lon = 10.45152;
+var lat = 51.16569;
+var zoom = 6;
+var features, points;
+// start tom.js
+function jumpTo(lon, lat, zoom) {
+    var x = Lon2Merc(lon);
+    var y = Lat2Merc(lat);
+    map.setCenter(new OpenLayers.LonLat(x, y), zoom);
+    return false;
+}
+function Lon2Merc(lon) {
+    return 20037508.34 * lon / 180;
+}
+function Lat2Merc(lat) {
+    var PI = 3.14159265358979323846;
+    lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
+    return 20037508.34 * lat / 180;
+}
+function addMarker(layer, lon, lat, popupContentHTML) {
+    var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
+    var feature = new OpenLayers.Feature(layer, ll);
+    feature.closeBox = true;
+    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(300, 180) } );
+    feature.data.popupContentHTML = popupContentHTML;
+    feature.data.overflow = "hidden";
+    var marker = new OpenLayers.Marker(ll);
+    marker.feature = feature;
+    var markerClick = function(evt) {
+        if (this.popup == null) {
+            this.popup = this.createPopup(this.closeBox);
+            map.addPopup(this.popup);
+            this.popup.show();
+        } else {
+            this.popup.toggle();
+        }
+        OpenLayers.Event.stop(evt);
+    };
+    marker.events.register("mousedown", feature, markerClick);
+    layer.addMarker(marker);
+    map.addPopup(feature.createPopup(feature.closeBox));
+}
+function getCycleTileURL(bounds) {
+   var res = this.map.getResolution();
+   var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
+   var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
+   var z = this.map.getZoom();
+   var limit = Math.pow(2, z);
+   if (y < 0 || y >= limit)
+   {
+     return null;
+   }
+   else
+   {
+     x = ((x % limit) + limit) % limit;
+     return this.url + z + "/" + x + "/" + y + "." + this.type;
+   }
+}
+// end tom.js
+function init()
+{
+    // create a new map
+    var map = new OpenLayers.Map('map', {
+    	projection: new OpenLayers.Projection("EPSG:900913"),
+    	displayProjection: new OpenLayers.Projection("EPSG:4326"),
+    	controls: [],
+    	numZoomLevels: 10,
+    	maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34, 20037508.34, 20037508.34),
+    	numZoomLevels: 18,
+    	maxResolution: 156543,
+    	units: 'm'
+    });
+    // add layers
+    var layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("OSM - Mapnik");
+    var layer_osm = new OpenLayers.Layer.OSM.Osmarender("OSM - Osmarender");
+    map.addLayers([layer_osm]);
+    //map.addLayer(new OpenLayers.Layer.OSM.MapQuestOpen("Default"));
+    //var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
+    //layer_style.fillOpacity = 0.2;
+    //layer_style.graphicOpacity = 1;
+    //vectorLayer = new OpenLayers.Layer.Vector("Points", {style: layer_style});
+    //map.addLayer(vectorLayer);
+    // add control elements
+    map.addControl(new OpenLayers.Control.Navigation());
+    map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon: 'true'}));
+    map.addControl(new OpenLayers.Control.ScaleLine());
+    map.addControl(new OpenLayers.Control.KeyboardDefaults());
+    //Feature points
+    features = new Array();
+    var lonlat_id = new OpenLayers.LonLat(12.9279, 50.8406);
+    lonlat_id = lonlat_id.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
+    var feature_id = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point( lonlat_id.lon, lonlat_id.lat), {type: 6, name: 'ESG Chemnitz' });
+    features.push(feature_id);
+    // Create a styleMap to style your features for two different render intents. The style for the 'default' render intent will be
+    // applied when the feature is first drawn. The style for the 'select' render intent will be applied when the feature is selected.
+    var myStyles = new OpenLayers.StyleMap({
+        "default": new OpenLayers.Style({
+            pointRadius: "${type}", // sized according to type attribute
+            fillColor: "#ff8080",
+            strokeColor: "#ff0000",
+            strokeWidth: 2
+        }),
+        "select": new OpenLayers.Style({
+            fillColor: "#66ccff",
+            strokeColor: "#3399ff"
+        })
+    });
+    // Create a vector layer and give it your style map.
+    points = new OpenLayers.Layer.Vector( 'Points', {styleMap: myStyles} );
+    points.addFeatures( features );
+    map.addLayer( points );
+    // Create a select feature control and add it to the map.
+    var select = new OpenLayers.Control.SelectFeature(points, {
+        hover: true, onSelect: onFeatureSelect, onUnselect: onFeatureUnselect, callbacks: {'click': onFeatureClick}
+    });
+    map.addControl( select );
+    select.activate();
+    // set center and zoom level
+    var lonlat = new OpenLayers.LonLat(lon, lat);
+    map.setCenter( lonlat.transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") ), zoom );
+}
+function onFeatureSelect(feature)
+{
+    document.getElementById('info').innerHTML = feature.attributes.name;
+}
+function onFeatureUnselect(feature)
+{
+    document.getElementById('info').innerHTML = "";
+}
+function onFeatureClick(feature)
+{
+}
+init();
+</script>
+</html>
+  * http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden
+  * http://wiki.openstreetmap.org/wiki/Search
+  * Google Maps kostenpflichtig: http://heise.de/-1368176