Question 237284 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React leaflet make one marker ignore it's events, so other can be clicked

I have code like this:

return <React.Fragment key={i + 100}>
                            <MapMarker
                              obj={object}
                              key={i}
                              position={positionMap[i]}
                              icon={objIcon}
                              objName={convDataArr[1]}
                              objType={convDataArr[2]}
                              objStatus={convDataArr[3]}
                              objcoalition={convDataArr[4]}
                              objUnderAttack={convDataArr[5]}
                              objNumUnits={convDataArr[6]}
                              pane={convDataArr[2]}
                              zIndexOffset={100}
                            //riseOnHover={true}
                            ></MapMarker>
                            <FlameMarker
                              key={i + 1000}
                              position={positionMap[i]}
                              icon={iconArray[21]}
                            >
                            </FlameMarker>
                          </React.Fragment>

which outputs 2 markers. FlameMarker is almost the same as normal marker. The problem is, when both markers are drawn, everything from visibility perspective works, objective marker is shown, and animating flame gif. But then, I cannot click my main marker, it’s transparent, and clicks the map. I tried using

eventHandlers = {{
click: () => {}
},
}}

but then the gif is clickable, which is not what I want. When manually adding CSS in developer mode in Chrome, it works, but how can I add this style manually, considering react leaflet just removes every style given to it, and uses it’s own?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I did a little abuse, since I need the fix fast, will improve that later. I just placed a JS script

    setTimeout(() => {
for(let i = 0; i < document.querySelectorAll('img[src$=".gif"]').length; i++) {
document.querySelectorAll('img[src$=".gif"]')[i].style.pointerEvents = "none";
}
}, 1000)

    and it executes on last line of componentDidMount.


  2. 0

    The problem is that the eventHandlers property of the MapMarker component is overriding the default click event handler. The default click event handler is what makes the marker clickable.

    To solve this, you can use the disableClick property of the MapMarker component. The disableClick property will prevent the marker from being clickable.

    Here is the corrected code:

    return <React.Fragment key={i + 100}>
                        <MapMarker
                          obj={object}
                          key={i}
                          position={positionMap[i]}
                          icon={objIcon}
                          objName={convDataArr[1]}
                          objType={convDataArr[2]}
                          objStatus={convDataArr[3]}
                          objcoalition={convDataArr[4]}
                          objUnderAttack={convDataArr[5]}
                          objNumUnits={convDataArr[6]}
                          pane={convDataArr[2]}
                          zIndexOffset={100}
                          disableClick
                        ></MapMarker>
                        <FlameMarker
                          key={i + 1000}
                          position={positionMap[i]}
                          icon={iconArray[21]}
                        >
                        </FlameMarker>
                      </React.Fragment>

    In this code, the disableClick property is set to true for the MapMarker component. This will prevent the marker from being clickable.

    You can also use the onClick property of the MapMarker component to define your own click event handler. The onClick property will be called when the marker is clicked.

    Here is the code with an example of a custom click event handler:

    return <React.Fragment key={i + 100}>
                        <MapMarker
                          obj={object}
                          key={i}
                          position={positionMap[i]}
                          icon={objIcon}
                          objName={convDataArr[1]}
                          objType={convDataArr[2]}
                          objStatus={convDataArr[3]}
                          objcoalition={convDataArr[4]}
                          objUnderAttack={convDataArr[5]}
                          objNumUnits={convDataArr[6]}
                          pane={convDataArr[2]}
                          zIndexOffset={100}
                          onClick={() => {
                            // Do something when the marker is clicked
                          }}
                        ></MapMarker>
                        <FlameMarker
                          key={i + 1000}
                          position={positionMap[i]}
                          icon={iconArray[21]}
                        >
                        </FlameMarker>
                      </React.Fragment>

    In this code, the onClick property is set to a function that will be called when the marker is clicked. The function can do anything you want, such as opening a new window or playing a sound.

    I hope this helps! Let me know if you have any other questions.

    Login or Signup to reply.
  3. 0

    I see. The disableClick property only affects the default click event handler. If you have defined your own click event handler, the disableClick property will not affect it.

    To prevent the marker from being clickable even with your own click event handler, you can use the cursor property. The cursor property can be set to a value that will be displayed when the mouse cursor is over the marker.

    Here is the code with the cursor property:

    return <React.Fragment key={i + 100}>
                    <MapMarker
                      obj={object}
                      key={i}
                      position={positionMap[i]}
                      icon={objIcon}
                      objName={convDataArr[1]}
                      objType={convDataArr[2]}
                      objStatus={convDataArr[3]}
                      objcoalition={convDataArr[4]}
                      objUnderAttack={convDataArr[5]}
                      objNumUnits={convDataArr[6]}
                      pane={convDataArr[2]}
                      zIndexOffset={100}
                      cursor="none"
                    ></MapMarker>
                    <FlameMarker
                      key={i + 1000}
                      position={positionMap[i]}
                      icon={iconArray[21]}
                    >
                    </FlameMarker>
                  </React.Fragment>

    In this code, the cursor property is set to none for the MapMarker component. This will prevent the mouse cursor from changing when it is over the marker.

    I hope this helps! Let me know if you have any other questions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search