shadcn.io is not affiliated with official shadcn/ui
School Districts Map Block for React
A drawn county cut into five school zones with a draggable Home pin; the zone the home sits in gives the zoned school, its enrolment and class size, and the two nearest alternatives.
Installation
Overview
Tell families which school an address belongs to, with this school districts map for React with Base UI. Classwick, a school-zone lookup, draws the invented county of Tarrowdale as an SVG map cut into five zones that share every border, with a school pin in each and a house-shaped Home pin. Drag Home with a mouse, pen or finger, or focus it and use the arrow keys, six units a step and thirty with Shift, and press Escape to put it back. The zone the home sits in (found by ray casting on the zone's outline) is the zoned school: the card beside the map gives its zone, pupils on roll, class size and the year the zone was drawn, and lists the two nearest schools outside the zone with their distance. Crossing a border changes the answer and the polite message says so. The five schools are also listed as buttons under the map; pressing one outlines its zone. For school-finder, property and local-government apps.
FAQ
How does it know which zone the home is in?
Each school in SCHOOLS carries the outline of its zone as a list of points in the drawing's 480 by 360 units. inOutline casts a ray from the home and counts the edges it crosses, and zonedOf returns the school whose outline holds the point. Neighbouring zones borrow the same corner points, so every border is shared and a home is in exactly one zone.
How do I move Home without a mouse?
Focus the Home pin with Tab. The arrow keys move it 6 units, Shift with an arrow moves it 30 and Escape returns it to where it started. It is named by its zone and the zoned school, and a hint lists the keys. After it rests, the polite message gives the zoned school, or says that a border was crossed and which school is now zoned.
How do I use my own zones and schools?
Edit SCHOOLS: a name, a two-letter code, the zone name, the enrolment, the class size, the year, a pin position and the zone's outline. Keep shared corners as shared constants so neighbouring zones meet exactly. In your app, take the zone polygons from your district's boundary data and project them onto your map.
Can I rely on the figures?
No. The county, the schools and every figure are invented, the caption says "Sample data, not advice", and the drawing is not to scale. School zoning decisions belong to the district, so link to its official lookup from the card.
What stays local in the demo, and how do I wire it up?
All of it: no address is geocoded and nothing asks for a location. In your app, geocode the address when the user enters it, place the pin, and replace zonedOf with a point-in-polygon query against your zone data; the card and the status line can stay as they are.