feat: modernize deck.gl and map plugins with MapLibre/Mapbox dual renderer (#38035)

Co-authored-by: Beto Dealmeida <roberto@dealmeida.net>

superset-frontend/plugins/plugin-chart-point-cluster-map/src/utils/geo.ts

@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import roundDecimal from './roundDecimal';
+
+export const EARTH_CIRCUMFERENCE_KM = 40075.16;
+export const MILES_PER_KM = 1.60934;
+
+export function kmToPixels(
+  kilometers: number,
+  latitude: number,
+  zoomLevel: number,
+): number {
+  // Algorithm from: http://wiki.openstreetmap.org/wiki/Zoom_levels
+  const latitudeRad = latitude * (Math.PI / 180);
+  // Seems like the zoomLevel is off by one
+  const kmPerPixel =
+    (EARTH_CIRCUMFERENCE_KM * Math.cos(latitudeRad)) / 2 ** (zoomLevel + 9);
+
+  return roundDecimal(kilometers / kmPerPixel, 2);
+}

superset-frontend/plugins/plugin-chart-point-cluster-map/src/utils/luminanceFromRGB.ts

@@ -0,0 +1,35 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const LUMINANCE_RED_WEIGHT = 0.2126;
+export const LUMINANCE_GREEN_WEIGHT = 0.7152;
+export const LUMINANCE_BLUE_WEIGHT = 0.0722;
+
+export default function luminanceFromRGB(
+  r: number,
+  g: number,
+  b: number,
+): number {
+  // Formula: https://en.wikipedia.org/wiki/Relative_luminance
+  return (
+    LUMINANCE_RED_WEIGHT * r +
+    LUMINANCE_GREEN_WEIGHT * g +
+    LUMINANCE_BLUE_WEIGHT * b
+  );
+}

superset-frontend/plugins/plugin-chart-point-cluster-map/src/utils/mapbox.ts

@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export function getMapboxApiKey(): string {
+  if (typeof document === 'undefined') {
+    return '';
+  }
+  try {
+    const appContainer = document.getElementById('app');
+    const dataBootstrap = appContainer?.getAttribute('data-bootstrap');
+    if (dataBootstrap) {
+      const bootstrapData = JSON.parse(dataBootstrap);
+      return bootstrapData?.common?.conf?.MAPBOX_API_KEY || '';
+    }
+  } catch {
+    // If bootstrap data is unavailable or malformed, return empty string
+  }
+  return '';
+}

superset-frontend/plugins/plugin-chart-point-cluster-map/src/utils/roundDecimal.ts

@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export default function roundDecimal(
+  number: number,
+  precision?: number,
+): number {
+  let roundedNumber: number;
+  if (precision) {
+    const p = 10 ** precision;
+    roundedNumber = Math.round(number * p) / p;
+  } else {
+    roundedNumber = Math.round(number);
+  }
+
+  return roundedNumber;
+}