Home
What is pinboard (@phila/pinboard in npmjs.com)?
pinboard is a framework for creating apps for investigating a single data layer in great detail. It has a refine panel along the top, which you can use to filter some of the pins and data off of the app. It also shows a map panel on the right, and a list of pins on the left, which can be opened and closed to show more data about the pin.
The source code is all ES6 JavaScript, and uses the Vue framework.
This project is very similar to the project mapboard. Many gaps in this wiki may be filled by information from the mapboard wiki, especially the section on setting up a Vue Project.
A number of other github projects were forked and used in development - see more infomation about them here.
The following tutorial from the Mapboard wiki will walk you through the basic steps of adding a pinboard component to an existing application:
The following pages include all instructions for creating an app using pinboard:
| wiki page | subject |
|---|---|
| main.js | general info about how to fill out a configuration file (main.js) |
| Refine Panel |  |
| Locations Panel |  |
| Map Panel |  |
| i18n |  |
| alerts |  |
| customComps |  |
| Base Configuration | an option for simplifying if you plan to make multiple pinboard apps |
| Font Awesome | how to use both free and pro icons |
pinboard uses components and functions from other libraries created by the City of Philadelphia, including:
| Library | GitHub | GitHub wiki | npmjs.com |
|---|---|---|---|
| pvm | phila-vue-mapping | wiki | @phila/vue-mapping |
| pvd | phila-vue-datafetch | wiki | @phila/vue-datafetch |
| phila-ui | phila-ui | wiki | @phila/phila-ui |
See notes about general @phila vue app development here
See notes specific to pinboard development here