Simple HTML floor plan creation + data population

[Xon]

Hi everyone

I am quite a newbie in this area .. I've dabbled with some php/html/js but it is not my area. I'm trying to create a dynamic image, representing a data center floor map.

I want the image to be dynamically created i.e. can be zoomed in etc. The Text for each rack object (i.e. square) should be dynamic and obtained via an API call I will be making to another system.

As a very rough guide I'd like to draw something like the below (minus the click and expand thing he has going on the right side).

Any clue at what tech I should be reading and looking into? I saw GoJS but doesn't seem to be right for what i want.

 

[visibleman]

Initial thinking would be to convert that floorplan to SVG (vectored image), add TEXT tags where needed (to SVG) with unique labels/attribute (cabinet ID etc), pull the data (JSON) in via JS and fill the TEXT tags accordingly using unique attribute. You could then using a library like SVGjs for manipulation, zoom etc.

However, using a mapping library like OpenLayers or LeafletJS might also be another way and doing a quick Google ('leaflet js floor plan') pulled up -
https://engineering.linecorp.com/en/blog/floor-map-management-system-on-web-with-leaflet/
https://github.com/Aldaviva/floorplan/tree/master/public/scripts

Edit - 'backend' would be a simple DB driven CRUD system with what ever flavour of server-side language (PHP etc) and database (MySQL, SQL etc).

 

[Xon]

Thanks! both options seem interesting. Will have a look.