topic Re: Display X,Y coordinations on SVG map in Developer

Display X,Y coordinations on SVG map

Zetko — Thu, 20 Aug 2020 16:27:17 GMT

Hi all, I am strugling a bit with one case.

I have a floor plan in SVG. There are some walls, like a labyrinth and some shortcuts through some rooms. I walked through this labyrinth, recorded X, Y coordinations (with some other meta data) and my task now is to show this coordinations up, how the 'figure' walked through the labyrinth.

I tryed to use Synoptic Panel to load the SVG picture, but I cant show up the coordinations / directions from my data set.

Do you have any idea, or is it even possible?

Thanks for any help!

BR, Zetko

Re: Display X,Y coordinations on SVG map

lbendlin — Thu, 20 Aug 2020 16:44:29 GMT

Please refer to the documentation. Scatter plot might be an option, but there might be other hybrids that allow you to draw incomplete paths or polylines.

https://www.rgraph.net/svg/scatter.html

Does it have to be the Synoptic panel? As you know SVG is also supported by image URLs

Re: Display X,Y coordinations on SVG map

Zetko — Fri, 21 Aug 2020 07:39:07 GMT

Hi, there are no like a 'conditions', what method or option should be used (so Synoptic panel is not needed). Anyway, I was thinking about Azure Map or MapBox,

but they are usually used for larger objects and it has problems with in-door spaces.

As you can se on example below, I got a SVG plan of some place. Plan is clear, there are all the information about - where is enterance, exit, where are walls and shortcuts. Then I got a 4 figures, where each one went through different way and i got their X,Y coordinations. My goal is to to draw the lines into the plan, based on their coordinations.

Cave

Do you think there is a method working like this?

Re: Display X,Y coordinations on SVG map

lbendlin — Fri, 21 Aug 2020 11:40:17 GMT

I think that should be possible. Your floor plan SVG code would need to be combined with the codes for each of the walkthrough polylines. Can you share sample data?

Re: Display X,Y coordinations on SVG map

Zetko — Fri, 21 Aug 2020 13:59:00 GMT

I tryed to made a realy simple example of my plan, because mine one is not completed and a bit complicated and as first I need to realize, if it is even possible, what I want to do in future.

So, lets try this one. https://svgur.com/s/NxG

I really appreciate your attitude lbendlin, thanks a lot!

Re: Display X,Y coordinations on SVG map

lbendlin — Fri, 21 Aug 2020 14:35:57 GMT

Ok let's do it step by step. The SVG you provided is

That doesn't work because of the double quotes. Let's replace them with single quotes.

Now, this can be assigned to a measure or calculated column, marked as Image URL, and placed into a table or matrix.

However it results in a broken image.

That likely means that some of the more elaborate SVG code is not supported in the Power BI implementation? Let's see if we can modify/simplify the code.

Here's an example of a successful renderer of a sparkline.

Turns out all it needed was the data prefix .

As you can see the viewbox isn't right yet. I am still learning SVG, let's see which other changes are needed.

Re: Display X,Y coordinations on SVG map

lbendlin — Fri, 21 Aug 2020 15:09:03 GMT

Oh boy. Looks like there is a hard limit on the image size in table and matrix visuals - 150px height.

You would need to redo your SVG to take that into account and reduce the whitespace around the drawing. Or someone can com up with a way to break out of the 150 px limit.

here's my current svg version. Note: replace "&colon;" with ":"

SVG = "data&colon;image/svg+xml;utf8,<svg height='600' width='800' xmlns='http://www.w3.org/2000/svg'> <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='438.45313' x2='131.47619' y1='142.45313' x1='131' stroke-width='3' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_2' y2='144.36251' x2='438' y1='141.96251' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_4' y2='442.45775' x2='439.42857' y1='440.05775' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_5' y2='332.26266' x2='437.66668' y1='145.31027' x1='438' stroke-width='3' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_6' y2='384.28571' x2='332.14286' y1='384' x1='436.42857' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_8' y2='220.47619' x2='333.09524' y1='383.80952' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_9' y2='218.57143' x2='334.04762' y1='218.57143' x1='191.19048' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_11' y2='277.61905' x2='283.09524' y1='278' x1='130.71429' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_12' y2='360.95238' x2='195.95238' y1='361.42857' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_13' y='422.38095' x='408.33333' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>Start</text> <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_14' y='368.57143' x='409.28571' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>End</text> </svg>"

which still results in lots of wasted space

You want your SVG to be square (for example 600x600) and with little space around the drawing.

Re: Display X,Y coordinations on SVG map

lbendlin — Fri, 21 Aug 2020 23:07:07 GMT

The visuals library has an (unrated - so proceed at your own risk) HTML5 visual that can also handle SVG. That looks much nicer.

Now all that's left to do is to overlay your walkpaths as needed.

Re: Display X,Y coordinations on SVG map

Zetko — Sat, 22 Aug 2020 21:39:12 GMT

Best so far is working that visual lib HTML5, it looks really good and keep all the sizes of plan. So I generated the data as walk through with polylines, also in SVG and i tryed to combine it in Power BI. It looks quite good, but there is still a lot of work to make a good concept.

Thanks a lot for your help!

Re: Display X,Y coordinations on SVG map

lbendlin — Sat, 22 Aug 2020 21:47:25 GMT

Thank you for teaching me about SVG.