[Maps] ensure url has been resolved before syncing (#30750)

x-pack/plugins/maps/public/actions/store_actions.js

@@ -118,10 +118,25 @@ export function setLayerErrorStatus(layerId, errorMessage) {
 }
 
 export function toggleLayerVisible(layerId) {
-  return {
-    type: TOGGLE_LAYER_VISIBLE,
-    layerId
+  return async (dispatch, getState) => {
+    //if the current-state is invisible, we also want to sync data
+    //e.g. if a layer was invisible at start-up, it won't have any data loaded
+    const layer = getLayerList(getState()).find(layer => {
+      return layerId === layer.getId();
+    });
+    if (!layer) {
+      return;
+    }
+    const makeVisible = !layer.isVisible();
+    await dispatch({
+      type: TOGGLE_LAYER_VISIBLE,
+      layerId
+    });
+    if (makeVisible) {
+      dispatch(syncDataForLayer(layerId));
+    }
   };
+
 }
 
 export function setSelectedLayer(layerId) {

x-pack/plugins/maps/public/selectors/map_selectors.js

@@ -107,8 +107,6 @@ export const getRefreshConfig = ({ map }) => map.mapState.refreshConfig;
 
 export const getRefreshTimerLastTriggeredAt = ({ map }) => map.mapState.refreshTimerLastTriggeredAt;
 
-export const getMetadata = ({ config }) => config && config.meta;
-
 export const getDataFilters = createSelector(
   getMapExtent,
   getMapBuffer,

x-pack/plugins/maps/public/shared/layers/tile_layer.js

@@ -34,6 +34,10 @@ export class TileLayer extends AbstractLayer {
     if (!this.isVisible() || !this.showAtZoomLevel(dataFilters.zoom)) {
       return;
     }
+    const sourceDataRequest = this.getSourceDataRequest();
+    if (sourceDataRequest) {//data is immmutable
+      return;
+    }
     const sourceDataId = 'source';
     const requestToken = Symbol(`layer-source-refresh:${ this.getId()} - source`);
     startLoading(sourceDataId, requestToken, dataFilters);
@@ -52,6 +56,12 @@ export class TileLayer extends AbstractLayer {
 
     if (!source) {
       const sourceDataRequest = this.getSourceDataRequest();
+      if (!sourceDataRequest) {
+        //this is possible if the layer was invisible at startup.
+        //the actions will not perform any data=syncing as an optimization when a layer is invisible
+        //when turning the layer back into visible, it's possible the url has not been resovled yet.
+        return;
+      }
       const url = sourceDataRequest.getData();
       if (!url) {
         return;