[requested-changes] Keep original aspect ratio of the image

openwisp · Jul 27, 2022 · e718c03 · e718c03
1 parent 68bb45d
commit e718c03
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/dist/netjsongraph.min.js b/dist/netjsongraph.min.js
diff --git a/examples/data/netjsonmap-indoormap.json b/examples/data/netjsonmap-indoormap.json
@@ -8,47 +8,47 @@
   "nodes": [
     {
       "id": "i3ehd7",
-      "location": {"lat": 47.49, "lng": 12.298496093750002},
+      "location": {"lat": 43.89, "lng": 12.098496093750002},
       "name": "Family room"
     },
     {
       "id": "i74rhs",
-      "location": {"lat": 48.5007394591129, "lng": 28.47153358459473},
+      "location": {"lat": 45.5007394591129, "lng": 28.27153358459473},
       "name": "Lounge"
     },
     {
       "id": "5vjb7b",
-      "location": {"lat": 47.863304126849265, "lng": 6.294136047363282},
+      "location": {"lat": 44.393304126849265, "lng": 6.094136047363282},
       "name": "Bedroom 1"
     },
     {
       "id": "liwv7p",
-      "location": {"lat": 44.89718091651456, "lng": 28.944869232177738},
+      "location": {"lat": 39.49718091651456, "lng": 28.644869232177738},
       "name": "Bedroom 4"
     },
     {
       "id": "m7qhnj",
-      "location": {"lat": 47.530760483351195, "lng": 24.609127044677738},
+      "location": {"lat": 43.930760483351195, "lng": 24.369127044677738},
       "name": "Study Area"
     },
     {
       "id": "a0mg9w",
-      "location": {"lat": 44.99, "lng": 18.435201263427738},
+      "location": {"lat": 39.89, "lng": 18.135201263427738},
       "name": "Dining room"
     },
     {
       "id": "dsm2x7",
-      "location": {"lat": 50.559382175122965, "lng": 13.955840454101564},
+      "location": {"lat": 48.859382175122965, "lng": 13.955840454101564},
       "name": "Bedroom 2"
     },
     {
       "id": "nwlpcd",
-      "location": {"lat": 50.57788524115151, "lng": 19.339492797851566},
+      "location": {"lat": 48.67788524115151, "lng": 19.039492797851566},
       "name": "Bedroom 3"
     },
     {
       "id": "9p0bos",
-      "location": {"lat": 51.736490408464164, "lng": 25.936660766601562},
+      "location": {"lat": 49.736490408464164, "lng": 25.516660766601562},
       "name": "Garage"
     }
   ],

diff --git a/examples/netjsonmap-indoormap.html b/examples/netjsonmap-indoormap.html
@@ -13,9 +13,19 @@
     <link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../src/css/netjsongraph.css" rel="stylesheet" />
 
-    <link rel="preload" href="./data/indoormap.jpg" as="image" />
-  </head>
+    <link rel="preload" href="./data/floorplan.png" as="image" />
+    <style>
+      .njg-tooltip {
+        background: rgba(0, 0, 0, 0.75) !important;
+        border: none !important;
+      }
 
+      .njg-tooltip-key,
+      .njg-tooltip-value {
+        color: #fff;
+      }
+    </style>
+  </head>
   <body>
     <script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
     <script>
@@ -29,7 +39,7 @@
         // set map initial state.
         mapOptions: {
           center: [48.577, 18.539],
-          zoom: 5.7,
+          zoom: 5.5,
           zoomSnap: 0.3,
           minZoom: 3.5,
           maxZoom: 9,
@@ -38,7 +48,7 @@
               offset: [0, -10],
               fontSize: "14px",
               fontWeight: "bold",
-              color: "red",
+              color: "#D9644D",
             },
             animation: false,
           },
@@ -98,8 +108,13 @@
           const image = new Image();
           image.src = "./data/floorplan.png";
 
-          const southWest = {lat: 53.39105802617281, lng: 2.258377075195313},
-            northEast = {lat: 43.05747491746001, lng: 35.327825546264656};
+          const aspectRatio = image.width / image.height;
+          const height = 700;
+          const width = aspectRatio * height;
+          const southWest = {lat: 53, lng: 2};
+          const swPixel = netjsonmap.latLngToContainerPoint(southWest);
+          const nePixel = swPixel.add(new L.Point(width, height));
+          const northEast = netjsonmap.containerPointToLatLng(nePixel);
 
           const bounds = new L.LatLngBounds(southWest, northEast);
           netjsonmap.setMaxBounds(bounds);