I am currently using <GeoJSON> to display a featureCollection of polygons on a map. This outputs svg similar to:
<svg>
<g>
<path...></path>
<path...></path>
<path...></path>
<path...></path>
</g>
</svg>
Each of my geojson features comes out as a path - but we would like to be able to control the rendering of the features to be able to wrap them in a group and also include an icon and some text, such as:
<svg>
<g class="group">
<g class="status">
<path...></path>
<image x="" y="" xlink:href="image.png"></image>
<text x="" y="">
...
</text>
</g>
<g class="status">
<path...></path>
<image x="" y="" xlink:href="image.png"></image>
<text x="" y="">
...
</text>
</g>
<g class="status">
<path...></path>
<image x="" y="" xlink:href="image.png"></image>
<text x="" y="">
...
</text>
</g>
</g>
</svg>
I am very new to leaflet in general and leaflet-react even more so - ive looked through the documentation but I am probably not looking for the right terms. Do I maybe need to use something besides <GeoJSON>? Thanks for any help and let me know if I can expand on anything.
Related
I'm trying to make an SVG element fit to the bottom of the page with "Loading..." text centered regardless of the container's width. This is my current code which isn't working as the message is always in a fixed position.
<svg id="svg-bottom" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="bottom">
<rect height="40" width="100%" y="0" x="0" fill="#000000" fill-opacity="0.676460598" id="panel"></rect>
<text id="status" font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF">
<tspan x="190.97" y="16">Loading…</tspan>
</text>
</g>
I solved the above with the following:
<text font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">Loading…</text>
I was looking at this article
And particularly this code,
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" aria-labelledby="title" role="img">
<title id="title">A line chart showing some information</title>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line x1="90" x2="705" y1="370" y2="370"></line>
</g>
<g class="labels x-labels">
<text x="100" y="400">2008</text>
<text x="246" y="400">2009</text>
<text x="392" y="400">2010</text>
<text x="538" y="400">2011</text>
<text x="684" y="400">2012</text>
<text x="400" y="440" class="label-title">Year</text>
</g>
<g class="labels y-labels">
<text x="80" y="15">15</text>
<text x="80" y="131">10</text>
<text x="80" y="248">5</text>
<text x="80" y="373">0</text>
<text x="50" y="200" class="label-title">Price</text>
</g>
<g class="data" data-setname="Our first data set">
<circle cx="90" cy="192" data-value="7.2" r="4"></circle>
<circle cx="240" cy="141" data-value="8.1" r="4"></circle>
<circle cx="388" cy="179" data-value="7.7" r="4"></circle>
<circle cx="531" cy="200" data-value="6.8" r="4"></circle>
<circle cx="677" cy="104" data-value="6.7" r="4"></circle>
</g>
</svg>
And I was wondering what data-value attribute was. When I tried googling for some documentation I only found this page, which said:
The data-* SVG attributes are called custom data attributes. They let SVG markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the SVGElement interface of the element the attributes belong to, with the SVGElement.dataset property.
And since I'm new at SVG, I wasn't sure what this meant. If someone could elucidate me on what data-value is that would be great!
index.html
<div class="button-icon">
<svg width="950px" height="605px" viewBox="0 0 950 605" >
<use xlink:href="assets/svgs/front-view-1-g2.svg#front-view-1-g2" />
</svg>
</div>
front-view-1-g2.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<g id="dark-rectangle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
<text id="2" font-family="AvenirPrimaryHMHMath" font-size="10" width="12" height="12" font-weight="normal" fill="#000000">
<tspan x="83" y="15">31</tspan>
</text>
<rect id="path-1" transform="translate(83.000000, 17.000000)" x="0" y="0" width="12" height="12" fill="#9b9b9b" ></rect>
</g>
</defs>
<g id="iPad" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="front-view-1-g2">
<use xlink:href="#dark-rectangle"></use>
<use transform="translate(110.000000, 0.000000)" xlink:href="#dark-rectangle"></use>
</g>
</g>
</svg>
i have only one group but needed to call it 2 times and change the position of second group and that is why i used transform to second use tag but its not working in IE browser.
if i put use tag in html file then also transform not working in IE.
it works properly in Chrome and Mozilla.
Note : use tag not working when mentioned in .svg file and transform not working when use mentioned in .html file.
Hey I found the answer for this.
Transform will work on use tag in IE as IE will not render tag, it directly renders particular group's child elements from .svg file.
In above case of mine, I need to create another rectangle group assign transform to it and use that group.
I have the HTML elements like the following:
<svg width="930" height="450">
<g transform="translate(.5,.5)">
<g class="cell" transform="translate(758.6842105263157,0)">
<text x="85.65789473684211" y="225" dy=".35em" id="text-Summer" text-anchor="middle" style="display: block;">Summer</text>
</g>
<g class="cell" transform="translate(758.6842105263157,0)">
<text x="85.65789473684211" y="225" dy=".35em" id="text-Winter" text-anchor="middle" style="display: block;">Winter</text>
</g>
</g>
</svg>
How can I get the "id" of the svg:text element which is having the text content "Summer" in Javscript.
I tried accessing using
$("svg g text[text='Summer']").attr('id').
But it is not getting.
Sorry, but what for do you need this? Can't you just generate id and text at one time and then get the element with $("svg g text#text-Summer")?
You should use something like this:
$("svg g text:contains(Summer)").attr('id')
It means that your selector is not correct.
The following code infact wraps text on a rectangle.
But when I want to drag the rectangle, i also want the text to be dragged simultaneously,i.e, the text must be bound to the rectangle on drag and drop.
Please help me.
<svg xmlns="http://www.w3.org/2000/svg">
<g id='Propositions'>
<rect id='Proposition1' x='50' y='50' width='100' height='30' style='fill:#8FBC8F; '/>
<text x="55" y="72" font-family="Verdana" font-size="14" fill="black" > Proposition1</text>
</g>
</svg>
Thanks in advance..
Drag the <g> element(parentNode), rather than the rect. This, then will include the text in the drag/drop event.
e.g.
<g id='Propositions'>
<rect id='Proposition1' onmousemove=dragMe(evt) x='50' y='50' width='100' height='30' style='fill:#8FBC8F; '/>
<text pointer-events=all x="55" y="72" font-family="Verdana" font-size="14" fill="black" > Proposition1</text>
</g>
function dragMe(evt)
{
myG=evt.target.parentNode
myG.setAttribute("transform", "translate("+transX+" "+transY+")")
}