Skip to content

[examples] Added UI guidance to JSONDataUpdate override example #494

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

Closed
Adityashandilya555 wants to merge 3 commits into from
Closed

[examples] Added UI guidance to JSONDataUpdate override example #494

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
df25ab3
[examples] Added UI guidance to JSONDataUpdate override example #492
Adityashandilya555 Jan 23, 2026
9319f23
Merge branch 'master' into add-ui-guidance-override-example
Adityashandilya555 Jan 23, 2026
f502b36
Merge branch 'master' into add-ui-guidance-override-example
Adityashandilya555 Jan 23, 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
37 changes: 22 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Netjsongraph.js: Examples</title>
Expand Down Expand Up @@ -33,12 +33,13 @@
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color var(--transition-speed) ease,
color var(--transition-speed) ease;
transition:
background-color var(--transition-speed) ease,
color var(--transition-speed) ease;
}

body {
font-family: 'Inter', sans-serif;
font-family: "Inter", sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
Expand Down Expand Up @@ -141,7 +142,9 @@ <h1>NetJSONGraph.js Example Demos</h1>

<main>
<div class="cards">
<a href="./examples/netjsongraph.html" target="_blank">Standard graph</a>
<a href="./examples/netjsongraph.html" target="_blank"
>Standard graph</a
>
</div>
<div class="cards">
<a href="./examples/netjsongraph-elementsLegend.html" target="_blank"
Expand Down Expand Up @@ -212,7 +215,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
>
</div>
<div class="cards">
<a href="./examples/netjsonmap-nodeTiles.html" target="_blank"
<a href="./examples/netjsonmap-overrideData.html" target="_blank"
>JSONDataUpdate using override option</a
>
</div>
Expand Down Expand Up @@ -249,23 +252,27 @@ <h1>NetJSONGraph.js Example Demos</h1>
</main>

<script>
const themeToggle = document.querySelector('.theme-toggle');
const themeToggle = document.querySelector(".theme-toggle");
const htmlElement = document.documentElement;

// Check for saved theme preference or system preference
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const savedTheme = localStorage.getItem("theme");
const systemPrefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;

if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
htmlElement.classList.add('dark-mode');
if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
htmlElement.classList.add("dark-mode");
}

themeToggle.addEventListener('click', () => {
htmlElement.classList.toggle('dark-mode');
themeToggle.addEventListener("click", () => {
Copy link
Member

@nemesifier nemesifier Jan 24, 2026

Choose a reason for hiding this comment

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

These changes are being handled in #497.

htmlElement.classList.toggle("dark-mode");

// Save theme preference
const currentTheme = htmlElement.classList.contains('dark-mode') ? 'dark' : 'light';
localStorage.setItem('theme', currentTheme);
const currentTheme = htmlElement.classList.contains("dark-mode")
? "dark"
: "light";
localStorage.setItem("theme", currentTheme);
});
</script>
</body>
Expand Down
41 changes: 41 additions & 0 deletions ...ample_templates/netjsonmap-nodeTiles.html → ...le_templates/netjsonmap-overrideData.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,48 @@
<!-- theme can be easily customized via css -->
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div
id="info-banner"
style="
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(52, 73, 94, 0.95);
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
z-index: 1000;
max-width: 90%;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
Copy link
Member

@nemesifier nemesifier Jan 23, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

I think it would be good to move all the CSS logic to one file so it can be shared between different examples which need further explanation.

Copy link
Member

@nemesifier nemesifier Jan 24, 2026

Choose a reason for hiding this comment

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

Can we extract this to a dedicated CSS so we can reuse it across different examples.

Can you also add a close button?

"
>
<strong>JSONDataUpdate - Override Mode:</strong> This example demonstrates
replacing existing map data with new data based on zoom level. <br /><em
>Try zooming in to levels 4 and 6 to see the data being replaced.</em
>
</div>
<div id="map-container"></div>
<script type="text/javascript">
/*
The demo is used to show how to use the `JSONDataUpdate` function to update data.
Expand All @@ -29,6 +69,7 @@
6: "3.json",
},
map = new NetJSONGraph("../assets/data/netjsonNodeTiles/1.json", {
el: "#map-container",
render: "map",
// set map initial state.
mapOptions: {
Expand Down
Loading