title: Showing in a browser an interactive 2D floorplan using html5 and javascript
body: <p>I need to replace the Flash viewer I've built years ago to show interactive <strong>2D floorplans</strong> coming from AutoCAD.</p>
  
  <p>Currently, the AutoCAD files are read and converted to XML files containing the <strong>X</strong> and <strong>Y</strong> coordinates of the polygons representing the objects of the floorplan: rooms, walls, assets, etc. <strong>The objects in the drawing are clickable and can be set as visible or not depending on thematic views</strong>.</p>
  
  <p>Sometimes these floorplans could be relatively big, having a <strong>lot of points</strong>.</p>
  
  <p>I have already tried to use a web map control like <strong>LeafletJS</strong> as it has already the PAN and ZOOM functionality, I can insert clickable markers, and manage layers so I can show or hide objects by a thematic view. I have set the map CRS as metric, and I load data as <strong>GeoJSON</strong>. Unfortunately, with real-world mid-size floorplans, it is too much <strong>slow</strong> and sometimes became <strong>unresponsive</strong>.</p>
  
  <p>The example below is made of 18630 line objects and is not very reactive on panning.</p>
  
  <p><a href="https://i.stack.imgur.com/8Z38G.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8Z38G.png" alt="enter image description here"></a></p>
  
  <p>So now I'd like to draw directly the floorplan in the browser using <strong>SVG</strong> or <strong>CANVAS</strong>.
  I'd prefer to use <strong>CANVAS</strong> as it is a lot faster than SVG, using also WebGL if supported, but I have to rely on a library in order to have <strong>events handlers</strong> and easy object management like a DOM.</p>
  
  <p>So now I'm asking if a library like <strong>threeJS</strong> can handle easy a task like this, even if I need to map 2D objects and if it is the right technology to choose. In particular, is it possible with threeJS:</p>
  
  <ol>
  <li>To assign events listener to objects to get their IDs?</li>
  <li>To apply CSS3 rules to style objects, for example, to highlight a room or a table?</li>
  <li>ThreeJS can easily draw to both SVG or Canvas elements?</li>
  <li>With ThreeJS I can easily manage pan and zooming also?</li>
  <li>Can it be displayed also on <strong>mobile devices</strong>? (Android and iOS)</li>
  </ol>
  
  <p>If anyone knows better library or technology to accomplish this task I'm completely free to any suggestion.</p>
  
  <p>(Please note that I need only 2D drawings because 3D has been already built with other technologies from Revit)</p>