Skip to content

Commit

Permalink
[change] Improve indoor map example #139
Browse files Browse the repository at this point in the history 
Closes #139
  • Loading branch information
@totallynotvaishnav
totallynotvaishnav committed Jul 27, 2022
1 parent 3a4c72d commit 2bec5a3
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 178 deletions.
2 changes: 1 addition & 1 deletion dist/netjsongraph.min.js
View file

Large diffs are not rendered by default.

Binary file added examples/data/floorplan.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed examples/data/indoormap.jpg
View file
Binary file not shown.
166 changes: 28 additions & 138 deletions examples/data/netjsonmap-indoormap.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,172 +6,62 @@
"metric": "ETX",
"date": "2019-04-03T05:06:54.000Z",
"nodes": [
{"id": "172.16.138.1", "location": {"lng": 12.021, "lat": 46.8245}},
{
"id": "172.16.181.10",
"location": {"lng": 14.384999999999998, "lat": 47.92375}
},
{
"id": "172.16.49.3",
"location": {"lng": 28.918999999999997, "lat": 47.50749999999999}
},
{
"id": "172.16.185.12",
"location": {"lng": 29.366, "lat": 49.70099999999999}
},
{
"id": "wq35oo",
"location": {"lat": 49.75764874137261, "lng": 5.3064823150634775}
},
{
"id": "i3ehd7",
"location": {"lat": 48.69096039092552, "lng": 12.458496093750002}
},
{
"id": "t39e8p",
"location": {"lat": 50.190967765585604, "lng": 10.261230468750002}
},
{
"id": "5lu7zw",
"location": {"lat": 46.31658418182218, "lng": 10.085449218750002}
},
{
"id": "huj13q",
"location": {"lat": 45.78284835197676, "lng": 8.833007812500002}
},
{
"id": "gjqoc0",
"location": {"lat": 45.85941212790755, "lng": 14.765625000000002}
},
{
"id": "cl401j",
"location": {"lat": 49.374661232470956, "lng": 22.43107795715332}
},
{
"id": "b95i1d",
"location": {"lat": 48.275310282737294, "lng": 21.002855300903324}
},
{
"id": "1n30of",
"location": {"lat": 48.369536273943815, "lng": 32.203760147094734}
},
{
"id": "6arfsx",
"location": {"lat": 49.87920553932855, "lng": 31.47866249084473}
"location": {"lat": 43.89, "lng": 12.098496093750002},
"name": "Family room"
},
{
"id": "i74rhs",
"location": {"lat": 48.5007394591129, "lng": 29.17153358459473}
},
{
"id": "ur8l3k",
"location": {"lat": 50.85651382037179, "lng": 20.444526672363285}
},
{
"id": "jlgi7s",
"location": {"lat": 51.4354439242938, "lng": 6.096382141113282}
"location": {"lat": 45.5007394591129, "lng": 28.27153358459473},
"name": "Lounge"
},
{
"id": "5vjb7b",
"location": {"lat": 47.363304126849265, "lng": 6.294136047363282}
},
{
"id": "03z02m",
"location": {"lat": 49.67679293818404, "lng": 26.333198547363285}
},
{
"id": "rfoycu",
"location": {"lat": 51.3119985247114, "lng": 30.683784484863285}
},
{
"id": "zi8tv5",
"location": {"lat": 47.0123325207779, "lng": 30.722408294677738}
"location": {"lat": 44.393304126849265, "lng": 6.094136047363282},
"name": "Bedroom 1"
},
{
"id": "liwv7p",
"location": {"lat": 46.19718091651456, "lng": 28.744869232177738}
},
{
"id": "dhpay8",
"location": {"lat": 45.75434934033757, "lng": 32.34838485717774}
},
{
"id": "xhg8ed",
"location": {"lat": 45.63156563882012, "lng": 30.129146575927738}
},
{
"id": "3aj0w5",
"location": {"lat": 46.83224759932888, "lng": 26.130123138427738}
"location": {"lat": 39.49718091651456, "lng": 28.644869232177738},
"name": "Bedroom 4"
},
{
"id": "m7qhnj",
"location": {"lat": 46.530760483351195, "lng": 22.109127044677738}
"location": {"lat": 43.930760483351195, "lng": 24.369127044677738},
"name": "Study Area"
},
{
"id": "a0mg9w",
"location": {"lat": 46.47026114691636, "lng": 18.835201263427738}
"location": {"lat": 39.89, "lng": 18.135201263427738},
"name": "Dining room"
},
{
"id": "dsm2x7",
"location": {"lat": 49.549382175122965, "lng": 15.345840454101564}
},
{
"id": "mhfphx",
"location": {"lat": 49.59213053471149, "lng": 12.950820922851564}
},
{
"id": "qf3hci",
"location": {"lat": 49.53512440198944, "lng": 20.553359985351566}
"location": {"lat": 48.859382175122965, "lng": 13.955840454101564},
"name": "Bedroom 2"
},
{
"id": "nwlpcd",
"location": {"lat": 49.57788524115151, "lng": 18.839492797851566}
},
{
"id": "lo621p",
"location": {"lat": 47.66087849116105, "lng": 8.973770141601564}
},
{
"id": "rcaslg",
"location": {"lat": 47.823413360078675, "lng": 7.721328735351563}
},
{
"id": "3iwfec",
"location": {"lat": 51.64113955167631, "lng": 10.358047485351564}
},
{
"id": "2iz56s",
"location": {"lat": 51.72288115298209, "lng": 15.433731079101564}
"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"
}
],
"links": [
{"source": "172.16.49.3", "target": "zi8tv5", "cost": 0.5},
{"source": "xhg8ed", "target": "zi8tv5", "cost": 0.5},
{"source": "dhpay8", "target": "zi8tv5", "cost": 0.5},
{"source": "liwv7p", "target": "zi8tv5", "cost": 0.5},
{"source": "rcaslg", "target": "5vjb7b", "cost": 1},
{"source": "lo621p", "target": "rcaslg", "cost": 0.5},
{"source": "huj13q", "target": "rcaslg", "cost": 1},
{"source": "5lu7zw", "target": "lo621p", "cost": 1},
{"source": "huj13q", "target": "5lu7zw", "cost": 0.5},
{"source": "172.16.138.1", "target": "lo621p", "cost": 0.8},
{"source": "nwlpcd", "target": "qf3hci", "cost": 0.5},
{"source": "ur8l3k", "target": "qf3hci", "cost": 0.5},
{"source": "cl401j", "target": "qf3hci", "cost": 0.5},
{"source": "b95i1d", "target": "qf3hci", "cost": 0.5},
{"source": "mhfphx", "target": "dsm2x7", "cost": 0.5},
{"source": "172.16.181.10", "target": "dsm2x7", "cost": 0.5},
{"source": "mhfphx", "target": "i3ehd7", "cost": 0.2},
{"source": "jlgi7s", "target": "wq35oo", "cost": 0.5},
{"source": "3iwfec", "target": "t39e8p", "cost": 0.5},
{"source": "a0mg9w", "target": "m7qhnj", "cost": 1.5},
{"source": "rfoycu", "target": "6arfsx", "cost": 0.8},
{"source": "172.16.185.12", "target": "6arfsx", "cost": 0.5},
{"source": "i74rhs", "target": "6arfsx", "cost": 0.5},
{"source": "1n30of", "target": "6arfsx", "cost": 0.5}
{"source": "5vjb7b", "target": "i3ehd7", "cost": 1},
{"source": "5vjb7b", "target": "dsm2x7", "cost": 1},
{"source": "i3ehd7", "target": "dsm2x7", "cost": 1},
{"source": "i3ehd7", "target": "a0mg9w", "cost": 1},
{"source": "dsm2x7", "target": "nwlpcd", "cost": 0.9},
{"source": "m7qhnj", "target": "9p0bos", "cost": 1},
{"source": "m7qhnj", "target": "liwv7p", "cost": 1.2},
{"source": "m7qhnj", "target": "i74rhs", "cost": 1.1},
{"source": "nwlpcd", "target": "m7qhnj", "cost": 1},
{"source": "a0mg9w", "target": "m7qhnj", "cost": 0.7}
]
}
90 changes: 51 additions & 39 deletions examples/netjsonmap-indoormap.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>netjsongraph.js: Dark Colors</title>
<title>Indoor map</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
Expand All @@ -13,43 +13,50 @@
<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" />
<style type="text/css">
.njg-metadata {
left: 50px;
<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>
/*
The demo is used to show how to set indoor map.
Mainly the operation of leaflet.
See `onLoad` below for details.
*/
The demo is used to show how to set indoor map.
Mainly the operation of leaflet.
See `onLoad` below for details.
*/
const graph = new NetJSONGraph("./data/netjsonmap-indoormap.json", {
render: "map",
// set map tiles config, can set multiple values.
mapTileConfig: [
{
label: "Blue Street",
urlTemplate:
"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
options: {
minZoom: 0.25,
maxZoom: 18,
},
},
],
// set map initial state.
mapOptions: {
center: [48.577, 18.539],
zoom: 6,
zoom: 5.5,
zoomSnap: 0.3,
minZoom: 3.5,
maxZoom: 9,
nodeConfig: {
label: {
offset: [0, -10],
fontSize: "14px",
fontWeight: "bold",
color: "#D9644D",
},
animation: false,
},
linkConfig: {
linkStyle: {
width: 4,
},
animation: false,
},
},

Expand All @@ -68,6 +75,7 @@
gui.init();
if (this.config.metadata) {
gui.createAboutContainer(graph);
gui.sideBar.classList.add("hidden");
this.utils.updateMetadata.call(this);
}
if (this.config.switchMode) {
Expand Down Expand Up @@ -96,26 +104,30 @@
gui.sideBar.classList.remove("hidden");
};

let netjsonmap = this.leaflet,
image = new Image();
const netjsonmap = this.leaflet;
const image = new Image();
image.src = "./data/floorplan.png";

image.src = "./data/indoormap.jpg";
image.onload = () => {
let southWest = {lat: 53.39105802617281, lng: 2.258377075195313},
northEast = {lat: 43.05747491746001, lng: 35.327825546264656},
bounds = new L.LatLngBounds(southWest, northEast);
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);

// remove the geographic map
netjsonmap.eachLayer((layer) => {
if (layer._url) {
netjsonmap.removeLayer(layer);
}
});
// add indoormap image
L.imageOverlay(image, bounds).addTo(netjsonmap);
const bounds = new L.LatLngBounds(southWest, northEast);
netjsonmap.setMaxBounds(bounds);

this.utils.hideLoading();
};
// remove the geographic map
netjsonmap.eachLayer((layer) => {
if (layer._url) {
netjsonmap.removeLayer(layer);
}
});
// add indoormap image
L.imageOverlay(image, bounds).addTo(netjsonmap);
this.utils.hideLoading();
},
});

Expand Down

0 comments on commit 2bec5a3

Please sign in to comment.