Skip to content

[feature] Added configurable popup on node click #402 #542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dee077 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[feature] Added configurable popup on node click #402 #542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79694b9
[feature] Added configurable popup on node click #402
dee077 May 13, 2026
8c965e3
[fix] Lint, test fixes and address coderabbit comments
dee077 May 15, 2026
6c4e2dd
[fix] Tests, async issues, label tooltip toggle, some refactoring and…
dee077 May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
module.exports = {
extends: ["airbnb", "prettier"],
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
rules: {
"no-param-reassign": "off",
"class-methods-use-this": "off",
Expand Down
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,6 +433,14 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
clusterConfig:{
// The configuration for the clusters
},
nodePopup:{
show: boolean,
content: function|HTMLElement|string|null,
config:{
// Leaflet popup options
},
onOpen: function,
},
baseOptions:{
// The global configuration for Echarts specifically for the map.
}
Expand All @@ -455,6 +463,9 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc

The `linkStyle` property is used to customize the style of the links. The list of all available style properties can be found in the [Echarts documentation](https://echarts.apache.org/en/option.html#series-lines.lineStyle).

`nodePopup` displays a Leaflet popup when a map node is clicked. Set `show` to `true` to enable it, `content` can be a function which returns and HTML element, or `null` to use the default node details. Use `config` for Leaflet popup options and `onOpen` for a async callback after the popup opens.
**Note:** For async `content`, only the latest resolved request opens a popup, earlier requests are ignored but not cancelled.

- `mapTileConfig`

The configuration for the map tiles. You can use multiple tiles by passing an array of tile configurations.
Expand Down
136 changes: 126 additions & 10 deletions public/example_templates/netjsonmap-indoormap-overlay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,30 @@
#indoormap-container .njg-container .hidden .sideBarHandle {
left: 35px;
}
.njg-container .njg-sideBar {
Copy link
Copy Markdown
Member

@nemesifier nemesifier May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I comment out this, I see no difference. What does this do?

Copy link
Copy Markdown
Member Author

@dee077 dee077 May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This hides the sidebar
To hide it, we need to make it display none and pass an empty onClickElement to override the default configurations coming from the config

display: none;
}
.njg-container .leaflet-popup-tip-container {
Comment thread
dee077 marked this conversation as resolved.
bottom: -3.5%;
}
.njg-container .leaflet-popup-tip {
box-shadow: none;
}
.njg-container .default-popup .njg-popup-button-container {
text-align: center;
}
.njg-container .default-popup .njg-popup-button {
padding: 6px 12px;
border: none;
border-radius: 5px;
background-color: black;
color: white;
cursor: pointer;
margin-top: 5px;
}
.njg-container .default-popup .njg-popup-button:hover {
background-color: rgb(85, 85, 85);
}
</style>
</head>
<body>
Expand All @@ -95,6 +119,16 @@
},
},
baseOptions: {media: [{option: {tooltip: {show: true}}}]},
nodePopup: {
show: true,
content: createCustomPopup,
config: {
closeOnClick: false,
autoPan: true,
autoPanPadding: [25, 25],
offset: [-8, -8],
},
},
},
bookmarkableActions: {
enabled: true,
Expand All @@ -113,11 +147,7 @@
});
return data;
},
onClickElement(type, data) {
if (type === "node") {
openIndoorMap();
}
},
onClickElement() {},
});
netjsonmap.setUtils({
// Added to open popup for a specific location Id in selenium tests
Expand Down Expand Up @@ -154,6 +184,67 @@
// needed for selenium tests
window._geoMap = netjsonmap;

function getIndoorMapFragment() {
let decodedHash = "";
try {
decodedHash = decodeURIComponent(
window.location.hash.replace(/^#/, ""),
);
} catch (err) {
return null;
}
const fragments = decodedHash.split(";").filter(Boolean);

return fragments.find((fragment) => {
const params = new URLSearchParams(fragment);
return params.get("id") === "indoorMap";
});
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}
if (getIndoorMapFragment()) {
openIndoorMap();
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

function createCustomPopup(node) {
const popupContent = document.createElement("div");
popupContent.classList.add("default-popup");
const location = node?.location || node?.properties?.location;
const fields = {
name: node?.name,
id: node?.id,
label: node?.label,
location: location
? `${location.lat.toFixed(8)}, ${location.lng.toFixed(8)}`
: null,
};
Object.keys(fields).forEach((key) => {
const value = fields[key];
if (!value) {
return;
}
const item = document.createElement("div");
item.classList.add("njg-tooltip-item");
const keyLabel = document.createElement("span");
keyLabel.classList.add("njg-tooltip-key");
keyLabel.textContent = key;
const valueLabel = document.createElement("span");
valueLabel.classList.add("njg-tooltip-value");
valueLabel.textContent = String(value);
item.appendChild(keyLabel);
item.appendChild(valueLabel);
popupContent.appendChild(item);
});
const buttonContainer = document.createElement("div");
buttonContainer.classList.add("njg-popup-button-container");

const button = document.createElement("button");
button.classList.add("njg-popup-button");
button.textContent = "Open Floorplan";
buttonContainer.appendChild(button);
popupContent.appendChild(buttonContainer);
button.addEventListener("click", () => openIndoorMap());
return popupContent;
}

function createIndoorMapContainer() {
const container = document.createElement("div");
container.id = "indoormap-container";
Expand All @@ -180,10 +271,13 @@
onClose();
}
container.remove();
window._indoorMap = null;
});
}

function openIndoorMap() {
if (window._indoorMap) {
return window._indoorMap;
}
let indoorMapContainer = document.getElementById("indoormap-container");
if (!indoorMapContainer) {
indoorMapContainer = createIndoorMapContainer();
Expand Down Expand Up @@ -211,6 +305,16 @@
animation: false,
},
baseOptions: {media: [{option: {tooltip: {show: true}}}]},
nodePopup: {
show: true,
content: null,
config: {
closeOnClick: false,
autoPan: true,
autoPanPadding: [25, 25],
offset: [-8, -8],
},
},
},
bookmarkableActions: {
enabled: true,
Expand Down Expand Up @@ -254,12 +358,14 @@

const mapOptions = this.echarts.getOption();
// Refer netjsonmap-indoormap.html for full explanation of this workaround
mapOptions.series[0].data.forEach((data) => {
mapOptions.series[0].data.forEach((data, index) => {
const node = data.node;
const px = Number(node.location.lng);
const py = -Number(node.location.lat);
const nodeProjected = L.point(topLeft.x + px, topLeft.y + py);
const nodeLatLng = map.unproject(nodeProjected, zoom);
this.data.nodes[index].location = nodeLatLng;
this.data.nodes[index].properties.location = nodeLatLng;
node.location = nodeLatLng;
node.properties.location = nodeLatLng;
data.value = [nodeLatLng.lng, nodeLatLng.lat];
Expand Down Expand Up @@ -302,6 +408,9 @@
map.setMaxBounds(bnds);
map.invalidateSize();
},
// Empty onclick needed to override the default coming from config
// to the netjsongraph sidebar
onClickElement: function () {},
},
);
indoor.setUtils({
Expand Down Expand Up @@ -337,9 +446,16 @@
const popstateHandler = () => {
const fragments = indoor.utils.parseUrlFragments();
const id = indoor.config.bookmarkableActions.id;
if (!fragments[id]) {
indoorMapContainer.remove();
window.removeEventListener("popstate", popstateHandler);
if (fragments[id]) {
if (!document.getElementById("indoormap-container")) {
openIndoorMap();
}
} else {
const container = document.getElementById("indoormap-container");
if (container) {
container.remove();
window._indoorMap = null;
}
}
};
window.addEventListener("popstate", popstateHandler);
Comment thread
dee077 marked this conversation as resolved.
Expand Down
28 changes: 28 additions & 0 deletions src/css/netjsongraph.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,34 @@
font-size: 18px;
}

.njg-container .default-popup {
padding: 18px;
}
.njg-container .default-popup .njg-tooltip-item {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: 14px;
}

.njg-container .default-popup .njg-tooltip-item:last-child {
margin-bottom: 0;
}

.njg-container .default-popup .njg-tooltip-key {
flex-basis: 45%;
font-weight: 600;
text-transform: capitalize;
color: black;
}

.njg-container .default-popup .njg-tooltip-value {
flex: 1;
overflow-wrap: anywhere;
word-break: normal;
color: black;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}

@media only screen and (max-width: 850px) {
.njg-container .njg-sideBar {
top: 0;
Expand Down
9 changes: 9 additions & 0 deletions src/js/netjsongraph.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,15 @@ const NetJSONGraphDefaultConfig = {
},
],
},
nodePopup: {
show: false,
content: null,
config: {
autoPan: true,
autoPanPadding: [25, 25],
offset: null,
},
},
},
mapTileConfig: [
{
Expand Down
Loading
Loading