@cityofphiladelphia/mapboard - npm Package Compare versions

Comparing version 0.0.8 to 0.1.0

examples/atlas/main.js

@@ -116,2 +116,10 @@ const GATEKEEPER_KEY = '35ae5b7bf8f0ff2613134935ce6b4c1e';
   // baseConfig: '//rawgit.com/rbrtmrtn/mapboard-base-config/9605e5dca32277b1b877e8965d2156631b0b7443/config.js',
+  map: {
+    imagery: {
+      enabled: true
+    },
+    historicBasemaps: {
+      enabled: true
+    },
+  },
   dataSources: {
@@ -197,2 +205,29 @@ // nearby: {
     },
+    liPermits: {
+      type: 'carto',
+      url: 'https://phl.carto.com/api/v2/sql',
+      options: {
+        params: {
+          q: feature => "select * from li_permits where address = '" + feature.properties.street_address + "' or addresskey = '" + feature.properties.li_address_key.toString() + "'",
+        }
+      }
+    },
+    liInspections: {
+      type: 'carto',
+      url: 'https://phl.carto.com/api/v2/sql',
+      options: {
+        params: {
+          q: feature => "select * from li_case_inspections where address = '" + feature.properties.street_address + "' or addresskey = '" + feature.properties.li_address_key.toString() + "'",
+        }
+      }
+    },
+    liViolations: {
+      type: 'carto',
+      url: 'https://phl.carto.com/api/v2/sql',
+      options: {
+        params: {
+          q: feature => "select * from li_violations where address = '" + feature.properties.street_address + "' or addresskey = '" + feature.properties.li_address_key.toString() + "'",
+        }
+      }
+    },
     zoningDocs: {
@@ -218,2 +253,19 @@ type: 'carto',
     },
+    rco: {
+      type: 'esri',
+      url: '//services.arcgis.com/fLeGjb7u4uXqeF9q/arcgis/rest/services/Zoning_RCO/FeatureServer/0',
+      options: {
+        relationship: 'contains',
+      },
+      // success(data) {
+      //   // format phone numbers
+      //   console.log('rco success', data);
+      //
+      //   var s2 = (""+s).replace(/\D/g, '');
+      //   var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
+      //   return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
+      //
+      //   return data;
+      // }
+    },
     dorDocuments: {
@@ -383,2 +435,27 @@ type: 'http-get',
     },
+    phoneNumber: {
+      transform(value) {
+        const s2 = (""+value).replace(/\D/g, '');
+        const m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
+        return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
+      }
+    },
+    rcoPrimaryContact: {
+      transform(value) {
+        const PHONE_NUMBER_PAT = /\(?(\d{3})\)?( |-)?(\d{3})(-| )?(\d{4})/g;
+        const m = PHONE_NUMBER_PAT.exec(value);
+
+        // check for non-match
+        if (!m) {
+          return value;
+        }
+
+        // standardize phone number
+        const std = ['(', m[1], ') ', m[3], '-', m[5]].join('');
+        const orig = m[0]
+        const valueStd = value.replace(orig, std);
+
+        return valueStd;
+      }
+    }
   },
@@ -692,2 +769,167 @@ topics: [
     {
+      key: 'permits',
+      icon: 'building-o',
+      label: 'Permits',
+      dataSources: [
+        'liPermits',
+        'liInspections',
+        'liViolations'
+      ],
+      components: [
+        {
+          type: 'horizontal-table',
+          options: {
+            fields: [
+              {
+                label: 'Date',
+                value(state, item){
+                  return item.permitissuedate
+                },
+                transforms: [
+                  'date'
+                ]
+              },
+              {
+                label: 'ID',
+                value(state, item){
+                  return item.permitnumber
+                  // return "<a target='_blank' href='"+item.properties.CODE_SECTION_LINK+"'>"+item.properties.CODE_SECTION+" <i class='fa fa-external-link'></i></a>"
+                }
+              },
+              {
+                label: 'Description',
+                value(state, item){
+                  return item.permitdescription
+                }
+              },
+              {
+                label: 'Status',
+                value(state, item){
+                  return item.status
+                  // return "<a target='_blank' href='"+item.properties.CODE_SECTION_LINK+"'>"+item.properties.CODE_SECTION+" <i class='fa fa-external-link'></i></a>"
+                }
+              },
+            ],
+          },
+          slots: {
+            title: 'Permits',
+            items(state) {
+              const data = state.sources['liPermits'].data
+              const rows = data.map(row => {
+                const itemRow = Object.assign({}, row);
+                //itemRow.DISTANCE = 'TODO';
+                return itemRow;
+              });
+              // console.log('rows', rows);
+              return rows;
+            },
+          },
+        },
+        {
+          type: 'horizontal-table',
+          options: {
+            fields: [
+              {
+                label: 'Date',
+                value(state, item){
+                  return item.permitissuedate
+                },
+                transforms: [
+                  'date'
+                ]
+              },
+              {
+                label: 'ID',
+                value(state, item){
+                  return item.permitnumber
+                  // return "<a target='_blank' href='"+item.properties.CODE_SECTION_LINK+"'>"+item.properties.CODE_SECTION+" <i class='fa fa-external-link'></i></a>"
+                }
+              },
+              {
+                label: 'Description',
+                value(state, item){
+                  return item.permitdescription
+                }
+              },
+              {
+                label: 'Status',
+                value(state, item){
+                  return item.status
+                  // return "<a target='_blank' href='"+item.properties.CODE_SECTION_LINK+"'>"+item.properties.CODE_SECTION+" <i class='fa fa-external-link'></i></a>"
+                }
+              },
+            ],
+          },
+          slots: {
+            title: 'Inspections',
+            items(state) {
+              const data = state.sources['liInspections'].data
+              const rows = data.map(row => {
+                const itemRow = Object.assign({}, row);
+                //itemRow.DISTANCE = 'TODO';
+                return itemRow;
+              });
+              // console.log('rows', rows);
+              return rows;
+            },
+          },
+        },
+        {
+          type: 'horizontal-table',
+          options: {
+            fields: [
+              {
+                label: 'Date',
+                value(state, item){
+                  return item.permitissuedate
+                },
+                transforms: [
+                  'date'
+                ]
+              },
+              {
+                label: 'ID',
+                value(state, item){
+                  return item.permitnumber
+                  // return "<a target='_blank' href='"+item.properties.CODE_SECTION_LINK+"'>"+item.properties.CODE_SECTION+" <i class='fa fa-external-link'></i></a>"
+                }
+              },
+              {
+                label: 'Description',
+                value(state, item){
+                  return item.permitdescription
+                }
+              },
+              {
+                label: 'Status',
+                value(state, item){
+                  return item.status
+                  // return "<a target='_blank' href='"+item.properties.CODE_SECTION_LINK+"'>"+item.properties.CODE_SECTION+" <i class='fa fa-external-link'></i></a>"
+                }
+              },
+            ],
+          },
+          slots: {
+            title: 'Violations',
+            items(state) {
+              const data = state.sources['liViolations'].data
+              const rows = data.map(row => {
+                const itemRow = Object.assign({}, row);
+                //itemRow.DISTANCE = 'TODO';
+                return itemRow;
+              });
+              // console.log('rows', rows);
+              return rows;
+            },
+          },
+        },
+      ],
+      basemap: 'pwd',
+      dynamicMapLayers: [
+        //'zoning'
+      ],
+      identifyFeature: 'address-marker',
+      parcels: 'pwd'
+    },
+    {
       key: 'zoning',
@@ -787,3 +1029,3 @@ icon: 'building-o',
             items(state) {
-              const data = state.sources['zoningAppeals'].data;
+              const data = state.sources['zoningAppeals'].data || [];
               const rows = data.map(row => {
@@ -851,2 +1093,53 @@ const itemRow = Object.assign({}, row);
         },
+        {
+          type: 'horizontal-table',
+          options: {
+            fields: [
+              {
+                label: 'RCO',
+                value(state, item){
+                  return '<b>' + item.properties.ORGANIZATION_NAME + '</b><br>'
+                  + item.properties.ORGANIZATION_ADDRESS
+                },
+              },
+              {
+                label: 'Meeting Address',
+                value(state, item){
+                  return item.properties.MEETING_LOCATION_ADDRESS
+                }
+              },
+              {
+                label: 'Primary Contact',
+                value(state, item){
+                  // return item.properties.PRIMARY_PHONE
+                  return item.properties.PRIMARY_NAME + '<br>'
+                  + item.properties.PRIMARY_PHONE + '<br>'
+                  + `<b><a :href="'mailto:' + item.properties.PRIMARY_EMAIL">`
+                  + item.properties.PRIMARY_EMAIL + '</a></b>'
+                },
+                transforms: [
+                  'rcoPrimaryContact'
+                ]
+              },
+              {
+                label: 'Preferred Method',
+                value(state, item){
+                  return item.properties.PREFFERED_CONTACT_METHOD
+                }
+              },
+            ],
+          },
+          slots: {
+            title: 'Registered Community Organizations',
+            items(state) {
+              const data = state.sources['rco'].data
+              const rows = data.map(row => {
+                const itemRow = Object.assign({}, row);
+                //itemRow.DISTANCE = 'TODO';
+                return itemRow;
+              });
+              return rows;
+            },
+          },
+        },
       ],
@@ -853,0 +1146,0 @@ basemap: 'dor',

examples/litter-index/main.js

@@ -1,5 +0,5 @@
-const GATEKEEPER_KEY = '35ae5b7bf8f0ff2613134935ce6b4c1e';
+var GATEKEEPER_KEY = '35ae5b7bf8f0ff2613134935ce6b4c1e';
 
 // TODO get user-entered address from url(?)
-const searchInput = '1300 market street';
+var searchInput = '1300 market street';
 
@@ -13,14 +13,3 @@ Mapboard.default({
   },
-  baseConfig: '//gist.githubusercontent.com/rbrtmrtn/09b4f35396f97499c3097e2fecaed8e7/raw/3c068090d544f3b6e0e31a37acea652a30621c7e/config.js',
-  // dataSources: {},
-  greeting: {
-    components: [
-      {
-        type: 'image_',
-        slots: {
-          source: 'front.png'
-        }
-      }
-    ]
-  },
+  baseConfig: '//s3.amazonaws.com/mapboard-base-config-clean-philly/config.js',
   defaultAddress: searchInput,
@@ -33,12 +22,16 @@ topics: [
       components: [
+        // this is not ready for the first release of the litter index site
+        // {
+        //   type: 'badge',
+        //   slots: {
+        //     title: 'Litter Index',
+        //     value: 4.3,
+        //     description: 'out of 10',
+        //   }
+        // },
         {
-          type: 'badge',
-          slots: {
-            title: 'Litter Index',
-            value: 4.3,
-            description: 'out of 10',
-          }
-        },
-        {
           type: 'vertical-table',
+          options: {
+            nullValue: 'None'
+          },
           slots: {
@@ -48,5 +41,5 @@ fields: [
                 label: 'Trash & Recycling Day',
-                value(state) {
-                  const day = state.geocode.data.properties.rubbish_recycle_day;
-                  const DAYS_FORMATTED = {
+                value: function(state) {
+                  var day = state.geocode.data.properties.rubbish_recycle_day;
+                  var DAYS_FORMATTED = {
                     'MON': 'Monday',
@@ -63,5 +56,8 @@ 'TUE': 'Tuesday',
                 label: 'Recycling Diversion Rate',
-                value(state) {
-                  const rate = state.geocode.data.properties.recycling_diversion_rate;
-                  return `${parseInt(rate * 100)}%`;;
+                value: function(state) {
+                  var rate = state.geocode.data.properties.recycling_diversion_rate,
+                      ratePercent = parseInt(rate * 100);
+                      ratePercentStr = ratePercent + '%';
+
+                  return ratePercentStr;
                 },
@@ -71,19 +67,46 @@ },
                 label: 'Sanitation District',
-                value(state) {
-                  const district = state.geocode.data.properties.sanitation_district;
-                  return district;
+                value: function(state) {
+                  return state.geocode.data.properties.sanitation_district;
                 }
               },
+              // {
+              //   label: 'PMBC Representative',
+              //   value: 'NOT READY'
+              // },
               {
-                label: 'Sanitation Convenience Center',
-                value: '1615 S 51st St, Philadelphia, PA 19143'
+                label: 'Nearest Sanitation Convenience Center',
+                value: function(state) {
+                  return state.geocode.data.properties.sanitation_convenience_center;
+                }
               },
               {
-                label: 'Block Captain',
-                value: 'Jane Doe, 1345 S 52nd St'
+                label: 'Clean Philly Block Captain',
+                value: function(state) {
+                  return state.geocode.data.properties.clean_philly_block_captain;
+                }
               },
               {
-                label: 'PMBC Representative',
-                value: 'John Smith, 2145 S 53rd St'
+                label: 'PPR Friends Group',
+                value: function(state) {
+                  return state.geocode.data.properties.ppr_friends;
+                }
               },
+              {
+                label: 'Watershed Group',
+                value: function(state) {
+                  return state.geocode.data.properties.major_phila_watershed;
+                }
+              },
+              {
+                label: 'Commercial Corridor Manager',
+                value: function(state) {
+                  return state.geocode.data.properties.commercial_corridor;
+                }
+              },
+              {
+                label: 'Neighborhood Advisory Committee',
+                value: function(state) {
+                  return state.geocode.data.properties.neighborhood_advisory_committee;
+                }
+              },
             ],
@@ -95,4 +118,2 @@ }
       identifyFeature: 'address-marker',
-      dynamicMapLayers: [
-      ],
       parcels: 'pwd'
@@ -102,123 +123,12 @@ }
   map: {
+    // REVIEW are these necessary?
     center: [39.951618, -75.1650911],
     zoom: 13,
-    basemaps: {
-      pwd: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityBasemap/MapServer',
-        tiledLayers: [
-          'cityBasemapLabels'
-        ],
-        type: 'featuremap'
-      },
-      dor: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/DORBasemap/MapServer',
-        tiledLayers: [
-          'dorBasemapLabels'
-        ],
-        type: 'featuremap'
-      },
-      imagery2016: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityImagery_2016_3in/MapServer',
-        tiledLayers: [
-          'imageryBasemapLabels'
-        ],
-        type: 'imagery',
-        year: 2016
-      },
-      imagery2015: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityImagery_2015_3in/MapServer',
-        tiledLayers: [
-          'imageryBasemapLabels'
-        ],
-        type: 'imagery',
-        year: 2015
-      },
-      imagery2012: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityImagery_2012_3in/MapServer',
-        tiledLayers: [
-          'imageryBasemapLabels'
-        ],
-        type: 'imagery',
-        year: 2012
-      },
-      imagery2010: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityImagery_2010_3in/MapServer',
-        tiledLayers: [
-          'imageryBasemapLabels'
-        ],
-        type: 'imagery',
-        year: 2010
-      },
-      imagery2008: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityImagery_2008_3in/MapServer',
-        tiledLayers: [
-          'imageryBasemapLabels'
-        ],
-        type: 'imagery',
-        year: 2008
-      },
-      imagery2004: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityImagery_2004_6in/MapServer',
-        tiledLayers: [
-          'imageryBasemapLabels'
-        ],
-        type: 'imagery',
-        year: 2004
-      },
-      imagery1996: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityImagery_1996_6in/MapServer',
-        tiledLayers: [
-          'imageryBasemapLabels'
-        ],
-        type: 'imagery',
-        year: 1996
-      }
+    imagery: {
+      enabled: false
     },
-    tiledLayers: {
-      cityBasemapLabels: {
-        // type: 'labels',
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityBasemap_Labels/MapServer'
-      },
-      dorBasemapLabels: {
-        // type: 'labels',
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/DORBasemap_Labels_Test2/MapServer'
-      },
-      imageryBasemapLabels: {
-        url: '//tiles.arcgis.com/tiles/fLeGjb7u4uXqeF9q/arcgis/rest/services/CityImagery_Labels/MapServer'
-      }
+    historicBasemaps: {
+      enabled: false
     },
-    dynamicMapLayers: {
-      stormwater: {
-        url: '//gis.phila.gov/arcgis/rest/services/Water/pv_data/MapServer'
-      }
-    },
-    featureLayers: {
-      dorParcels: {
-        url: '//gis.phila.gov/arcgis/rest/services/DOR_ParcelExplorer/rtt_basemap/MapServer/24'
-      },
-      pwdParcels: {
-        url: '//gis.phila.gov/arcgis/rest/services/Water/pv_data/MapServer/0',
-      }
-    }
-  },
-  geocoder: {
-    methods: {
-      search: {
-        url: function (input) {
-          return '//api.phila.gov/ais/v1/search/' + input;
-        },
-        params: {
-          gatekeeperKey: GATEKEEPER_KEY
-        }
-      },
-      reverseGeocode: {
-        url: function (input) {
-          return '//api.phila.gov/ais/v1/reverse_geocode/' + input;
-        },
-        params: {
-          gatekeeperKey: GATEKEEPER_KEY
-        }
-      }
-    }
-  },
+  }
 });

package.json

 {
   "name": "@cityofphiladelphia/mapboard",
   "description": "A Vue.js component for data-rich web mapping",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "author": "City of Philadelphia <[e-mail]>",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -9,15 +9,10 @@ # mapboard
 
-## Build Setup
+## Deployment
 
-``` bash
-# install dependencies
-npm install
+To push a new version of Mapboard:
 
-# serve with hot reload at localhost:8080
-npm run dev
+1. Commit your changes to `master`.
+2. Bump the NPM version with `npm version major|minor|patch`.
+3. Push with tags: `git push --tags`.
 
-# build for production with minification
-npm run build
-```
-
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
+Travis will now run a build and publish to NPM.

src/components/map-panel/geocode-mixin.js

@@ -107,3 +107,3 @@ export default {
     geocode(input) {
-      // console.log('geocode', input);
+      console.log('geocode', input);
 
@@ -115,7 +115,9 @@ const self = this;
 
-      // set status of geocode
+      // update state
       this.$store.commit('setGeocodeStatus', 'waiting');
+      this.$store.commit('setGeocodeInput', input);
 
       this.$http.get(url, { params }).then(this.didGeocode, response => {
-        console.log('geocode error')
+        console.log('geocode error');
+
         self.$store.commit('setGeocodeData', null);
@@ -122,0 +124,0 @@ self.$store.commit('setGeocodeStatus', 'error');

src/store.js

@@ -38,3 +38,4 @@ import Vue from 'vue';
       status: null,
-      data: null
+      data: null,
+      input: null
     },
@@ -160,2 +161,5 @@ // the leaflet map object
       },
+      setGeocodeInput(state, payload) {
+        state.geocode.input = payload;
+      },
       setBasemap(state, payload) {
@@ -162,0 +166,0 @@ state.map.basemap = payload;

No alert changes

Improved metrics

Lines of code

3708

increased by6.03%

Worsened metrics

Total package byte prevSize

1383573

decreased by-7%

Number of package files

91

decreased by-2.15%

Number of lines in readme file

18

decreased by-21.74%

No dependency changes