Skip to content

Commit

Permalink
[requested-changes] Keep original aspect ratio of the image
Browse files Browse the repository at this point in the history
  • Loading branch information
@totallynotvaishnav
totallynotvaishnav committed Jul 24, 2022
1 parent b308c54 commit 44e9fe7
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 108 deletions.
18 changes: 9 additions & 9 deletions examples/data/netjsonmap-indoormap.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
],
Expand Down
214 changes: 115 additions & 99 deletions examples/netjsonmap-indoormap.html
View file
Original file line number Diff line number Diff line change
@@ -1,121 +1,137 @@
<!DOCTYPE html>
<html>
<head>
<title>Indoor map</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""
/>
<!-- theme can be easily customized via css -->
<link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../src/css/netjsongraph.css" rel="stylesheet" />

<head>
<title>Indoor map</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin="" />
<!-- theme can be easily customized via css -->
<link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../src/css/netjsongraph.css" rel="stylesheet" />
<link rel="preload" href="./data/floorplan.png" as="image" />
<style>
.njg-tooltip {
background: rgba(0, 0, 0, 0.75) !important;
border: none !important;
}

<link rel="preload" href="./data/indoormap.jpg" as="image" />
</head>

<body>
<script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
<script>
/*
.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.
*/
const graph = new NetJSONGraph("./data/netjsonmap-indoormap.json", {
render: "map",
// set map initial state.
mapOptions: {
center: [48.577, 18.539],
zoom: 5.7,
zoomSnap: 0.3,
minZoom: 3.5,
maxZoom: 9,
nodeConfig: {
label: {
offset: [0, -10],
fontSize: '14px',
fontWeight: 'bold',
color: 'red'
const graph = new NetJSONGraph("./data/netjsonmap-indoormap.json", {
render: "map",
// set map initial state.
mapOptions: {
center: [48.577, 18.539],
zoom: 5.5,
zoomSnap: 0.3,
minZoom: 3.5,
maxZoom: 9,
nodeConfig: {
label: {
offset: [0, -10],
fontSize: "14px",
fontWeight: "bold",
color: "#D9644D",
},
animation: false,
},
animation: false,
},
linkConfig: {
linkStyle: {
width: 4,
linkConfig: {
linkStyle: {
width: 4,
},
animation: false,
},
animation: false,
},
},

// Convert to internal json format
prepareData: function (data) {
data.nodes.map((node) => {
node.label = node.name;
node.properties = Object.assign(node.properties || {}, {
location: node.location,
// Convert to internal json format
prepareData: function (data) {
data.nodes.map((node) => {
node.label = node.name;
node.properties = Object.assign(node.properties || {}, {
location: node.location,
});
});
});
},
},

onLoad: function presentIndoormap() {
const gui = this.utils.getGUI(this);
gui.init();
if (this.config.metadata) {
gui.createAboutContainer(graph);
gui.sideBar.classList.add("hidden");
this.utils.updateMetadata.call(this);
}
if (this.config.switchMode) {
gui.renderModeSelector.onclick = () => {
if (this.config.render === this.utils.mapRender) {
this.config.render = this.utils.graphRender;
this.echarts.dispose();
graph = new NetJSONGraph(this.data, {
...this.config,
});
graph.render();
onLoad: function presentIndoormap() {
const gui = this.utils.getGUI(this);
gui.init();
if (this.config.metadata) {
gui.createAboutContainer(graph);
gui.sideBar.classList.add("hidden");
this.utils.updateMetadata.call(this);
}
if (this.config.switchMode) {
gui.renderModeSelector.onclick = () => {
if (this.config.render === this.utils.mapRender) {
this.config.render = this.utils.graphRender;
this.echarts.dispose();
graph = new NetJSONGraph(this.data, {
...this.config,
});
graph.render();
} else {
this.config.render = this.utils.mapRender;
this.config.render(this.data, this);
}
};
}
this.config.onClickElement = (type, data) => {
let nodeLinkData;
if (type === "node") {
nodeLinkData = this.utils.nodeInfo(data);
} else {
this.config.render = this.utils.mapRender;
this.config.render(this.data, this);
nodeLinkData = this.utils.linkInfo(data);
}
gui.getNodeLinkInfo(type, nodeLinkData);
gui.sideBar.classList.remove("hidden");
};
}
this.config.onClickElement = (type, data) => {
let nodeLinkData;
if (type === "node") {
nodeLinkData = this.utils.nodeInfo(data);
} else {
nodeLinkData = this.utils.linkInfo(data);
}
gui.getNodeLinkInfo(type, nodeLinkData);
gui.sideBar.classList.remove("hidden");
};

const netjsonmap = this.leaflet;
const image = new Image();
image.src = './data/floorplan.png';
const netjsonmap = this.leaflet;
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);
const bounds = new L.LatLngBounds(southWest, northEast);
netjsonmap.setMaxBounds(bounds);

// 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();
},
});

graph.render();
</script>
</body>
// 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();
},
});

</html>
graph.render();
</script>
</body>
</html>

0 comments on commit 44e9fe7

Please sign in to comment.