div-Inhalt zoomen

[nietaL]

Hey Leute,

ich habe einen div-Container, der

- eine Karte beinhaltet, die
- größer als der Div-Bereich selbst ist und
- aus verschiedenen aneinandergelegten PNGs bestehen (Länder), welche wiederum
- von einem großen alles überdeckende durchsichtigen PNG überlagert sind, der auf sich
- klickbare image-maps hat.

Also ein ziemliches Sammelsorium.
Der Container hat z.Z. Scrollbalken. Da die Karte recht groß ist, sieht man überhaupt nicht durch. Gibt es eine Möglichkeit, dieses ganze Gebilde innerhalb des Containers zu zoomen und zu scrollen, ohne dass sich die Abstände zwischen den Elementen verschieben? Es gibt viele schöne Lösungen, die leider aber nur mit einem einfachen Bild (bspw. ein großes jpg) funktionieren.

 

[epiphora]

In CSS3 gibt es die transform-Eigenschaft, mit der man auch skalieren kann. Damit müsste sich Dein Vorhaben eigentlich realisieren lassen. Im IE geht das leider erst ab Version 9. Hier gibt es einige Infos: https://developer.mozilla.org/de/docs/Web/CSS/transform

 

[fragkp]

Vielleicht wird dir es auch helfen, die Bilder als ein Canvas darzustellen. Nur so als Tipp: Mehr müsstest du auch nach googlen.

 

[godlike]

Mal über die google-maps API nachgedacht? Vielleicht per Overlay? Oder habe ich dich da komplett falsch verstanden?

 

[nietaL]

Ich habe mich jetzt an die Idee von epiphora herangewagt. Zuerst versuchte ich alle Landesteile an sich zu verkleinern, wobei sie sich aber von einander entfernten, da die Verkleinerung von allen Seiten in die jeweilige Mitte hin geschieht. Also habe ich das gesamt Div mit Scale bearbeitet. Da aber der Ausschnitt gleichgroß bleiben soll und nur der Inhalt sich verkleinern soll, lass ich gleichzeitig Height und Width vergrößern.
Das klappt soweit ganz gut. Einziger Haken ist, dass die Scrollbalken dünner und dicker werden :-D Aber damit kann ich leben.

Aber code-technisch steh ich grad aufm Schlauch...

[src=javascript]
function verkleinern()
{
var divHeight = document.getElementById('map').offsetHeight / 1.5;
document.getElementById('map').style.height = divHeight+'px';

var divWidth = document.getElementById('map').offsetWidth / 1.5;
document.getElementById('map').style.width = divWidth+'px';
}
[/src]

Nach demselben Prinzip möchte ich jetzt den Function-Scale-Wert auslesen und mit 1.5multiplizieren.

[src=javascript]
var divScale = document.getElementById('map').?????????? * 1.5;
document.getElementById('map').????????? = divScale;
[/src]

 

[epiphora]

Sofern Du das nicht selbst gemacht hast, wird es keine weitere Skalierung geben, daher kannst Du Dir das Auslesen des aktuellen Wertes eigentlich sparen. Beim Zuweisen musst Du lediglich die Vendor-Prefixes beachten:

[src=javascript]document.getElementById('map').style.WebkitTransform = 'scale(' + divScale + ')';
document.getElementById('map').style.transform = 'scale(' + divScale + ')';[/src]

 

[nietaL]

nee nee, den aktuellen Wert brauche ich unbedingt, da durch mehrmaliges Klicken immer weiter gezoomt werden soll: jeweils 1,5-mal so groß wie vorher.

 

[LemonDrops]

Machs dir einfacher. Verteile Klassen mit der Zoomstufe und zähle die Klicks. Du brauchst keine großen Rechnereien und kannst den Zommstufen später im CSS anpassen.

 

[nietaL]

naja, ich habe jetzt feste Zoomstufen. Das geht auch in Ordnung. Aber warum verschiebt sich das Fenster?

 

[godlike]

Da funktioniert bei mir gar nix FF 29

 

[nietaL]

Ja, sry, hab's jetzt sein lassen. Ich glaub für sowas kommt nur Java infrage. Aber das beherrsche ich leider nicht in diesem Maße. Trotzdem danke für die Bemühungen.

 

[godlike]

Was spricht denn gegen die Google-Maps-API mit deiner Karte als Overlay? Das ist super dokumentiert, funktioniert und es gibt viele Beispiele im Internet zu finden. Das sollte doch sowas in der Art sein was du suchst: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple?hl=de

Du hast deinen DIV-Container. Darin lädtst du die Google-Karte, auf dieser befindet sich dein Bild an Overlay.

 

[nietaL]

Tja, das Problemchen ist, dass die Karte fiktiv ist.

 

[dexter]

Tja, das Problemchen ist, dass die Karte fiktiv ist.

In welchem Format hast Du denn da die Vorlage? Theoretisch kannst Du mit Openlayers oder Leaflet eigene Bilder (tiles) einbinden.