Open Street Map in Google Webtoolkit Website einbinden

Meinst du sowas wie hier http://hscholland.bplaced.net/radrouten ? Den Grundquelltext findest du auf meiner wiki-Seite oder auch unter http://wiki.openstreetmap.org/wiki/DE:O … r_Gemeinde.

Wow, das ging ja schnell wenn diese Website mit dem GWT erstellt wurde meine ich genau sowas.
Danke
Gruß Michael

Ne...das ist reines OpenLayers

Die Frage ist ja, ist es dir wichtig, womit die Karte erstellt wurde, oder wie sie aussieht. Zumal es wohl auch nciht leicht ist, die Lizenzbedingungen in die Google-Karte zu integrireren.

Hallo,
ich wollt eigentlich einmal die Mapnik OSM Karte und die Satelliten Karte von Google Maps mit Open Layers einbinden.
Bisher habe ich es nur geschaft mit dieser API ein WMS Layer mit einer Karte von Metacarta einzubinden.
Und da ich einen Click Handler verwenden will, der mit anderen Elementen der Website interagiert, komme ich mit der Java Scribt version von Open Layers nicht zurecht.

Ich weiß nicht, ob das hier weiterhilft, aber für Geocaching gibt es ein Script, mit dem man in eine GoogleMaps-Karte einen OSM-Layer einbinden kann:
http://www.geogeo-morsmors.de/osmify-ge … eocaching/

Danke , für die Antwort. Leider komme ich bei einer Google Webtoolkit Website nicht an den Java Scribt Code und kann dadurch den diesen Tip leider nicht anwenden. Habe allerdings dem Entwickler der oben genannten API mal eine E-Mail geschrieben und warte auf eine Antwort. Wenn ich genaueres weiss, sag ich hier nochmal bescheid.
mfg Michael

Du kommst mittels JSNI an den JavaScript-Code, siehe http://code.google.com/webtoolkit/doc/l … sJSNI.html
Allerdings musst du dich dann wieder um die unterschiedlichen Browser kümmern.

Was spricht dagegen die Google-API für die Karten zu verwenden? Diese wird wohl breiter unterstützt sein und wahrscheinlich als Widget für GWT vorliegen. Die API von Google kannst du beauftragen OSM-Karten statt der Google-Karten zu verwenden. Im Prinzip sollte das wie im folgenden JavaScript-Fragment funktionieren.

// Add OpenStreetMap
var osmCopyrightCollection = new GCopyrightCollection('');
osmCopyrightCollection.addCopyright(new GCopyright('osm', new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, 'Copyright <a href="http://www.openstreetmap.org/" title="Navigate to OpenStreetMap\'s main page">OpenStreetMap<\/a> and contributors.'));
var osmMapnikLayer = new GTileLayer(osmCopyrightCollection, 1, 19);
window.mapnikRequestCounter = 0;
osmMapnikLayer.getTileUrl = function(a, b){
window.mapnikRequestCounter++;
var tileSubdomains = ['a', 'b', 'c'];
return 'http://'+tileSubdomains[window.mapnikRequestCounter%tileSubdomains.length]+'.tile.openstreetmap.org/'+b+'/'+a.x+/'+a.y+'.png';
};
var osmMapType = new GMapType([osmMapnikLayer], G_SATELLITE_MAP.getProjection(), "Mapnik", {
shortName: 'OSM'
});
// map is instance of GMap2
map.addMapType(osmMapType);

Danke, auf die Idee mit der Google API bin ich noch garnicht gekommen ich versuchs gleich mal.
gruß Michael

@ Augustus kling
Hallo, deine Idee mit der Google Maps Api ist klasse, nur bekommen ich wenn ich deinen Code einfüge einen Fehler in der Zeile mit dem return 'http://'... (bin leider keine Java Script Profi)

der Code inklusive JSNI aufruf sieht jetzt so aus

public␣static␣native␣void␣addLayer()␣/*-{

var␣osmCopyrightCollection␣=␣new␣GCopyrightCollection('');
osmCopyrightCollection.addCopyright(new␣GCopyright('osm',␣new␣GLatLngBounds(new␣GLatLng(-90,-180),␣new␣GLatLng(90,180)),␣0,␣'Copyright␣<a␣href="http://www.openstreetmap.org/"␣title="Navigate␣to␣OpenStreetMap\'s␣main␣page">OpenStreetMap<\/a>␣and␣contributors.'));
var␣osmMapnikLayer␣=␣new␣GTileLayer(osmCopyrightCollection,␣1,␣19);
window.mapnikRequestCounter␣=␣0;
osmMapnikLayer.getTileUrl␣=␣function(a,␣b){
window.mapnikRequestCounter++;
var␣tileSubdomains␣=␣['a',␣'b',␣'c'];
return␣'http://'+tileSubdomains[window.mapnikRequestCounter%tileSubdomains.length]+'.tile.openstreetmap.org/'+b+'/'+a.x+/'+a.y+'.png';
};
var␣osmMapType␣=␣new␣GMapType([osmMapnikLayer],␣G_SATELLITE_MAP.getProjection(),␣"Mapnik",␣{
shortName:␣'OSM'
});
//␣map␣is␣instance␣of␣GMap2
map.addMapType(osmMapType);

}-*/;

hast du oder sonst jemand vielleicht eine Idee woran es liegen könnte?
Ohne den JSNI Code wird die Google Map normal angezeigt.

mfg Michael

mpower wrote:

@ Augustus kling
Hallo, deine Idee mit der Google Maps Api ist klasse, nur bekommen ich wenn ich deinen Code einfüge einen Fehler in der Zeile mit dem return 'http://'... (bin leider keine Java Script Profi)

Bitte in solchen Fällen immer die komplette Fehlermeldung angeben.

return␣'http://'+tileSubdomains[window.mapnikRequestCounter%tileSubdomains.length]+'.tile.openstreetmap.org/'+b+'/'+a.x+/'+a.y+'.png';

Ich hatte da wohl ein Apostroph vergessen. Versuche mal folgende Zeile:

return␣'http://'+tileSubdomains[window.mapnikRequestCounter%tileSubdomains.length]+'.tile.openstreetmap.org/'+b+'/'+a.x+'/'+a.y+'.png';

Danke, für die schnelle Hilfe.
Jetzt kann ichs kompilieren aber es wird nix mehr angezeigt im Webbrowser. Weder meine GWT Website noch die Karte.
Der Internet Explorer gibt folgende Fehlermeldung:

Meldung: 'GCopyrightCollection' ist undefiniert
Zeile: 1412
Zeichen: 16
Code: 0
URI: http://localhost:35143/OpenStreetMapGoogleWebToolkit/org.yournamehere.Main/5BC3E7AFDD2095C53089384AA12D1EB6.cache.html

muss ichvielleicht noch eine weiter API einbinden?

mfg Michael

Das heißt, dass die Konstruktorfunktion nicht verfügbar ist. Mein Beispiel geht davon aus, dass die Java-Script API für Google Maps in Version 2 verwendet wird. Diese wird in der Regel wie folgt geladen:
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=mapKey&amp;hl=de" type="text/javascript"></script>

Mit GWT empfiehlt es sich aber anstatt HTML + JavaScript zu schreiben Java mit den entsprechenden Libraries zu verwenden. Hierzu gibt es ein Beispiel http://code.google.com/docreader/#p=gwt … ingStarted .
Meine JavaScript-Beispiel müsstest du in Java mit GWT umsetzen um die OSM-Karte zu nutzen. In der Java-API fehlen die „G“, die in JavaScript am Anfang aller Namen der API stehen. Die Dokumentation für die Java-API in GWT findest du unter http://gwt-google-apis.googlecode.com/s … index.html .
Ein umfangreiches Tutorial unter http://claudiushauptmann.com/tutorial-g … lipse.html

Danke, für die viele Hilfe.
Ich werde es jetzt nochmal versuchen und hoffentlich hinbekommen, wenns funktioniert werde ich hier auch den Code mal veröffentlichen.
mfg Michael

Hallo,
ich habe es nun geschafft die Mapnik Karte in der Google Maps umgebung bei einer Google Webtoolkit Website einzubinden.

Der Programmcode sieht so aus :

LatLng␣osmSW=␣LatLng.newInstance(-90,␣-180);␣␣//Festlegen␣der␣Süd-West-Grenze␣der␣Karte
LatLng␣osmNE=␣LatLng.newInstance(90,␣180);␣␣␣␣␣//Festlegen␣der␣Nord-Ost-Grenze␣der␣Karte
LatLngBounds␣osmBounds=␣LatLngBounds.newInstance(osmSW,osmNE);␣␣␣//␣Festlegen␣der␣Kartengrenzen
CopyrightCollection␣osmCopyrightCollection␣=␣new␣CopyrightCollection();␣␣//␣Erstellen␣des␣Copyright␣hinweises
osmCopyrightCollection.addCopyright(new␣Copyright(1,osmBounds,␣0,␣"Kartendaten␣&copy;␣2009␣<a␣href=\"http://www.openstreetmap.org/\">OpenStreetMap</a>␣Contributors'"));
TileLayer␣osmMapnikLayer=␣new␣TileLayer(osmCopyrightCollection,␣1,␣18)␣{␣␣␣␣␣␣␣␣␣␣␣//erstellen␣des␣Mapniklayers

@Override␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣//Festlegen␣der␣Transparenz
public␣double␣getOpacity()␣{
return␣1.0;
}

@Override␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣//Festlegen␣wie␣die␣URL␣der␣Karte␣gewonnen␣wird
public␣String␣getTileURL(Point␣a,␣int␣z)␣{
return␣"http://tile.openstreetmap.org/"␣+
z␣+␣"/"␣+␣a.getX()␣+␣"/"␣+␣a.getY()␣+␣".png";

}

@Override
public␣boolean␣isPng()␣{
return␣true;
}
};
TileLayer␣[]␣osmLayers␣=␣{osmMapnikLayer};␣␣␣␣␣␣//Erstellen␣des␣Layerarrays
MapType␣osm␣=␣new␣MapType(osmLayers,␣MapType.getSatelliteMap().getProjection()␣,␣"Mapnik");␣␣␣␣␣␣␣//osm␣als␣neuen␣MapTyp␣erstellen

map.addMapType(osm);␣␣␣␣␣␣␣//␣hinzufügen␣des␣osm␣Layers␣auf␣der␣Karte

Ich hoffe ich kann damit noch anderen Leuten weiterhelfen.
mfg Michael

PS: nochmal vielen Dank an Augustus Kling, Zartbitter und aighes die mir sehr weitergeholfen haben