First I made a copy of the Kitten Monitor sample, which shows one way of adding a background image into a diagram that can be scaled and scrolled.
Second I made these substitutions:
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.TopLeft,
isReadOnly: true, // allow selection but not moving or copying or deleting
"grid.visible": true,
"commandHandler.increaseZoom": function(factor) {
if (factor === undefined) factor = this.zoomFactor;
BackImage.scale *= factor;
this.diagram.grid.gridCellSize = new go.Size(10*BackImage.scale, 10*BackImage.scale);
},
"commandHandler.decreaseZoom": function(factor) {
if (factor === undefined) factor = 1.0/this.zoomFactor;
BackImage.scale *= factor;
this.diagram.grid.gridCellSize = new go.Size(10*BackImage.scale, 10*BackImage.scale);
},
"commandHandler.resetZoom": function(newscale) {
if (newscale === undefined) newscale = this.defaultScale;
BackImage.scale = newscale;
this.diagram.grid.gridCellSize = new go.Size(10*BackImage.scale, 10*BackImage.scale);
},
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
"toolManager.hoverDelay": 100 // how quickly tooltips are shown
});
// the background image, a floor plan
var BackImage =
$(go.Part, // this Part is not bound to any model data
{
zOrder: -1,
width: 840, height: 570,
layerName: "Grid", position: new go.Point(0, 0),
},
$(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")
);
myDiagram.add(BackImage);
Note how I made the Part holding the background Picture available in a variable, and then how both that background image Part and the Diagram.grid is modified as the user zooms in or out.
Setting ToolManager.mouseWheelBehavior is optional. Here we assume zooming is more commonly desired than scrolling.