update

Author: cocaine-coder

geojson-editor/index.html

@@ -17,6 +17,40 @@
             --size-word: 14px;
         }
 
+        .maplibregl-ctrl-group {
+            filter: invert(90%);
+        }
+
+        .maplibregl-ctrl-scale {
+            filter: invert(90%);
+        }
+
+        .maplibregl-ctrl-top-center {
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            pointer-events: none;
+            position: absolute;
+            z-index: 2;
+        }
+
+        .maplibregl-ctrl-top-center>.maplibregl-ctrl {
+            margin: 10px 0 0 0;
+        }
+
+        .maplibregl-ctrl-bottom-center {
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            pointer-events: none;
+            position: absolute;
+            z-index: 2;
+        }
+
+        .maplibregl-ctrl-bottom-center>.maplibregl-ctrl {
+            margin: 0 0 10px 0;
+        }
+
         body {
             margin: 0;
             height: 100vh;
@@ -27,14 +61,6 @@
             height: 100%;
             width: 100%;
         }
-
-        .maplibregl-ctrl-group{
-            filter: invert(100%);
-        }
-
-        .maplibregl-ctrl-scale{
-            filter: invert(90%);
-        }
     </style>
 </head>
 

geojson-editor/src/App.vue

@@ -114,24 +114,35 @@ function handleMapLoaded(map: maplibregl.Map) {
         drawManager,
         onUpload: (features: Array<TIdentityGeoJSONFeature>) => glManager.add(...features),
         onDownload: () => glManager.fc
-    }, "top-left");
+    }, "top-center");
     createMapControl(map, Measurer, { measureManager }, 'top-left');
 }
 
-function createMapControl(map: maplibregl.Map, component: Component, data?: Record<string, unknown>, position: maplibregl.ControlPosition = 'top-right') {
+function createMapControl(map: maplibregl.Map, component: Component, data?: Record<string, unknown>, position: maplibregl.ControlPosition | "top-center" | "bottom-center" = 'top-right') {
     const div = document.createElement('div');
     div.classList.add("maplibregl-ctrl");
-
     createApp(component, data).mount(div);
 
-    map.addControl({
-        onAdd() {
-            return div;
-        },
-        onRemove() {
-            div.remove();
+    if (position !== 'top-center' && position !== "bottom-center")
+        map.addControl({
+            onAdd() {
+                return div;
+            },
+            onRemove() {
+                div.remove();
+            }
+        }, position);
+
+    else{
+        let container = document.querySelector(`.maplibregl-ctrl-${position}`);
+        if(!container){
+            container = document.createElement('div');
+            container.classList.add(`maplibregl-ctrl-${position}`);
+            map._controlContainer.append(container);
         }
-    }, position);
+
+        container.append(div);
+    }
 }
 </script>