Skip to Content (Press Enter)
2021-01-12 14-29-49
Prajakta Roshankhede
314Views
12Comments
Solved
Custom Icon in leaflet map
Question
Forge

Hello All, I am trying to use custom icon on leaflet map but I am not sure how to do it. Do anybody have idea what to give input to icon field.

Thanks in advance. 

0
0
29 Aug 2019
Copy Link
2019-05-22 11-30-09
Marcelo Ferreira
Solution

Hi,

the image format shouldn't be the problem since is the MyIcon which is missing and not the image.

Check this example. Let me know if it works for you.

Regards,

Marcelo

See solution in context
LeafletJSDemo.oml
1
0
29 Aug 2019
Copy Link
2021-01-12 14-29-49
Prajakta Roshankhede

Marcelo Ferreira wrote:

Hi,

the image format shouldn't be the problem since is the MyIcon which is missing and not the image.

Check this example. Let me know if it works for you.

Regards,

Marcelo


Thanks Marcelo It is working fine in web app but I want in mobile app and it is not working in mobile application.

As escape content is not there in mobile it is not working 

0
0
29 Aug 2019
Copy Link
2020-09-01 10-42-42
Stefano Valente
2021-01-12 14-29-49
Prajakta Roshankhede

Stefano Valente wrote:

https://leafletjs.com/examples/custom-icons/


Good luck!

Hello Stefano, 

Added java script and call AddMarker client action as below attached snapshot but then it is giving me an error "MyIcon" is not defined. 

Please let me know if I am doing anything wrong.

0
0
29 Aug 2019
Copy Link
2019-05-22 11-30-09
Marcelo Ferreira

Hi,

Add something like this after the map:

SyntaxEditor Code Snippet

"
<script>

var MyIcon = L.icon({
    iconUrl: '/LeafletJSDemo/img/mapmarker.jpg',
    iconSize:    [25, 41],
    iconAnchor:  [12, 41],
    popupAnchor: [1, -34],
    tooltipAnchor: [16, -28],
    shadowSize:  [41, 41]
});
</script>"

with the correct img url and than you only need to use the name of the var on the icon input. In this case MyIcon.

Regards,

Marcelo

0
0
29 Aug 2019
Copy Link
2021-01-12 14-29-49
Prajakta Roshankhede

Marcelo Ferreira wrote:

Hi,

Add something like this after the map:

SyntaxEditor Code Snippet

"
<script>

var MyIcon = L.icon({
    iconUrl: '/LeafletJSDemo/img/mapmarker.jpg',
    iconSize:    [25, 41],
    iconAnchor:  [12, 41],
    popupAnchor: [1, -34],
    tooltipAnchor: [16, -28],
    shadowSize:  [41, 41]
});
</script>"

with the correct img url and than you only need to use the name of the var on the icon input. In this case MyIcon.

Regards,

Marcelo

Hello Marcelo,

I used expression under map and put the same script with url of image which i want to use and in AddMarker action give input "MyIcon" but then it is giving me an error MyIcon is not defined

0
0
29 Aug 2019
Copy Link
2021-01-12 14-29-49
Prajakta Roshankhede

Prajakta Roshankhede wrote:

Marcelo Ferreira wrote:

Hi,

Add something like this after the map:

SyntaxEditor Code Snippet

"
<script>

var MyIcon = L.icon({
    iconUrl: '/LeafletJSDemo/img/mapmarker.jpg',
    iconSize:    [25, 41],
    iconAnchor:  [12, 41],
    popupAnchor: [1, -34],
    tooltipAnchor: [16, -28],
    shadowSize:  [41, 41]
});
</script>"

with the correct img url and than you only need to use the name of the var on the icon input. In this case MyIcon.

Regards,

Marcelo

Hello Marcelo,

I used expression under map and put the same script with url of image which i want to use and in AddMarker action give input "MyIcon" but then it is giving me an error MyIcon is not defined


I am using png file so is that creating a problem?


0
0
29 Aug 2019
Copy Link
2019-05-22 11-30-09
Marcelo Ferreira
Solution

Hi,

the image format shouldn't be the problem since is the MyIcon which is missing and not the image.

Check this example. Let me know if it works for you.

Regards,

Marcelo

LeafletJSDemo.oml
1
0
29 Aug 2019
Copy Link
2021-01-12 14-29-49
Prajakta Roshankhede

Marcelo Ferreira wrote:

Hi,

the image format shouldn't be the problem since is the MyIcon which is missing and not the image.

Check this example. Let me know if it works for you.

Regards,

Marcelo


Thanks Marcelo It is working fine in web app but I want in mobile app and it is not working in mobile application.

As escape content is not there in mobile it is not working 

0
0
29 Aug 2019
Copy Link
2020-09-01 10-42-42
Stefano Valente

I lost my example but managed to retrieve it. But now i noticed it is deprecated.

The new Mobile Leaflet seems different than your screen. 

Could you check you are using the newest mobile Leaflet widgets and actions?

In the meantime i will try to rebuild my example.

0
0
29 Aug 2019
Copy Link
2019-05-22 11-30-09
Marcelo Ferreira

Hi,

On Mobile is a bit different OnReady create a text variable with that code and than evaluate it in JS element like this:

LeafletScript is the text variable

Regards,

Marcelo

0
0
29 Aug 2019
Copy Link
2021-01-12 14-29-49
Prajakta Roshankhede

Marcelo Ferreira wrote:

Hi,

On Mobile is a bit different OnReady create a text variable with that code and than evaluate it in JS element like this:

LeafletScript is the text variable

Regards,

Marcelo

Hello Marcelo 

Added input parameter to JavaScript element as you mentioned in snapshot but still giving me error "MyIcon not defined"

1
0
29 Aug 2019
Copy Link
2021-01-12 14-29-49
Prajakta Roshankhede

Issue is resolved now. I directly made changes in leaflet plugin as I wanted all customized icons.

(Made changes in java-script of Add marker's function of leaflet plugin)

3
0
30 Aug 2019
Copy Link
UserImage.jpg
Jubet Alimasa

Hi Prajakta, would you mind sharing the changes you made to the leaflet plugin?

0
0
17 Aug 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.