Correct use of vl-style-icon

[empereira]

Hello,

In addition to the sample code you provide in the documentation, eg:

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

is more coding necessary for the icon to appear on the map?

[ghettovoice]

Hello @empereira , you also need to append vl-style-icon as custom tag for transform to the vue-loader config https://vue-loader.vuejs.org/options.html#transformasseturls.

transformAssetUrls: {
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href'],
  'vl-style-icon': 'src', // this tells vue-loader transform relative/absolute paths to require
}

Here is example how to modify loader config if you use Vue CLI https://stackoverflow.com/questions/52631683/how-to-modify-vue-clis-vue-loader-to-update-transformassetsurl

[empereira]

Thanks for your answer!!

vue.config.js:

module.exports = {
  transpileDependencies: ["vuetify"],
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
        .loader("vue-loader")
        .tap((options) => {
          return {
            transformAssetUrls: {
              video: ["src", "poster"],
              source: "src",
              img: "src",
              image: ["xlink:href", "href"],
              use: ["xlink:href", "href"],
              "vl-style-icon": "src",
            },
          };
        });
  },
};

conponent Map.Vue:

<template>
  <vl-map
    app
    :load-tiles-while-animating="true"
    :load-tiles-while-interacting="true"
    data-projection="EPSG:4326"
    style="height: 100%"
  >
    <vl-view
      :zoom.sync="zoom"
      :center.sync="center"
      :rotation.sync="rotation"
    ></vl-view>

    <vl-geoloc @update:position="geolocPosition = $event">
      <template slot-scope="geoloc">
        <vl-feature v-if="geoloc.position" id="position-feature">
          <vl-geom-point
            :coordinates="[307, -29]"
            :radius="10000"
          ></vl-geom-point>
          <vl-style-box>
            <vl-style-icon
              src="../assets/marker.png"
              :scale="1"
              :anchor="[0.5, 1]"
            ></vl-style-icon>
          </vl-style-box>
        </vl-feature>
      </template>
    </vl-geoloc>

    <vl-layer-tile id="osm">
      <vl-source-osm></vl-source-osm>
    </vl-layer-tile>
  </vl-map>
</template>

<script>
// import Style from "ol/style/Style";
// import { findPointOnSurface } from "vuelayers/lib/ol-ext";

export default {
  data() {
    return {
      zoom: 6,
      center: [307, -29],
      rotation: 0,
      geolocPosition: [307, -29],
    };
  },
};
</script>

Even so, the icon does not appear on the map.

[empereira]

hello @ghettovoice ,

I managed to show icons with the code below:

    <vl-feature v-for="station in stations" :key="station.stationId">
      <vl-geom-point :coordinates="[station.lat, station.long]"></vl-geom-point>
      <vl-style-box>
        <vl-style-icon
          src="https://d30y9cdsu7xlg0.cloudfront.net/png/1133-200.png"
          :scale="0.1"
          :anchor="[0.5, 1]"
        ></vl-style-icon>
      </vl-style-box>
    </vl-feature>

image:

But the coordinates were totally wrong. Is there any way to fix this?

[ghettovoice]

Switch coordinates order [station.lat, station.long] -> [station.long, station.lat]. All coordinates by default in VueLayers (and OpenLayers too) should be ordered as [lon, lat]

[empereira]

OMG... How did I not test this?!!! I even thought vaguely about it, but I didn't!!!

Thank you so much for the insight!!! Btw, excellent work is done here!!