Style-Definition

SmartMaps GL bietet eine Vielzahl vordefinierter Styles, die sich einfach auf Ihre Karten anwenden lassen. Diese Dokumentation gibt einen Überblick über die verfügbaren Styles und deren Verwendung in Ihren Projekten.

Sie können jederzeit Ihre eigene style.json erstellen, bei Bedarf auch basierend auf der SmartMaps style.json. Die style.json definiert das Erscheinungsbild der Karte, indem festgelegt wird, wie die verschiedenen Layer der Vector-Tiles gerendert werden sollen. Dazu gehören Eigenschaften wie:

• Füll- und Umrissfarben für Polygone
• Linienfarben und -breiten für Linien
• Symbole und Beschriftungen für Punkte
• Sichtbarkeit und Zoomstufen für jeden Layer

Durch Anpassen der style.json kann das Erscheinungsbild der Karte flexibel an Ihre eigenen Anforderungen angepasst werden, ohne die zugrunde liegenden Vektordaten zu ändern. Beispielsweise können bestimmte Layer ein- oder ausgeblendet, Farben geändert oder benutzerdefinierte Symbole verwendet werden. Die Trennung von Daten und Styling ermöglicht vielfältige Gestaltungsmöglichkeiten auf Basis des SmartMaps-Vector-Tile-Schemas.

Verfügbare Styles

Light (Standardstil)

Der Light-Style ist der Standardstil in SmartMapsGL. Er zeichnet sich durch ein klares Design aus, das für die meisten Kartenanwendungen geeignet ist. Dieser Style legt Wert auf Lesbarkeit und Klarheit, sodass Nutzer die Karte leicht navigieren und verstehen können. Um den Light-Style zu verwenden, initialisieren Sie Ihre Karte einfach ohne Angabe eines Styles:

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.LIGHT
    // Other map options
});

Dark

Der Dark-Style bietet ein elegantes und anspruchsvolles Erscheinungsbild für Ihre Karten. Er eignet sich ideal für Umgebungen mit wenig Licht oder um eine einzigartige visuelle Ästhetik zu schaffen. Der dunkle Hintergrund und die kontrastierenden Farben lassen Kartenelemente hervorstechen und schaffen ein immersives Nutzererlebnis. Um den Dark-Style anzuwenden, verwenden Sie folgenden Code:

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.DARK
    // Other map options
});

Grey

Der Grey-Style bietet ein dezentes und minimalistisches Design. Er verwendet Grautöne zur Darstellung von Kartenelementen und schafft so ein neutrales, unaufdringliches visuelles Erscheinungsbild. Dieser Style eignet sich für Situationen, in denen die Karte nicht im Vordergrund stehen, aber dennoch wesentliche Informationen liefern soll. Um den Grey-Style zu verwenden, geben Sie die Style-Datei in den Kartenoptionen an:

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.GREY
    // Other map options
});

Essential

Der Essential-Style zeichnet sich durch ein modernes Design aus, das für die meisten Kartenanwendungen geeignet ist. Dieser Style legt Wert auf Lesbarkeit und Klarheit, sodass Nutzer die Karte leicht navigieren und verstehen können. Um den Essential-Style anzuwenden, verwenden Sie folgenden Code:

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.ESSENTIAL
    // Other map options
});

Accessible

Der Accessible-Style ist für Nutzer mit Sehbeeinträchtigungen oder Farbfehlsichtigkeit optimiert. Er verwendet kontrastreiche Farben und klare Beschriftungen, damit Kartenelemente gut unterscheidbar sind. Dieser Style entspricht den Richtlinien zur Barrierefreiheit und verbessert die Nutzbarkeit Ihrer Karten für ein breiteres Publikum. Um den Accessible-Style zu verwenden, geben Sie die Style-Datei in den Kartenoptionen an:

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.ACCESSIBLE
    // Other map options
});

Satellite

Der Satellite-Style bietet eine realistische Satellitenbild-Ansicht der Karte. Er kombiniert hochauflösende Satellitenbilder mit Kartenbeschriftungen und -elementen, um eine visuell beeindruckende und informative Darstellung von Frankreich, Deutschland und der Schweiz zu erstellen. Dieser Style eignet sich ideal für Anwendungen, die eine realistische Darstellung geografischer Gebiete erfordern. Um den Satellite-Style anzuwenden, verwenden Sie folgenden Code:

const map = new smartmapsgl.Map({
    container: "map",
    style: smartmapsgl.MapStyle.SATELLITE
    // Other map options
});

Automatische Style-Umschaltung

SmartMaps GL JS passt sich automatisch an das vom Nutzer bevorzugte Farbschema an, indem basierend auf den Einstellungen des Betriebssystems zwischen Light- und Dark-Kartenstilen gewechselt wird. Diese Funktion verbessert die Nutzererfahrung, indem sie eine nahtlose Integration mit dem visuellen Design des Geräts ermöglicht.

Um die automatische Style-Umschaltung basierend auf dem Farbschema des Betriebssystems zu aktivieren, müssen Sie an Ihrem Code nichts ändern. SmartMaps GL JS übernimmt diese Funktionalität im Hintergrund nahtlos. Initialisieren Sie Ihre Karte einfach wie gewohnt, und der passende Style wird basierend auf den Geräteeinstellungen des Nutzers angewendet.

const map = new smartmapsgl.Map({
    apiKey: "[INSERT API-KEY]",
    container: "map",
    center: { lat: 49.02164948779226, lng: 8.439330018049352 },
    zoom: 12,
    style: smartmapsgl.MapStyle.AUTO
});

Durch die Verwendung von smartmapsgl.MapStyle.AUTO als Style-Option ermittelt SmartMaps GL JS automatisch den passenden Style basierend auf dem Farbschema des Betriebssystems.

Styles anpassen

Zusätzlich zu den vordefinierten Styles ermöglicht SmartMaps GL das Erstellen und Anpassen eigener Styles. Sie können entweder eine bestehende style.json ändern oder einen neuen Style von Grund auf mit der Maplibre-GL-Style-Spezifikation erstellen. Die style.json definiert das visuelle Erscheinungsbild der Karte, einschließlich:

• Füll- und Umrissfarben für Polygone
• Linienfarben und -breiten für Linien
• Symbole und Beschriftungen für Punkte
• Sichtbarkeit und Zoomstufen für jeden Layer

Diese Flexibilität ermöglicht es Ihnen, das Erscheinungsbild der Karte an Ihre spezifischen Anforderungen anzupassen, ohne die zugrunde liegenden Vektordaten zu ändern.

Um einen benutzerdefinierten Style zu verwenden, geben Sie beim Initialisieren der Karte den Pfad zu Ihrer style.json an:

const map = new smartmapsgl.Map({
    container: "map",
    style: "/assets/examples/custom.json", // Path to your custom style
    center: { lat: 49.02164948779226, lng: 8.439330018049352 },
    zoom: 12
});

Dieser Ansatz gibt Ihnen die volle Kontrolle über das Kartendesign und ermöglicht es Ihnen, Layer aus- oder einzublenden, Farben zu ändern, benutzerdefinierte Symbole zu verwenden oder jede andere visuelle Anpassung vorzunehmen, die für Ihre Anwendung erforderlich ist.