WebgeoDa Scaffolding
More Maps. Fewer Platforms.
1.0.0
1.0.0
  • About Webgeoda Scaffolding
  • Data Concepts
  • Getting Started
  • Libraries and Dependencies
  • File Structure Overview
  • Data
    • Importing Data
    • Accessing Exernal Data
    • Making an API
  • Variables
    • Overview
    • Continuous
    • Categorical
    • LISA
    • Colors
    • Variable Specification
  • Static Pages
    • Adding and Customizing Pages
    • Styling and CSS Modules
  • Map Customization
    • Changing the Background Map Tiles
    • Visualization Modes
    • Change Tooltip and Data Sidebar Information
    • Modifying Layers
  • Widgets
    • Data Exploration Widgets
    • Widget Layouts
  • Deploying
    • Netlify
    • Vercel
    • Github Pages (or elsewhere)
  • Advanced
    • jsGeoDa
    • Next.JS
    • Alternate Map Views
    • Binary Data Formats
Powered by GitBook
On this page
  • Starting a New Page
  • Updating the Nav Bar

Was this helpful?

  1. Static Pages

Adding and Customizing Pages

Static pages are extremely useful to contextualize the data presented in your WebGeoDa dashboard. For example, you could include documentation on your data sources, potential limitations, citations, and a data download. Or add a form for users to report data issues and suggestions!

Starting a New Page

At its core, here's all you need for a page:

// pages/myPage.js
import Head from 'next/head'

export default function MyPage() {
    return (
        <div>
            <Head>
                <title>My Page:: WebGeoDa Scaffolding</title>
                <meta name="description" content="A Really Good Page." />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            Ahoy, Globe!
        </div>
    )
}

Each page script starts with any imports, here we're importing the <Head> component from next/head. Then, your main function for that page, denoted with export default. You can have any additional logic you need for the page in this function and any additional helper functions outside the function as well.

Updating the Nav Bar

Add or remove <MenuLink> elements in the navbar, found in components/layout/MainNav.js. Each of these represents a link in the navigation menu, and the href property leads to the page's route (eg. "/map"). Be sure to include as='a' in the <MenuLink> element for expected behavior:

// components/layout/MainNav.js
    // other component stuff...
    <Menu>
        <MenuButton>
            Menu <span aria-hidden className={styles.hamburger}>☰</span>
        </MenuButton>
        <MenuList id="menu">
            <MenuLink as="a" href="/">
                Home
            </MenuLink>
            <MenuLink as="a" href="/map">
                Map
            </MenuLink>
            <MenuLink as="a" href="/about">
                About
            </MenuLink>
        </MenuList>
    </Menu>
PreviousVariable SpecificationNextStyling and CSS Modules

Last updated 3 years ago

Was this helpful?

The return statement has the bulk of what we're looking for here. Instead of writing traditional HTML, and React use a mash of HTML and XML called . It can interpret traditional HTML elements, such as div, but also supports custom elements and components. In the example above the <Head> component we imported allows us to modify the meta information on the page, like the title, description, favicon, and so on. Past that head

Next.js
JSX