fix(dynamic-id-leaflet): updated map id to dynamic (#271)

UIC-2139

superset/assets/src/visualizations/LeafletMap/LeafletMap.js

@@ -33,15 +33,15 @@ const propTypes = {
     onAddFilter: PropTypes.func,
   };
 
-function NOOP() {} 
+function NOOP() {}
 
 /**
  * Leaflet Map Visualization
  * @param {*} element
  * @param {*} props
  */
 function LeafletMap(element, props) {
- 
+
     const {height, payload, formData ,onAddFilter = NOOP } = props;
 
     const POLYGON = 'Polygon';
@@ -51,8 +51,6 @@ function LeafletMap(element, props) {
     const MARKER_RADIUS = 10;
     const MARKER_WEIGHT = 1;
     const MARKER_OPACITY = 1;
-    const LEAFLET_VIS_ID = 'leafllet-chart-id';
-    const MAP_CONTAINER = '<div id = ' + LEAFLET_VIS_ID + ' style="width: 100%; height: 100%;z-index:0;"></div>';
     var colorCols;
     var geoJson;
     var mapInstance;
@@ -64,6 +62,14 @@ function LeafletMap(element, props) {
     var showTooltip = formData.richTooltip;
     var useEsriJS = formData.labelsOutside;
 
+    function getMapId() {
+      return 'leaflet-map' + props.formData.sliceId;
+    }
+
+    function getMapContainer() {
+      return '<div id = ' + getMapId() + ' style="width: 100%; height: 100%;z-index:0;"></div>';
+    }
+
     function getDefaultPolygonStyles() {
         return {
             color: getRgbColor(formData.strokeColorPicker),
@@ -85,7 +91,7 @@ function LeafletMap(element, props) {
 
     function setLayout() {
         // set innerHtML to hold map vis
-        element.innerHTML = MAP_CONTAINER;
+        element.innerHTML = getMapContainer();
         element.style.height =  height;
         element.style.overflow =  'auto';
     }
@@ -238,7 +244,7 @@ function LeafletMap(element, props) {
         const min_zoom = formData.minRadius;
         const max_zoom = formData.maxRadius;
 
-        mapInstance = L.map(LEAFLET_VIS_ID, {
+        mapInstance = L.map(getMapId(), {
             minZoom: min_zoom,
             maxZoom: max_zoom
         }).setView([def_lat, def_long], def_zoom, {});