CODEWITHSUNDEEP
javascriptjqueryd3.jsonclickleaflet
DiamondJoe12
DiamondJoe12

Reputation: 1807

d3 on click event listener failing in Leaflet

What should be a fairly straightforward thing is giving me some trouble in Leaflet. I have d3 points overlaid on a Leaflet map:

// create map element in DOM
<div id="map" class="sf" style="width: 600px; height: 400px"></div>

// build leaflet map
L.mapbox.accessToken = 'pk.eyJ1Ijoic3RhcnJtb3NzMSIsImEiOiJjaXFheXZ6ejkwMzdyZmxtNmUzcWFlbnNjIn0.IoKwNIJXoLuMHPuUXsXeug';
        var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}';
        //var accessToken = 'pk.eyJ1Ijoic3RhcnJtb3NzMSIsImEiOiJjam13ZHlxbXgwdncwM3FvMnJjeGVubjI5In0.-ridMV6bkkyNhbPfMJhVzw';
        var map = L.map('map').setView([37.7701177, -122.40], 13);
            mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
         L.tileLayer(
'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
    tileSize: 512,
    zoomOffset: -1,
    attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


     var svgLayer = L.svg();
        svgLayer.addTo(map);

        var svgMap = d3.select("#map").select("svg");
        var g = svgMap.select('g');

    //load point data
    d3.json("data/SanFrancisco_CoWorkingTenants.json", function(SFData) {
        var SFData = SFCoworking.features
        console.log(SFData)
        })
    SFData.forEach(function(d) {
        d.latLong = new L.LatLng(d.properties.Latitude,
                                d.properties.Longitude);
        
    })

    // append circles to map
    var feature = g.selectAll("circle")
        .data(SFData)
        .enter().append("circle")
        .style("stroke", "black")
        .style("opacity", .4)
        .style("fill", "red")
        .attr("r", 20)
        .attr("class", 'features')
        

    function drawAndUpdateCircles() {
        feature.attr("transform",
            function(d) {
                var layerPoint = map.latLngToLayerPoint(d.latLong);

                return "translate("+ layerPoint.x +","+ layerPoint.y +")";

            }
        )
    }

    drawAndUpdateCircles();
    map.on("moveend", drawAndUpdateCircles);

I want to have popups for each circle point using a mouseover event listener. But I can't even get that far. I can't even get the event listener below to trigger.

d3.selectAll('.features').on("mouseover", function(){console.log("mouse event")})

When testing the d3 selector, it does work with the following:

d3.selectAll('.features').style("opacity", .1)

So I know the selector is not the issue here. What can I try next?

Upvotes: 0

Views: 213

Answers (0)

Related Questions