Wie Styling der Karte ändern

joergi2012 · 2012-02-11 13:59:42

Hi,

ich beschäftige mich seit kurzem mit "openstreetmap" und bin wirklich begeistert. Für meine Homepage benötige ich eine Karte, in der die Koordinaten aus einem PHP script gelesen werden. Das klappt alles auch einwandfrei. Nun würde ich die Kartendarstellung jedoch gerne ändern:
1. Das Standort Icon möchte ich durch ein eigenes Icon ersetzen
2. In der Navigationsleiste soll die Weltkugel wegfallen. Gerne würde ich die gesamte Navigation auch durch ein anderes Style ersetzen. Aber wie baut man dieses ein und gibt es schon fertige Styles?
3. Wie kann ich Schulen und Kindergärten durch eigene icons sichtbar machen

Ich hoffe, das Ihr mir weiterhelfen könnt, denn im Netz fand ich keine Lösung :-))

<style type="text/css">.olControlAttribution { bottom: 3px!important; }</style>
<script src="http://www.openlayers.org/api/OpenLayers.js">
</script><script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js">
</script><div id="map" style="width:500px;height:340px;">
</div>
<script type="text/javascript">
var map;
function showMap()
{
map = new OpenLayers.Map("map",
{
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
numZoomLevels: 19,
maxResolution: 156543.0399,
units: "m",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
}
);
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
map.addLayers([layerMapnik,layerTah]);
map.setCenter(new OpenLayers.LonLat(<?php echo $long; ?>,<?php echo $lat; ?>).transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 14);
map.addLayer(new OpenLayers.Layer.Markers());
var marker = new OpenLayers.Marker(map.getCenter());
marker.events.register("mousedown", marker, function(evt)
{
OpenLayers.Event.stop(evt);
}
);
map.layers[map.layers.length-1].addMarker(marker);
}
showMap();
</script>

Last edited by Lambertus (2012-02-11 19:59:59)

SimonPoole · 2012-02-11 14:52:27

Die gute Nachricht ist: es ist möglich (siehe z.B. cleanmap.poole.ch). Die schlechte ist: es ist ein Riesengebastel, unter anderem weil zum Teil Farben hartverdrahtet im Code sind (z.B. für den Rand des Layerswitchers).

Das ist vermutlcih auch der Grund wieso die meisten Websites einfach bei dem grottenhässlichen Standarddesign bleiben.

mapbox (mapbox.com) hatte was zu alternativen Themes auf ihrer Website, scheint aber nicht mehr zugänglich zu sein.

Simon

!i! · 2012-02-11 15:24:43

Moin Jörgi, willkommen bei OSM

Das was du machen willst, geht auf ganz verschiedene Komponenten ein. Die meisten nutzen OpenLayers um die Webkarte selbst darzustellen, da kannst du natürlich auch die UI Controls selbst umgestalten http://docs.openlayers.org/library/controls.html Wenn du einen anderen Marker haben willst, kannst du entweder das Marker-Icon in deiner OpenLayers Installation austauschen, oder in deinen Geodaten den Stil festlegen http://openlayers.org/dev/examples/kml-layer.html oder dir einen eigenen Style für einen Vektor-Layer überlegen http://docs.openlayers.org/library/feature_styling.html

SimonPoole · 2012-02-11 15:45:30

Hier hats (nicht selber ausprobiert) weitere OL themes: http://trac.osgeo.org/openlayers/ticket/1800

Last edited by SimonPoole (2012-02-11 16:12:39)

Netzwolf · 2012-02-11 17:08:36

Nahmd,

joergi2012 wrote:

1. Das Standort Icon möchte ich durch ein eigenes Icon ersetzen

Füge in den Initialisierungscode ein:

// die Breite des Icons sei 20
// die Höhe des Icons sei 30

// Der Hotspot-Offset wird von der linken oberen Ecke aus negativ gezählt.
// Wenn der also links oben sein soll (normaler Mauszeiger): x:0, y:0
// Wenn er unten links sein soll: x:0, y: -(hoehe)
// Wenn er unten in der Mitte sein soll: x: - (breite)/2, y: -(hoehe)
// usw.
// der Hotspot sei unten in der Mitte (wie beim Default-Marker):

OpenLayers.Marker.defaultIcon = function () {
    return new OpenLayers.Icon ("pfad/zu/deiner/graphic.xyz", {w:20, h:30}, {x: -10, y:-30});
};

joergi2012 wrote:

2. In der Navigationsleiste soll die Weltkugel wegfallen. Gerne würde ich die gesamte Navigation auch durch ein anderes Style ersetzen. Aber wie baut man dieses ein und gibt es schon fertige Styles?

Die bereits angesprochenen Themes bestehen "nur" aus einem Haufen Grafiken und einem Stylesheet und beeinflussen nicht die Funktion.
Dazu kann JS nicht ohne weiteres die Größe einer Graphik auslesen, diese ist vielmehr von den JS-Komponenten vorgegeben.

Du kannst sehr leicht ein neues Theme erstellen, musst dazu nur knapp 2 Dutzend Graphiken neubauen, und die müssen die gleiche Größe haben wir ihre "Originale". Und Funktionalität ergänzen/streichen kann man nicht.

Wenn Du etwas wirklich eigenes bauen willst und ein bisschen Mühe nicht scheust, kannst Du das einmal ausprobieren: du baust zuerst die Grafik für eine eigene Navigationsbox, wobei Deiner Phantasie keine Grenzen gesetzt sind. Und im Anschluss stattest Du diese Box mit Funktionalität aus. Auch da grenzenlose Freiheit: Du kannst alle Komponenten von OL ansprechen. Musst Du aber nicht.

joergi2012 wrote:

3. Wie kann ich Schulen und Kindergärten durch eigene icons sichtbar machen

Die Kartenkacheln bestehen nur aus einem Haufen von Pixeln. Das Konzept Schule oder Kindergarten ist da verloren. Dur brauchst die darunterliegenden Geodaten. Die Geodaten kannst Du über verschiedene APIs von verschiedenen Servern abholen. Der Overpass-Server z.B. kann Dir zu einem vorgebenen rechteckigen Gebiet alle Objekte liefern, die Schulen oder Kindergärten sind. Die Antwort kommt im OSM-XML-Format.

Deine Schulen/Kindergärten können nicht nur Punkte sein, sondern auch Flächenobjekte. Für die musst Du noch einen "zentralen Punkt" bestimmen (oder Du nimmst einfach den ersten Knoten).

Jetzt hast Du Deine POIs in einem bestimmten Format vorliegen. Der nächste Schritt ist, die Kartenseite um einen POI-Layer zu erweitern. Der taucht auf Wunsch auch im Layerswitcher auft, man kann also die Anzeige der Schulen/Kindergärten später ein und ausschalten. Du kannst auch getrennte Layer für S und K einrichten, dann kann man die nachher unabhängig voneinander ein- und ausschalten.

Für diese POI-Layer gibt es verschiedene Möglichkeiten, die auch davon abhängen, wie viele POIs Du darstellen willst.

Soviel zur Einführung.

Gruß Wolf

Edit: fehlende Klammer im JS.

Last edited by Netzwolf (2012-02-11 17:09:44)

joergi2012 · 2012-02-12 03:47:21

Hi,

danke für Eure Hilfe. Bisher habe ich immerhin das eigene Standort Icon einbauen können. Werde mal schauen, wie weit ich mit den beiden anderen Vorhaben komme :-))

Photoweblog · 2012-02-12 07:12:36

Hallo,

auch das Wechseln der controls sollte kein Problem sein (wie Netzwolf schon geschrieben hat), ein Beispiel das Du in wenigen Schritten umsetzen kannst findest Du auf HanBlog.net. Ein einfacher Weg das nachzuvollziehen ist:

1.) Das WordPress OSM plugin runterladen.
2.) Nur den Ordner themes/dark/ aus dem OSM plugin auf Deinen Webspace kopieren.
3.) Beim OpenLayers Initialisieren den Pfad zu diesem Ordner auf Deinem Webspace angeben:

OpenLayers.ImgPath = "http://MeinWebspace/OSM/themes/dark/";

Wenn das soweit mit diesen alterntiven contols funktioniert und wenn Du nun eigene Icons erzeugen möchtest, dann einen eigenen Theme Ordner anlegen und die eigenen PNGs erzeugen - mit genau den selben Namen. Natürlich nicht vergessen den Pfad bei OpenLayers.ImgPath entspr. anzupassen ;-)

Es bietet sich dann - wie im Beispiel oben -auch an, zB. einen Rahmen um die Karte in der Farbe der Controls zu machen, das ist am einfachsten mit einem Rahmen über den div-Block der Karte. Im Beispiel oben wurde einfach "border:thin solid black;" ergänzt.

Gtx, MiKa

wyo · 2012-02-12 11:23:18

Photoweblog wrote:

OpenLayers.ImgPath = "http://MeinWebspace/OSM/themes/dark/";

Warum finde ich den ImgPath weder in der OpenLayers Dokumentation noch in den Beispielen? Kann mir jemand sagen wie ich dort suchen soll, damit es gefunden wird? Irgendwo sollte es doch dokumentiert sein.

wyo · 2012-02-12 11:30:56

SimonPoole wrote:

Hier hats (nicht selber ausprobiert) weitere OL themes: http://trac.osgeo.org/openlayers/ticket/1800

Das grüne Theme ist völlig veraltet und unvollständig, die anderen vermutlich auch.

Netzwolf · 2012-02-12 13:27:38

Nahmd,

wyo wrote:

Warum finde ich den ImgPath weder in der OpenLayers Dokumentation noch in den Beispielen?

Die "Dokumentation" zu OpenLayers scheint maschinell erstellt ("a := b + c; // Weise der Variablen a die Summe der Werte der Variablen b und c zu") und ist unbrauchbar.

wyo wrote:

Kann mir jemand sagen wie ich dort suchen soll, damit es gefunden wird?

Die Beispiele sind brauchbar. Wenn Dein Wunsch aber in den Beispielen nicht enthalten ist…
Möglicherweise taugt das OpenLayers-Buch was?

wyo wrote:

Irgendwo sollte es doch dokumentiert sein.

"Read the source, luke."

Ich habe eine Liste der globalen Objekte in OpenLayers zusammengestellt. Da steht aber nur drin, welche Objekte es gibt, und nicht, was man damit anstellt. Genau wie in der OpenLayers-Doku

Gruß Wolf

joergi2012 · 2012-02-13 03:53:03

Hi,

danke für Eure Antworten. Betreffend des Stylings, habe ich mir mal verschiedene Sets runtergeladen. Aber keines sagte mir zu. Daher habe ich mir die Seite

http://www.netzwolf.info/kartografie/op … ombar2.htm

angeschaut, bei der mir das Styling sehr gut gefiel. Dann habe ich hier die Datei my_panzoombar.js auf meinen Server in das Unterverzeichnis "openlayers" kopiert. Das ganze funktioniert auch soweit. Aber es gibt zwei Probleme:

1. Das neue Styling wird quasi über das original Styling rübergelegt d.h. müßte das original Styling gelöscht werden. Ich weiß aber nicht, wie.
2. Die Zoomleiste wird nicht dargestellt. Wenn ich jedoch die Zeile
<script type="text/javascript" src="openlayers/my_panzoombar.js"></script>
entferne, wird eine Zoomleiste dargestellt. Diese ist jedoch dann viel länger als das original. Ich benötige aber die original Größe der Zoomleiste.

Könnt Ihr mir helfen? hier der überarbeitete Quellcode:

<?php
$lat=51.20418118214776;
$long=7.1737611293792725;
?>
<style type="text/css">.olControlAttribution { bottom: 3px!important; }</style>
<script src="http://www.openlayers.org/api/OpenLayers.js">
</script><script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js">
</script><div id="map" style="width:500px;height:340px;">
</td></tr></table></div>
<script type="text/javascript" src="openlayers/my_panzoombar.js"></script>
<script type="text/javascript">
var map;
function showMap()
{
map = new OpenLayers.Map("map",
{
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
numZoomLevels: 19,
maxResolution: 156543.0399,
units: "m",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
}
);
map.addControl (new OpenLayers.Control.Attribution());
map.addControl (new OpenLayers.Control.Navigation());
map.addControl (new OpenLayers.Control.PanZoomBar({minZoom: 19}));
OpenLayers.Marker.defaultIcon = function () {
return new OpenLayers.Icon ("symbole/nadel.png", {w:35, h:41}, {x: -10, y:-30});
};

var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
map.addLayers([layerMapnik]);
map.setCenter(new OpenLayers.LonLat(<?php echo $long; ?>,<?php echo $lat; ?>).transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 14);
map.addLayer(new OpenLayers.Layer.Markers());
var marker = new OpenLayers.Marker(map.getCenter());
marker.events.register("mousedown", marker, function(evt)
{
OpenLayers.Event.stop(evt);
}
);
map.layers[map.layers.length-1].addMarker(marker);
}
showMap();
</script>

Photoweblog · 2012-03-28 05:19:36

Für das WordPress OpenStreetMap plugin OSM gibt es auf HanBlog einen Artikel wie man mit GIMP neue controls in die Karte einfügt.

Announcement

#1 2012-02-11 13:59:42

Wie Styling der Karte ändern

#2 2012-02-11 14:52:27

Re: Wie Styling der Karte ändern

#3 2012-02-11 15:24:43

Re: Wie Styling der Karte ändern

#4 2012-02-11 15:45:30

Re: Wie Styling der Karte ändern

#5 2012-02-11 17:08:36

Re: Wie Styling der Karte ändern

#6 2012-02-12 03:47:21

Re: Wie Styling der Karte ändern

#7 2012-02-12 07:12:36

Re: Wie Styling der Karte ändern

#8 2012-02-12 11:23:18

Re: Wie Styling der Karte ändern

#9 2012-02-12 11:30:56

Re: Wie Styling der Karte ändern

#10 2012-02-12 13:27:38

Re: Wie Styling der Karte ändern

#11 2012-02-13 03:53:03

Re: Wie Styling der Karte ändern

#12 2012-03-28 05:19:36

Re: Wie Styling der Karte ändern

Board footer