Reputation: 7249
I am using react-leaflet lib.
And after rendering marker, I get an error that there is no file.
I had tried to put manually file in root folder of component which creates Marker but then I get fatal error
TypeError: options.icon.createIcon is not a function
Below is whole component code.
import React, { Component } from 'react';
import { Marker, Tooltip, Polygon } from 'react-leaflet';
import L from 'leaflet';
import './style.css';
import icon from './marker.svg';
/**
* @class ./widgets/SeatMap/components/LeafletMap/components/CategoryControl/components/ShapeLayer
*/
class ShapeLayer extends Component
{
/**
* @type {object}
*/
shapes = {};
/**
* Constructor.
*
* @param {object} props
*/
constructor (props)
{
super(props);
this.shapes = props.shapes;
}
/**
* @returns {XML}
*/
render() {
return (
<div className={'ShapeLayer'}>
{
this.shapes['texts'].map(text => {
return (
<Marker key={text['id']} position={text['coordinates']} draggable={false} opacity={0.01} icon={icon}>
<Tooltip direction={"center"} permanent className={'shape-tooltip'}>
<span>{text['text']}</span>
</Tooltip>
</Marker>
);
})
}
{
this.shapes['polygons'].map(polygon => {
return (
<Polygon key={polygon['id']} positions={polygon['coordinates']} fillColor={"white"} color={'gray'} />
);
})
}
</div>
)
}
}
export default ShapeLayer;
How can I solve this issue?
Upvotes: 1
Views: 2663
Reputation: 125
Hi you can't directly using icon like that. React Leaflet is an "abstraction" of Leaflet so it uses the same functions. To create custom icons you have to create a divIcon. For a live example go there: https://react-leaflet.js.org
Upvotes: 1