B4J Question {Resovled}[BANanoVuetifyAD3] Modify Marker, Title and Popup in VLeaflet

NGUYEN TUAN ANH

Active Member
Licensed User
My web project used VLeaflet in BANanoVuetifyAD3 library
i created marker witth small picture test.png:
MyLeaflet.AddMarkerIcon("mk0","Test Title 0",lat0,lng0,"./assets/test.png",30,30,15,15)
MyLeaflet.SetPopUp("mk0", "Test Popup 0")
Now, i want to:
- Rotate marker with test.png icon (https://github.com/bbecquet/Leaflet.RotatedMarker)
- Display title and popup by multi lines
- Display bold the firt line in title and popup
Could you please help me
I'm waiting for you
Thank you very much
 
Last edited:

NGUYEN TUAN ANH

Active Member
Licensed User
Hi, I am still looking into this. As soon as its available i will let you know.
Thanks my friend very much
To is implementing a small project to support Vietnamese fishermen to get the European Union to remove the IUU yellow card for their seafood.
 

Attachments

  • taqnvn.jpg
    taqnvn.jpg
    168.8 KB · Views: 105
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
I have leaflet.rotatedMarker.js, How to call it in my Project ?
Adding css and javascript files into a BANano project is addressed in the BANano booklet, you can start from there.

The Leaflet library used by BVAD3 is Vue based, so I need to carefully intergrate this file into my component, test it, debug it to ensure it works properly.

Some other things are not easy as plug and play. As soon as I figure this out, I will make it available with the next release, please be patient.
 
Upvote 0

NGUYEN TUAN ANH

Active Member
Licensed User
Adding css and javascript files into a BANano project is addressed in the BANano booklet, you can start from there.

The Leaflet library used by BVAD3 is Vue based, so I need to carefully intergrate this file into my component, test it, debug it to ensure it works properly.

Some other things are not easy as plug and play. As soon as I figure this out, I will make it available with the next release, please be patient.
I have read the BANano booklet carefully, but perhaps because of my limited knowledge, I have not been able to do it yet.
 
Upvote 0

NGUYEN TUAN ANH

Active Member
Licensed User
I understand you are very busy, but I am just a poor scientist in Vietnam, so I would like to support you with a small fee of 50USD to help me and other B4J programmers improve the BANanoVuetifyAD3.B4Xlib library by including the following Plugins:
- https://vue2-leaflet.netlify.app/plugins/#vue2-leaflet-tracksymbol
- https://cdn.jsdelivr.net/npm/leaflet-rotatedmarker@0.2.0/leaflet.rotatedMarker.min.js
- Display title and popup by multi lines and display bold the firt line in title and popup
Thank you very much, i'm waiting for you
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
Hi

Please note. BVAD3 is built using VueJS. The leaflet lib being used is also based on VueJS, so you just cannot use a plug a play approach of any JS library in this case.
The marker for rotation that you need to use should be VueJS based and all plugins that you need to use should be VueJS based.

I have not been ignoring you, one of the challenges we have in our country is very terrible electricity cuts, so I have to prioritize between open source and projects that bring food to the table for my kids. My main source of any income is SithasoDaisy right now.

I need to use https://github.com/mudin/vue2-leaflet-rotatedmarker for your use case. Currently this is the issue I am facing when I added the VueJS library today.
I needed to study how it works and whether it can work with the current BVAD3 VueLeafLet library.


1679076852109.png


I am curious though, you seem to use images for your markers. Why dont you just create the images you want, rotate and save them the way you want and just add a marker using the rotated image? That could be an easier alternative.

I will investigate further how I make this work so long, however the bold section above could be your best approach and far more easier, of course depending on how many images you want to rotate.

It does not work and will never work as per your question you posted here because this an apple vs an orange use case for this VueLeaflet library.

 
Upvote 0
Top