Giter VIP home page Giter VIP logo

gannett's Introduction

Material UI - Next.js Pages Router example

How to use

Download the example or clone the repo:

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-nextjs-pages-router
cd material-ui-nextjs-pages-router

Install it and run:

npm install
npm run dev

or:

Edit on StackBlitz

Edit on CodeSandbox

The idea behind the example

Note: This example is set up to use the Next.js Pages Router. As of Next.js 13.4, the newer App Router pattern is stable. We recommend starting new projects with the Material UI with Next.js (App Router) example unless you need (or prefer) the Pages Router.

The project uses Next.js, which is a framework for server-rendered React apps. It includes @mui/material and its peer dependencies, including Emotion, the default style engine in Material UI v5. If you prefer, you can use styled-components instead.

The Link component

The example folder provides an adapter for the use of Next.js's Link component with Material UI. More information in the documentation.

What's next?

You now have a working example project. You can head back to the documentation and continue by browsing the templates section.

gannett's People

Contributors

nk9 avatar

Watchers

 avatar  avatar

gannett's Issues

Allow users to view street names

Right now, it's not possible to see street names. In order to have a text string follow a LineString like one expects on a map, MapBox requires LineStrings. However, we're using MultiLineStrings because the data in the shapefiles is all chopped up into each segment along a block (basically, any point where two roads intersect).

Possible solutions:

  1. Merge all MultiLineStrings into LineStrings. This would require some way to determine which points are "close enough" to be merged. There's shapely.ops.linemerge (discussion on StackOverflow), though that would require more work because a) I'm not sure how precise the overlapping points are, and b) there are certainly discontiguous street segements. So we'd probably end up with more streets.
  2. Hope that MapBox starts supporting string labels for MultiLineString. 😬
  3. Add a popover to the existing street MultiLineStrings, presumably using the hover trick.

3 is the most plausible solution.

Make UI responsive

Key things:

  • Change the year picker to a popup button when width is sufficiently small
  • Put the info panel below (maybe in a drawer?) on a phone

Search box

  • EDs
  • Metros
  • Roads

When a user successfully searches and picks a result, she should be taken there. This implies that we need the road layer. #7

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.