Home
What is mapboard (@phila/mapboard in npmjs.com)?
mapboard is a drop-in JavaScript component for visualizing and exploring data about addresses. It can have either of the following two elements alone, or both side-by-side: the map panel and topic panel.
The map panel is an interactive map for 1) navigating to an address and 2) displaying features of interest such as the bounds of the property, nearby facilities, etc.
The topic panel is used to display sections of data grouped by subject matter into "topics". A topic could be property ownership, building permits, nearby schools, or recent crime in the area.
Using the mapboard framework to create a mapping app or drop-in is done by creating a config file (main.js), or pair of config files (main.js and a base config). All instructions for how to create this configuration are below.
mapboard is for creating apps that present data related to a single address - a user searches for an address with the address bar, or clicks on a parcel on the map, and data about that address is returned. Since the ability to click on parcels is the main function of the map, a developer using mapboard is not given the option of putting other objects on the map that are clickable.
2 of the main sections of an individual mapboard app's config are map layers and dataSources.
A developer can set up a mapboard app with a map layer, and legend for that layer, showing vector data that spans the entire city - the points, lines, or polygons will show on the map. However, the shapes will not be clickable, and there will be no way to show data about the individual features in the topics panel.
Alternatively, you can add a spatial data as a dataSource. If you do so, every piece of data will be stored in the app's state. Since the mapboard framework is about data related to individual addresses, and adding citywide data (not related to the geocoded address) as a dataSource could add thousands of data points to the state (which would bog the app down), there is no way to do so. You CAN add 'nearby' points, lines, or polygons (measured in feet) as a dataSource, using dataSources with type 'http-get-nearby' or 'esri-nearby'. In these cases, all features found will show on the map and be usable as data in the topics panel.
The following pages include details and links to further details in other libraries about how to include components in your mapboard instance:
click here to see info about AWS.
mapboard uses components and functions from other packages created by the City of Philadelphia; these packages are all dependencies of the mapboard package, so they are automatically included in any project that uses mapboard. They are:
| Library | GitHub | GitHub wiki | npmjs.com |
|---|---|---|---|
| pvm | phila-vue-mapping | wiki | @phila/vue-mapping |
| pvc | phila-vue-comps | wiki | @phila/vue-comps |
| pvd | phila-vue-datafetch | wiki | @phila/vue-datafetch |
See notes about development here