1

I have a vue project generated by vue-cli v3 and I'm trying to provide custom markers for markerclustererplus v3, but it won't work!

I've placed "m" folder containing all m{1-5}.png images and provided imagePath option to MarkerClusterer imagePath: "/assets/m/m" but all I get is icon representing failed image loading. Icons have a path that seems to be correct, http://localhost:8080/assets/m/m2.png

So far I've tried to move "m" folder to public and components folder, but it doesn't work either. It also doesn't help if I open http://localhost:8080/assets/m folder or files in it from the browser address bar. I also do not see any images at the source tab of the browser.

UPDATE:

According to markerclustererplus documentation imagePath property is a string which is:

The full URL of the root name of the group of image files to use for cluster icons. The complete file name is of the form imagePathn.imageExtension where n is the image file number (1, 2, etc.). The default value is MarkerClusterer.IMAGE_PATH.

So I can't just use require('/folder_path/'), because I'm not calling exact .png that is needed for certain Cluster type and I can't pass Array of images to imagePath property, because it's a string.

Here's my src directory tree:

.
├── App.vue
├── api.js
├── assets
│   ├── logo.png
│   └── m
│       ├── m1.png
│       ├── m2.png
│       ├── m3.png
│       ├── m4.png
│       └── m5.png
├── components
│   ├── google-map.vue
│   └── side-bar.vue
├── dummyData.js
└── main.js

I'm passing imagePath: "/assets/m/m" option to MarkerClusterer in google-map.vue file, it results in <img src="/assets/m/m2.png"> element in browser.

rreckonerr
  • 387
  • 1
  • 3
  • 12

2 Answers2

0

To refer file from assets folder use @. Your image path, should look like this:

<img src="@/assets/m/m2.png">
nyagolova
  • 1,731
  • 2
  • 26
  • 42
0

The way that worked for me is to put the images in a folder in the /public directory, then set the imagePath to that folder. So you'd have:

public
  map-cluster-images
    m1.png
    m2.png
    m3.png 
    .....

And then when you initiate the MarkerClusterer:

imagePath: '/map-cluster-images/m'
Jpod
  • 294
  • 2
  • 4