Stylize export control

src/Map/MapComponent.jsx

@@ -8,6 +8,27 @@ import { MapPopup } from "./Popup";
 import { MaplibreExportControl } from "@watergis/maplibre-gl-export";
 import { Basemap } from "./Basemap";
 
+const ruTranslation = {
+  PageSize: "Размер",
+  PageOrientation: "Ориентация",
+  Format: "Формат",
+  DPI: "DPI",
+  Generate: "Экспорт карты",
+};
+
+class CustomMaplibreExportControl extends MaplibreExportControl {
+  constructor(options) {
+    super(options);
+  }
+
+  getTranslation() {
+    if (this.options.Local === "ru") {
+      return ruTranslation;
+    }
+    return super.getTranslation();
+  }
+}
+
 // const MAP_TILER_KEY = "hE7PBueqYiS7hKSYUXP9";
 
 const ExportControl = (props) => {
@@ -15,7 +36,7 @@ const ExportControl = (props) => {
 
   useControl(
     () => {
-      const controlInstance = new MaplibreExportControl(props);
+      const controlInstance = new CustomMaplibreExportControl(props);
       control.current = controlInstance;
       return controlInstance;
     },
@@ -105,6 +126,7 @@ export const MapComponent = () => {
         // DPI={DPI[200]}
         Crosshair={true}
         PrintableArea={true}
+        Local={"ru"}
       />
       {clickedFeature && popupCoordinates && (
         <MapPopup

src/Map/Points.jsx

@@ -20,7 +20,7 @@ export const Points = ({ rate }) => {
       id="points"
       type="vector"
       tiles={[
-        "https://postamates.spatiality.website/martin/public.point5/{z}/{x}/{y}.pbf",
+        "https://postamates.spatiality.website/martin/public.point3/{z}/{x}/{y}.pbf",
       ]}
     >
       <Layer

src/Map/layers-config.js

@@ -16,7 +16,7 @@ export const pointLayer = {
   id: "points",
   type: "circle",
   source: "points",
-  "source-layer": "public.point5",
+  "source-layer": "public.point3",
   layout: {},
   paint: {
     "circle-color": [

src/index.css

@@ -15,3 +15,49 @@
 .ant-popover-inner {
   @apply bg-white-background rounded-xl;
 }
+
+.mapboxgl-ctrl-group,
+.maplibregl-ctrl-group {
+  @apply bg-white-background;
+}
+
+.mapboxgl-ctrl-group button,
+.maplibregl-ctrl-group button {
+  @apply w-fit;
+}
+
+.maplibregl-export-control {
+  @apply !w-[30px] !h-[30px];
+}
+
+.maplibregl-export-list {
+  padding: 8px;
+}
+
+.generate-button {
+  color: #fff;
+  border-color: #cc2222ff !important;
+  background: #cc2222ff !important;
+  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
+  box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
+  line-height: 1.5715;
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  white-space: nowrap;
+  text-align: center;
+  background-image: none;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  touch-action: manipulation;
+  height: 32px;
+  padding: 4px 8px;
+  margin: 8px auto 0;
+  font-size: 14px;
+  border-radius: 5px;
+  width: 100% !important;
+}