Search code examples
gojs

GoJS: How to add background image to diagram

How can I add a background image to a GoJS diagram? When I drag or zoom the diagram the background image should move and zoom accordingly.

The background image should als be visible in an associated Overview diagram.

Is there a simple (or not so simple) way to archieve this?

Solution

  • If you want it to move and zoom, etc, then just add it as a separate Part, like they do in Floor Monitor:

      // the background image, a floor plan
  myDiagram.add(
    $(go.Part,  // this Part is not bound to any model data
      { layerName: "Background", position: new go.Point(0, 0),
        selectable: false, pickable: false },
      $(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")
    ));

    https://gojs.net/latest/samples/kittenMonitor.html