Unverified Commit 177eb4ba authored by Michael Underwood's avatar Michael Underwood Committed by GitHub
Browse files

Merge pull request #173 from vue-leaflet/fix-170

fix 170: Use invisible div as initial marker when slot is present
parents 741e8d2f ef3cc356
Loading
Loading
Loading
Loading
+3 −0
Original line number Diff line number Diff line
@@ -14,6 +14,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
  [#231 Possible Regression](https://github.com/vue-leaflet/vue-leaflet/issues/231).
- Reworked attribution update handler to resolve
  [#165 Error when updating attribution prop for tileLayer](https://github.com/vue-leaflet/vue-leaflet/issues/165).
- Default Leaflet icon is replaced by an empty div initially when a Marker has content in its slot that has not
  yet rendered, resolving
  [#170 Blinking default marker when using custom icon component](https://github.com/vue-leaflet/vue-leaflet/issues/170).


## [0.8.1] - 2023-01-29
+10 −8
Original line number Diff line number Diff line
@@ -41,27 +41,29 @@ export default {
      (newIcon) => leafletRef.value.setIcon && leafletRef.value.setIcon(newIcon)
    );
    const { options, methods } = setupMarker(props, leafletRef, context);
    if (options.icon === undefined) {
      // If the options object has a property named 'icon', then Leaflet will overwrite
      // the default icon with it for the marker, _even if it is undefined_.
      // This leads to the issue discussed in https://github.com/vue-leaflet/vue-leaflet/issues/130
      delete options.icon;
    }

    const eventHandlers = {
      moveHandler: debounce(methods.latLngSync),
    };

    onMounted(async () => {
      const { marker, DomEvent } = useGlobalLeaflet
      const { marker, DomEvent, divIcon } = useGlobalLeaflet
        ? WINDOW_OR_GLOBAL.L
        : await import("leaflet/dist/leaflet-src.esm");

      // If an icon is not specified in the options but there is content in the LMarker's slot, then
      // set the initial icon to an empty div that will be invisible until it's replaced by any calls
      // to `setIcon` or `setParentHtml` from within the default slot. This avoids the icon flickering
      // discussed in https://github.com/vue-leaflet/vue-leaflet/issues/170.
      if (!options.icon && context.slots.default) {
        options.icon = divIcon({ className: "" });
      }
      leafletRef.value = marker(props.latLng, options);

      const listeners = remapEvents(context.attrs);
      DomEvent.on(leafletRef.value, listeners);

      leafletRef.value.on("move");
      leafletRef.value.on("move", eventHandlers.moveHandler);
      propsBinder(methods, leafletRef.value, props);
      addLayer({
        ...props,