-
Notifications
You must be signed in to change notification settings - Fork 9
How to fill out main.js
Mapboard automatically imports a few libraries of options and pre-built components for displaying your data. You can simply write a configuration file which lists the components and options that you want.
Allows you to specify the URL of a "base" config file with common settings for your organization. Any settings you provide will override these. This removes the need to define basemaps, data sources, and other frequently-used options in every application.
baseConfig: 'https://gist.githubusercontent.com/githubuser/09b4f35396f97499c4297e2fecaed8e7/raw/3c068090d544f3b6e0e31a94acea652a30621c7e/config.js',
Used to access AIS (Address Information Service).
gatekeeperKey: example gatekeeper key,
Used to fill the topics panel with components. The default for Mapboard is to fill the topics panel with topics, which requires entering:
components: [
{
type: 'topic-set',
options: {
defaultTopic: 'property'
}
},
],
Used to set which parcels the app uses.
parcels: {
pwd: {
multipleAllowed: false,
geocodeFailAttemptParcel: null,
clearStateOnError: false,
wipeOutOtherParcelsOnReverseGeocodeOnly: true,
geocodeField: 'PARCELID',
parcelIdInGeocoder: 'pwd_parcel_id',
getByLatLngIfIdFails: false
},
dor: {
multipleAllowed: true,
geocodeFailAttemptParcel: 'pwd',
clearStateOnError: true,
wipeOutOtherParcelsOnReverseGeocodeOnly: false,
geocodeField: 'MAPREG',
parcelIdInGeocoder: 'dor_parcel_id',
getByLatLngIfIdFails: true
}
},
Defines APIs used to pull data and related records for an address.
dataSources: {
// each source has a unique key, e.g. `opa`
opa: {
// the type of call to make
type: 'http-get',
// the base url of the api
url: 'https://data.phila.gov/resource/w7rb-qrn8.json',
// all options
options: {
// query string parameters to be added to the url
params: {
// each param is mapped to a function that gets passed the current
// address feature. use attributes from this feature to form data queries.
// in this case, a param of `?parcel_number=<opa_account_num>` will be
// appended to the url.
parcel_number: function (feature) { return feature.properties.opa_account_num; }
},
// a callback that unpacks the desired record(s) from the api. this
// data will be kept in state and made available in the topic panel.
success: function (data) {
return data[0];
}
}
}
},
Defines topics to be rendered in the topic panel. This takes an array of objects.
topics: [
{
// a unique key for the topic
key: 'property-assessments',
// the icon displayed in the topic header. this can be any Font Awesome
// class, minus the `fa-` prefix. see http://fontawesome.io/
icon: 'map-marker',
// the full name of the topic
label: 'Property Assessments',
// keys for all of the data sources required for this topic (see
`dataSources` option above).
dataSources: ['opa'],
// the key for the basemap to show with this topic. basemaps are
// usually defined in the base config file.
basemap: 'pwd',
// the type of map feature used to show the location of the address
// e.g. address-marker, pwd-parcel, dor-parcel
identifyFeature: 'address-marker',
// the parcel (aka property boundary) layer to use with this topic
parcels: 'pwd',
// a list of components to display. see below for details.
components: []
}
]
Topics are made up of components that can be configured to display data in various formats. Some examples are:
-
horizontal-table: header at top, multiple rows below -
vertical-table: header on the left, single row of data on the right -
callout: static block of text, usually for explanation -
image: static image -
badge: small text box for prominently displaying short codes/values
The basic pattern for components is:
{
type: 'callout',
slots: {
text: 'This is an sample callout.'
}
}
Each component contains named placeholders, called slots, that tell Mapboard how to source the actual data to be rendered. In the example above, there's just one slot with a static block of text. Slots can also be mapped to a function that receives the app state, which in turn provides access to API responses (see dataSources section above). For example, to show a badge with the property assessment account:
{
type: 'badge',
slots: {
value: function (state) {
return state.topicData.opa.account_num;
}
}
}
Used to append more options to the map object which should primarily be held in a base config, but which are highly specific to the current app.
map: {
defaultBasemap: 'pwd',
defaultIdentifyFeature: 'address-marker',
imagery: {
enabled: true
},
historicBasemaps: {
enabled: true
},
},
Used to set up legends for topics which include layers.
legendControls: {
water: {
options: {
topics: ['water'],
showWithBaseMapOnly: false
},
// TODO give these an id instead of using the label as a key
data: {
'Roof': {
'background-color': '#FEFF7F',
},
'Other Impervious Surface': {
'background-color': '#F2DCFF',
}
}
},
},
Used to pass in CSS styles for the Mapboard container.
rootStyle: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
}
Used to enable routing, which allows the URL to route directly to an address and topic.
router: {
enabled: true
},
Used to enable geolocation for location of the person using the app.
geolocation: {
enabled: false
},
used to set up whether the app has both a topics panel and a map panel, or leaves one out.
panels: [
'topics',
'map'
],
Used to set options for the addressInput, some of which are only used if the map is not included or hidden.
addressInput: {
width: 415,
position: 'right',
autocompleteEnabled: false,
autocompleteMax: 15,
placeholder: 'Search the map',
},
Used to set imageOverlayGroups.
imageOverlayGroups: {
regmaps: {
items: function(state) {
return state.sources.regmaps.data;
}
}
},
Used to enable cyclomedia or pictometry.
cyclomedia: {
enabled: true,
measurementAllowed: false,
popoutAble: true,
},
pictometry: {
enabled: true,
},
Used to set the text which fills the topic panel when the app starts.
greeting: {
initialMessage: '\
<h2>Atlas is your front door to the City of Philadelphia.</h2>\
<p>Here are some things you can do with Atlas:</p>\
<div class="callout">\
<ul>\
<li>Get the history of permits, licenses, and inspections at any address</li>\
<li>Research real estate information including property values, zoning, and document archives</li>\
<li>Get easy access to a variety of hard-to-find City resources</li>\
<li>View recent activity around your address, such as crimes, 311 service requests, and more</li>\
<li>Explore historical imagery and maps</li>\
</ul>\
</div>\
<p>To get started, click anywhere on the map, or type an address, intersection, property assessment account number, or Department of Records Map Registry number into the search box.</p>\
',
},
Used to write transforms used by other components.
transforms: {
currency: {
// a list of global objects this transform depends on
globals: ['accounting'],
// this is the function that gets called to perform the transform
transform: function (value, globals) {
return accounting.formatMoney(value);
}
},
date: {
globals: ['moment'],
transform: function (value, globals) {
return moment(value).format('MM/DD/YYYY');
},
},
phoneNumber: {
transform: function (value) {
var s2 = (""+value).replace(/\D/g, '');
var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
}
},
},
Specifies which address to open Mapboard to after initialization.
defaultAddress: '1234 MARKET ST'