Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

And then made the highlighted changes:

...

Drawing your image

Now, I can start drawing some shapes, starting with the edges of the office. Using the Rectangle shape tool, I’m going to draw two squares, one for the upstairs section and another for the downstairs section:

...

Next I’ll make some desks, some rectangular, others a bit more complex by making a path:

...

Now to distribute place these tables around the office (as well as blocking and remember to block some areas for the kitchen, hall and meeting rooms). I also made a little house to represent those who are working from home:

...

Each one of the shapes I want to be map mapped to the data should have an ID.

To do that, I’m selecting each shape with the Selection Tool, and then changing its ID on onto the Object Properties window (if you don’t see it, click Object → Object Properties on the menu options along the top, click Object → Object Properties):

...

Remember to press the Enter key after typing the new ID for the shape, or Inkscape won’t save it. Additionally, each ID must be unique and Inkscape will let you know :

...

With if you’ve entered a duplicate.

...

When all the shapes with have an ID, the SVG is now ready for to be used in the dashboard consumption.

Finally, all shapes should be converted to paths. Select all the shapes by clicking the selection tool, then click and dragging across all the shapes:

...

With all shapes now selected, got to Path → Object to Path:

...

Using the image in the dashboard

...

your-dashboard-installation/tomcat/webapps/panMISDashboardResources/images/svg/

If I drop your image in that an image is added to this location, the dashboard can automatically pick it up when you type the file name:

...

Using the new Custom Map

Now I can add the new Custom Map Chart to a dashboard.

...