CustomMarker ignored and default icon not visible

[Memo99]

trafficstars

HI,

i'm trying to show the search result on the map, but either my custom marker will be shown, or the default one, because the image is not contained in the npm package. ("dist/assets/img*)

How could i solve this?

import React, { Fragment, useEffect, useState } from 'react';
import L from 'leaflet';
import { MapContainer, TileLayer, Popup, Marker, useMap } from "react-leaflet";
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';


import {useGeoLocation} from 'services/LocationService';
import axios from 'axios';
import "leaflet-geosearch/assets/css/leaflet.css"

var called = false; // only dev mode

const customMarker = L.icon({
    iconRetinaUrl:  process.env.PUBLIC_URL + "/assets/img/misc/marker.png",
    iconUrl: process.env.PUBLIC_URL + "/assets/img/misc/marker.png",
    iconSize: [50, 50],
    iconAnchor: [25, 5],
});

export function LocationMap(props) {
    const location = useGeoLocation();
    const ZOOM_LEVEL = 13;
    const [searchTerm, setSearchTerm] = useState('');
    const [searchResults, setSearchResults] = useState(["Istanbul", "Ankara"]);
    const provider = new OpenStreetMapProvider();
    const searchControl = new GeoSearchControl({
        provider: provider,
        style: 'bar',
        showMarker: false, // optional: true|false  - default true
        showPopup: false, // optional: true|false  - default false
        popupFormat: ({ query, result }) => result.label, // optional: function    - default returns result label,
        resultFormat: ({ result }) => result.label, // optional: function    - default returns result label
        maxMarkers: 5, // optional: number      - default 1
        retainZoomLevel: true, // optional: true|false  - default false
        animateZoom: true, // optional: true|false  - default true
        autoClose: false, // optional: true|false  - default false
        searchLabel: 'search', // optional: string      - default 'Enter address'
        keepResult: false, // optional: true|false  - default false
        updateMap: true, // optional: true|false  - default true
        marker: {
            // optional: L.Marker    - default L.Icon.Default
            icon: new L.Icon.Default(),
            draggable: false,
          },
      });

    useEffect(() => {
        const delayDebounceFn = setTimeout(() => {
            
            if(searchTerm && searchTerm.length > 0)
            {
                const result = axios.get(`https://nominatim.openstreetmap.org/search/${searchTerm}?format=json`);
                result.then((result)=> {
                    console.log(result.data);
                    setSearchResults(result.data)
                })
            }
        }, 200)

        return () => clearTimeout(delayDebounceFn);
    }, [searchTerm])

    const CurrentPos = ({loc}) => {
        const mapRef = useMap();
        if(loc.loaded && !loc.error)
            mapRef.flyTo(
                {lat:loc.coordinates.lat, lng: loc.coordinates.lng}, 
                ZOOM_LEVEL, 
                {animate: false}
            )
        if(loc.error)
        {
            alert("No location");
        }
        return null;
    }

    const SearchComp = () => {
        const map = useMap();  
        useEffect(() => {
            if(!called)
            {
                map.addControl(searchControl); 
                called = true;
            }
        }, [])
        return null;
    }

    return (
        <Fragment>
            <div className="form-group submit-listing-map">
                <MapContainer id="map" zoom={8} center={{lat: 39.924396, lng: 32.836010 }} 
                // onClick={(e) => setLocation(e.latlng)}
                >
                    <TileLayer
                        url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
                    />
                    <SearchComp />
                    <CurrentPos loc={location} />
                    {location.loaded && !location.error && (
                        <Marker icon={customMarker} position={[location.coordinates.lat, location.coordinates.lng]}></Marker>
                    )}
                </MapContainer>
            </div>
        </Fragment>
    );
    
}```

[diazvictor]

I have the same problem

[ramazansancar]

I have the same problem

@diazvictor I will check it out soon