capitalization MapTiler

With the new release process in place, I think keeping a separate
version number for desktop is confusing and unnecessary. This PR remove
it so the desktop version reports the version number of the web version
embedded in the binary.

## Launch Checklist

<!-- Thanks for the PR! Feel free to add or remove items from the
checklist. -->


 - [x] Briefly describe the changes in this PR.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

.github/workflows/release.yml

@@ -66,7 +66,6 @@ jobs:
 
       - name: Build
         run: |
-          npm run build
           npm run build-desktop
 
       - name: Tag commit and push
@@ -78,8 +77,7 @@ jobs:
 
       - name: Create Archives
         run: |
-          zip -r dist dist
+          zip -r "desktop-${{ steps.package-version.outputs.current-version }}"  desktop/bin/
-          zip -r desktop desktop/bin/
 
       - name: Build Release Notes
         id: release_notes
@@ -97,7 +95,7 @@ jobs:
           tag: ${{ steps.tag_version.outputs.new_tag }}
           name: ${{ steps.tag_version.outputs.new_tag }}
           bodyFile: ${{ steps.release_notes.outputs.release_notes }}
-          artifacts: "dist.zip,desktop.zip"
+          artifacts: "desktop-${{ steps.package-version.outputs.current-version }}.zip"
           allowUpdates: true
           draft: false
           prerelease: false

.gitignore

@@ -36,3 +36,11 @@ public
 /cypress/screenshots
 /dist/
 /desktop/version.go
+
+# IDE
+.vscode/
+.idea/
+
+# Window metadata files
+/desktop/winres/winres.json
+/desktop/*.syso

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## main
 
 ### ✨ Features and improvements
+- Add german translation
+- Use same version number for web and desktop versions
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

README.md

@@ -36,6 +36,8 @@ Maputnik is written in typescript and is using [React](https://github.com/facebo
 
 We ensure building and developing Maputnik works with the [current active LTS Node.js version and above](https://github.com/nodejs/Release#release-schedule).
 
+Check out our [Internationalization guide](./src/locales/README.md) for UI text related changes. 
+
 ### Getting Involved
 Join the #maplibre or #maputnik slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/ Read the the below guide in order to get familiar with how we do things around here.
 
@@ -70,7 +72,6 @@ npm run lint-css
 npm run sort-styles
 ```
 
-
 ## Tests
 For E2E testing we use [Cypress](https://www.cypress.io/)
 

desktop/Makefile

@@ -1,16 +1,22 @@
 SOURCEDIR=.
 SOURCES := $(shell find $(SOURCEDIR) -name '*.go')
 BINARY=maputnik
-DESKTOP_VERSION := 1.1.1
+VERSION := $(shell node -p "require('../package.json').version")
-EDITOR_VERSION := $(shell node -p "require('../package.json').version")
 GOPATH := $(if $(GOPATH),$(GOPATH),$(HOME)/go)
 GOBIN := $(if $(GOBIN),$(GOBIN),$(HOME)/go/bin)
 
 all: $(BINARY)
 
-$(BINARY): $(GOBIN)/gox $(SOURCES) version.go rice-box.go
+$(BINARY): $(GOBIN)/gox $(GOBIN)/go-winres $(SOURCES) version.go rice-box.go winres/winres.json
+	$(GOBIN)/go-winres make --product-version=$(VERSION)
 	$(GOBIN)/gox -osarch "windows/amd64 linux/amd64 darwin/amd64" -output "bin/{{.OS}}/${BINARY}"
 
+winres/winres.json: winres/winres_template.json
+	sed 's/{{.Version}}/$(VERSION)/g' winres/winres_template.json > $@
+
+$(GOBIN)/go-winres:
+	go install github.com/tc-hib/go-winres@latest
+
 # Copy the current release into ./editor/maputnik so it can be
 # embedded in the binary
 editor/pull_release:
@@ -23,13 +29,12 @@ $(GOBIN)/gox:
 $(GOBIN)/rice:
 	go install github.com/GeertJohan/go.rice/rice@v1.0.3
 
-# Embed the current version numbers in the executable by writing version.go
+# Embed the current version number in the executable by writing version.go
 .PHONY: version.go
 version.go:
 	@echo "// DO NOT EDIT: Autogenerated by Makefile\n" > version.go
 	@echo "package main\n" >> version.go
-	@echo "const DesktopVersion = \"$(DESKTOP_VERSION)\"" >> version.go
+	@echo "const Version = \"$(VERSION)\"" >> version.go
-	@echo "const EditorVersion = \"$(EDITOR_VERSION)\"" >> version.go
 
 rice-box.go: $(GOBIN)/rice editor/pull_release
 	$(GOBIN)/rice embed-go

desktop/README.md

@@ -1,4 +1,5 @@
 # Maputnik Desktop [![GitHub CI status](https://github.com/maplibre/maputnik/workflows/ci/badge.svg)][github-action-ci]
+
 ---
 
 A Golang based cross platform executable for integrating Maputnik locally.
@@ -11,7 +12,7 @@ Report issues on [maplibre/maputnik](https://github.com/maplibre/maputnik).
 
 ## Install
 
-You can download a single binary for Linux, OSX or Windows from [the latest releases of **maplibre/maputnik**](https://github.com/maplibre/maputnik/editor/releases/latest).
+You can download a zip file containing desktop binaries for Linux, OSX and Windows from [the latest releases of **maplibre/maputnik**](https://github.com/maplibre/maputnik/releases/latest).
 
 ### Usage
 
@@ -53,12 +54,12 @@ maputnik --static ./localFolder
 
 `maputnik` exposes the configured styles via a HTTP API.
 
-| Method                          | Description
+| Method                   | Description                                            |
-|---------------------------------|---------------------------------------
+| ------------------------ | ------------------------------------------------------ |
-| `GET /styles`                   | List the ID of all configured style files
+| `GET /styles`            | List the ID of all configured style files              |
-| `GET /styles/{filename}`        | Get contents of a single style file
+| `GET /styles/{filename}` | Get contents of a single style file                    |
-| `PUT /styles/{filename}`        | Update contents of a style file
+| `PUT /styles/{filename}` | Update contents of a style file                        |
-| `WEBSOCKET /ws`                 | Listen to change events for the configured style files
+| `WEBSOCKET /ws`          | Listen to change events for the configured style files |
 
 ### Build
 
@@ -69,4 +70,4 @@ npm install
 npm run build-desktop
 ```
 
-You should now find the `maputnik` binary in your `bin` directory.
+You should now find the `maputnik` binary in your `desktop/bin` directory.

desktop/maputnik.go

@@ -17,7 +17,7 @@ func main() {
 	app := cli.NewApp()
 	app.Name = "maputnik"
 	app.Usage = "Server for integrating Maputnik locally"
-	app.Version = "Editor: " + EditorVersion + "; Desktop: " + DesktopVersion
+	app.Version = Version
 
 	app.Flags = []cli.Flag{
 		&cli.StringFlag{

desktop/winres/winres_template.json

@@ -0,0 +1,60 @@
+{
+  "RT_GROUP_ICON": {
+    "APP": {
+      "0000": [
+        "../../src/img/maputnik.png"
+      ]
+    }
+  },
+  "RT_MANIFEST": {
+    "#1": {
+      "0409": {
+        "identity": {
+          "name": "Maputnik",
+          "version": "{{.Version}}"
+        },
+        "description": "A MapLibre GL visual style editor",
+        "minimum-os": "win7",
+        "execution-level": "as invoker",
+        "ui-access": false,
+        "auto-elevate": false,
+        "dpi-awareness": "system",
+        "disable-theming": false,
+        "disable-window-filtering": false,
+        "high-resolution-scrolling-aware": false,
+        "ultra-high-resolution-scrolling-aware": false,
+        "long-path-aware": false,
+        "printer-driver-isolation": false,
+        "gdi-scaling": false,
+        "segment-heap": false,
+        "use-common-controls-v6": false
+      }
+    }
+  },
+  "RT_VERSION": {
+    "#1": {
+      "0000": {
+        "fixed": {
+          "file_version": "{{.Version}}",
+          "product_version": "{{.Version}}"
+        },
+        "info": {
+          "0409": {
+            "Comments": "https://github.com/maplibre/maputnik",
+            "CompanyName": "Maputnik",
+            "FileDescription": "A MapLibre GL visual style editor",
+            "FileVersion": "{{.Version}}",
+            "InternalName": "Maputnik",
+            "LegalCopyright": "MIT License",
+            "LegalTrademarks": "",
+            "OriginalFilename": "Maputnik.exe",
+            "PrivateBuild": "",
+            "ProductName": "Maputnik",
+            "ProductVersion": "{{.Version}}",
+            "SpecialBuild": ""
+          }
+        }
+      }
+    }
+  }
+}

i18next-parser.config.ts

@@ -1,6 +1,6 @@
 export default {
   output: 'src/locales/$LOCALE/$NAMESPACE.json',
-  locales: [ 'ja', 'he','zh' ],
+  locales: [ 'de', 'fr', 'he', 'ja', 'zh' ],
 
   // Because some keys are dynamically generated, i18next-parser can't detect them.
   // We add these keys manually, so we don't want to remove them.

src/components/AppToolbar.tsx

@@ -230,7 +230,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
 
           <ToolbarSelect wdKey="nav:inspect">
             <MdFindInPage />
-            <label>{t("View")}
+            <IconText>{t("View")}
               <select
                 className="maputnik-select"
                 data-wd-key="maputnik-select"
@@ -254,12 +254,12 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                   })}
                 </optgroup>
               </select>
-            </label>
+            </IconText>
           </ToolbarSelect>
 
           <ToolbarSelect wdKey="nav:language">
             <MdLanguage />
-            <label>{t("Language")}
+            <IconText>Language
               <select
                 className="maputnik-select"
                 data-wd-key="maputnik-lang-select"
@@ -274,7 +274,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                   );
                 })}
               </select>
-            </label>
+            </IconText>
           </ToolbarSelect>
 
           <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>

src/components/MapMaplibreGl.tsx

@@ -14,6 +14,7 @@ import '../libs/maplibre-rtl'
 import MaplibreGeocoder, { MaplibreGeocoderApi, MaplibreGeocoderApiConfig } from '@maplibre/maplibre-gl-geocoder';
 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
 import { withTranslation, WithTranslation } from 'react-i18next'
+import i18next from 'i18next'
 
 function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement {
   ReactDOM.render(popup, mountNode);
@@ -67,9 +68,11 @@ type MapMaplibreGlInternalProps = {
 } & WithTranslation;
 
 type MapMaplibreGlState = {
-  map: Map | null
+  map: Map | null;
-  inspect: MaplibreInspect | null
+  inspect: MaplibreInspect | null;
-  zoom?: number
+  geocoder: MaplibreGeocoder | null;
+  zoomControl: ZoomControl | null;
+  zoom?: number;
 };
 
 class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
@@ -87,7 +90,12 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     this.state = {
       map: null,
       inspect: null,
+      geocoder: null,
+      zoomControl: null,
     }
+    i18next.on('languageChanged', () => {
+      this.forceUpdate();
+    })
   }
 
 
@@ -125,6 +133,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
         this.state.inspect!.render();
       }, 500);
     }
+    
   }
 
   componentDidMount() {
@@ -152,9 +161,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     map.showCollisionBoxes = mapOpts.showCollisionBoxes!;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector!;
 
-    this.initGeocoder(map);
+    let geocoder = this.initGeocoder(map);
 
-    const zoomControl = new ZoomControl(this.props.t("Zoom:"));
+    const zoomControl = new ZoomControl();
     map.addControl(zoomControl, 'top-right');
 
     const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
@@ -189,6 +198,8 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       this.setState({
         map,
         inspect,
+        geocoder,
+        zoomControl,
         zoom: map.getZoom()
       });
     })
@@ -261,10 +272,13 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       maplibregl: MapLibreGl,
     });
     map.addControl(geocoder, 'top-left');
+    return geocoder;
   }
 
   render() {
     const t = this.props.t;
+    this.state.geocoder?.setPlaceholder(t("Search"));
+    this.state.zoomControl?.setLabel(t("Zoom:"));
     return <div
       className="maputnik-map__map"
       role="region"

src/config/styles.json

@@ -5,6 +5,12 @@
     "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/src/config/empty-style.json",
     "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
   },
+  {
+    "id": "americana",
+    "title": "Americana",
+    "url": "https://americanamap.org/style.json",
+    "thumbnail": "https://github.com/maplibre/maputnik/assets/649392/23fa75ad-63e6-43f5-8837-03cdb0428bac"
+  },
   {
     "id": "dark-matter",
     "title": "Dark Matter",
@@ -13,7 +19,7 @@
   },
   {
     "id": "maptiler-basic-gl-style",
-    "title": "Maptiler Basic",
+    "title": "MapTiler Basic",
     "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.10/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
   },
@@ -65,6 +71,12 @@
     "url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@v1.9/style.json",
     "thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
   },
+  {
+    "id": "protomaps-light",
+    "title": "Protomaps Light",
+    "url": "https://api.protomaps.com/styles/v2/light.json?key=d828297496b11844",
+    "thumbnail": "https://github.com/user-attachments/assets/911f9765-4a7d-4736-9ec0-f2d4c90ae587"
+  },
   {
     "id": "stadia-outdoors",
     "title": "Stadia Outdoors",

src/i18n.ts

@@ -4,9 +4,11 @@ import resourcesToBackend from "i18next-resources-to-backend";
 import { initReactI18next } from "react-i18next";
 
 export const supportedLanguages = {
+  "de": "Deutsch",
   "en": "English",
-  "ja": "日本語",
+  "fr": "Français",
   "he": "עברית",
+  "ja": "日本語",
   "zh": "简体中文"
 } as const;
 

src/libs/zoomcontrol.ts

@@ -5,18 +5,14 @@ export default class ZoomControl {
   _container: HTMLDivElement | undefined = undefined;
   _textEl: HTMLSpanElement | null = null;
 
-  constructor(public label: string) {}
+  constructor() {}
 
   onAdd(map: Map) {
     this._map = map;
     this._container = document.createElement('div');
     this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
     this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
-    this._container.innerHTML = `
+    this.setLabel("Zoom:");
-      ${this.label} <span></span>
-    `;
-    this._textEl = this._container.querySelector("span");
-    
     this.addEventListeners();
     
     return this._container;
@@ -26,6 +22,14 @@ export default class ZoomControl {
     this._textEl!.innerHTML = this._map!.getZoom().toFixed(2);
   }
 
+  setLabel(label: string) {
+    this._container!.innerHTML = `
+      ${label} <span></span>
+    `;
+    this._textEl = this._container!.querySelector("span");
+    this.updateZoomLevel();
+  }
+  
   addEventListeners (){
     this._map!.on('render', () => this.updateZoomLevel());
     this._map!.on('zoomIn', () => this.updateZoomLevel());

src/locales/README.md

@@ -0,0 +1,60 @@
+## Internationalization
+
+The process of internationlization is pretty straight forward for Maputnik.
+
+## Add a new language
+
+#### 1. Edit configuration
+
+In order to add a new translation you'll need to add it to the configuration files. Please put it in alphabetical order.
+
+- Open [/i18next-parser.config.ts](/i18next-parser.config.ts) and add the ISO Code of your language to the `locales` array.
+- Now, open [/src/i18n.ts](/src/i18n.ts) and add the ISO Code and localized name to the supported languages.
+
+#### 2. Add the localized strings
+
+Refresh the localization to generate a new directory under `/src/locales/` for your new language.
+
+```bash
+npm install
+npm run i18n:refresh
+```
+
+Replace every `__STRING_NOT_TRANSLATED__` value in the newly generated `translation.json` file with the according translation.
+Make sure all the keys are translated.
+
+#### 3. Test your new locale
+
+Finally, test your language locally by starting a local instance of Maputnik.
+
+```bash
+npm run start
+```
+
+Consider adding your name as a helping person for the translation of new features.
+
+## Add localization for a new feature
+
+If you happen to add a feature which needs some text to be translated, update the translation files.
+After running, check your working copy for files and add/correct as needed.
+
+```bash
+npm run i18n:refresh
+```
+
+The following users can help you with the relevant languages:
+
+| ISO Code | Language           | User                                       |
+|----------|--------------------|--------------------------------------------|
+| de       | German             | [@josxha](https://github.com/josxha)       | 
+| en       | English            | [@HarelM](https://github.com/HarelM)       | 
+| fr       | French             | [@lhapaipai](https://github.com/lhapaipai) | 
+| hr       | Hebrew             | [@HarelM](https://github.com/HarelM)       | 
+| ja       | Japanese           | [@keichan34](https://github.com/keichan34) | 
+| zh       | Simplified Chinese | [@jieme](https://github.com/jieme)         | 
+
+You can test the UI in different languages using the dropdown in the top menu
+Note that Maputnik automatically localize based on browser language settings and stores this language in local storage.
+You can use incognito mode to check a first time usage.
+
+

src/locales/de/translation.json

@@ -0,0 +1,185 @@
+{
+  "Input value": "Eingabewert",
+  "Data value": "Datenwert",
+  "Output value": "Ausgabewert",
+  "Function": "Funktion",
+  "Select a type of data scale (default is 'categorical').": "Wähle eine Art Datenskala (Standard ist 'kategorisch').",
+  "Base": "Basis",
+  "Input a data property to base styles off of.": "Gib eine Dateneigenschaft ein, um Stile darauf zu basieren.",
+  "Default": "Standard",
+  "Stops": "Stopps",
+  "Zoom": "Zoom",
+  "Add stop": "Stopp hinzufügen",
+  "Convert to expression": "In Ausdruck umwandeln",
+  "Remove zoom level from stop": "Zoom-Stufe vom Stopp entfernen",
+  "Revert from expression": "Vom Ausdruck zurücksetzen",
+  "Delete expression": "Ausdruck löschen",
+  "Convert property into a zoom function": "Eigenschaft in eine Zoom-Funktion umwandeln",
+  "Convert property to data function": "Eigenschaft in eine Datenfunktion umwandeln",
+  "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "Ebene <1>{formatLayerId(layerId)}</1>: {parsed.data.message}",
+  "switch to layer": "zur Ebene wechseln",
+  "Map": "Karte",
+  "Inspect": "Untersuchen",
+  "Deuteranopia filter": "Deuteranopie-Filter",
+  "Protanopia filter": "Protanopie-Filter",
+  "Tritanopia filter": "Tritanopie-Filter",
+  "Achromatopsia filter": "Achromatopsie-Filter",
+  "Layers list": "Ebenenliste",
+  "Layer editor": "Ebenen-Editor",
+  "Map view": "Kartenansicht",
+  "Maputnik on GitHub": "Maputnik auf GitHub",
+  "Open": "Öffnen",
+  "Export": "Exportieren",
+  "Data Sources": "Datenquellen",
+  "Style Settings": "Stileinstellungen",
+  "View": "Ansicht",
+  "Color accessibility": "Farbzugänglichkeit",
+  "Help": "Hilfe",
+  "Comments for the current layer. This is non-standard and not in the spec.": "Kommentare zur aktuellen Ebene. Das ist nicht standardmäßig und nicht in der Spezifikation.",
+  "Comments": "Kommentare",
+  "Comment...": "Dein Kommentar...",
+  "Max Zoom": "Max-Zoom",
+  "Min Zoom": "Min-Zoom",
+  "Source": "Quelle",
+  "Source Layer": "Quellenebene",
+  "Type": "Typ",
+  "Nested filters are not supported.": "Verschachtelte Filter werden nicht unterstützt.",
+  "Upgrade to expression": "Aufrüsten zu Ausdruck",
+  "Filter": "Filter",
+  "every filter matches": "alle Filter passen",
+  "no filter matches": "kein Filter passt",
+  "any filter matches": "irgendein Filter passt",
+  "Add filter": "Filter hinzufügen",
+  "You've entered an old style filter.": "Du hast einen alten Filter-Stil eingegeben.",
+  "Switch to filter editor.": "Zum Filter-Editor wechseln.",
+  "Delete filter block": "Filterblock löschen",
+  "Add value": "Wert hinzufügen",
+  "Remove array item": "Element aus Array entfernen",
+  "Press <1>ESC</1> to lose focus": "Drück <1>ESC</1>, um den Fokus zu verlieren",
+  "Must provide protocol: <1>https://</1>": "Protokoll erforderlich: <1>https://</1>",
+  "Must provide protocol: <1>http://</1> or <3>https://</3>": "Protokoll erforderlich: <1>http://</1> oder <3>https://</3>",
+  "CORS policy won't allow fetching resources served over http from https, use a <1>https://</1> domain": "Die CORS-Politik erlaubt es nicht, Ressourcen über http von https zu laden, benutze eine <1>https://</1>-Domain",
+  "Layer": "Ebene",
+  "JSON Editor": "JSON-Editor",
+  "Delete": "Löschen",
+  "Duplicate": "Duplizieren",
+  "Show": "Anzeigen",
+  "Hide": "Verstecken",
+  "Move layer up": "Ebene nach oben verschieben",
+  "Move layer down": "Ebene nach unten verschieben",
+  "Layer: {{layerId}}": "Ebene: {{layerId}}",
+  "Layers": "Ebenen",
+  "Collapse": "Einklappen",
+  "Expand": "Ausklappen",
+  "Add Layer": "Ebene hinzufügen",
+  "Search": "Suche",
+  "Zoom:": "Zoom:",
+  "Close popup": "Popup schließen",
+  "cursor:": "Mauszeiger:",
+  "center:": "Zentrum:",
+  "rotation:": "Rotation:",
+  "Close modal": "Modale Fenster schließen",
+  "Debug": "Debug",
+  "Options": "Optionen",
+  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "<0>In OSM öffnen</0> &mdash; Öffnet die aktuelle Ansicht auf openstreetmap.org",
+  "Export Style": "Stil exportieren",
+  "Download Style": "Stil herunterladen",
+  "Download a JSON style to your computer.": "Lade einen JSON-Stil auf deinen Computer herunter.",
+  "Download HTML": "HTML herunterladen",
+  "Cancel": "Abbrechen",
+  "Open Style": "Stil öffnen",
+  "Upload Style": "Stil hochladen",
+  "Upload a JSON style from your computer.": "Lade einen JSON-Stil von deinem Computer hoch.",
+  "Style file": "Stildatei",
+  "Upload": "Hochladen",
+  "Load from URL": "Von URL laden",
+  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "Von einer URL laden. Beachte, dass die URL <1>CORS aktiviert</1> haben muss.",
+  "Style URL": "Stil-URL",
+  "Enter URL...": "URL eingeben...",
+  "Gallery Styles": "Galerie-Stile",
+  "Open one of the publicly available styles to start from.": "Öffne einen der öffentlich verfügbaren Stile, um zu starten.",
+  "Loading style": "Stil wird geladen",
+  "Loading: {{requestUrl}}": "Lädt: {{requestUrl}}",
+  "Name": "Name",
+  "Owner": "Besitzer",
+  "Owner ID of the style. Used by Mapbox or future style APIs.": "Besitzer-ID des Stils. Wird von Mapbox oder zukünftigen Style-APIs verwendet.",
+  "Sprite URL": "Sprite-URL",
+  "Glyphs URL": "Glyphen-URL",
+  "Center": "Mittelpunkt",
+  "Bearing": "Ausrichtung",
+  "Pitch": "Neigung",
+  "Light anchor": "Lichtanker",
+  "Light color": "Lichtfarbe",
+  "Light intensity": "Lichtintensität",
+  "Light position": "Lichtposition",
+  "Terrain source": "Geländequelle",
+  "Terrain exaggeration": "Gelände-Übertreibung",
+  "Transition delay": "Übergangsverzögerung",
+  "Transition duration": "Übergangsdauer",
+  "Open Layers (experimental)": "Ebenen öffnen (experimentell)",
+  "Shortcuts menu": "Shortcuts-Menü",
+  "Open modal": "Modale Fenster öffnen",
+  "Export modal": "Modale Fenster exportieren",
+  "Data Sources modal": "Modale Datenquellen",
+  "Style Settings modal": "Modale Stileinstellungen",
+  "Toggle inspect": "Inspektion umschalten",
+  "Focus map": "Karte fokussieren",
+  "Debug modal": "Debug (modale Fenster)",
+  "Increase the zoom level by 1.": "Zoom-Stufe um 1 erhöhen.",
+  "Increase the zoom level by 2.": "Zoom-Stufe um 2 erhöhen.",
+  "Decrease the zoom level by 1.": "Zoom-Stufe um 1 verringern.",
+  "Decrease the zoom level by 2.": "Zoom-Stufe um 2 verringern.",
+  "Pan up by 100 pixels.": "Um 100 Pixel nach oben schwenken.",
+  "Pan down by 100 pixels.": "Um 100 Pixel nach unten schwenken.",
+  "Pan left by 100 pixels.": "Um 100 Pixel nach links schwenken.",
+  "Pan right by 100 pixels.": "Um 100 Pixel nach rechts schwenken.",
+  "Increase the rotation by 15 degrees.": "Rotation um 15 Grad erhöhen.",
+  "Decrease the rotation by 15 degrees.": "Rotation um 15 Grad verringern.",
+  "Increase the pitch by 10 degrees.": "Neigung um 10 Grad erhöhen.",
+  "Decrease the pitch by 10 degrees.": "Neigung um 10 Grad verringern.",
+  "Shortcuts": "Shortcuts",
+  "Press <1>ESC</1> to lose focus of any active elements, then press one of:": "Drück <1>ESC</1>, um den Fokus von aktiven Elementen zu verlieren, und dann drück eine der folgenden Tasten:",
+  "If the Map is in focused you can use the following shortcuts": "Wenn die Karte fokussiert ist, kannst du die folgenden Shortcuts benutzen",
+  "Remove '{{sourceId}}' source": "Quelle '{{sourceId}}' entfernen",
+  "Source ID": "Quellen-ID",
+  "Unique ID that identifies the source and is used in the layer to reference the source.": "Eindeutige ID, die die Quelle identifiziert und in der Ebene verwendet wird, um auf die Quelle zu verweisen.",
+  "Source Type": "Quellentyp",
+  "GeoJSON (JSON)": "GeoJSON (JSON)",
+  "GeoJSON (URL)": "GeoJSON (URL)",
+  "Vector (TileJSON URL)": "Vektor (TileJSON URL)",
+  "Vector (XYZ URLs)": "Vektor (XYZ URLs)",
+  "Raster (TileJSON URL)": "Raster (TileJSON URL)",
+  "Raster (XYZ URL)": "Raster (XYZ URL)",
+  "Raster DEM (TileJSON URL)": "Raster DEM (TileJSON URL)",
+  "Raster DEM (XYZ URLs)": "Raster DEM (XYZ URLs)",
+  "Image": "Bild",
+  "Video": "Video",
+  "Add Source": "Quelle hinzufügen",
+  "Sources": "Quellen",
+  "Active Sources": "Aktive Quellen",
+  "Choose Public Source": "Öffentliche Quelle auswählen",
+  "Add one of the publicly available sources to your style.": "Füge eine der öffentlich verfügbaren Quellen zu deinem Stil hinzu.",
+  "Add New Source": "Neue Quelle hinzufügen",
+  "Add a new source to your style. You can only choose the source type and id at creation time!": "Füge eine neue Quelle zu deinem Stil hinzu. Du kannst den Quellentyp und die ID nur bei der Erstellung auswählen!",
+  "TileJSON URL": "TileJSON URL",
+  "Tile URL": "Kachel-URL",
+  "Coord top left": "Koordinate oben links",
+  "Coord top right": "Koordinate oben rechts",
+  "Coord bottom right": "Koordinate unten rechts",
+  "Coord bottom left": "Koordinate unten links",
+  "Image URL": "Bild-URL",
+  "Video URL": "Video-URL",
+  "GeoJSON URL": "GeoJSON URL",
+  "GeoJSON": "GeoJSON",
+  "Cluster": "Cluster",
+  "Encoding": "Kodierung",
+  "Error:": "Fehler:",
+  "MapTiler Access Token": "MapTiler Zugriffstoken",
+  "Public access token for MapTiler Cloud.": "Öffentlicher Zugriffstoken für MapTiler Cloud.",
+  "Thunderforest Access Token": "Thunderforest Zugriffstoken",
+  "Public access token for Thunderforest services.": "Öffentlicher Zugriffstoken für Thunderforest-Dienste.",
+  "Style Renderer": "Stil-Renderer",
+  "Choose the default Maputnik renderer for this style.": "Wähle den Standard-Renderer für diesen Stil aus.",
+  "Language": "Sprache",
+  "Press <1>ESC</1> to lose focus of any input box": "Drück <1>ESC</1>, um den Fokus von jedem Eingabefeld zu verlieren"
+}

src/locales/fr/translation.json

@@ -0,0 +1,192 @@
+{
+  "Input value": "Valeur d'entrée",
+  "Data value": "Valeur des données",
+  "Output value": "Valeur de sortie",
+  "Function": "Fonction",
+  "Select a type of data scale (default is 'categorical').": "Sélectionnez un type d'échelle de données (par défaut 'categorical').",
+  "Base": "Base",
+  "Input a data property to base styles off of.": "Entrez une propriété de données pour baser les styles.",
+  "Default": "Par défaut",
+  "Stops": "Arrêts",
+  "Zoom": "Zoom",
+  "Add stop": "Ajouter un arrêt",
+  "Convert to expression": "Convertir en expression",
+  "Remove zoom level from stop": "Supprimer le niveau de zoom de l'arrêt",
+  "Revert from expression": "Annuler l'expression",
+  "Delete expression": "Supprimer l'expression",
+  "Convert property into a zoom function": "Convertir la propriété en fonction de zoom",
+  "Convert property to data function": "Convertir la propriété en fonction de données",
+  "Layer <1>{formatLayerId(layerId)}</1>: {parsed.data.message}": "Calque <1>{formatLayerId(layerId)}</1> : {parsed.data.message}",
+  "switch to layer": "changer de calque",
+  "Map": "Carte",
+  "Inspect": "Inspecter",
+  "Deuteranopia filter": "Filtre Deutéranopie",
+  "Protanopia filter": "Filtre Protanopie",
+  "Tritanopia filter": "Filtre Tritanopie",
+  "Achromatopsia filter": "Filtre Achromatopsie",
+  "Layers list": "Liste des calques",
+  "Layer editor": "Éditeur de calque",
+  "Map view": "Vue de la carte",
+  "Maputnik on GitHub": "Maputnik sur GitHub",
+  "Open": "Ouvrir",
+  "Export": "Exporter",
+  "Data Sources": "Sources de données",
+  "Style Settings": "Paramètres du style",
+  "View": "Vue",
+  "Color accessibility": "Accessibilité des couleurs",
+  "Language": "Langue",
+  "Help": "Aide",
+  "Comments for the current layer. This is non-standard and not in the spec.": "Commentaires pour le calque actuel. Ceci n'est pas standard et n'est pas dans la spécification.",
+  "Comments": "Commentaires",
+  "Comment...": "Votre commentaire...",
+  "Max Zoom": "Zoom max",
+  "Min Zoom": "Zoom min",
+  "Source": "Source",
+  "Source Layer": "Calque Source",
+  "Type": "Type",
+  "Nested filters are not supported.": "Les filtres imbriqués ne sont pas pris en charge.",
+  "Upgrade to expression": "Mettre à niveau vers une expression",
+  "Filter": "Filtre",
+  "every filter matches": "tous les filtres correspondent",
+  "no filter matches": "aucun filtre ne correspond",
+  "any filter matches": "l'un des filtres correspond",
+  "Add filter": "Ajouter un filtre",
+  "You've entered an old style filter.": "Vous avez entré un ancien style de filtre.",
+  "Switch to filter editor.": "Passer à l'éditeur de filtre.",
+  "Delete filter block": "Supprimer le bloc de filtre",
+  "Add value": "Ajouter une valeur",
+  "Remove array item": "Supprimer l'élément de tableau",
+  "Press <1>ESC</1> to lose focus": "Appuyez sur <1>Échap</1> pour perdre le focus",
+  "Must provide protocol: <1>https://</1>": "Protocole requis : <1>https://</1>",
+  "Must provide protocol: <1>http://</1> or <3>https://</3>": "Protocole requis : <1>http://</1> ou <3>https://</3>",
+  "CORS policy won't allow fetching resources served over http from https, use a <1>https://</1> domain": "La politique CORS ne permet pas de récupérer des ressources servies sur http depuis https, utilisez un protocole <1>https://</1>",
+  "Layer": "Calque",
+  "JSON Editor": "Éditeur JSON",
+  "Delete": "Supprimer",
+  "Duplicate": "Dupliquer",
+  "Show": "Afficher",
+  "Hide": "Cacher",
+  "Move layer up": "Monter le calque",
+  "Move layer down": "Descendre le calque",
+  "Layer: {{layerId}}": "Calque : {{layerId}}",
+  "Layers": "Calques",
+  "Collapse": "Réduire",
+  "Expand": "Développer",
+  "Add Layer": "Ajouter un calque",
+  "Zoom:": "Zoom :",
+  "Search": "Recherche",
+  "Close popup": "Fermer la fenêtre",
+  "cursor:": "curseur :",
+  "center:": "centre :",
+  "rotation:": "rotation :",
+  "Close modal": "Fermer la fenêtre modale",
+  "Debug": "Déboguer",
+  "Options": "Options",
+  "<0>Open in OSM</0> &mdash; Opens the current view on openstreetmap.org": "<0>Ouvrir dans OSM</0> &mdash; Ouvre la vue actuelle sur openstreetmap.org",
+  "Export Style": "Exporter le style",
+  "Download Style": "Télécharger le style",
+  "Download a JSON style to your computer.": "Téléchargez un style JSON sur votre ordinateur.",
+  "Download HTML": "Télécharger HTML",
+  "Cancel": "Annuler",
+  "Open Style": "Ouvrir le style",
+  "Upload Style": "Transférer un style",
+  "Upload a JSON style from your computer.": "Transférer un style JSON depuis votre ordinateur.",
+  "Style file": "Fichier de style",
+  "Upload": "Transférer",
+  "Load from URL": "Charger depuis une URL",
+  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "Charger depuis une URL. Notez que l'URL doit avoir les <1>CORS activés</1>.",
+  "Style URL": "URL du style",
+  "Enter URL...": "Entrez l'URL...",
+  "Gallery Styles": "Styles de la galerie",
+  "Open one of the publicly available styles to start from.": "Ouvrez l'un des styles publics disponibles pour commencer.",
+  "Loading style": "Chargement du style",
+  "Loading: {{requestUrl}}": "Chargement : {{requestUrl}}",
+  "Name": "Nom",
+  "Owner": "Propriétaire",
+  "Owner ID of the style. Used by Mapbox or future style APIs.": "ID du propriétaire du style. Utilisé par Mapbox ou les futures API de style.",
+  "Sprite URL": "URL du sprite",
+  "Glyphs URL": "URL des glyphes",
+  "Center": "Centre",
+  "Bearing": "Orientation",
+  "Pitch": "Inclinaison",
+  "Light anchor": "Ancrage de la lumière",
+  "Light color": "Couleur de la lumière",
+  "Light intensity": "Intensité de la lumière",
+  "Light position": "Position de la lumière",
+  "Terrain source": "Source du terrain",
+  "Terrain exaggeration": "Exagération du terrain",
+  "Transition delay": "Délai de transition",
+  "Transition duration": "Durée de transition",
+  "Open Layers (experimental)": "Open Layers (expérimental)",
+  "Shortcuts menu": "Menu des raccourcis",
+  "Open modal": "Ouvrir (modale)",
+  "Export modal": "Exporter (modale)",
+  "Data Sources modal": "Sources de données (modale)",
+  "Style Settings modal": "Paramètres de style (modale)",
+  "Toggle inspect": "Activer/désactiver l'inspection",
+  "Focus map": "Focus sur la carte",
+  "Debug modal": "Déboguer (modale)",
+  "Increase the zoom level by 1.": "Augmenter le niveau de zoom de 1.",
+  "Increase the zoom level by 2.": "Augmenter le niveau de zoom de 2.",
+  "Decrease the zoom level by 1.": "Diminuer le niveau de zoom de 1.",
+  "Decrease the zoom level by 2.": "Diminuer le niveau de zoom de 2.",
+  "Pan up by 100 pixels.": "Déplacer vers le haut de 100 pixels.",
+  "Pan down by 100 pixels.": "Déplacer vers le bas de 100 pixels.",
+  "Pan left by 100 pixels.": "Déplacer vers la gauche de 100 pixels.",
+  "Pan right by 100 pixels.": "Déplacer vers la droite de 100 pixels.",
+  "Increase the rotation by 15 degrees.": "Augmenter l'angle de rotation de 15 degrés.",
+  "Decrease the rotation by 15 degrees.": "Diminuer l'angle de rotation de 15 degrés.",
+  "Increase the pitch by 10 degrees.": "Augmenter l'inclinaison de 10 degrés.",
+  "Decrease the pitch by 10 degrees.": "Diminuer l'inclinaison de 10 degrés.",
+  "Shortcuts": "Raccourcis",
+  "Press <1>ESC</1> to lose focus of any active elements, then press one of:": "Appuyez sur <1>Échap</1> pour perdre le focus des éléments actifs, puis appuyez sur l'un des éléments suivants :",
+  "If the Map is in focused you can use the following shortcuts": "Si la carte a le focus, vous pouvez utiliser les raccourcis suivants",
+  "Remove '{{sourceId}}' source": "Supprimer la source '{{sourceId}}'",
+  "Source ID": "ID de la source",
+  "Unique ID that identifies the source and is used in the layer to reference the source.": "ID unique qui identifie la source et est utilisé dans le calque pour référencer la source.",
+  "Source Type": "Type de source",
+  "GeoJSON (JSON)": "GeoJSON (JSON)",
+  "GeoJSON (URL)": "GeoJSON (URL)",
+  "Vector (TileJSON URL)": "Vecteur (URL TileJSON)",
+  "Vector (XYZ URLs)": "Vecteur (URLs XYZ)",
+  "Raster (TileJSON URL)": "Raster (URL TileJSON)",
+  "Raster (XYZ URL)": "Raster (URL XYZ)",
+  "Raster DEM (TileJSON URL)": "Raster DEM (URL TileJSON)",
+  "Raster DEM (XYZ URLs)": "Raster DEM (URLs XYZ)",
+  "Image": "Image",
+  "Video": "Vidéo",
+  "Add Source": "Ajouter une source",
+  "Sources": "Sources",
+  "Active Sources": "Sources actives",
+  "Choose Public Source": "Choisir une source publique",
+  "Add one of the publicly available sources to your style.": "Ajoutez l'une des sources publiques disponibles à votre style.",
+  "Add New Source": "Ajouter une nouvelle source",
+  "Add a new source to your style. You can only choose the source type and id at creation time!": "Ajoutez une nouvelle source à votre style. Vous ne pouvez choisir le type et l'ID de la source qu'au moment de la création !",
+  "TileJSON URL": "URL TileJSON",
+  "Tile URL": "URL de la tuile",
+  "Coord top left": "Coordonnée en haut à gauche",
+  "Coord top right": "Coordonnée en haut à droite",
+  "Coord bottom right": "Coordonnée en bas à droite",
+  "Coord bottom left": "Coordonnée en bas à gauche",
+  "Image URL": "URL de l'image",
+  "Video URL": "URL de la vidéo",
+  "GeoJSON URL": "URL GeoJSON",
+  "GeoJSON": "GeoJSON",
+  "Cluster": "Cluster",
+  "Encoding": "Encodage",
+  "Error:": "Erreur :",
+  "MapTiler Access Token": "Jeton d'accès MapTiler",
+  "Public access token for MapTiler Cloud.": "Jeton d'accès public pour MapTiler Cloud.",
+  "Thunderforest Access Token": "Jeton d'accès Thunderforest",
+  "Public access token for Thunderforest services.": "Jeton d'accès public pour les services Thunderforest.",
+  "Style Renderer": "Moteur de rendu pour le style",
+  "Choose the default Maputnik renderer for this style.": "Choisissez le moteur de rendu Maputnik par défaut pour ce style.",
+  "Layer options": "Options du calque",
+  "Paint properties": "Propriétés de peinture",
+  "Layout properties": "Propriétés de mise en page",
+  "General layout properties": "Propriétés générales de mise en page",
+  "Text layout properties": "Propriétés de mise en page du texte",
+  "Icon layout properties": "Propriétés de mise en page de l'icône",
+  "Text paint properties": "Propriétés de peinture du texte",
+  "Icon paint properties": "Propriétés de peinture de l'icône"
+}

src/styles/_export.scss

@@ -10,7 +10,7 @@
   }
 
   input.maputnik-string {
-    margin-left: 5px;
+    margin: 0 5px;
     width: 60%;
     display: inline-block;
   }

src/styles/_filtereditor.scss

@@ -18,7 +18,7 @@
 }
 
 .maputnik-filter-editor-operator {
-  margin-left: 2%;
+  margin: 0 2%;
   display: inline-block;
   width: 17%;
 
@@ -30,7 +30,7 @@
 .maputnik-filter-editor-args {
   display: inline-block;
   width: 54%;
-  margin-left: 2%;
+  margin: 0 2%;
 
   .maputnik-string,
   .maputnik-number {

src/styles/_input.scss

@@ -107,6 +107,9 @@
 
   height: 24px;
 }
+[dir="rtl"] .maputnik-select {
+  background: $color-gray url("#{$icon-down-arrow}") left center no-repeat;
+}
 
 // MULTIBUTTON
 .maputnik-multibutton {

src/styles/_layer.scss

@@ -178,7 +178,7 @@
   }
 
   &-group-content {
-    margin-left: $margin-3;
+    margin: 0 $margin-3;
   }
 }
 

src/styles/_popup.scss

@@ -22,7 +22,7 @@
 
 .maputnik-popup-layer-id {
   padding-left: $margin-2;
-  padding-right: 1.6em;
+  padding-right: $margin-2;
   background-color: $color-midgray;
   color: $color-white;
 }
@@ -33,6 +33,7 @@
   .maputnik-input-block {
     margin: 0;
     margin-left: $margin-2;
+    margin-right: $margin-2;
     margin-top: $margin-2;
   }
 }
@@ -44,4 +45,5 @@
 .maputnik-popup-table-cell {
   color: $color-lowgray;
   padding-left: $margin-2;
+  padding-right: $margin-2;
 }

src/styles/_toolbar.scss

@@ -87,7 +87,7 @@
 
 .maputnik-toolbar-version {
   font-size: 10px;
-  margin-left: 4px;
+  margin: 0 4px;
   white-space: nowrap;
 }
 
@@ -103,7 +103,7 @@
   @extend .maputnik-toolbar-link; /* stylelint-disable-line */
 
   select {
-    margin-left: 6px;
+    margin: 0 6px;
     border-width: 0;
     display: inline;
     width: auto;
@@ -114,12 +114,12 @@
 }
 
 .maputnik-icon-text {
-  padding-left: $margin-1;
+  padding: 0 $margin-1;
 }
 
 .maputnik-icon-action {
   display: inline;
-  margin-left: $margin-1;
+  margin: 0 $margin-1;
 }
 
 .maputnik-toolbar__inner {

src/styles/index.scss

@@ -102,8 +102,7 @@
 
     &:not(:first-child)
     {
-      padding-top: $margin-1;
+      padding: $margin-1;
-      padding-left: $margin-2;
     }
 
     &:nth-child(1) {