D3 and Leaflet - svg circles not showing

Svarto Published at Dev

Svarto

I am trying to draw SVG circles on a map background, but while they are showing up in the elements (using Chrome Dev tools) they are not shown on the page. What am I missing here, why are they hidden?

I have tried to change the fill, opacity of the map and of the circle but I can't figure out why it isn't rendering?

My code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Leaflet and D3 map</title>
                <link rel="stylesheet" href="../leaflet.css" />
                <script type="text/javascript" src="../leaflet.js"></script>
        <script type="text/javascript" src="../d3.js"></script>
                <style type="text/css">

                    #map{
                        width: 700px;
                        height: 600px;
                    }

                </style>
    </head>
    <body>
            <div id="map"></div>


        <script type="text/javascript">

                        //
                        // LOAD THE MAP FROM MAPBOX & LEAFLET
                        //
                        var map = L.map("map").setView([50.0755,14.4378], 12);

                        mapLink = '<a href="http://www.mapbox.com">Mapbox</a>';
                        L.tileLayer (
                            "link to mapbox",{
                                attribution:"&copy; " + mapLink + " Contributors",
                                maxZoom:20,
                        }).addTo(map);

                        //
                        // Create the SVG layer on top of the map
                        //
                        L.svg().addTo(map);

                        // Create the standard variables selecting the SVG in the map element
                        var svg = d3.select("#map").append("svg");
                        var g = svg.append("g");

            //Load the coordinate for the circle
            var objects = [ {"circle":{"coordinates":[50.0755,14.4378]}}];

            //Loop through to create a LatLng element that can be projected onto Leaflet map
            for(var i = 0;i<objects.length;i++){
              objects[i].LatLng = new L.LatLng(objects[i].circle.coordinates[0], objects[i].circle.coordinates[1])
            };

            //Create the circle object and store it in features
            var feature = g.selectAll("circle")
            .data(objects)
            .enter()
            .append("circle")
            .style("fill", "red")
            .attr("r", 20);


            //Make the circle dynamic, by calling the update function whenever view is view is reset
            map.on("viewreset", update)

            //Call the update also on first load of the web page
            update();

            //Updates the position of the circle every time the map is updated
            function update(){
              feature.attr("transform",
              function(d){
                return "translate("+
                    map.latLngToLayerPoint(d.LatLng).x+","+
                    map.latLngToLayerPoint(d.LatLng).y+")";
              })

            };

        </script>
    </body>
</html>

Andrew Reid

As you note, your circle is appended:

But, it is invisible not because of opacity or color, but because you don't set the dimensions of the svg. With default dimensions of the svg, your circle is beyond its border and consequently hidden (it resides in the middle of the map, at [350,300], while the default size of an svg is 300x150 likely browser dependent). Try:

 var svg = d3.select("#map")
    .append("svg")
    .attr("width",700) 
    .attr("height",600)

As your map is 700 pixels across and 600 pixels high.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-11-26

Comments

0 comments

TOP Ranking

Article

D3 and Leaflet - svg circles not showing

D3 and Leaflet - svg circles not showing

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

Emulator wrong screen resolution in Android Studio 1.3

3D Touch Peek Swipe Like Mail

Double spacing in rmarkdown pdf

Svchost high CPU from Microsoft.BingWeather app errors

How to how increase/decrease compared to adjacent cell

Using Response.Redirect with Friendly URLS in ASP.NET

java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

BigQuery - concatenate ignoring NULL

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Can a 32-bit antivirus program protect you from 64-bit threats

Make a B+ Tree concurrent thread safe

Bootstrap 5 Static Modal Still Closes when I Click Outside

Vector input in shiny R and then use it

Assembly definition can't resolve namespaces from external packages