Custom Icon in leaflet map

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. 

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

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

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?


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

Solution

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 

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.

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.

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

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"

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)