Kleinkram optisch aufplustern

[dedlfix]

Tach!

Gegeben sei eine Landkarte. Darauf sollen rechteckige Gegenden markiert werden (nur angezeigt, ohne Verlinkung irgendwohin, also imagemap-Funktionalität wird nicht benötigt). Nun kann es passieren, dass diese sehr klein sind und man nicht viel mehr als ein Fliegenexkrement sieht. Nun könnte man mit etwas Rechnerei das Rechteck größer darstellen und es dann wieder auf seinen ursprünglichen Mittelpunkt zentrieren. Damit geht aber auch die optische Wirkung verloren, dass das Gebiet nur ein ganz kleines ist. Mir schwebt daher eher vor, außern herum einen Effekt zu bringen, mit dem man es besser lokalisieren kann. Theoretisch kann es auch schmal aber lang sein, in der Praxis sind aber die X- und Y-Größen nicht wesentlich unterschiedlich bei diesen kleinen Gebieten.

Technisch gelöst ist das bisherige System so, dass in einem Container mit Bild als Untergrund die Rechtecke als div überlagert werden, die absolut positioniert sind, und das mittels Prozentwerten. Konkret gefragt suche ich also zum einen eine Möglichkeit, mit CSS Elemente zu selektieren, die eine bestimmte Größe nicht überschreiten. Und zum anderen etwas, das außen herum etwas hinzufügt, zum Beispiel wie bei einer Lichtquelle, die in alle Richtungen strahlt und deren Lichtintensität dabei immer mehr abnimmt mit der Entfernung, wobei hier die Entfernung ein oder zwei Handvoll Pixel sein werden. Oder irgend etwas alternatives.

---

Nebensächlich generelles und unabhängig zu obigem Problem: Vermutlich kann man das System auch als SVG aufsetzen. Kann man das dann auch interaktiv gestalten? Derzeit kann man nebenan in einer Legende ein paar Checkboxen umschalten, woraufhin dem Container Klassen hinzugefügt oder entfernt werden, die dann per entsprechender CSS-Regel bestimmte Klassen von Elementen auf der Karte sichtbar machen oder verbergen. Zudem bringt ein Mausdraufhalten auf die Elemente in der Karte ein paar Information mittels title-Attribut. Auch das müsste gegeben sein, ohne dass da großartig selber Tooltip-Elemente hinzugefügt und gestaltet werden müssen, bei denen man wieder aufpassen muss, dass sie nicht übers Bild ragen, was der browsereigene title-Tooltip-Mechnismus bereits ohne weiteres Zutun löst.

dedlfix.

[Matthias Apsel]

Hallo dedlfix,

Ich würde mit box-shadow experimentieren.

Bis demnächst
Matthias

[Linuchs]

Gegeben sei eine Landkarte. Darauf sollen rechteckige Gegenden markiert werden

Kennst du Leaflet? Eine Javascript-Umgebung für interaktive Landkarten.

Du könntest "unscheinbare" Gegenden mit einem eigenen image markieren, das unabhängig vom Zoom-Faktor immer dieselbe Größe hat. Beispiel

Nun könnte man mit etwas Rechnerei das Rechteck größer darstellen und es dann wieder auf seinen ursprünglichen Mittelpunkt zentrieren.

Das Zentrieren ist bei Leaflet schon gelöst. So definierst du deinen Marker:

<script>
var standort = L.icon({
    iconUrl: 'img/punkt_rot_blink.gif',
    shadowUrl: '',

    iconSize:     [30, 30], // size of the icon
    shadowSize:   [ 0,  0], // size of the shadow
    iconAnchor:   [15, 15], // point of the icon which will correspond to marker's location
    shadowAnchor: [ 0,  0],  // the same for the shadow
    popupAnchor:  [ 0,  0] // point from which the popup should open relative to the iconAnchor
});
</script>

Mir schwebt daher eher vor, außern herum einen Effekt zu bringen, mit dem man es besser lokalisieren kann.

Ja, nimm eine transparente Zielscheibe.

Deine Beschreibung ist für weitere Tipps zu nebulös, kann deine Anwendung nicht erahnen.

Linuchs