CODEWITHSUNDEEP
leafletmarkerreact-leaflet
Stevan Tosic
Stevan Tosic

Reputation: 7249

Path to icon in react-leaflet Marker component

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

Answers (1)

benn98
benn98

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

Related Questions