Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attribute icon for custom marker (YandexMarker) does not work in Nuxt 3 #490

Open
G1msky opened this issue Jun 15, 2024 · 1 comment
Open

Comments

@G1msky
Copy link

G1msky commented Jun 15, 2024

When the icon attribute is set, the standard blue marker is still visible.

"dependencies": {
   "@nuxt/eslint": "^0.3.10",
   "@nuxtjs/tailwindcss": "^6.12.0",
   "@pinia/nuxt": "^0.5.1",
   "nuxt": "^3.11.2",
   "nuxt-swiper": "latest",
   "pinia": "^2.1.7",
   "primevue": "^3.51.0",
   "vue": "^3.4.21",
   "vue-router": "^4.3.0",
   "vue-yandex-maps": "^1.1.0"
 },
<template>
       <client-only>
                  <YandexMap
                      :coordinates="coordinates"
                      :detailed-controls="detailedControls"
                      :controls="controls"
                      :zoom="16"
                      map-type="map"
                  >
                      <YandexMarker :coordinates="coordinates" :icon="markerIcon" />
                  </YandexMap>
         </client-only>
</template>
<script setup>
import imageMarker from '/ico-map-marker.svg';
const coordinates = [55.737722, 37.206907];
const controls = ['fullscreenControl'];
const detailedControls = { zoomControl: { position: { right: 10, top: 50 } } };

const markerIcon = {
    layout: 'default#image',
    imageHref: imageMarker,
    imageSize: [43, 43],
    imageOffset: [0, 0],
    contentOffset: [0, 15],
};
</script>

Remarks

  • the path to the image is correct and it is in the public folder
  • I also tried to connect the image from assets, the result is negative

How I can set my custom image to marker?

@neko2h
Copy link

neko2h commented Jul 16, 2024

@G1msky Hey mate. It works. put your images in /public. And heere is a small example how i use it.

<YandexMap
      v-if="points"
      :coordinates="[centralPoints.latitude, centralPoints.longitude]"
      map-type="map"
      :controls="controls"
      @created="onInit"
    >
      <YandexMarker
        v-for="point in points"
        :key="point.guid"
        :coordinates="[point.geoposition.latitude, point.geoposition.longitude]"
        :marker-id="point.id"
        :events="['click', 'optionschange']"
        :options="{
          iconLayout: 'default#image',
          iconImageHref: '/svgs/point_styler.svg',
          iconImageSize: [64, 64],
        }"
        @click="onClick"
      />
 </YandexMap>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants