React-leaflet: Custom Map Marker

[vegtelenseg]

Hello,

Is it possible to customise the map markers. That is, instead of them being images, ,maybe make them svg or pure html elements?

Thanks very much
Siya

[Valerz]

Yeah you can, you just specify the file you want.
For example:
const svgIcon = L.icon({
iconUrl: require('something.svg'),
})
Further reading here: http://leafletjs.com/examples/custom-icons/

[vegtelenseg]

I am not sure how to use with react-leaflet. How would I go about doing the same thing with react-leaflet? Also, what is L?

[Valerz]

What are you trying to achieve?

On Wed., 4 Apr. 2018, 19:08 BrandNew, [e-mail] wrote:

I am not sure how to use with react-leaflet. How would I go about doing
the same thing with react-leaflet? Also, what is L?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/PaulLeCam/react-leaflet/issues/465#issuecomment-378533230,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AO_jBc9I7Fi1JSgCCDzPWjKqAtyv-30Rks5tlI2VgaJpZM4TFL2P
.

[vegtelenseg]

I want to change what gets rendered by the Marker, that is when I do <Marker ...props> </Marker> instead of this resulting to a blue image, I would like to do something like <Marker iconToRender={pathToIcon} ...props> </Marker.

[Valerz]

L is the leaflet object where you can assign the URL path to your custom marker.

const customMarker = L.icon({ iconUrl: require('pathtoicon'), })
return ( <Marker icon={customMarker} > /*whatever inside marker */ </Marker> )

[vegtelenseg]

Great. It works. Thanks so much. Closing this...