Dibujar el plano de la sala por coordenadas

I am very beginner in web development and I have a problem. I have xml file with coordinates of seats. This is xml file:

<Places Width='800' Height='600' PlacesCount='180'>
  <Place ID='179' Fragment='0' Row='1' Place='1' X='80' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='188' Fragment='0' Row='1' Place='10' X='460' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='189' Fragment='0' Row='1' Place='11' X='520' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='190' Fragment='0' Row='1' Place='12' X='560' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='191' Fragment='0' Row='1' Place='13' X='600' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='192' Fragment='0' Row='1' Place='14' X='640' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='193' Fragment='0' Row='1' Place='15' X='680' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='180' Fragment='0' Row='1' Place='2' X='120' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='181' Fragment='0' Row='1' Place='3' X='160' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='182' Fragment='0' Row='1' Place='4' X='200' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='183' Fragment='0' Row='1' Place='5' X='240' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='184' Fragment='0' Row='1' Place='6' X='300' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='185' Fragment='0' Row='1' Place='7' X='340' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='186' Fragment='0' Row='1' Place='8' X='380' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='187' Fragment='0' Row='1' Place='9' X='420' Y='495' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='35' Fragment='0' Row='10' Place='1' X='80' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='44' Fragment='0' Row='10' Place='10' X='480' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='45' Fragment='0' Row='10' Place='11' X='520' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='46' Fragment='0' Row='10' Place='12' X='560' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='47' Fragment='0' Row='10' Place='13' X='600' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='48' Fragment='0' Row='10' Place='14' X='640' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='49' Fragment='0' Row='10' Place='15' X='680' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='36' Fragment='0' Row='10' Place='2' X='120' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='37' Fragment='0' Row='10' Place='3' X='160' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='38' Fragment='0' Row='10' Place='4' X='200' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='39' Fragment='0' Row='10' Place='5' X='240' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='40' Fragment='0' Row='10' Place='6' X='280' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='41' Fragment='0' Row='10' Place='7' X='320' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='42' Fragment='0' Row='10' Place='8' X='360' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='43' Fragment='0' Row='10' Place='9' X='440' Y='95' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='19' Fragment='0' Row='11' Place='1' X='80' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='28' Fragment='0' Row='11' Place='10' X='480' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='29' Fragment='0' Row='11' Place='11' X='520' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='30' Fragment='0' Row='11' Place='12' X='560' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='31' Fragment='0' Row='11' Place='13' X='600' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='32' Fragment='0' Row='11' Place='14' X='640' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='33' Fragment='0' Row='11' Place='15' X='680' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='20' Fragment='0' Row='11' Place='2' X='120' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='21' Fragment='0' Row='11' Place='3' X='160' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='22' Fragment='0' Row='11' Place='4' X='200' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='23' Fragment='0' Row='11' Place='5' X='240' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='24' Fragment='0' Row='11' Place='6' X='280' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='25' Fragment='0' Row='11' Place='7' X='320' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='26' Fragment='0' Row='11' Place='8' X='360' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='27' Fragment='0' Row='11' Place='9' X='440' Y='55' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='3' Fragment='0' Row='12' Place='1' X='80' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='12' Fragment='0' Row='12' Place='10' X='480' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='13' Fragment='0' Row='12' Place='11' X='520' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='14' Fragment='0' Row='12' Place='12' X='560' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='15' Fragment='0' Row='12' Place='13' X='600' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='16' Fragment='0' Row='12' Place='14' X='640' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='17' Fragment='0' Row='12' Place='15' X='680' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='4' Fragment='0' Row='12' Place='2' X='120' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='5' Fragment='0' Row='12' Place='3' X='160' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='6' Fragment='0' Row='12' Place='4' X='200' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='7' Fragment='0' Row='12' Place='5' X='240' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='8' Fragment='0' Row='12' Place='6' X='280' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='9' Fragment='0' Row='12' Place='7' X='320' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='10' Fragment='0' Row='12' Place='8' X='360' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='11' Fragment='0' Row='12' Place='9' X='440' Y='15' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='163' Fragment='0' Row='2' Place='1' X='80' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='172' Fragment='0' Row='2' Place='10' X='460' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='173' Fragment='0' Row='2' Place='11' X='520' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='174' Fragment='0' Row='2' Place='12' X='560' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='175' Fragment='0' Row='2' Place='13' X='600' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='176' Fragment='0' Row='2' Place='14' X='640' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='177' Fragment='0' Row='2' Place='15' X='680' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='164' Fragment='0' Row='2' Place='2' X='120' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='165' Fragment='0' Row='2' Place='3' X='160' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='166' Fragment='0' Row='2' Place='4' X='200' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='167' Fragment='0' Row='2' Place='5' X='240' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='168' Fragment='0' Row='2' Place='6' X='300' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='169' Fragment='0' Row='2' Place='7' X='340' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='170' Fragment='0' Row='2' Place='8' X='380' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='171' Fragment='0' Row='2' Place='9' X='420' Y='455' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='147' Fragment='0' Row='3' Place='1' X='80' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='156' Fragment='0' Row='3' Place='10' X='460' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='157' Fragment='0' Row='3' Place='11' X='520' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='158' Fragment='0' Row='3' Place='12' X='560' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='159' Fragment='0' Row='3' Place='13' X='600' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='160' Fragment='0' Row='3' Place='14' X='640' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='161' Fragment='0' Row='3' Place='15' X='680' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='148' Fragment='0' Row='3' Place='2' X='120' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='149' Fragment='0' Row='3' Place='3' X='160' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='150' Fragment='0' Row='3' Place='4' X='200' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='151' Fragment='0' Row='3' Place='5' X='240' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='152' Fragment='0' Row='3' Place='6' X='300' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='153' Fragment='0' Row='3' Place='7' X='340' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='154' Fragment='0' Row='3' Place='8' X='380' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='155' Fragment='0' Row='3' Place='9' X='420' Y='415' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='131' Fragment='0' Row='4' Place='1' X='80' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='140' Fragment='0' Row='4' Place='10' X='460' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='141' Fragment='0' Row='4' Place='11' X='520' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='142' Fragment='0' Row='4' Place='12' X='560' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='143' Fragment='0' Row='4' Place='13' X='600' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='144' Fragment='0' Row='4' Place='14' X='640' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='145' Fragment='0' Row='4' Place='15' X='680' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='132' Fragment='0' Row='4' Place='2' X='120' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='133' Fragment='0' Row='4' Place='3' X='160' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='134' Fragment='0' Row='4' Place='4' X='200' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='135' Fragment='0' Row='4' Place='5' X='240' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='136' Fragment='0' Row='4' Place='6' X='300' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='137' Fragment='0' Row='4' Place='7' X='340' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='138' Fragment='0' Row='4' Place='8' X='380' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='139' Fragment='0' Row='4' Place='9' X='420' Y='375' Width='35' Height='35' Type='3'>
</Place>
  <Place ID='115' Fragment='0' Row='5' Place='1' X='80' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='124' Fragment='0' Row='5' Place='10' X='480' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='125' Fragment='0' Row='5' Place='11' X='520' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='126' Fragment='0' Row='5' Place='12' X='560' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='127' Fragment='0' Row='5' Place='13' X='600' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='128' Fragment='0' Row='5' Place='14' X='640' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='129' Fragment='0' Row='5' Place='15' X='680' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='116' Fragment='0' Row='5' Place='2' X='120' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='117' Fragment='0' Row='5' Place='3' X='160' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='118' Fragment='0' Row='5' Place='4' X='200' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='119' Fragment='0' Row='5' Place='5' X='240' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='120' Fragment='0' Row='5' Place='6' X='280' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='121' Fragment='0' Row='5' Place='7' X='320' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='122' Fragment='0' Row='5' Place='8' X='360' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='123' Fragment='0' Row='5' Place='9' X='440' Y='310' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='99' Fragment='0' Row='6' Place='1' X='80' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='108' Fragment='0' Row='6' Place='10' X='480' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='109' Fragment='0' Row='6' Place='11' X='520' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='110' Fragment='0' Row='6' Place='12' X='560' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='111' Fragment='0' Row='6' Place='13' X='600' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='112' Fragment='0' Row='6' Place='14' X='640' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='113' Fragment='0' Row='6' Place='15' X='680' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='100' Fragment='0' Row='6' Place='2' X='120' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='101' Fragment='0' Row='6' Place='3' X='160' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='102' Fragment='0' Row='6' Place='4' X='200' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='103' Fragment='0' Row='6' Place='5' X='240' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='104' Fragment='0' Row='6' Place='6' X='280' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='105' Fragment='0' Row='6' Place='7' X='320' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='106' Fragment='0' Row='6' Place='8' X='360' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='107' Fragment='0' Row='6' Place='9' X='440' Y='270' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='83' Fragment='0' Row='7' Place='1' X='80' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='92' Fragment='0' Row='7' Place='10' X='480' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='93' Fragment='0' Row='7' Place='11' X='520' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='94' Fragment='0' Row='7' Place='12' X='560' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='95' Fragment='0' Row='7' Place='13' X='600' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='96' Fragment='0' Row='7' Place='14' X='640' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='97' Fragment='0' Row='7' Place='15' X='680' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='84' Fragment='0' Row='7' Place='2' X='120' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='85' Fragment='0' Row='7' Place='3' X='160' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='86' Fragment='0' Row='7' Place='4' X='200' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='87' Fragment='0' Row='7' Place='5' X='240' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='88' Fragment='0' Row='7' Place='6' X='280' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='89' Fragment='0' Row='7' Place='7' X='320' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='90' Fragment='0' Row='7' Place='8' X='360' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='91' Fragment='0' Row='7' Place='9' X='440' Y='230' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='67' Fragment='0' Row='8' Place='1' X='80' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='76' Fragment='0' Row='8' Place='10' X='480' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='77' Fragment='0' Row='8' Place='11' X='520' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='78' Fragment='0' Row='8' Place='12' X='560' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='79' Fragment='0' Row='8' Place='13' X='600' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='80' Fragment='0' Row='8' Place='14' X='640' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='81' Fragment='0' Row='8' Place='15' X='680' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='68' Fragment='0' Row='8' Place='2' X='120' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='69' Fragment='0' Row='8' Place='3' X='160' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='70' Fragment='0' Row='8' Place='4' X='200' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='71' Fragment='0' Row='8' Place='5' X='240' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='72' Fragment='0' Row='8' Place='6' X='280' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='73' Fragment='0' Row='8' Place='7' X='320' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='74' Fragment='0' Row='8' Place='8' X='360' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='75' Fragment='0' Row='8' Place='9' X='440' Y='190' Width='35' Height='35' Type='2'>
</Place>
  <Place ID='51' Fragment='0' Row='9' Place='1' X='80' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='60' Fragment='0' Row='9' Place='10' X='480' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='61' Fragment='0' Row='9' Place='11' X='520' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='62' Fragment='0' Row='9' Place='12' X='560' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='63' Fragment='0' Row='9' Place='13' X='600' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='64' Fragment='0' Row='9' Place='14' X='640' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='65' Fragment='0' Row='9' Place='15' X='680' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='52' Fragment='0' Row='9' Place='2' X='120' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='53' Fragment='0' Row='9' Place='3' X='160' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='54' Fragment='0' Row='9' Place='4' X='200' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='55' Fragment='0' Row='9' Place='5' X='240' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='56' Fragment='0' Row='9' Place='6' X='280' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='57' Fragment='0' Row='9' Place='7' X='320' Y='145' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='58' Fragment='0' Row='9' Place='8' X='360' Y='135' Width='35' Height='35' Type='1'>
</Place>
  <Place ID='59' Fragment='0' Row='9' Place='9' X='440' Y='135' Width='35' Height='35' Type='1'>
</Place>

Disponibles PlaceId, Rowy Place. I need to draw a plan of hall on these coordinates. Something like that: ejemplo (sorry, SO doesn't allow me insert picture here. low rep)

I don't know where to start. I need you help, some advices may be.

Gracias.

preguntado el 10 de marzo de 12 a las 09:03

1 Respuestas

I would start by sending the data to the browser in JSON format

[{PlaceId:1, X:10, Y:10, Width:35,Height: 35.... },
 {PlaceId:2, X:10, Y:10, Width:35,Height: 35.... },.... ]

Then, you could try drawing small s inside a container

<div id="places">
    <div id="row1" class="row">
        <div class="rowNum">1</div>
            <div id="Place1" class="place"></div>
            <!-- taken class indicates different color -->
            <div id="Place2" class="place taken"></div> 

        </div>
    </div>
    <div id="row2" class="row">
        <div class="rowNum">1</div>
            <div id="Place3" class="place"></div>
            <!-- taken class indicates different color -->
            <div id="Place4" class="place taken"></div> 
        </div>
    </div>
</div>

You can add the sits fixed in HTML or with jQuery. And add metadata to each place as Type, Fragment and PlaceID.

Style the place's with CSS to fit inlined.

respondido 10 mar '12, 10:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.