This library allows you to add City Context widgets to your web page in a couple of lines, while allowing you to somewhat customize their appearance, and feed them with data coming from sources different from the text input.
The following widgets are available:
Include City Context scripts and stylesheets in your HTML header tag:
<!-- If you are using Mapbox, add the stylesheet below as well -->
To render the widget you need (either
<!-- If you are using Mapbox, add the stylesheet below as well -->......
The recommended way to use citycontext-ui for a more complex project is through Browserify.
Install the citycontext-ui module and add it to dependencies in package.json:
npm install --save citycontext-ui
Require citycontext-ui in your script
// main.jsvar citycontext = ;
browserify main.js -o bundle.js
Most of the time, you won't want to use the provided text entry. Instead, you want to display a widget next to, say, a listing or an existing map. In that case, the point of interest won't be specified by the user input, but rather will come from elsewhere in the application.
First, when instantiating the widgets, let's hide the form:
var demographicsWidget = citycontext;
Next, let's update it via a postcode query:
We can also query by a point, using its latitude and longitude:
Alternatively, we can use data coming directly from the markup:
Customizing the appearance
The best way to customize the CSS is to compile the stylesheets from the
less folder of a cloned repo:
git clone https://github.com/citycontext/citycontext-uicd citycontext-uinpm installmake css
citycontext-ui uses the less CSS preprocessor. The
less folder relies on a number of variables that are found in the
less/theme.less file. This could be a good first file to modify.
The appearance can be further customized by configuring the widgets.
To fit you color scheme, the mapbox markers color can be customized:
var citycontext = ;citycontextmapMarkersColor: '#409840';citycontext;
The criminality bar chart provides a period-by-period (month/quarter/year) comparison between the number of crimes during the last three years.
The colors of the bar for each year can be specified to match you color theme. Each color is represented by a
[red, green, blue] triple.
var citycontext = ;citycontextcriminalityGraphbarColorsRGBA:64 152 63 // first year color63 64 152 // second year color152 63 64 // third year colorcitycontext;
var citycontext = ;citycontextchartsOptionsglobalshowScale = false; // global optioncitycontextchartsOptionsBarbarShowStroke = false; // bar chart-specific optioncitycontext;
Hooking into events
The widgets trigger events that you can hook into, whenever someone submits a postcode, whenever the lookup succeeds and when it fails.
var citycontext = ;citycontext;var widget = document;widget;widget;widget;
git clone https://github.com/citycontext/citycontext-uicd citycontext-uimake