Skip to content

Commit

Permalink
feat(navbar): basemap selector added to navbar
Browse files Browse the repository at this point in the history 
Closes #64
  • Loading branch information
@DamonU2
DamonU2 committed Jul 16, 2024
1 parent 5a2880b commit defe1b8
Show file tree
Hide file tree
Showing 14 changed files with 374 additions and 165 deletions.
11 changes: 10 additions & 1 deletion packages/geoview-core/public/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
},
"mapnav": {
"arianavbar": "Vertical button group for map navigation",
"basemap": "Change basemap",
"fullscreen": "Full screen",
"home": "Reset to initial view",
"zoomIn": "Zoom in",
Expand All @@ -24,6 +25,14 @@
"scale": "Toggle between scale and resolution",
"location": "Zoom to my location"
},
"basemaps": {
"select": "Select a basemap",
"default": "Default",
"transport": "Transport",
"imagery": "Imagery",
"simple": "Simple",
"nogeom": "None"
},
"mapctrl": {
"rotation": {
"resetRotation": "Reset Rotation",
Expand Down Expand Up @@ -212,4 +221,4 @@
"resizeTooltip": "Resize",
"noTab": "No tab"
}
}
}
11 changes: 10 additions & 1 deletion packages/geoview-core/public/locales/fr/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
},
"mapnav": {
"arianavbar": "Groupe de buttons vertical pour navigation sur la carte",
"basemap": "Changer la carte de base",
"fullscreen": "Plein écran",
"home": "Retour à la vue initiale",
"zoomIn": "Zoom avant",
Expand All @@ -24,6 +25,14 @@
"scale": "Basculer entre l'échelle et la résolution",
"location": "Zoom sur ma position"
},
"basemaps": {
"select": "Choisir une carte de base",
"default": "Défaut",
"transport": "Transport",
"imagery": "Imagerie Satellitaire",
"simple": "Simple",
"nogeom": "Aucun"
},
"mapctrl": {
"rotation": {
"resetRotation": "Réinitialiser la rotation",
Expand Down Expand Up @@ -212,4 +221,4 @@
"resizeTooltip": "Redimensionner",
"noTab": "Pas d'onglet"
}
}
}
301 changes: 152 additions & 149 deletions packages/geoview-core/public/templates/add-panels.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,53 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Panels - Canadian Geospatial Platform Viewer</title>
<link rel="shortcut icon" href="./favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="./img/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<div class="header-table">
<table>
<tbody>
<tr>
<td><img class="header-logo" alt="logo" src="./img/Logo.png" /></td>
<td class="header-title">
<h1><strong>Add Panels</strong></h1>
</td>
</tr>
<tr>
<td><a href="./index.html">Main</a><br /></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>This page is used to showcase adding panels to the app-bar and adding panels and buttons to the navbar.
</td>
</tr>
</tbody>
</table>
</div>

<div class="toolbar">
<button class="add-appbar-panel-btn">Add Appbar Panel</button>
<button class="add-navbar-panel-btn">Add Navbar Panel</button>
<button class="add-navbar-button-btn">Add Navbar Button</button>
<input type="text" id="navbar-button-group-name" placeholder="Enter group name" value="groupName1" />
</div>
<div id="mapWM" class="geoview-map" data-lang="en" data-config="{
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Panels - Canadian Geospatial Platform Viewer</title>
<link rel="shortcut icon" href="./favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="./img/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<div class="header-table">
<table>
<tbody>
<tr>
<td><img class="header-logo" alt="logo" src="./img/Logo.png" /></td>
<td class="header-title">
<h1><strong>Add Panels</strong></h1>
</td>
</tr>
<tr>
<td><a href="./index.html">Main</a><br /></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>This page is used to showcase adding panels to the app-bar and adding panels and buttons to the navbar.</td>
</tr>
</tbody>
</table>
</div>

<div class="toolbar">
<button class="add-appbar-panel-btn">Add Appbar Panel</button>
<button class="add-navbar-panel-btn">Add Navbar Panel</button>
<button class="add-navbar-button-btn">Add Navbar Button</button>
<input type="text" id="navbar-button-group-name" placeholder="Enter group name" value="groupName1" />
</div>
<div
id="mapWM"
class="geoview-map"
data-lang="en"
data-config="{
'map': {
'interaction': 'dynamic',
'viewSettings': {
Expand All @@ -66,106 +68,107 @@ <h1><strong>Add Panels</strong></h1>
'components': ['overview-map'],
'corePackages': [],
'theme': 'geo.ca'
}"></div>
<p></p>

<button type="button" class="collapsible">Code Snippet</button>
<pre id="codeSnippet" class="panel"></pre>

<script src="codedoc.js"></script>
<script>
// initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
cgpv.init((mapId) => {
if (mapId === 'mapWM') {
// get add panel button element for WM map
var addAppbarPanelBtn = document.getElementsByClassName('add-appbar-panel-btn')[0];

// get the input for the group name
var navbarButtonGroupNameInput = document.getElementById('navbar-button-group-name');

// add app-bar panel btn click event handler
// button will open a panel on the app-bar
addAppbarPanelBtn.addEventListener('click', function (e) {
const button = {
id: 'AppbarPanelButtonId',
tooltip: 'Test',
tooltipPlacement: 'right',
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
};

const panel = {
panelId: 'AppbarPanelId',
title: 'Test',
content: `<div>Test content</div>`,
width: 200,
};

// call an api function to add a panel with a button in the default group
cgpv.api.maps['mapWM'].appBarApi.createAppbarPanel(button, panel, null);
});

// get add nav-bar panel button element for WM map
var addNavbarPanelBtn = document.getElementsByClassName('add-navbar-panel-btn')[0];
// add nav-bar panel btn click event handler
// button will open a panel on the nav-bar
addNavbarPanelBtn.addEventListener('click', function (e) {
const groupName = navbarButtonGroupNameInput.value;

if (groupName === '') {
alert('Enter a value group name');
return;
}
const button = {
tooltip: 'Test',
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
tooltipPlacement: 'left',
};

const panel = {
title: 'Panel Title',
content: `<div><p>Vestibulum in fringilla tortor. Aliquam placerat odio nec urna consequat tincidunt eu sit amet mauris.</p><p>Donec vestibulum tellus ex, a venenatis urna finibus quis. Sed venenatis nisi porttitor ex laoreet auctor. </p></div>`,
width: 400,
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarApi.createNavbarButtonPanel(button, panel, groupName);
});

// get add nav-bar button element for WM map
var addNavbarButtonBtn = document.getElementsByClassName('add-navbar-button-btn')[0];

// add nav-bar button btn click event handler
// button will call a function
addNavbarButtonBtn.addEventListener('click', function (e) {
const groupName = navbarButtonGroupNameInput.value;

if (groupName === '') {
alert('Enter a value group name');
return;
}

const button = {
tooltip: `Test (${groupName})`,
children: cgpv.react.createElement(cgpv.ui.elements.OpenInBrowserIcon),
tooltipPlacement: 'left',
onClick: function () {
alert('You clicked on a navbar test button');
},
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarApi.createNavbarButton(button, groupName);
});

}
});

// create snippets
window.addEventListener('load', () => {
createCodeSnippet();
createConfigSnippet();
});
</script>
</body>

</html>
}"
></div>
<p></p>

<button type="button" class="collapsible">Code Snippet</button>
<pre id="codeSnippet" class="panel"></pre>

<script src="codedoc.js"></script>
<script>
// initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
cgpv.init((mapId) => {
if (mapId === 'mapWM') {
// get add panel button element for WM map
var addAppbarPanelBtn = document.getElementsByClassName('add-appbar-panel-btn')[0];

// get the input for the group name
var navbarButtonGroupNameInput = document.getElementById('navbar-button-group-name');

// add app-bar panel btn click event handler
// button will open a panel on the app-bar
addAppbarPanelBtn.addEventListener('click', function (e) {
const button = {
id: 'AppbarPanelButtonId',
tooltip: 'Test',
tooltipPlacement: 'right',
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
};

const panel = {
panelId: 'AppbarPanelId',
title: 'Test',
content: `<div>Test content</div>`,
convertHtmlContent: true,
width: 200,
};

// call an api function to add a panel with a button in the default group
cgpv.api.maps['mapWM'].appBarApi.createAppbarPanel(button, panel, null);
});

// get add nav-bar panel button element for WM map
var addNavbarPanelBtn = document.getElementsByClassName('add-navbar-panel-btn')[0];
// add nav-bar panel btn click event handler
// button will open a panel on the nav-bar
addNavbarPanelBtn.addEventListener('click', function (e) {
const groupName = navbarButtonGroupNameInput.value;

if (groupName === '') {
alert('Enter a value group name');
return;
}
const button = {
tooltip: 'Test',
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
tooltipPlacement: 'left',
};

const panel = {
title: 'Panel Title',
content: `<div><p>Vestibulum in fringilla tortor. Aliquam placerat odio nec urna consequat tincidunt eu sit amet mauris.</p><p>Donec vestibulum tellus ex, a venenatis urna finibus quis. Sed venenatis nisi porttitor ex laoreet auctor. </p></div>`,
convertHtmlContent: true,
width: 400,
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarApi.createNavbarButtonPanel(button, panel, groupName);
});

// get add nav-bar button element for WM map
var addNavbarButtonBtn = document.getElementsByClassName('add-navbar-button-btn')[0];

// add nav-bar button btn click event handler
// button will call a function
addNavbarButtonBtn.addEventListener('click', function (e) {
const groupName = navbarButtonGroupNameInput.value;

if (groupName === '') {
alert('Enter a value group name');
return;
}

const button = {
tooltip: `Test (${groupName})`,
children: cgpv.react.createElement(cgpv.ui.elements.OpenInBrowserIcon),
tooltipPlacement: 'left',
onClick: function () {
alert('You clicked on a navbar test button');
},
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarApi.createNavbarButton(button, groupName);
});
}
});

// create snippets
window.addEventListener('load', () => {
createCodeSnippet();
createConfigSnippet();
});
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/geoview-core/src/api/config/types/config-constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export const CV_DEFAULT_MAP_FEATURE_CONFIG = Cast<MapFeatureConfig>({
extraOptions: {},
},
theme: 'geo.ca',
navBar: ['zoom', 'fullscreen', 'home'],
navBar: ['zoom', 'fullscreen', 'home', 'basemap-select'],
footerBar: {
tabs: {
core: ['legend', 'layers', 'details', 'data-table'],
Expand Down
4 changes: 2 additions & 2 deletions packages/geoview-core/src/api/config/types/config-validation-schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"TypeValidNavBarProps": {
"description": "Valid values for the navBar array.",
"additionalProperties": false,
"enum": ["zoom", "fullscreen", "home", "location"]
"enum": ["zoom", "fullscreen", "home", "location", "basemap-select"]
},
"TypeNavBarProps": {
"description": "Controls available on the navigation bar.",
Expand All @@ -100,7 +100,7 @@
"items": {
"$ref": "#/definitions/TypeValidNavBarProps"
},
"default": ["zoom", "fullscreen", "home"],
"default": ["zoom", "fullscreen", "home", "basemap-select"],
"minItems": 0
},
"TypeValidFooterBarTabsCoreProps": {
Expand Down
Loading

0 comments on commit defe1b8

Please sign in to comment.