Forum Discussion

Zetko's avatar
Zetko
Frequent Visitor
6 years ago
Solved

Display X,Y coordinations on SVG map

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, ...
Need Help
Tips and Tricks
  • lbendlin's avatar
    lbendlin
    6 years ago

    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.

     

     

Zetko's avatar
Zetko
Frequent Visitor
6 years ago

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?

lbendlin's avatar
lbendlin
Icon for Super User rankSuper User
6 years ago

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?

  • Zetko's avatar
    Zetko
    Frequent Visitor
    6 years ago

    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!

    • lbendlin's avatar
      lbendlin
      Icon for Super User rankSuper User
      6 years ago

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

       

      <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Example</title>
  <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <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>
 </g>
</svg>

       

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

       

      <svg width='800' height='600' xmlns='http://www.w3.org/2000/svg'>
 <g>
  <title>Example</title>
  <rect fill='#fff' id='canvas_background' height='602' width='802' y='-1' x='-1'/>
  <g display='none' overflow='visible' y='0' x='0' height='100%' width='100%' id='canvasGrid'>
   <rect fill='url(#gridpattern)' stroke-width='0' y='0' x='0' height='100%' width='100%'/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <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>
 </g>
</svg>

       

      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.

       

       

       

       

       

       

      • lbendlin's avatar
        lbendlin
        Icon for Super User rankSuper User
        6 years ago

        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.