CODEWITHSUNDEEP
htmlcsssvgleaflet
Hasse1987
Hasse1987

Reputation: 333

svg inside leaflet control

I'm trying to create an svg inside a leaflet control but I think my css/html knowledge is failing me: the browser inspector reports the size of the svg as 0x0. I can hack it by setting the svg position property to absolute, and the inspector reports the height/width I set, but the circle I render inside the svg still has size 0x0.

http://jsfiddle.net/n8L9ojej/4/

// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {maxZoom: 18}).addTo(map);

// add a marker in the given location
L.marker([36.83711,-2.464459]).addTo(map);

var control = L.control();
control.onAdd = function(map){
    this.div = L.DomUtil.create("div");             this.div.setAttribute("style","height:100px;width:100px;background:white");
         return this.div;   
};

control.addTo(map);


svg = L.DomUtil.create("svg","test",control.div);
svg.setAttribute("style","height:90px;width:90px;");

d3.select(".test").append("circle")
    .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 50)
        .attr("cx", 50)
        .attr("cy", 50);

The controller is on the upper right.

Upvotes: 0

Views: 1633

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

According to the leaflet documentation L.DomUtil.create always returns an HTMLElement.

SVG elements are of type SVGElement, so it seems that L.DomUtil.create cannot create these. What leaflet actually does is create an html element with the tag name svg.

You may find that learning more about namespaces is useful.

d3 is equally comfortable working with SVG and html elements but the browser will only render elements if they are created in the right namespace so an SVG element with the tag name p will not function as an html paragraph and equally an html element with the tag name line will not function as an SVG line.

There are elements that have the same tag name but different functionality which is why namespaces are necessary e.g. the SVG a element and the html a element.

Upvotes: 1

Related Questions