0

it seems that my question and all related one have no answer on stackoverflow I will try here : I've got the same issue than this question on StackOverFlow but, there is no answer on it so I'll try ot my way : I follow the following tutorial to create a chloroplète map with react-leaflet. Everything is doing great (the import of GeoJSON data, the colors etc.). but when I use the function OnEachFeature the highlight function doens't work. When I click I have the informations than appaear but the border is not getting bigger like I configure it :

Before clicking on an entite Before clikcing on an entite

Afeter clicking on an entite After clicking on an entite

There is my code :

import React,{useState} from 'react';
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet'
import data from  '../GeoJSON/data_exemple_PRA.json';
import 'leaflet/dist/leaflet.css';

function CarteRisquesPRACour() {
    const [onselect, setOnselect] = useState({});
    /* function determining what should happen onmouseover, this function updates our state*/
    const highlightFeature = (e=> {
        const { risques7, libelle } = e.target.feature.properties;
        e.target.setStyle({
            strokeWidth: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });
        setOnselect({
            risques:risques7,
            libelle:libelle,
        });
    });
    /*resets our state i.e no properties should be displayed when a feature is not clicked or hovered over */
    const resetHighlight= (e =>{
        setOnselect({});
        e.target.setStyle(style(e.target.feature));
    })
    /* this function is called when a feature in the map is hovered over or when a mouse moves out of it, the function calls two functions
     highlightFeature and resetHighlight*/
    const onEachFeature= (feature, layer)=> {
        layer.on({
            click: highlightFeature,
            mouseout: resetHighlight
        });
    }

    const getColorRisVulne=(d => {
        return  d > 3500 ? '#530d0d' :
                d > 2750 ? '#530d0d' :
                d > 2500 ? '#69120e' :
                d > 2000 ? '#7f1810' :
                d > 1750 ? '#941d11' :
                d > 1500 ? '#aa2213' :
                d > 1000 ? '#c02714' :
                d > 750 ? '#cb3915' :
                d > 670 ? '#cf5315' :
                d > 650 ? '#d36e15' :
                d > 600 ? '#d78815' :
                d > 520 ? '#dba215' :
                d > 490 ? '#debd15' :
                d > 465 ? '#e2d715' :
                d > 430 ? '#d6d616' :
                d > 400 ? '#c7ce17' :
                d > 360 ? '#b7c517' :
                d > 320 ? '#a8bd18' :
                d > 275 ? '#98b519' :
                d > 210 ? '#89ad1a' :
                d > 190 ? '#6f9917' :
                d > 165 ? '#558415' :
                d > 140 ? '#3b6f12' :
                d > 110 ? '#205a10' :
                d > 0 ? '#06450e' :
                '#ffffff'; //le dernier on ne met pas son nom car le reste
    })
    const style = (feature => {
        return ({
            weight: 0.5,
            opacity: 1,
            color: '#000000',
            dashArray: '3',
            fillOpacity: 0.7,
            fillColor: getColorRisVulne(feature.properties.risques7)
        });
    });
    const feature = data.features.map(feature=>{
        return(feature);
    });
    return(
        <div className="totalCarte">
            <div className="">
                {!onselect.risques && (
                <div className='paragraphe infos_carte'>
                    Cliquez sur une zone pour avoir plus de détails
                </div>
                )}
                {onselect.risques && (
                    <div className='paragraphe infos_carte' >
                        {onselect.libelle} : {onselect.risques} €/ha
                    </div>
                )}
                <MapContainer center={[48.832,2.623]} zoom={10} scrollWheelZoom={false} >
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <GeoJSON data={feature}
                    style={style} 
                    onEachFeature={onEachFeature}/>
                </MapContainer>
            </div>
        </div>

    )
}

export default CarteRisquesPRACour;

Can someone help me understand why ?

EDIT : When I put mouseover instead of click the new style appears for less than 1sec and then diseappar

2
  • 1
    See working example here: codepen.io/hazmi/pen/JjoyONo. If you change mouseover to click and delete existing click processing, it works as you desire.
    – TomazicM
    Oct 14, 2022 at 18:57
  • Thanks I use your code with my GeoJSON and it work perfectly aven with the click instead of mouseover. I don't really understand why so I'm gooing to dig up the problem In my code but thanks
    – Aliénor
    Oct 17, 2022 at 4:50

1 Answer 1

0

Thanks to @TomazicM , I modify my code so that it can work,

  1. I transforme all my const into function
  2. I put all the general function before my component like getColoreRisVulne ans style
  3. I surrounded my with {data&&( )}

the corrected code is in here :

import React from 'react';
import {TileLayer, GeoJSON, MapContainer } from 'react-leaflet'
import data from  '../GeoJSON/data_exemple_PRA.json';
import 'leaflet/dist/leaflet.css';

let mapRef;

function getColorRisVulne(d) {
    return  d > 3500 ? '#530d0d' :
            d > 2750 ? '#530d0d' :
            d > 2500 ? '#69120e' :
            d > 2000 ? '#7f1810' :
            d > 1750 ? '#941d11' :
            d > 1500 ? '#aa2213' :
            d > 1000 ? '#c02714' :
            d > 750 ? '#cb3915' :
            d > 670 ? '#cf5315' :
            d > 650 ? '#d36e15' :
            d > 600 ? '#d78815' :
            d > 520 ? '#dba215' :
            d > 490 ? '#debd15' :
            d > 465 ? '#e2d715' :
            d > 430 ? '#d6d616' :
            d > 400 ? '#c7ce17' :
            d > 360 ? '#b7c517' :
            d > 320 ? '#a8bd18' :
            d > 275 ? '#98b519' :
            d > 210 ? '#89ad1a' :
            d > 190 ? '#6f9917' :
            d > 165 ? '#558415' :
            d > 140 ? '#3b6f12' :
            d > 110 ? '#205a10' :
            d > 0 ? '#06450e' :
            '#ffffff'; //le dernier on ne met pas son nom car le reste
    }

function style(feature) {
  return {
    fillColor: getColorRisVulne(feature.properties.risques7),
    weight: 0.5,
    opacity: 1,
    color: '#000000',
    dashArray: '3',
    fillOpacity: 0.7,
  };
}

function CarteRisquesPRACour() {
  const [onselect, setOnselect] = React.useState({});

  function highlightFeature(e) {
    var layer = e.target;
    const { risques7, libelle} = e.target.feature.properties;
    setOnselect({
        risques:risques7,
        libelle:libelle,
    });
    layer.setStyle({
    weight: 5,
    color: '#666',
    dashArray: '',
    fillOpacity: 0.7
    });
  }
  function resetHighlight(e) {
    setOnselect({});
    e.target.setStyle(style(e.target.feature));
  }
  function onEachFeature(feature, layer) {
    layer.on({
      click: highlightFeature,
      mouseout: resetHighlight
    });
  }
  return (
    <div className="totalCarte">
        <div className="">
        {!onselect.risques && (
        <div className='paragraphe infos_carte'>
            Cliquez sur une zone pour avoir plus de détails
        </div>
        )}
        {onselect.risques && (
            <div className='paragraphe infos_carte' >
                {onselect.libelle} : {onselect.risques} €/ha
            </div>
        )}
        <MapContainer
          zoom={10}
          scrollWheelZoom={false}
          maxZoom={14}
          center={[48.832,2.623]}
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          {data && (
            <GeoJSON data={data} 
            style={style} 
            onEachFeature={onEachFeature} />
          )}
        </MapContainer>
      </div>
      
    </div>
  );
}
export default CarteRisquesPRACour;

With that it works perfectly with a mouseover or a click.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.