Commit 4ca0a295 authored by Michael Underwood's avatar Michael Underwood
Browse files

Only set Marker `options.icon` to blank div if non-tooltip content is present 

Resolves #269
parent 38cee802

CHANGELOG.md

+10 −0
Original line number Diff line number Diff line
@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).





## [Unreleased]



### Fixed



- The marker icon passed to the Leaflet constructor is now only replaced with an empty div when there is

  additional content within the `<LMarker>` component, _and_ at least some of that content is something

  other than a tooltip, resolving

  [#269 Marker with tooltip no longer visible with v0.8.2](https://github.com/vue-leaflet/vue-leaflet/issues/269).





## [0.8.2] - 2023-02-05



### Fixed

src/components/LMarker.vue

+2 −6
Original line number Diff line number Diff line
@@ -15,7 +15,7 @@ import { 
  GLOBAL_LEAFLET_OPT,

  cancelDebounces,

} from "../utils.js";

import { markerProps, setupMarker } from "../functions/marker";

import { markerProps, setupMarker, shouldBlankIcon } from "../functions/marker";

import { render } from "../functions/layer";



/**
@@ -51,11 +51,7 @@ export default { 
        ? 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) {

      if (shouldBlankIcon(options, context)) {

        options.icon = divIcon({ className: "" });

      }

      leafletRef.value = marker(props.latLng, options);

src/functions/marker.js

+21 −0
Original line number Diff line number Diff line
@@ -58,3 +58,24 @@ export const setupMarker = (props, leafletRef, context) => { 


  return { options, methods };

};



/**

 * Determine whether the default Leaflet icon should be replaced with a blank div initially.

 *

 * @param {*} options Options object returned by setupMarker

 * @param {*} context Context object returned by setupMarker

 * @returns boolean

 */

export const shouldBlankIcon = (options, context) => {

  // If there is content within the <LMarker>, and it contains anything other than a

  // tooltip for the marker, then the icon should be replaced with an empty div on

  // creation so that Leaflet does not render its default icon momentarily before

  // Vue mounts the inner content and vue-leaflet updates the marker with it.

  // See https://github.com/vue-leaflet/vue-leaflet/issues/170

  const slotContent = context.slots.default && context.slots.default();

  if (slotContent && slotContent.some((el) => el.type.name !== "LTooltip")) {

    return true;

  }



  return false;

};

src/playground/views/Tooltips.vue

+24 −8
Original line number Diff line number Diff line
@@ -10,11 +10,19 @@ 
      <l-tooltip> Hi! I'm staying here on this location! </l-tooltip>

    </l-marker>



    <l-layer-group>

    <l-marker :lat-lng="coordinates" draggable>

      <l-tooltip> Hi! You can drag me around! </l-tooltip>

    </l-marker>

    </l-layer-group>



    <l-marker :lat-lng="[41.7654, -87.219482]">

      <l-icon icon-url="https://placekitten.com/32/32" :icon-size="[32, 48]" />

      <l-tooltip> What a tiny kitten </l-tooltip>

    </l-marker>



    <l-marker :lat-lng="[41.61322, -87.219482]">

      <l-icon><div class="div-icon">Custom HTML icon</div></l-icon>

      <l-tooltip> And with a tooltip too! </l-tooltip>

    </l-marker>



    <l-polygon

      :lat-lngs="[
@@ -68,8 +76,8 @@ import { 
  LMap,

  LTileLayer,

  LMarker,

  LIcon,

  LTooltip,

  LLayerGroup,

  LPolygon,

  LPolyline,

  LRectangle,
@@ -82,8 +90,8 @@ export default { 
    LMap,

    LTileLayer,

    LMarker,

    LIcon,

    LTooltip,

    LLayerGroup,

    LPolygon,

    LPolyline,

    LRectangle,
@@ -99,4 +107,12 @@ export default { 
};

</script>



<style></style>
 
<style>

.div-icon {

  background-color: skyblue;

  width: fit-content;

  padding: 0.5rem;

  border-radius: 0.5rem;

  border: 1px blue solid;

}

</style>

src/utils.js

+1 −1
Original line number Diff line number Diff line
@@ -115,7 +115,7 @@ export const resetWebpackIcon = async (Icon) => { 
};



/**

 * Wraps a placeholder function and provides it with the given name.

 * Wrap a placeholder function and provides it with the given name.

 * The wrapper can later be updated with {@link updateLeafletWrapper}

 * to provide a different function.

 *