4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: bergblume on June 04, 2009, 06:14:17 PM
-
hallo zusammen,
folgende frage bzw. idee... es gibt ja diese open cycle map für radfahrer : http://www.opencyclemap.org/
wie kann ich diese in googlemaps neben hybrid-view, satelliten-ansicht und kartenansicht integrieren?
gruss,
bergblume
-
ach ja, das hätte ich noch als hilfeastellung anzubieten: http://www.openstreetmap.info/examples/gmap-example2.html ;-)
-
... bei opencyclemap.org sieht es nicht so aus, als ob da Layer für die Google-Map angeboten werden ...
... das scheint ein eigenständiges Script / API zu sein ...
... dein openstreetmap.info Link bringt keine verwertbare Seite (Script-Fehler) ...
... wobei sich OS-Map Layer in die Google-Map einbinden lassen ...
... doch was nun ... ?
-
hallo mawenzi,
naja wie in dem beispiel-link (http://www.openstreetmap.info/examples/gmap-example2.html) hätte ich gerne oben rechts in meinen googlemaps diesen marker "mapnik" (=OSM) angezeigt...
wie muss ich hierfür bei mir die datei gm.js abändern??
by the way... wie kann ich generell die OSM (open street maps) anzeigen lassen?
gruss, bergblume
-
... die von dir mit dem Link angegebene Seite enthält Scriptfehler ... wird im IE8 nicht angezeigt ... aber Iron macht es ...
... du meinst also die Integration der OS-Map etwa so wie hier (http://klick.kl.funpic.de/details.php?image_id=4705) ...
... wenn ja, dann kann ich dir mit der Erweiterung des GM-Scripts weiterhelfen ...
-
guten morgen mawenzi,
ja, genau - das würde scon mal sehr weiterhelfen...
wie muss ich für die integration der OSM map - so wie bei dir ersichtlich - vorgehen?
danke für deine hilfe!
bergblume
-
OSM-Map "Mapnik"
... im gm-Script in der function load () finde in etwa ...
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
... und danach füge einfach dazu ...
//--- OSM-Map "Mapnik" -----------------------------------------------------
var copyosm1 = "© OpenStreetMap: ";
var copyosm2 = "<a href='http://www.openstreetmap.com' target='_blank'>License</a>";
var osm = [new GTileLayer()];
osm[0].getTileUrl = function(a,b) {
return "http://tile.openstreetmap.org/" + b + "/" + a.x + "/" + a.y + ".png"; };
osm[0].getCopyright = function(a,b) {
return {prefix:copyosm1, copyrightTexts:[copyosm2]}; }
G_OSM_MAP = new GMapType(osm, G_SATELLITE_MAP.getProjection(), "OS-Map", {
minResolution:0,maxResolution:15});
map.addMapType(G_OSM_MAP);
//--- OSM-Map "Mapnik" -----------------------------------------------------
-
super! danke - das hat geklappt!!!
-
OSM-Map "Tiles@Home"
... im gm-Script in der function load () finde in etwa ...
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
... und danach füge einfach dazu ...
//--- OSM-Map "Tiles@Home" -----------------------------------------------------
var copytah1 = "© OpenStreetMap: ";
var copytah2 = "<a href='http://www.openstreetmap.com' target='_blank'>License</a>";
var tah = [new GTileLayer()];
tah[0].getTileUrl = function(a,b) {
return "http://tah.openstreetmap.org/Tiles/tile/" + b + "/" + a.x + "/" + a.y + ".png"; };
tah[0].getCopyright = function(a,b) {
return {prefix:copytah1, copyrightTexts:[copytah2]}; }
G_TAH_MAP = new GMapType(tah, G_SATELLITE_MAP.getProjection(), "T@H-Map", {
minResolution:0,maxResolution:15});
map.addMapType(G_TAH_MAP);
//--- OSM-Map "Tiles@Home" -----------------------------------------------------
-
wow -- super....
was für karten kann man denn noch so alles in googlemaps integrieren?
-
... wenn man die URL der Map-Layer kennt und die sich auf die Satellite-Map projezieren lassen ...
... dann kann man diese entsprechende Map auch in Google-Maps integrieren ...
... es sind sogar selbstgezeichnete Karten vom eigenen Server möglich ...
... ich verwende zum Teil noch eine (etwas grobe) Relief-Map (noch aus "Vor-Terrain-Zeiten") ...
-
ok, super - -danke für den tip...-
habe hierzu auch noch folgende wertvolle info gefunden:
Zusätzliche Layer nun auch über das API verfügbar.
Auch für Mashups ist es nun leicht möglich, zusätzliche Layer verfügbar zu machen. Nach dem Anlegen des GMap2-Objektes können die Layer ganz einfach der Karte überlagert werden:
map.addOverlay(new GLayer("com.panoramio.all"));
oder
map.addOverlay(new GLayer("org.wikipedia.de"));
oder
map.addOverlay(new GLayer("com.youtube.all"));
einfach nur genial diese overlays!! :D
Eine Liste der Layer finden sich unter http://esa.ilmari.googlepages.com/glayers.htm.
Mike Williams hat eine erweiterte JavaScript-basierte Lösung unter http://econym.org.uk/gmap/example_layercontrol.htm bereitgestellt.
-
hallo bergblume
ich habe es geschaft wikipedia, paneramino und youtube einzubauen,
aber mit der hide() und show() funktion komme ich nicht klar.
kannst du mit da helfen?
http://grosspeterwitz.org/gp/index.php?template=google-photo-map-gp
gruß kubiczek
-
@kubiczek
... hast du dir das Beispiel / Script von Mike Williams mal angesehen (Link von bergblume) ... ?
... aus dem Quelltext des Beispiels brauchst du nur das Script in dein Map-Script übernehmen ...
... hab ich gerade für mich erledigt, noch einige Overlays hinzugefügt (ges. jetzt 7) und funktioniert nun bestens ...
@bergblume
... danke für den Hinweis und den Link ...
-
guten morgen mawenzi,
danke für deine erläuterung... exakt so ist es...
@ kubicek... einfach den code von Mike Williams (http://econym.org.uk/gmap/example_layercontrol.htm) anschauen und entsprechend verwenden.
gruss und viele erfolg,
bergblume
-
Hallo ich habe aus dem Quelltext den Scriptteil jetzt in meine gm-gp.js eingebaut,
die "More" Schaltfläche ist jetzt sichtbar, aber ohne funktion.
sehe http://grosspeterwitz.org/gp/index.php?template=google-photo-map-gp&l=deutsch
das ist meine gm-gp.js
r
//<![CDATA[
var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12, 20);
tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
// Set up our GMarkerOptions object literal
markerOptions = { icon:tinyIcon };
function load() {
if (GBrowserIsCompatible()) {
// ==== The "More..." control simply accepts a mouseover to reveal the "Layer" control ===
function MoreControl() {}
MoreControl.prototype = new GControl();
MoreControl.prototype.initialize = function(map) {
var container = document.createElement("div");
container.style.border = "2px solid black";
container.style.fontSize = "12px";
container.style.fontFamily = "Arial, sans-serif";
container.style.width="80px";
container.style.backgroundColor = "#ffffff";
container.style.textAlign = "center";
container.innerHTML = "More...";
map.getContainer().appendChild(container);
GEvent.addDomListener(container, "mouseover", function() {
map.addControl(layerControl);
});
return container;
}
MoreControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7));
}
// ==== The "Layer" control displays the "More..." plus the checkboxes ====
// ==== The checkbox info is passed in the "opts" parameter ====
function LayerControl(opts) {
this.opts = opts;
}
LayerControl.prototype = new GControl();
LayerControl.prototype.initialize = function(map) {
var container = document.createElement("div");
container.style.border = "2px solid black";
container.style.fontSize = "12px";
container.style.fontFamily = "Arial, sans-serif";
container.style.width="80px";
container.style.backgroundColor = "#ffffff";
container.innerHTML = '<center><b>More...<\/b><\/center>';
for (var i=0; i<this.opts.length; i++) {
if (layers[i].Visible) {
var c = 'checked';
} else {
var c = '';
}
container.innerHTML += '<input type="checkbox" onclick="toggleLayer('+i+')" ' +c+ ' /> '+this.opts[i]+'<br>';
}
map.getContainer().appendChild(container);
// === This doesn't do what I want. It kills the control if I mouseover a checkbox ===
// === If you know how to do this better, let me know ===
//GEvent.addDomListener(container, "mouseout", function() {
// map.removeControl(layerControl);
//});
setTimeout("map.removeControl(layerControl)",5000);
return container;
}
LayerControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7));
}
// ==== toggleLayer adds and removes the layers ====
function toggleLayer(i) {
if (layers[i].Visible) {
layers[i].hide();
} else {
if(layers[i].Added) {
layers[i].show();
} else {
map.addOverlay(layers[i]);
layers[i].Added = true;
}
}
layers[i].Visible = !layers[i].Visible;
}
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(50.08374726,18.08589935),15);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
// ==== Create the GLayer()s, and set them Visible=false Added=false ====
// If you want a GLayer open by default, addOverlay() it and set it Visible=true Added=true
var layers = [];
layers[0] = new GLayer("org.wikipedia.en");
layers[0].Visible = false;
layers[0].Added = false;
layers[1] = new GLayer("org.wikipedia.de");
layers[1].Visible = false;
layers[1].Added = false;
layers[2] = new GLayer("com.panoramio.popular");
layers[2].Visible = false;
layers[2].Added = false;
layers[3] = new GLayer("com.panoramio.all");
map.addOverlay(layers[3]); // This one open by default
layers[3].Visible = true;
layers[3].Added = true;
// === Create the layerControl, but don't addControl() it ===
// = Pass it an array of names for the checkboxes =
var layerControl = new LayerControl(["Wiki", "Wike DE", "Popular", "Photos"]);
// === Create the MoreControl(), and do addControl() it ===
map.addControl(new MoreControl());
GDownloadUrl("/gp/google-photo-map-gp.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var thumb = markers[i].getAttribute("thumb");
var kml = markers[i].getAttribute("kml");
var desc = markers[i].getAttribute("desc");
var cat = markers[i].getAttribute("cat");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))); var marker = createTabbedMarker(point, name, address, type, thumb, kml, cat, desc);
map.addOverlay(marker);
}
});
}
}function createTabbedMarker(point, name, address, type, thumb, kml, cat, desc, html1,html2,label1,label2) {
var marker = new GMarker(point,tinyIcon);
var label1 = "Das Bild";
var html1 = "<div id='infoback_01'>" + "<table width='250' height='150' border='0' cellspacing='0' cellpadding='0' bgcolor='#EFEFEF'><tr>" + "<td valign='middle'>" + "<a href=" + type +"#Google_Maps>" + "<img src=" + thumb + ">" + "</a>" + "</td>" + "<td> </td>" + "<td valign='middle'>"+ "<b> <font color='black'>" + name + "</b> <br>" + "<a href=" + kml +">" + "Google Earth" + "</a>" +"<br>" + "<a href=" + cat +">" + "zur Kategorie" + "</a></td></tr></table></div>";
var label2 = "Infos";
var html2 = "<div id='infoback_02'>" + "<table width='250' height='150' border='0' cellspacing='0' cellpadding='0' bgcolor='#efefef'><tr>" + "<td valign='middle'>" + desc + "</td></tr><tr>" + "<td valign='middle'>Koordinaten:" + point + "</td></tr></table></div>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
});
return marker;
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
Muss ich den anfang von MIKE seinen seinen Quelltext auch noch verbauen?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 550px; height: 450px;"></div>
<a href="layercontrol.htm">Back to the tutorial page</a>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>