vue3-pinboard

Vue3 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 opened and closed to show more data about the pin.

The package is in npm as @phila/pinboard.

It is used to create multiple apps for the City of Philadelphia, including:

|Site|GitHub|
|---|---|
|Primary care finder|repo|
|Food and meal finder|repo|
|Resources for immigrants|repo|
|Resources for recycling and donation|repo|

!Phone_List_Example
!Phone_Map_Example
!Desktop_Example

Setup

npm install

$3

To set up an app that uses @phila/pinboard, create a vue3 project, and do npm install @phila/pinboard.

From an app that uses @phila/pinboard, do npm link @phila/pinboard and then npm run dev, and changes you make to vue3-pinboard will be visible in the dev app running.

Deploying

Create pull request for changes and merge into main branch. run npm version patch, npm version minor or npm version major to bump the version number up and then git push --tags for github actions build to kick-off.

Release Notes

$3

* fixes button and link styles

$3

* Pinboard now loads common external scripts itself instead of parent apps to do the imports

$3

* fix issue where toggle switch failed to render

$3

* added small margin to top of toggles

$3

* fixes rendering issue with toggle slider when zooming

$3

* adds @fortawesome/free-brands-svg-icons

$3

* uses pinia 3.0.4

$3

* upgrades vue, vue-router, and vue-i18n

$3

* upgrades dev dependencies since they cause conflicts with individual projects that import vue3-pinboard

$3

* fixes bug where same keyword could be added to query params repeatedly

$3

* fixed bug where closing keyword box closed all boxes

$3

* restores searchbox fixes

$3

* default value for toggleKey in TooltipCHeckbox

$3

* fixes error where keyword serch boxes could not be closed

$3

* fix for categoryField refine apps

$3

* adds (back?) the ability to add a tooltip to a label of a radio button set in the refine panel

$3

* adds missing params to printView, fixes bug with site count

$3

* makes print/share section opt out instead of opt in
* fixes bug with camera placement in cyclomedia
* fixes bug with opening cyclomedia after using print view

$3

* reduced busy work

$3

* fixes a problem where tags would no render under certain circumstances

$3

* allows alternate text for certain elements

$3

* fixes attempt to translate content that did not need translation

$3

* fixes results count for using toggleable data

$3

* breaking change - projects now need to reference pinboard's index.css instead of style.css

$3

* allows adding a toggle to a group of checkboxes in multiple field groups apps

$3

* fixes bug where title loads in a language and can't be changed

$3

* fix for the zipcodes service changing from uppercase to lowercase

$3

* sets document.title on app load, so that it has the same title as the app header

$3

* fixed translation for selected boxes

$3

* changed the way the translation files store languages

$3

* refactor of the RefinePanel vue component

$3

* passes useRoute and useRouter into pinboard object

$3

* allows hiding the print-share-section in cards

$3

* allows for reconfiguring of the data object for capital projects

$3

* fix for all categoryField_array apps

$3

* allows functions in footerLinks

$3

* makes app title in browser tab change with changes in language

$3

* changes for filtering in other languages

$3

* fixes bug with opening cyclomedia

$3

* fixes bug with geolocation

$3

* uses 2024 imagery

$3

* adds alert banner back into project

$3

* successfully adds deep-merged i18n messages so that ExpandCollapseContent.vue of a project can use them

$3

* fixes Cyclomedia locale bug

$3

* adds translations for address search bar combos

$3

* adds 6 more languages to the language base

$3

* merges changes from fix/translate-keywords
* fixes underlining of languages in dropdown

$3

* hides i18n selector in print view if it is set to hidden

$3

* adds half-second timeout to auto print command in print view

$3

* fixes capitalization of Select all

$3

* fixes capitalization of ZIP code in i18n file

$3

* adds underlines to links except the title and footer

$3

* adds ability to use customRouterView in banner

$3

* fixes bug with subtitle in print view

$3

* fixes distance dropdown when lang switches, adds translations of many languages

$3

* fixes for allowing search of multiple array fields
* adds translations of 1 possible searchbar placeholder value to i18n

$3

* bug-fix: removes checkboxes in mobile

$3

* breaking change - allows no app subtitle when using i18n for whole app
* allows links in alert banner

$3

* makes airtable endpoint work

$3

* makes fuse distance 200

$3

* uses fuse.js 7.1.0

$3

* fixes bug with buffer search now that all points (even without geometry) are accepted

$3

* opens cyclomedia on city hall if the current data point doesn't have map coordinates

$3

* fixes for data for ost finder

$3

* allows data from carto to be displayed, even if there is no geometry

$3

* fixes small refine bug with case where a point has no services offered

$3

* allows geojson data from arcgis to be displayed, even if there is no geometry

$3

* fixes bug with refine panel radio buttons in categoryField_value apps

$3

* fixes placement of ExpandCollapse + icon in mobile
* adds clearAllClicked flag to MainStore, so that RefinePanel.vue watch selectedArray does not change route if it is true

$3

* fixes automatic holiday banner

$3

* fixes removing zipcode from map if you hit back button

$3

* fixes README for new vue3-pinboard repo

$3

* sets up MainStore.filterChangeCounter to remove map popups if the popup is related to a point that is filtered off the map

$3

* fixes back button for removing a keyword

$3

* fixes bug in push process

$3

* does release in production mode, so that the console logs are hidden

$3

* uses vue3

$3

These are not listed, as this was the development in upgrading pinboard from vue2 to vue3
All versions previous to this were in the original repo pinboard

$3

* comments out sorting of currentData in Map.vue, since it can be done in the data query

$3

* fix for backwards compatibility for recycling finder
* allows sorting the data for the map, so you can put some points above others (when they are doubled)

$3

* adds a fix for a tooltip for a multiple refine group

$3

* adds a fix to Fuse for handling keyword matches

$3

* merges all work for setting up lactation-spaces-finder

$3

* allows sizing the logo

$3

* fixes bug in MapPanel.vue that was causing a console error when loading with a pin in the url

$3

* uses @phila/vue-datafetch that adds headers to http request

$3

* allows forced message in holiday banner

$3

* makes "forceBanner" option work for a week after a holiday

$3

* sets up "forceBanner" option for holidays, which overrules the automatic holiday banner option

$3

* incorporates @phila/vue-datafetch 2.2.16, which has a small bugfix for pinboard after major changes for mapboard

$3

* small bugfixes for running business resource finder off 1.2.x release

$3

* sets up holiday banner for translating holiday names

$3

* uses new gtag id for GA4 for 2nd time

$3

* small fix for holiday banner

$3

* reverts gtag change
* sets up automatic holiday banner

$3

* changes gtag to use phila.gov GA4 id

$3

* bugfix for singular section titles in expand-collapses

$3

* releases many features created during user testing

$3

* adds css for alert modal

$3

* fixes bug with using maplibre

$3

* uses @phila/vue-mapping with updated maplibre and @phila/vue-datafetch with updated geoserver

$3

* fixes bug with apps that do not use circlemarkers

$3

* fixes bug with using tab and spacebar to open refine panel

$3

* updates packages

$3

* undoes change to filtering of categoryField_array apps

$3

* fixes bug with filtering of categoryField_array apps

$3

* fixes gtag for language selector

$3

* changes terminology from from dependent/independent to checkbox/radio
* fixes for screen readers

$3

* ran package updates

$3

* allows website text to wrap in default cards

$3

* cleans up css of default cards

$3

* moves more css into main project
* does not conditionally import any @phila/vue-mapping elements

$3

* moves css from primary care finder into src/assets/scss/expandCollapse.scss

$3

* fixes refine to filter in default i18n files

$3

* further bug fix for translating tags in refine panel

$3

* makes default link behavior to open a new tab

$3

* bug fix for translating tags in refine panel

$3

* bug fix for icon size

$3

* fixes for refine panel css spacing

$3

* fixes css of Apply Filters button in Mobile

$3

* fixes appLink

$3

* fix for initial services routing bug

$3

* ui changes in refine panel

$3

* cleans up searchBar code

$3

* splits i18n file into separate language files

$3

* opens refine panel when view list is clicked if not mobile
* makes independent groups (radio buttons) also affect refine results

$3

* fixes bug with finding languages for i18n

$3

* allows routing by language selected

$3

* fixes z-index of address search bar to be beneath the language dropdown

$3

* fixes bug where wrong expandCollapse stays open when you search an address

$3

* allows address marker color to be settable

$3

* changes color of address marker to purple, fixes length of address search bar issues

$3

* fixes sorting of locations alphabetically and numerically

$3

* fixes padding in non-mobile refine panel

$3

* fixes padding in mobile refine panel

$3

* fixes refine panel issues for categoryField_value app like Food Finder

$3

* cleans up major mobile ux issues

$3

* fixes bug with app that has no tooltips

$3

* fixes bug with tooltips for larger checkbox label

$3

* fixes tooltips for multiline option

$3

* makes tooltips in checkbox category label work

$3

* removes old i18n Banner entirely, fixes bug with header placement on phila-ui lang selector

$3

* fixes bug with categoryField_value apps and routing

$3

* uses phila-ui for i18n
* makes tooltips in mobile permanent

$3

* cleans up mobile screen css

$3

* allows retractableRefine option

$3

* fixes small issues with accessibility

$3

* fixes issues with z-index of input over map, placement of i18n globe

$3

* allows @phila/phila-ui radio buttons in refine panel that work with i18n

$3

* makes it so that the address/keyword input can be for addresses only

$3

* fixes bug with loading app filtered when coordinates are projected

$3

* uses pvm 3.1.4, fixing z-index issues
* fixes longstanding bug with loading the app filtered and then unfiltering

$3

* uses pvm 3.1.3, fixes placement of text in mapbox popups

$3

* uses pvm 3.1.2 which fixes circle markers and popups
* cleans up old scss and vestigial files

$3

* uses new commits of pvd and pvm
* fixes scrollbar issues

$3

* fixes tag searching

$3

* uses @phila/phila-ui, stops using @phila/vue-comps

$3

* fixes refine for Multiple Field Groups apps

$3

* removes undefined boxes from refine panel

$3

* fixes bug in RefinePanel.vue if refine value is a string

$3

* adds fuse.js, uses it on keyword search

$3

* hides tags label in default expand-collapse-content if there are none

$3

* allows tags types to be set in config

$3

* makes any categoryField_value app use radio buttons instead of checkboxes
* makes filtering using multiple checkboxes use an AND query, to reduce results if more boxes are clicked

$3

* fixes githubs actions for push to npmjs

$3

* uses pvc 2.1.19
* uses pvd 1.4.4
* uses github actions for push to npmjs

$3

* changes for adding sections to the voting site

$3

* adds "cityOfPhiladelphia" to pinboard built in i18n values

$3

* makes vue-gtag work for all resource finders

$3

* adds vue-gtag package and tags events

$3

* uses upgraded vue libraries:
* @phila/vue-mapping 2.2.9
* @phila/vue-comps 2.1.15
* @phila/vue-datafetch 1.4.3

$3

* fixes issues with i18n when you use fewer languages

$3

* updates packages, small changes for voting finder

$3

* uses pvd and pvm releases that do not import leaflet unless needed

$3

* fixes bugs with i18n in refine panel, info circles in refine panel

$3

* fixes bug with point color

$3

* fixes css issues

$3

* fixes bug with missing latlng

$3

* fixes bug with font awesome marker placement in mapbox map

$3

* fixes keyword search when keyword is the first option

$3

* fixes keyword search when keyword is the only option

$3

* fixes search by keywords

$3

* moves up minor version to test npm

$3

* uses mapbox FontAwesomeMarker.vue from @phila/vue-mapping

$3

* fixes issues with data rows that are missing geometries

$3

* uses new releases of vue packages, uses airtable sources, mapbox styles hosted by mapbox

$3

* uses pvm 2.1.5, with many new mapbox features added

$3

* upgrades all packages

$3

* adds to footer

$3

* adds all kinds of alert functionality

$3

* fixes tiny bug with custom greeting

$3

* fixes small css issues and bugs

$3

* fixes small issues to make new changes compatible with original pinboard apps

$3

* uses @phila/vue-comps 2.1.2
* adds major changes to refine panel options

$3

* uses minor updates to libraries:
* @phila/vue-comps 2.1.1
* @phila/vue-mapping 2.1.1
* @phila/vue-datafetch 1.2.0

$3

pushes to @phila/pinboard uses new locations for phila libraries:
* @phila/vue-comps 2.0.9
* @phila/vue-mapping 2.0.5
* @phila/vue-datafetch 1.1.7
* pushes to @phila/pinboard instead of @philly/pinboard

$3

* Adds how to use content.

$3

* Uses pvc 1.0.47

$3

* Adds new fields + accessibility features

$3

* adds all upgrades that depedabot put into separate pull requests

$3

* Uses pvm 1.0.43 which fixes VectorMarker updating - allows more points to be used on the pinboard
* Uses pvc 1.0.42

$3

* Uses new releases of @philly libraries which ran upgrades
* Uses @philly/vue-comps 1.0.41
* Uses @philly/vue-mapping 1.0.41
* Uses new restructured pvd (which also ran upgrades)
* Uses @philly/vue-datafetch 0.0.27

$3

* Uses new releases of @philly libraries which ran upgrades
* Uses @philly/vue-comps 1.0.37
* Uses @philly/vue-mapping 1.0.36
* Uses @philly/vue-datafetch 0.0.24

$3

* release that had to be replaced right away

$3

* Uses new releases of @philly libraries which ran upgrades
* Uses @philly/vue-comps 1.0.36
* Uses @philly/vue-mapping 1.0.35
* Uses @philly/vue-datafetch 0.0.22