Related
So I can see that d3.js does it's job and retrieves data from .csv (visible in the browser console)
But I can't pass this data on the chart for some reason, there's no errors in the logs etc.
Thanks in advance! ;)
const chartData = 'data/data.csv';
d3.csv(chartData).then(function(datapoints) {
console.log(datapoints)
const data1 = [];
const data2 = [];
const data3 = [];
for (var i = 0; i < datapoints.lenght; i++) {
data1.push(datapoints[i].data1)
data2.push(datapoints[i].data2)
data3.push(datapoints[i].data3)
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Data1', 'Data2', 'Data3'],
datasets: [{
label: 'Live data (someday)',
data: [data1, data2,data3],
backgroundColor: [
'rgba(0, 0, 255)',
],
The problem is that datasets.data ends up to be an array of arrays but Chart.js expects a flat array of values. It's hard to tell without seeing your data but you probably need to define 3 separate datasets.
const chartData = 'data/data.csv';
d3.csv(chartData).then(function(datapoints) {
const myChart = new Chart('myChart', {
type: 'line',
data: {
labels: datapoints.map((o, i) => i),
datasets: [
{
label: 'Live data 1 (someday)',
data: datapoints.map(o => o.data1),
backgroundColor: 'rgb(0, 0, 255)'
},
{
label: 'Live data 2 (someday)',
data: datapoints.map(o => o.data2),
backgroundColor: 'rgb(0, 255, 0)'
},
{
label: 'Live data 3 (someday)',
data: datapoints.map(o => o.data3),
backgroundColor: 'rgb(255, 0, 0)'
}
],
...
I have date value in this format from a for each loop. Each loop provides value in the following format.
start: 2021-06-30T18:30:00.000Z
title: one
start: 2021-07-31T18:30:00.000Z
title: two
start: 2021-08-31T18:30:00.000Z
title: three
function loadItems() {
firebase.database().ref("events").once("value", (userSnapshot) => {
userSnapshot.forEach(element => {
const start = moment(element.child('start').val()).toDate();
const title = element.child('title').val();
)}
)}
}
I have created variables like this.
const [items, setItems] = useState([]);
const [markedDates, setMarkedDates] = useState([]);
I need to convert this to the following format. How can I use useState to update the value on for each loop.
markedDates={{
'2021-06-30': {selected: true, marked: true},
'2021-06-30': {selected: true, marked: true},
'2021-06-30': {selected: true, marked: true},
}}
items={{
'2021-06-30': [{name: 'one'}],
'2021-06-30': [{name: 'two'}],
'2021-06-30': [{name: 'three'}],
}}
Reduce your firebase array to required format. Something along these lines would do the job.
const items = userSnapshot.reduce((accumulator: any, item: any) => {
if(accumulator.hasOwnProperty(item.start.slice(0, 10))) {
accumulator = {...accumulator, [item.start.slice(0, 10)]: [...accumulator[item.start.slice(0, 10)], { name: item.title }]}
} else {
accumulator = {...accumulator, [`${item.start.slice(0, 10)}`]: [{ name: item.title }]}
}
return accumulator
}, {})
I am using CKEditor 4.5.7 in one of my project. We have customized Format combo as shown in the below screen shot, the ask is to have all the items appearing inside this combo on right click.
And below is the code for Format combo:
config.format_tags = 'p;h3;h4;pre;ImageInline;ImageCentered;ImageCenteredWithDropShadow;FigureHeading;Equation;EquationDefinition;TableWithoutBorder';
config.format_ImageInline = { name: 'Image inline', element: 'img', attributes: { 'class': 'noborder' } };
config.format_ImageCentered = { name: 'Image centered', element: 'img', attributes: { 'class': 'noborderblock' } };
config.format_ImageCenteredWithDropShadow = { name: 'Image centered drop shadow', element: 'img', attributes: { 'class': 'border' } };
config.format_FigureHeading = { name: 'Figure/Table heading', element: 'p'/*['p', 'td']*/, attributes: { 'class': 'footing' } };
config.format_Equation = { name: 'Equation', element: 'table', attributes: { 'class': 'equation' } };
config.format_EquationDefinition = { name: 'Equation definition', element: 'table', attributes: { 'class': 'where' } };
config.format_TableWithoutBorder = { name: 'Table without border', element: 'table', attributes: { 'class': 'nobordertable' } };
I was able to get them displayed in context menu as shown in below screen shot:
But I am not sure what will be the command name for each one of them. i.e.
command: 'format_ImageCentered' /*I need help here*/
command: 'format_ImageCenteredWithDropShadow' /*I need help here*/
I have already downloaded full source code of CKEditor and gone thru ckeditor\plugins\format\plugin.js but wasn't able to figure out what to specify as command.
Below is my code for customizing Context menu:
var ck_article = CKEDITOR.replace("content", { customConfig: '<config js file path>', bodyClass: '<css class>' });
ck_article.on("instanceReady", function (evt) {
var editor = evt.editor;
/*Code for checking if editor has context menu or not removed for brevity*/
//...
//...
editor.addMenuGroup('ck_group');
editor.addMenuItem('bold', {
label: 'Bold',
command: 'bold',
group: 'ck_group'
});
editor.addMenuItem('iconselector', {
label: '...',
command: 'iconselector',
group: 'ck_group'
});
editor.addMenuItem('numberedlist', {
label: 'Numbered List',
command: 'numberedlist',
group: 'ck_group'
});
editor.addMenuItem('bulletedlist', {
label: 'Bulleted List',
command: 'bulletedlist',
group: 'ck_group'
});
editor.addMenuItem('link', {
label: 'Link',
command: 'link',
group: 'ck_group'
});
editor.addMenuItems({
formatting: {
label: 'Formatting',
group: 'ck_group',
getItems: function () {
var selection = editor.getSelection();
//This is to nest items inside context menu of CKEditor
return {
format_ImageCentered: CKEDITOR.TRISTATE_ON,
format_ImageCenteredWithDropShadow: CKEDITOR.TRISTATE_ON
}
}
},
format_ImageCentered: {
label: "Image centered",
group: 'ck_group',
command: 'format_ImageCentered' /*I need help here*/
},
format_ImageCenteredWithDropShadow: {
label: "Image centered drop shadow",
group: 'ck_group',
command: 'format_ImageCenteredWithDropShadow' /*I need help here*/
}
});
editor.contextMenu.addListener(function (element, selection, elementPath) {
var contentMenuItems = {
link: CKEDITOR.TRISTATE_ON,
bold: CKEDITOR.TRISTATE_ON,
numberedlist: CKEDITOR.TRISTATE_ON,
bulletedlist: CKEDITOR.TRISTATE_ON,
iconselector: CKEDITOR.TRISTATE_ON,
formatting: CKEDITOR.TRISTATE_ON
};
if (element.getAscendant('a', true)) {
//If we are already inside 'a' tag then remove link from Context menu else we will end up with two "Link" menus
delete contentMenuItems.link
}
if ($.trim(selection.getSelectedText()) === '') {
//If no text is selected then remove bold from context menu
delete contentMenuItems.bold;
//contentMenuItems.bold = CKEDITOR.TRISTATE_DISABLED; //This doesn't work as the menu item is disabled but hover effect is still there
//Similarly remove link if nothing is selected as it will insert hyperlink text as words inside CKEditor
delete contentMenuItems.link;
//contentMenuItems.link = CKEDITOR.TRISTATE_DISABLED; //This doesn't work as the menu item is disabled but hover effect is still there
}
return contentMenuItems;
});
});
References:
I have used below URL as references:
http://blog.ale-re.net/2010/06/ckeditor-context-menu.html
http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_2
CKEditor - Possible to have context menu for basic styles?
I ended up creating plugin for each and every option listed in Format combo. If there is any other better way than this then please let me know. I am passing code just in case if someone else stumbles with the similar issue.
Below screen shot shows how the plugin folder looks inside CKEditor folder:
I am pasting just one plugin code as all of plugins have the exact same code the only difference is value for pluginName, which is exact same as folder name:
//All the files inside folder stating with context_<name> have exact same code except pluginName variable.
//I need to this to support format inside right click
(function () {
"use strict";
var pluginName = 'contextmenu_tablewithoutborder'; //This name will be used to add to 'config.extraPlugins' string
var commandName = pluginName;
// Register the plugin within the editor.
CKEDITOR.plugins.add(pluginName, {
// Register the icons. They must match command names.
icons: pluginName,
// The plugin initialization logic goes inside this method.
init: function (editor) {
// Define an editor command.
editor.addCommand(commandName, { //Command name must match with name provided in editor.ui.addButton
// Define the function that will be fired when the command is executed.
exec: function (editor) {
if (typeof editor.applyFormatStyles === 'function')
editor.applyFormatStyles(pluginName.split('_')[1]);
else
throw new Error('applyFormatStyles is not defined as function (' + pluginName + ')');
}
});
}
});
})();
I then extended CKEditor and added below methods:
CKEDITOR.editor.prototype.getFormatStyles = function () {
var styles = {}
var editor = this;
var config = editor.config,
lang = editor.lang.format;
// Gets the list of tags from the settings.
var tags = config.format_tags.split(';');
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
var style = new CKEDITOR.style(config['format_' + tag]);
if (!editor.filter.customConfig || editor.filter.check(style)) {
styles[tag] = style;
styles[tag]._.enterMode = editor.config.enterMode;
}
}
return styles;
}
CKEDITOR.editor.prototype.applyFormatStyles = function (styleName) {
var editor = this;
var styles = editor.getFormatStyles();
editor.focus();
editor.fire('saveSnapshot');
var style = styles[styleName],
elementPath = editor.elementPath();
editor[style.checkActive(elementPath, editor) ? 'removeStyle' : 'applyStyle'](style);
// Save the undo snapshot after all changes are affected. (#4899)
setTimeout(function () {
editor.fire('saveSnapshot');
}, 0);
}
I then modified my config file and added all these plugins as extra plugins:
CKEDITOR.editorConfig = function (config) {
var extraPlugins = [];
//Remove other code for brevity
//...
//...
config.format_tags = 'p;h3;h4;pre;imageinline;imagecentered;imagecenteredwithdropshadow;figureheading;equation;equationdefinition;tablewithoutborder';
config.format_imageinline = { name: 'Image inline', element: 'img', attributes: { 'class': 'noborder' } };
config.format_imagecentered = { name: 'Image centered', element: 'img', attributes: { 'class': 'noborderblock' } };
config.format_imagecenteredwithdropshadow = { name: 'Image centered drop shadow', element: 'img', attributes: { 'class': 'border' } };
config.format_figureheading = { name: 'Figure/Table heading', element: 'p'/*['p', 'td']*/, attributes: { 'class': 'footing' } };
config.format_equation = { name: 'Equation', element: 'table', attributes: { 'class': 'equation' } };
config.format_equationdefinition = { name: 'Equation definition', element: 'table', attributes: { 'class': 'where' } };
config.format_tablewithoutborder = { name: 'Table without border', element: 'table', attributes: { 'class': 'nobordertable' } };
var contextmenu_plugins = config.format_tags.split(";");
for (var i = 0; i < contextmenu_plugins.length; i++) {
var pluginName = contextmenu_plugins[i];
extraPlugins.push("contextmenu_{0}".format(pluginName))
}
config.extraPlugins = extraPlugins.join(',');
}
And then finally when I create editor I extent the context menu. I could add this logic in plugin.js file but since I wanted plugin.js code to be exact same except a line or two's difference I didn't bother adding it there.
var ck_article = CKEDITOR.replace("content", { customConfig: '<config js file path>', bodyClass: '<css class>' });
ck_article.on("instanceReady", function (evt) {
var editor = evt.editor;
editor.addMenuGroup('ck_group');
editor.addMenuItem('bold', {
label: 'Bold',
command: 'bold',
group: 'ck_group'
});
editor.addMenuItem('iconselector', {
label: '...',
command: 'iconselector',
group: 'ck_group'
});
editor.addMenuItem('numberedlist', {
label: 'Numbered List',
command: 'numberedlist',
group: 'ck_group'
});
editor.addMenuItem('bulletedlist', {
label: 'Bulleted List',
command: 'bulletedlist',
group: 'ck_group'
});
editor.addMenuItem('link', {
label: 'Link',
command: 'link',
group: 'ck_group'
});
editor.addMenuItems({
formatting: {
label: 'Formatting',
group: 'ck_group',
getItems: function () {
var selection = editor.getSelection();
//This is to nest items inside context menu of CKEditor
var tags = editor.config.format_tags.split(";");
var menu_items = {
};
for (var i = 0; i < tags.length; i++) {
menu_items[tags[i]] = CKEDITOR.TRISTATE_ON;
}
//menu_items - will have object something like below
//{p: 1, h3: 1, h4: 1......}
return menu_items;
}
},
p: {
label: "Normal",
group: 'ck_group',
command: 'contextmenu_p'
},
h3: {
label: "Heading",
group: 'ck_group',
command: 'contextmenu_h3'
},
h4: {
label: "Sub Heading",
group: 'ck_group',
command: 'contextmenu_h4'
},
pre: {
label: "Formatted",
group: 'ck_group',
command: 'contextmenu_pre'
},
imageinline: {
label: "Image inline",
group: 'ck_group',
command: 'contextmenu_imageinline'
},
imagecentered: {
label: "Image centered",
group: 'ck_group',
command: 'contextmenu_imagecentered'
},
imagecenteredwithdropshadow: {
label: "Image centered drop shadow",
group: 'ck_group',
command: 'contextmenu_imagecenteredwithdropshadow'
},
figureheading: {
label: "Figure/Table heading",
group: 'ck_group',
command: 'contextmenu_figureheading'
},
equation: {
label: "Equation",
group: 'ck_group',
command: 'contextmenu_equation'
},
equationdefinition: {
label: "Equation definition",
group: 'ck_group',
command: 'contextmenu_equationdefinition'
},
tablewithoutborder: {
label: "Table without border",
group: 'ck_group',
command: 'contextmenu_tablewithoutborder'
}
});
editor.contextMenu.addListener(function (element, selection, elementPath) {
var contentMenuItems = {
link: CKEDITOR.TRISTATE_ON,
bold: CKEDITOR.TRISTATE_ON,
numberedlist: CKEDITOR.TRISTATE_ON,
bulletedlist: CKEDITOR.TRISTATE_ON,
iconselector: CKEDITOR.TRISTATE_ON,
formatting: CKEDITOR.TRISTATE_ON
};
if (element.getAscendant('a', true)) {
//If we are already inside 'a' tag then remove link from Context menu else we will end up with two "Link" menus
delete contentMenuItems.link
}
if ($.trim(selection.getSelectedText()) === '') {
//If no text is selected then remove bold from context menu
delete contentMenuItems.bold;
//Similarly remove link if nothing is selected as it will insert hyperlink text as words inside CKEditor
delete contentMenuItems.link;
}
return contentMenuItems;
});
});
I know there is too much of code but I wasn't able to find any other simple way to do this.
When all done this is how it looks:
Quick recap:
Created plugin for each item appearing in Format combo
Only change in all the plugin.js file is pluginName (it is name of the folder)
Extend CKEditor and add applyFormatStyles method which will be invoked by plugin.js file
In your config file add all these as extra plugins
And on creation of CKEditor instance extend context menu
I need a placeholder/variable that takes name, defaultValue, tooltip/description. I created a plugin and it is working fine in the editor/create mode. When placeholder is created, it is adding the following tags to source
<var class="cke_placeholder" name="varName" title="varToolTip">[[varDefaultValue]]</var>
Image that depicts create & edit mode differences
When I save the html content with placehoder in db and trying to load it back to ckeditor, I am not able to get the + symbol and hence not able to launch the editor.
Here is my ckeditor/plugins/var/plguin.js
'use strict';
( function() {
CKEDITOR.plugins.add( 'var', {
requires: 'widget,dialog',
icons: 'var', // %REMOVE_LINE_CORE%
hidpi: true, // %REMOVE_LINE_CORE%
onLoad: function() {
CKEDITOR.dialog.add( 'var', this.path + 'dialogs/var.js' );
},
init: function( editor ) {
this.registerWidget( editor );
editor.ui.addButton && editor.ui.addButton( 'Var', {
label: 'Create Variable',
command: 'var',
toolbar: 'insert',
icon: 'var'
} );
},
registerWidget: function(editor){
var that = this;
// Put ur init code here.
editor.widgets.add( 'var', {
// Widget code.
dialog: 'var',
pathName: 'var',
// We need to have wrapping element, otherwise there are issues in
// add dialog.
template: '<var class="cke_placeholder">[[]]</var>',
downcast: function() {
return new CKEDITOR.htmlParser.text( '<var class="cke_placeholder" name="'+this.data.name+'" title="'+this.data.description+'">[[' + this.data.defaultValue + ']]</var>' );
},
init: function() {
this.setData( 'defaultValue', this.element.getText().slice( 2, -2 ) );
this.setData( 'name', this.element.getAttribute("name") );
this.setData( 'description', this.element.getAttribute("title") );
},
data: function() {
this.element.setText( '[[' + this.data.defaultValue + ']]' );
this.element.setAttribute('name', this.data.name );
this.element.setAttribute('title', this.data.description );
}
} );
},
afterInit: function( editor ) {
this.registerWidget( editor );
/*var placeholderReplaceRegex = /\[\[([^\[\]])+\]\]/g;
editor.dataProcessor.dataFilter.addRules( {
text: function( text, node ) {
var dtd = node.parent && CKEDITOR.dtd[ node.parent.name ];
// Skip the case when placeholder is in elements like <title> or <textarea>
// but upcast placeholder in custom elements (no DTD).
if ( dtd && !dtd.span )
return;
return text.replace( placeholderReplaceRegex, function( match ) {
// Creating widget code.
var widgetWrapper = null,
innerElement = new CKEDITOR.htmlParser.element( 'span', {
'class': 'cke_placeholder'
} );
// Adds placeholder identifier as innertext.
innerElement.add( new CKEDITOR.htmlParser.text( match ) );
widgetWrapper = editor.widgets.wrapElement( innerElement, 'placeholder' );
// Return outerhtml of widget wrapper so it will be placed
// as replacement.
return widgetWrapper.getOuterHtml();
} );
}
} );*/
}
} );
} )();
Here is my ckeditor/plugins/var/dialogs/var.js
'use strict';
CKEDITOR.dialog.add( 'var', function( editor ) {
//var lang = editor.lang.var,
//generalLabel = editor.lang.common.generalTab,
var generalLabel = 'General',
validRegex = /^[^\[\]<>]+$/,
emptyOrInvalid = ' can not be empty. It can not contain any of following characters: [, ], <, >',
invalid = ' can not contain any of following characters: [, ], <, >';
return {
title: 'Variable properties',
minWidth: 300,
minHeight: 80,
contents: [
{
id: 'info',
label: generalLabel,
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'name',
type: 'text',
style: 'width: 100%;',
label: 'Name',
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validRegex, 'name'+emptyOrInvalid ),
setup: function( widget ) {
this.setValue( widget.data.name );
},
commit: function( widget ) {
widget.setData( 'name', this.getValue() );
}
},
{
id: 'defaultValue',
type: 'text',
style: 'width: 100%;',
label: 'Default Value',
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validRegex, 'Default Value'+emptyOrInvalid ),
setup: function( widget ) {
this.setValue( widget.data.defaultValue );
},
commit: function( widget ) {
widget.setData( 'defaultValue', this.getValue() );
}
},
{
id: 'description',
type: 'text',
style: 'width: 100%;',
label: 'Description',
'default': '',
required: true,
validate: CKEDITOR.dialog.validate.regex( validRegex, 'Description'+invalid ),
setup: function( widget ) {
this.setValue( widget.data.description );
},
commit: function( widget ) {
widget.setData( 'description', this.getValue() );
}
}
]
}
]
};
} );
I am having trouble with an error that seems obvious but I've tried everything. I must be missing something. I'm running a rails app with Angularjs and angular-leaflet-directives. I am trying to add markers to a specific group. No matter what I do, I keep getting this error:
[AngularJS - Leaflet] A marker can only be added to a layer of type "group"
I know that this error comes up when the overlays type isn't group. The issue is that in my case, it is!
EDIT: here is a plunkr where I recreated the bug: http://plnkr.co/edit/DLCN5RYVr0BheYzTuqkQ?p=preview
Here is my code:
assets/javascript/angular/services/service.js
app.factory('Markers', ["$http", "$q", function($http, $q) {
var Markers = []
var events_markers = []
var stories_markers = []
var defaultIcon = L.icon({
iconUrl: 'assets/dot-grey.png',
iconSize: [15, 15],
iconAnchor: [15, 15],
popupAnchor: [-7, -20]
})
// Getting events + stories from rails API
var event_data = $http.get("/api/v1/events.json"),
story_data = $http.get("/api/v1/stories.json")
// Setting event markers and stories markers
$q.all([event_data, story_data]).then(function(results) {
var data_stories = results[1].data.stories
var data_events = results[0].data.event
for (i=0 ; i < data_stories.length; i++){
for (j=0; j < data_stories[i].locations.length; j++){
var lat = data_stories[i].locations[j].latitude
var lng = data_stories[i].locations[j].longitude
var title = data_stories[i].title
var layer = "stories"
Markers.push({layer: layer, lat:lat, lng:lng, message: title, icon: defaultIcon})
}
}
for (e=0 ; e < data_events.length; e++){
if (data_events[e].latitude != null){
var lat = data_events[e].latitude
var lng = data_events[e].longitude
var title = data_events[e].name
var layer = "events"
Markers.push({layer: layer, lat:lat, lng: lng, message: title, icon: defaultIcon})
}
}
return Markers
});
return {
markers: Markers
}
}]);
assets/javascript/angular/controllers/MapCtrl.js
app.controller("MapCtrl", ['$scope', "$timeout", "leafletData", "Markers", function($scope,
$timeout, leafletData, Markers ){
$scope.isVisible = true;
$scope.markers = Markers.markers;
var bounds = {
northEast:{
lat: 37.86862005954327,
lng: -122.12230682373048
},
southWest:{
lat: 37.68436373334184,
lng: -122.55901336669923
}
}
function setMap($scope, markers, bounds) {
angular.extend($scope, {
maxbounds: bounds,
defaults: {
scrollWheelZoom: false,
maxZoom: 14,
minZoom: 10
},
layers: {
baselayers: {
mapbox:{
name: 'Mapbox Litography',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
layerParams: {
apikey: 'pk.eyJ1IjoibGF1cmVuYmVuaWNob3UiLCJhIjoiQ1BlZGczRSJ9.EVMieITn7lHNi6Ato9wFwg',
mapid: 'laurenbenichou.jm96meb6'
}
}
}
},
overlays: {
stories: {
type: 'group', //Note here that the type is indeed 'group'
name: 'stories',
visible: true
},
events: {
type: 'group',
name: 'events',
visible: false
}
},
markers: markers
});
}
setMap($scope, $scope.markers, bounds)
angular.element(document).ready(function () {
function toggle(){$scope.isVisible = !$scope.isVisible;}
$timeout(toggle, 1000);
});
}])
assets/javascript/templates/map.html
<leaflet ng-hide="isVisible" defaults="defaults" markers="markers" layers="layers" height="100%" width="100%" maxbounds="maxbounds" ></leaflet>
assets/javascript/angular/app.js
var app = angular.module("litography", ['ngAnimate','ui.router','ngResource', 'templates', 'leaflet-directive', 'cn.offCanvas', 'ui.bootstrap', 'angular-flexslider'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
/**
* Routes and States
*/
$stateProvider
.state('home', {
url: "/",
views:{
"splash": {
templateUrl: "splash.html",
controller: "SplashCtrl"
},
"map":{
templateUrl: "map.html",
controller: "MapCtrl",
resolve:{
Markers: function(Markers){
return Markers
}
}
},
"menu":{
templateUrl: "menu.html",
controller: "MenuCtrl"
}
}
})
// default fall back route
$urlRouterProvider.otherwise('/');
// enable HTML5 Mode for SEO
$locationProvider.html5Mode(true);
}]);
It can happen if you forgot to add the file: leaflet.markercluster.js
Ok, from the reduced plunker it was easier to play around and find the bug.
You need to put overlays inside (i.e. as a property of) layers:
layers: {
baselayers: {
mapbox: {
name: 'mapbox',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
layerParams: {
apikey: 'pk.eyJ1IjoibGF1cmVuYmVuaWNob3UiLCJhIjoiQ1BlZGczRSJ9.EVMieITn7lHNi6Ato9wFwg',
mapid: 'laurenbenichou.jm96meb6',
name: "stories"
}
}
},
overlays: {
stories: {
type: 'group',
name: 'stories',
visible: true,
},
events: {
type: 'group',
name: 'events',
visible: false
}
}
}