Tips for adding multiple icons to the same location in React-Leaflet 3

Question

Tips for adding multiple icons to the same location in React-Leaflet 3

Currently, I am in the process of developing an application using React-leaflet version 3 with TypeScript. One of the requirements for my app is to add multiple icons for one position on the map. For example, a specific [lat,long] location could be identified as a blood donation camp in the morning at 8 A.M., and then transform into an outdoor checkup center; followed by a makeshift music concert and free-food center in the afternoon at 3 P.M. This means that I need to place at least two icons for each marker at a given time. Unfortunately, the icon attribute in the marker tag only allows for a single value.

I attempted a solution using L.divIcon, but have not had success thus far.

const mapNodeIcon = L.divIcon({
html: `<div class="multi-icon-div">
<img src="../icon/myIcons/bloodDonCamp.svg" width="30px"/>
<img src="../icon/myIcons/outdoorCheck.svg" width="30px"/>  
</div>`,
iconAnchor: [10, 10],
popupAnchor: [0, -19],
iconSize: [55, 55],
});

Marker Tag

<Marker 
        key={myMap.id} 
        position={[lat, lng]}
        icon={mapNodeIcon}
        >
        <Popup>
          <h3>This is the event location</h3>
        </Popup>
      </Marker>

The issue I'm encountering here is that the SVG icon images are not loading within the div structure, even though the iconDiv appears as a marker on the map. How can I resolve this problem?

While it may seem like a simple question, I wonder if this method is the most efficient way to solve the issue. Since my map will display different SVG icons based on the time of day (morning and afternoon), I am concerned about the speed of rendering for a multi-node map. Any suggestions or assistance would be greatly appreciated.

typescript leaflet openstreetmap react-leaflet react-leaflet-v3

Answer 1

Answer №1

It seems that the way you imported the svg won't work. Here is the correct method for importing svg files:

import React from 'react';
import {ReactComponent as Logo} from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <Logo />
    </div>
  );
}
export default App;

You can find a comprehensive list of ways to add svg files in React at this link.

-- Update--

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import tileLayer from '../util/tileLayer';
import L from 'leaflet';

import facebook from './facebook-square.svg';
import twitter from './twitter.svg';

const center = [52.22977, 21.01178];

const MapWrapper = () => {

  const mapNodeIcon = L.divIcon({
    html: `<div style="display: flex;">
      <img src="${facebook}" width="30px"/>
      <img src="${twitter}" width="30px"/>  
    </div>`,
    iconAnchor: [10, 10],
    popupAnchor: [0, -19],
    iconSize: [55, 55],
  });

  return (
    <MapContainer center={center} zoom={18} scrollWheelZoom={false}>
      <TileLayer {...tileLayer} />

      <Marker position={center} icon={mapNodeIcon}>
        <Popup>Center Warsaw</Popup>
      </Marker>

    </MapContainer>
  )
}

export default MapWrapper;

https://i.sstatic.net/ksl7A.png

Answer 2

It seems that the way you imported the svg won't work. Here is the correct method for importing svg files:

import React from 'react';
import {ReactComponent as Logo} from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <Logo />
    </div>
  );
}
export default App;

You can find a comprehensive list of ways to add svg files in React at this link.

-- Update--

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import tileLayer from '../util/tileLayer';
import L from 'leaflet';

import facebook from './facebook-square.svg';
import twitter from './twitter.svg';

const center = [52.22977, 21.01178];

const MapWrapper = () => {

  const mapNodeIcon = L.divIcon({
    html: `<div style="display: flex;">
      <img src="${facebook}" width="30px"/>
      <img src="${twitter}" width="30px"/>  
    </div>`,
    iconAnchor: [10, 10],
    popupAnchor: [0, -19],
    iconSize: [55, 55],
  });

  return (
    <MapContainer center={center} zoom={18} scrollWheelZoom={false}>
      <TileLayer {...tileLayer} />

      <Marker position={center} icon={mapNodeIcon}>
        <Popup>Center Warsaw</Popup>
      </Marker>

    </MapContainer>
  )
}

export default MapWrapper;

https://i.sstatic.net/ksl7A.png

Tips for adding multiple icons to the same location in React-Leaflet 3

Answer №1

Similar questions

"Exploring the world of Typescript declarations and the CommonJS module

Variable Scope is not defined in the TypeScript controller class of an AngularJS directive

Understanding DefinitelyTyped: Deciphering the explanation behind 'export = _;'

New to Angular: I'm getting the error message "tsc is not recognized as an internal or external command" - Help Needed

Using Angular to handle routes with a specific domain prefix

Typescript Jest testing reveals inaccurate error line information

Angular's keyevent is acting similarly to a tab when the input field is disabled

Using Types as Variables in TypeScript

Angular Dynamic Form Troubles

"Utilizing provideMockStore in NgRx 8 for setting the state of a specific State Slice

Steps for clicking on the center of a leaflet map with protractor

generate an object with the forEach method

Simplifying parameter types for error handling in app.use callback with Express.js and TypeScript

TypeScript application was constructed with incorrect imports from the src folder instead of the dist folder

Tips for integrating Material-Ui Autocomplete with Formik's Field component to create Multi-Select check boxes

What is the reason for the typescript check failing?

Not all of the Error constructors are displayed by TypeScript

Autocomplete feature in MUI allows filtering to begin after typing at least 3 characters

"Error: Retrieving the body data from the Express request

How to verify that the user is using the most up-to-date version of the application in React Native