Home/ Questions/Q 8828969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:43:39+00:00

I am working on a desk location Mapping solution. The aim is to have

  • 0

I am working on a desk location Mapping solution.

The aim is to have an image on set positions on a floor plan that I can maniplulate to show a workstation status.

At the moment my process to map a floor plan is very long and tidious.

  1. I have a Map which I have taken from a PDF.
  2. Place a rectangle / square DIV around a pod computers
  3. Set the pod div position to absolute and move into place by setting : WIDTH, HEIGHT, TOP:#px, LEFT:#px.
  4. Place several 20px by 20px DIV’s inside the pod DIV
  5. Set each workstation div position to absolute and move into place by setting : WIDTH, HEIGHT, TOP:#px, LEFT:#px.
  6. Put an image in each of the desk DIV’s (These image source is dynamically written by PHP depending on the status of that work station in the database)

Can you guys please advise to better ways of doing this?

Is there a program that can help me do this and export the code?
Am I going about this in completely the wrong way?

I have heard one way is to take a vector image and map it in a graphics program then move that into the website?

enter image description here

CSS:

/*MAP POSITION*/
#map {height: 521px; width: 900px;  position: relative;}

/*POD POSITION*/
#deskGroup01-01{width:235px; height:120px;  position: absolute; left:8.5em; top: 4.5em;         }

/*WKS POSITIONS*/
#dg1Wks01-001{width:20px; height:20px;  position: absolute;left:1em;  top: 1.5em;}
#dg1Wks01-002{width:20px; height:20px;  position: absolute;left:4.5em; top: 6em;}
#dg1Wks01-003{width:20px; height:20px;  position: absolute;left:7.5em; top: 7.6em;}
#dg1Wks01-004{width:20px; height:20px;  position: absolute;left:14em; top: 7.5em;}
#dg1Wks01-005{width:20px; height:20px;  position: absolute;left:17em; top: 6em;}
#dg1Wks01-006{width:20px; height:20px;  position: absolute;left:19.9em; top: 1.4em;}
#dg1Wks01-007{width:20px; height:20px;  position: absolute;left:13.6em; top: 1.2em;}
#dg1Wks01-008{width:20px; height:20px;  position: absolute;left:10.5em; top: 2.5em;}
#dg1Wks01-009{width:20px; height:20px;  position: absolute;left:7.8em; top: 1.2em;}

HTML:

<div id="map">
<img src="images/imagemap.png" border="0" width="900" height="520" usemap="map" />
 <!-- Desk Grouping 1 -->
     <div id="deskGroup01-01">
           <div id="dg2Wks01-001">
        <img  id="01-001" class="trigger" src="<?php select_icon($deskno, $location); ?>" alt="01-001" title="01-001">
       </div>
      </div><!-- end Desk Grouping 1 -->
</div><!-- end lvlmap -->
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have decided the best way to go is to not use icons and instead use image mapping with colour highlighting.

    I found map light to be very helpful
    http://davidlynch.org/projects/maphilight/docs/

    For the Coordinaite mapping I am using the plotting tools found in the Dream Weaver design view.

    This is not as ideal as being able to have icons on the Map but provides alot more flexibilty and is far easier to map.

    If anyone has any more powerful approcahses please adda comment.

    • 0