0

I have a React JS component that adds a Layer to the Basemap:

 componentDidMount() {
    const { client } = this.props;

    // Craete source, styles and layer with the given props
    const cartoSource = new carto.source.Dataset("dataset");
    const cartoCSS = new carto.style.CartoCSS(style);
    const layer = new carto.layer.Layer(cartoSource, cartoCSS, {
      featureClickColumns: [
        "geoid2"
      ]
    });

    // Add them to the client and to the map
    client.addLayer(layer);
    client.getLeafletLayer().addTo(this.context.map);

I would like to display the geoID when I hover over the polygon, and also highlight it. Having a hard time understanding how this could be done in React.

0

In that same method you can add a handler for the featureOver event.

layer.on('featureOver', featureEvent => { // featureEvent.data.geoid2 has the value });

Then you can do whatever you need with that value. In your case you want to display a popup with the value. You can use the popup that comes from Leaflet if you're using Leaflet as the provider.

https://leafletjs.com/reference-1.3.2.html#popup

Where you manage the popup it's up to you and your app structure.

What you can't do is highlight the polygon. This would need a server request to receive new tiles. If you need that kind of visual feedback, take a look on CARTO VL, our vector library. There's an example that's just what you want. https://carto.com/developers/carto-vl/examples/#example-interactive-based-styling

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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