Add an exemple on how to load a custom marker image for the StoreLocator component

Add a section on the documentation on "how to load a custom marker image for the StoreLocator component"

Add the important details:

image must be png
Adapt icon-size param if you load a png in size 2x or 3x
icon-image param must use the same name as in addImage fn

Code:

<template>
    <store-locator
      :items="items"
      :mapbox-cluster="{
        'unclustered-point-layer-type': 'circle',
        'unclustered-point-layer-type': 'symbol',
        'unclustered-point-layout': {
          'icon-image': 'pin',
          'icon-size': 1
        },
        'unclustered-point-paint': {},
      }"
      access-token="..."
      :mapbox-map="{
        mapStyle: '...',
        center: [ 2.0, 48.0 ],
        zoom: 1,
      }"
      @map-created="onMapCreated">
      <!-- template -->
    </store-locator>
</template>

<script>
  export default {
    props: {
      items: {
        type: Array,
        required: true,
      },
   },
    methods: {
      onMapCreated(map) {
       const imgPath = 'imag.png';
        map.loadImage(imagePath, (error, image) => {
          if (error) { throw error; }
          map.addImage('pin', image);
        });
      },
    },
  };
</script>

studiometa / vue-mapbox-gl

Add an exemple on how to load a custom marker image for the StoreLocator component #40