Vuelayers vl-style-icon syntax

Question

I've been looking through the vuelayers documentation and have found little info on to use the vl-style-icon module, which is quite important if you want to create icons on your vuelayer map.

I'm pretty sure I have proper syntax when it comes to using it but marker.png won't load in through it. I've tried accessing it as just a normal image and it works fine so it is to my assumption that it's something with my syntax.

Here is my code:

<template>
  <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation" projection="EPSG:4326"></vl-view>
    <vl-feature v-for="crime in crimePoints" :key="crime.id">
      <vl-geom-point :coordinates="crime.coords"></vl-geom-point>
      <vl-style-box>
        <vl-style-icon src="./marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
      </vl-style-box>
    </vl-feature>
    <vl-layer-tile>
      <vl-source-osm></vl-source-osm>
    </vl-layer-tile>
  </vl-map>
</template>

vl-style-box and vl-style-icon are the main points here. I have also checked to see if the points come up without vl-style-box and they do. What could be wrong with my code?

Answer 1

If you used Vue CLI to create your vue project include this in your vue.config.js file. First section tells webpack to parse url attribute on custom tags other than what is already configured (Source).

module.exports = {
  chainWebpack: config => {
    config.module.rule('vue').use('vue-loader').tap(options => {
      options.transformAssetUrls = {
        'vl-style-icon': 'src',
        ...options.transformAssetUrls,
      };
      return options;
    });
  }
}

Run the following command to verify the correct vue-loader configuration is there Source

vue inspect > output.js

Answer 2

You can try like this:

<vl-style-icon :src="require('./marker.png')" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
  </vl-style-box>