Implement dynamic map markers in "legacy-plugin-chart-map-box" of Superset 3.1.0 #28756
Unanswered
puspadRoche
asked this question in
Q&A / Help
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello Everyone,
I'm using Superset 3.1.0 and attempting to integrate map markers into the legacy plugin chart MapBox (version: 0.18.25).
This is the following code snippet into MapBox.jsx:
`import React, { PureComponent } from "react";
import { CategoricalColorNamespace } from "@superset-ui/core";
import PropTypes from "prop-types";
import MapGL, { Marker } from "react-map-gl";
import ViewportMercator from "viewport-mercator-project";
import ScatterPlotGlowOverlay from "./ScatterPlotGlowOverlay";
import "./MapBox.css";
const NOOP = () => {};
export const DEFAULT_MAX_ZOOM = 16;
export const DEFAULT_POINT_RADIUS = 60;
const propTypes = {
data: PropTypes.arrayOf(PropTypes.shape({
lat: PropTypes.number.isRequired,
lon: PropTypes.number.isRequired,
})).isRequired,
formData: PropTypes.object.isRequired,
width: PropTypes.number,
height: PropTypes.number,
aggregatorName: PropTypes.string,
clusterer: PropTypes.object,
globalOpacity: PropTypes.number,
hasCustomMetric: PropTypes.bool,
mapStyle: PropTypes.string,
mapboxApiKey: PropTypes.string.isRequired,
onViewportChange: PropTypes.func,
pointRadius: PropTypes.number,
pointRadiusUnit: PropTypes.string,
renderWhileDragging: PropTypes.bool,
rgb: PropTypes.array,
bounds: PropTypes.array,
};
const defaultProps = {
data: [],
width: 400,
height: 400,
globalOpacity: 1,
onViewportChange: NOOP,
pointRadius: DEFAULT_POINT_RADIUS,
pointRadiusUnit: "Pixels"
};
class MapBox extends React.Component {
constructor(props) {
super(props);
}
handleViewportChange(viewport) {
this.setState({ viewport });
const { onViewportChange } = this.props;
onViewportChange(viewport);
}
renderMarkers() {
}
render() {
const {
width,
height,
aggregatorName,
clusterer,
globalOpacity,
mapStyle,
mapboxApiKey,
pointRadius,
pointRadiusUnit,
renderWhileDragging,
rgb,
hasCustomMetric,
bounds,
} = this.props;
const { viewport } = this.state;
const isDragging =
viewport.isDragging === undefined ? false : viewport.isDragging;
}
}
MapBox.propTypes = propTypes;
MapBox.defaultProps = defaultProps;
export default MapBox;
`
I noticed the following issues in the above code but couldn't resolve them:
renderMarker()
, data extracted fromthis.props
is empty.<MapGL>
code and tried implementing a customized<MapGL>
by passing{this.renderMarkers()}
, but it didn't render the map marker.Possible reasons could be that the data is empty or I am not using the correct implementation approach.
This is code below of my transformprops.js file :
`import supercluster from "supercluster";
import { DEFAULT_POINT_RADIUS, DEFAULT_MAX_ZOOM } from "./MapBox";
const NOOP = () => {};
export default function transformProps(chartProps) {
const { width, height, formData, hooks, queriesData } = chartProps;
const { onError = NOOP, setControlValue = NOOP } = hooks;
const { bounds, geoJSON, hasCustomMetric, mapboxApiKey } = queriesData[0].data;
const data = Array.isArray(queriesData[0]?.data) ? queriesData[0].data : [];
console.log("tranaformJs data", data);
const {
clusteringRadius,
globalOpacity,
mapboxColor,
mapboxStyle,
pandasAggfunc,
pointRadius,
pointRadiusUnit,
renderWhileDragging,
} = formData;
// Validate mapbox color
const rgb = /^rgb((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}))$/.exec(mapboxColor);
if (rgb === null) {
onError("Color field must be of form "rgb(%d, %d, %d)"");
}
const opts = {
maxZoom: DEFAULT_MAX_ZOOM,
radius: clusteringRadius,
};
if (hasCustomMetric) {
opts.initial = () => ({
sum: 0,
squaredSum: 0,
min: Infinity,
max: -Infinity,
});
opts.map = prop => ({
sum: prop.metric,
squaredSum: prop.metric ** 2,
min: prop.metric,
max: prop.metric,
});
opts.reduce = (accu, prop) => {
}
const clusterer = supercluster(opts);
clusterer.load(geoJSON.features);
if (!data.length) {
console.warn("No data available in queriesData:", queriesData);
}
return {
width,
height,
data: data.map(row => ({
lat: row.lat,
lon: row.lon,
// Include other data points as needed
})),
aggregatorName: pandasAggfunc,
bounds,
clusterer,
globalOpacity,
hasCustomMetric,
mapboxApiKey,
mapStyle: mapboxStyle,
onViewportChange({ latitude, longitude, zoom }) {
setControlValue("viewport_longitude", longitude);
setControlValue("viewport_latitude", latitude);
setControlValue("viewport_zoom", zoom);
},
pointRadius: pointRadius === "Auto" ? DEFAULT_POINT_RADIUS : pointRadius,
pointRadiusUnit,
renderWhileDragging,
rgb,
};
}
`
I didn't update controlPanel.js because it seemed to be already updated.
Below are the environment I am using:
node: 16.9.1
npm: 7.5.4
legacy plugin chart MapBox (version: 0.18.25)
superset: 3.1.0
I have attached screenshots of the existing map and the data displayed in the console.
![superset-12024-05-29 131315](https://private-user-images.githubusercontent.com/170426761/334706492-64f9208f-a059-483f-bd2b-81d2f4899180.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNTgwMjQsIm5iZiI6MTcyMDE1NzcyNCwicGF0aCI6Ii8xNzA0MjY3NjEvMzM0NzA2NDkyLTY0ZjkyMDhmLWEwNTktNDgzZi1iZDJiLTgxZDJmNDg5OTE4MC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwNVQwNTM1MjRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lNDI3YjZlODExNTUzZTlhNWJlYWYzMThmMTFiNzBjZjhmMDRiNjM4YjU0ODYyOTE3NjdmYWJiNzFhNTMwMDg5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.jUm1TT4jTBfsfbi6ZyUtji0rTzb-BOd-W9-pL5ADRoU)
![Superset024-05-29 131534](https://private-user-images.githubusercontent.com/170426761/334706549-52b9bedd-d141-4328-b77c-47d01c2adb24.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNTgwMjQsIm5iZiI6MTcyMDE1NzcyNCwicGF0aCI6Ii8xNzA0MjY3NjEvMzM0NzA2NTQ5LTUyYjliZWRkLWQxNDEtNDMyOC1iNzdjLTQ3ZDAxYzJhZGIyNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzA1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwNVQwNTM1MjRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iMTEzZTUxZTY2OGRlYTI4Yzc2OGM4OTZjOGFlNTkxYTg0ODI4ZDQ5Y2UxMWFiNzJiYWQ2Y2YzM2U5Zjk1YzdlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.LUUkhPomeGFHqsWdcdxp6Ss9RfRJ2jnbLSD-fWjNgV4)
My goal is to dynamically add markers into the legacy plugin chart MapBox.
As a newcomer to Superset, I'm struggling to identify what I might be missing here.
Here is the reference link below for the implementation I am trying to replicate in Superset 3.1.0
[URL:] ( https://docs.mapbox.com/help/demos/add-points-pt-3/final.html)
Could anyone provide some guidance?
@kgabryje, I would appreciate your help or suggestions.
Beta Was this translation helpful? Give feedback.
All reactions