vendredi 24 avril 2020

Is there a way to automatically put a marker in a d3Js map, relative to a polygon?

What I have :

d3.json(englandJsonUrl).then(function(englandTopology) // A topojson of the map of england
    {
        d3.json(walesJsonUrl).then(function(walesTopology) // A topojson of the map of Wales
        {
            d3.csv(csvUrl).then(function(csv) // A csv file with the cities I want to put a marker in
            {
                var welshGeojson = topojson.feature(walesTopology, walesTopology.objects.lad)
                var englishGeojson = topojson.feature(englandTopology, englandTopology.objects.LocalAuthorityDistricts);
                // Parsing my topojsons to geojsons
                var secretaries = JSON.parse(JSON.stringify(csv));

                englishDeps.selectAll("path")
                .data(englishGeojson.features)
                .enter()
                .append("path")
                .attr("d", englishPath); //How I display the map of england

                welshDeps.selectAll("path")
                .data(welshGeojson.features)
                .enter()
                .append("path")
                .attr("d", welshPath); // how I display the map of wales
          });
     });
});

The maps are displayed fine, FYI.

What I want to do, is that I want to recurse through the secretaries json; see which object contains the same ID as objects in either enlgishGeoJson or welshGeoJson and put a marker in the correct Polygon.

Currently, the code I have for adding a marker to the map is the following : (it works but it doesn't put it in the correct spots, of course) :

                    var marks = [{long: -70, lat: 53}];

                    englishDeps.selectAll(".mark")
                    .data(marks)
                    .enter()
                    .append("svg:image")
                    .attr('class','mark')
                    .attr('width', 20)
                    .attr('height', 20)
                    .attr("xlink:href","mapIconUrl")
                    .attr("transform", function(d)
                    {
                        return "translate(" + projection([d.long,d.lat]) + ")"; //do i need to change this bit ?
                    });



Aucun commentaire:

Enregistrer un commentaire