Develop Reference

How enableJavaScript flag works with percy snapshot

While setting up Percy snapshot test, I noticed, there is a flag enableJavaScript provided which my understanding is to control if a web app in browser is to be loaded with JS disabled or enabled.
Here is how I invoke my percy test:
npx #percy/cli snapshot ./snapshots.json --base-url http://localhost:9000 -c ./.percy.json
persy.json
{
"version": 2,
"snapshot": {
"percy-css": ".hide-in-percy {\n visibility: hidden;\n}\n",
"widths": [360, 600, 900, 1200, 1600]
},
"discovery": {
"userAgent": "percy-cli",
"networkIdleTimeout": 750
}
}
snapshot.json
[
{
"name": "Page 1: JS enabled",
"url": "/page-1",
"waitForTimeout": 1000,
"enableJavaScript": true
},
{
"name": "Page 1: JS disabled",
"url": "/page-1",
"waitForTimeout": 1000,
"enableJavaScript": false
}
]
But it seems with enableJavaScript set to false, images do not show up in the snapshot although if I load the app myself with JS disabled in the browser, images show up just fine. What am I missing here. How do I test my pages with JS enabled/disabled

How to get mapbox-gl-js-offline-example to work?

I'm trying to get self hosted map tiles working with a Mapbox gl js application. As a starting point, I'm trying to get https://github.com/klokantech/mapbox-gl-js-offline-example/blob/gh-pages/index.html to work. I'm open to other ideas like tileserver-gl-light, but I can't get that to work either.
I'm on Windows 10 and have downloaded the .zip from github and changed two lines in index.html to try to get it to work. You can see all of my commented out attempts.
var style = {
"version": 8,
"sources": {
"countries": {
"type": "vector",
// "url": "mapbox://map-id"
// "url": "http://tileserver.com/layer.json",
//"tiles": [location.origin+location.pathname+"countries/{z}/{x}/{y}.pbf"],
//"tiles": ["http://localhost:8080/data/v3/" + "countries/{z}/{x}/{y}.pbf"],
//"tiles": "C:/Users/mattk/Desktop/mapbox-gl-js-offline-example-gh-pages/mapbox-gl-js-offline-example-gh-pages/countries/{z}/{x}/{y}.pbf",
"tiles": "http://localhost:8000/countries/{z}/{x}/{y}.pbf",
"maxzoom": 6
}
},
//"glyphs": location.origin+location.pathname+"font/{fontstack}/{range}.pbf",
//"glyphs": "http://localhost:8080/" + "font/{fontstack}/{range}.pbf",
//"glyphs": "C:/Users/mattk/Desktop/mapbox-gl-js-offline-example-gh-pages/mapbox-gl-js-offline-example-gh-pages/countries/font/{fontstack}/{range}.pbf",
"glyphs": "http://localhost:8000/countries/font/{fontstack}/{range}.pbf",
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "#ddeeff"
}
When I open up index.html, I can only see the navigational widgets zoom in/out and change bearing to North. Console shows:
Uncaught Error: sources.countries.tiles: array expected, string found
at style_batch.js:45
at Array.forEach (<anonymous>)
at Style.<anonymous> (style_batch.js:43)
but I'm not sure what to do with that
I'm new to GIS, so I'll appreciate it if you explain it to me like I'm 5.

Problem injecting variable-pie chart with highcharts-export-server

I'm using Highcharts Export Server as a Node.js module to produce charts in PNG format. When I include a Variable Radius Pie Chart though, I get an error in the resulting File. The error is Highcharts error #17:
The requested series type does not exist.
This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.
The chart I'm using is part of the highcharts-more module, so the error makes sense. I even found docs that seemed to spell out my solution. Thre is a resources option where you can provide scripts for injection to your export. That page is here, but I'll include the important bit below:
-resources
{
"files": "highstock.js,highcharts-more.js,data.js,drilldown.js,funnel.js,heatmap.js,treemap.js,highcharts-3d.js,no-data-to-display.js,map.js,solid-gauge.js,broken-axis.js",
"css": "g.highcharts-series path {stroke-width:2;stroke: pink}",
"js": "document.body.style.webkitTransform = \"rotate(-10deg)\";"
}
files: A comma separated string of filenames that need to be injected to the page for rendering a chart. Only files with the extensions .css and .js are injected, the rest is ignored.
css: css inserted in the body of the page
js: javascript inserted in the body of the page
After some digging, I did find that I could pass this resource option as a JSON stringified object into my export parameters. So, I attempted to inject the remote version of highcharts-more.js.
const exportImagesBase64 = async(data, format = 'png') => {
HighchartsExport.initPool();
let resources = JSON.stringify({
files: "http://code.highcharts.com/highcharts-more.js"
});
let charts = data.map(chart => exportPromise({
type: format, //png
options: chart, //standard highcharts config object
resources //resources option to inject highcharts-more
}));
charts = await Promise.all(charts);
HighchartsExport.killPool();
return charts;
};
const exportPromise = (data) => {
return new Promise((resolve, reject) => {
HighchartsExport.export(data, (err, res) => err ? reject(err) : resolve(res));
});
};
Here is an example of what data might be equal to in the code above
[{
"chart": {
"plotBackgroundColor": null,
"plotBorderWidth": null,
"plotShadow": false,
"type": "variablepie",
"height": 300,
"width": 300
},
"title": {
"text": "Placement Breakdown",
"align": "left",
"x": 30,
"y": 30
},
"tooltip": {
"headerFormat": "",
"pointFormat": "<b> {point.name}</b><br/>Impressions: <b>{point.y}</b><br/>Clicks: <b>{point.z}</b><br/>"
},
"plotOptions": {
"pie": {
"allowPointSelect": true,
"cursor": "pointer",
"dataLabels": {
"enabled": false
},
"showInLegend": true
}
},
"series": [
{
"minPointSize": 10,
"innerSize": "20%",
"zMin": 0,
"data": [
{
"name": "facebook",
"y": 13642,
"z": 357
},
{
"name": "instagram",
"y": 12920,
"z": 326
}
]
}
],
"credits": {
"enabled": false
}
}]
Since adding the resource options, I am still receiving the #17 Highcharts error. Am I thinking about this completely wrong? I can't find any more information out there about this, so I'm hoping someone has some knowledge to share.

The documentation for the variable pie chart type refers to highcharts-more.js as a requirement.
The actual requirement for this chart type appears to be modules/variable-pie.js. Using this additional resource instead should fix issues with "The requested series type does not exist" when exporting.

store the name of a function in a JSON file and later be able to load and call it from within a script?

That title is kind of garbled and this is probably a duplicate but I've been digging a while. This must be really simple. The accepted answer on this question didn't work for me: How to declare and use the name of a function from a json object?
The task: I am trying to externalize the set-up data for a Vis.js timeline into a JSON file . The data set was no problem nor are all of the options except for the function references, "orderByID" and "visTemplate". Those are functions I defined which exist within the script where I am working with the JSON data.
When I try to use the JSON without attempting to convert it, Vis.js complains. When I tried the answer from the question above with the code below, I get the errors show in the image.
This is in Electron and the script is being loaded through a script tag in the index.html.
I await the one-line answer to this simple issue which have spent so much time describing. 😉
console.log(' timelineOptions.order', timelineOptions.order);
console.log(' timelineOptions.template', timelineOptions.template);
console.log('this', this);
console.log('window', window);
timelineOptions.order = window[timelineOptions.orderByID];
timelineOptions.template = window[timelineOptions.visTemplate];
"timelineOptions": {
"order": "orderByID",
"selectable": true,
"zoomable": false,
"width": "100%",
"height": "90%",
"minHeight": 700,
"format": {
"minorLabels": {
"hour": "HH\\h"
}
},
"margin": {
"axis": 20,
"item": 20
},
"start": "2016-12-30",
"end": "2017-01-4",
"template": "visTemplate",
"showCurrentTime": false,
"dataAttributes": "all",
"timeAxis": { "scale": "day", "step": 1 },
"orientation": {
"axis": "top",
"item": "top"
}
}

Not sure if you've setup the right reference on the window object but shouldn't your code read:
timelineOptions.order = window[timelineOptions.order];
You've referenced the string value orderByID instead of the property name you used to set the object up.

Changing Video Background

I have this code that is bringing in a video background file.
I am trying desperately to create multiple links that when clicked change the "filename" cloud to different file,
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="../jquery.backgroundvideo.min.js"></script>
<script>
$(document).ready(function() {
var videobackground = new $.backgroundVideo($('body'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "media/",
"filename": "cloud",
"types": ["mp4","ogg","webm"]
});
});
</script>
any help would be greatly appreciated

The plugin creates a div called #video_background. Just remove it and call $.backgroundVideo again. You could put that in a function with the filename as a parameter:
function changeVideo(filename){
$('#video_background').remove();
var videobackground = new $.backgroundVideo($('body'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "media/",
"filename": filename,
"types": ["mp4","ogg","webm"]
});
}
To call it by clicking on a link, you could do this:
Sun video
And
$('[data-video]').click(function(e){
e.preventDefault(); // prevent the link from reloading the page
changeVideo( $(this).attr('data-video') );
});