diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
index 789c252..8b70c43 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
@@ -308,6 +308,7 @@
         payload.set("labels", labels("", name, device.id().toString()));
         payload.set("props", props(device.annotations()));
         addGeoLocation(device, payload);
+        addGridLocation(device, payload);
         addMetaUi(device.id().toString(), payload);
 
         String type = DEVICE_EVENT.get(event.type());
@@ -354,6 +355,7 @@
         payload.set("labels", labels(nameForHost(host), ip, host.mac().toString(), ""));
         payload.set("props", props(host.annotations()));
         addGeoLocation(host, payload);
+        addGridLocation(host, payload);
         addMetaUi(host.id().toString(), payload);
 
         String type = HOST_EVENT.get(event.type());
@@ -428,6 +430,30 @@
         }
     }
 
+    // Adds a grid location JSON to the specified payload object.
+    private void addGridLocation(Annotated annotated, ObjectNode payload) {
+        Annotations annotations = annotated.annotations();
+        if (annotations == null) {
+            return;
+        }
+
+        String xs = annotations.value(AnnotationKeys.GRID_X);
+        String ys = annotations.value(AnnotationKeys.GRID_Y);
+        if (xs != null && ys != null) {
+            try {
+                double x = Double.parseDouble(xs);
+                double y = Double.parseDouble(ys);
+                ObjectNode loc = objectNode()
+                        .put("locType", "grid")
+                        .put("latOrY", y)
+                        .put("longOrX", x);
+                payload.set("location", loc);
+            } catch (NumberFormatException e) {
+                log.warn("Invalid grid data: x={}, y={}", xs, ys);
+            }
+        }
+    }
+
     // Updates meta UI information for the specified object.
     protected void updateMetaUi(ObjectNode payload) {
         metaUi.put(JsonUtils.string(payload, "id"),
diff --git a/web/gui/src/main/webapp/app/view/topo/topoModel.js b/web/gui/src/main/webapp/app/view/topo/topoModel.js
index 2ef94a6..6adf1f3 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoModel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoModel.js
@@ -55,6 +55,20 @@
         return p ? p.invert(coord) : [0, 0];
     }
 
+    function coordFromXY(loc) {
+        var bgWidth = 1000,
+            bgHeight = 1000;
+
+        var scale = 1000 / bgWidth,
+            yOffset = (1000 - (bgHeight * scale)) / 2;
+
+        // 1000 is a hardcoded HTML value of the SVG element (topo2.html)
+        var x = scale * loc.longOrX,
+            y = (scale * loc.latOrY) + yOffset;
+
+        return [x, y];
+    }
+
     function positionNode(node, forUpdate) {
         var meta = node.metaUi,
             x = meta && meta.x,
@@ -114,8 +128,8 @@
         var loc = node.location,
             coord;
 
-        if (loc && loc.locType === 'geo') {
-            coord = coordFromLngLat(loc);
+        if (loc) {
+            coord = loc.locType === 'geo' ? coordFromLngLat(loc) : coordFromXY(loc);
             node.fixed = true;
             node.px = node.x = coord[0];
             node.py = node.y = coord[1];