Standalone Kit

Users create maps and charts with LocalFocus. They can download these visuals as json files. With localfocus.min.js you can load these json files and display these maps and charts on your website.

Download

NPM

npm i localfocus

Working demos

Tester

Data for testing

Quickstart charts

Include localfocus.min.js in your page.

<script src="localfocus.min.js"></script>

Put a div element where you want your chart to be. An id tag is optional.

<div id="demo1"></div>

Make sure the element has a defined height. At LocalFocus we use 550px as default. Charts adjust to width and height changes. A width 100% is recommended.

#demo1 { 
	height: 550px;
	width: 100%;
}

Setup the chart. Supply a query string to the element in combination with the path to the json configuration file.

LocalFocus.init('#demo1', './widgets/demo1.json');

... or be more flexible and select one element with document.querySelector and load the json file yourself and parse to an object with JSON.parse()

LocalFocus.init(document.querySelector('#demo1'), {  });

Quickstart maps

Include Leaflet. LocalFocus is tested with Leaflet 1.1.1 and 1.6.0.

<link rel="stylesheet" href="./assets/libs/leaflet.css" />
<script src="./assets/libs/leaflet.js"></script>

Include localfocus.min.js at the bottom of your page.

<script src="localfocus.min.js"></script>

Put a div element where you want your map to be. An id tag is optional.

<div id="demo2"></div>

Make sure the element has a defined height. At LocalFocus we use 550px as default. Maps adjust to width and height changes. A width 100% is recommended.

#demo2 { 
	height: 550px;
	width: 100%;
}

Setup the map. Supply a query string to the element in combination with the path to the json configuration file.

LocalFocus.init('#demo2', './widgets/demo2.json');

... or be more flexible and select one element with document.querySelector and load the json file yourself and parse to an object with JSON.parse()

LocalFocus.init(document.querySelector('#demo2'), {  });

Using optional settings

Optional: overwrite style properties

Warning: we are working on this feature for charts

Each configuration json comes with built-in styling. In some cases you'll want to adjust the usage of fonts to match your webpage fonts. Overwrite styling before initializing maps or charts.

LocalFocus.setStyle({
	'fontFamilies': {
		'regular': 'Roboto, sans-serif',
		'emphasized': 'Roboto, sans-serif'
	},
	'fontWeights': {
		'regular': 'normal',
		'emphasized': 'bold'
	},
	'fontSizes': {
		'large': '24px',
		'regular': '16px',
		'small': '12px'
	},
	'fontColors': {
		'regular': '#222222',
		'emphasized': '#004682',
		'faded': '#888888'
	}
});

Optional for maps: set path to tile server

Overwrite the default tile server with your own tile server before initializing maps.Default: d2ip8qs1ionmkp.cloudfront.net

LocalFocus.setTilePath('https://d2ip8qs1ionmkp.cloudfront.net');
LocalFocus.init(..., ...);

Optional for maps: set path to geojson files

Overwrite the default path to geojson files with your own path before initializing maps. LocalFocus can supply you with all the files (350 mb).Default: dtb9os15mttcv.cloudfront.net

LocalFocus.setGeoPath('https://dtb9os15mttcv.cloudfront.net');
LocalFocus.init(..., ...);

Optional for maps: configure strict mode

Users can add images and Youtube videos from https sources to maps, but "LocalFocus strict mode" is enabled by default and will:

Only allow images from same origin (window.location.origin) and origin must be a https origin
Not allow Youtube videos

Default: {'allowImages': [window.location.origin], 'allowYoutube': false}

Example: allow images from all https sources, and allow youtube videos:

LocalFocus.setStrictMode({
	'allowImages': true,
	'allowYoutube': true
});
LocalFocus.init(..., ...);

Example: allow images only from https://www.localfocus.nl and https://example.com/path/ but don't allow Youtube:

LocalFocus.setStrictMode({
	'allowImages': ['https://www.localfocus.nl', 'https://example.com/path/']
});
LocalFocus.init(..., ...);

Example: don't allow any images and don't allow youtube videos:

LocalFocus.setStrictMode({
	'allowImages': false,
	'allowYoutube': false
});
LocalFocus.init(..., ...);

Get the version

To get the version of LocalFocus:

console.log(LocalFocus.version);