Eric Brelsford ebrelsford

Potential issues and workarounds when using Carto.js v3 with maps made with the Builder interface

When using the current version (v3 as of March 2017) of Carto.js with maps using Carto's new Builder interface, there are some issues you are likely to run into. Here I run through the common issues and some suggested workarounds.

Analysis and Widgets don't work

This is because Carto.js v3 doesn't understand them. Sorry but there is no easy workaround here. In the case of Analysis you could save it as its own layer and use that layer instead.

	class PinnedOverlay extends React.Component {
	constructor(props) {
	super(props);

	var image = new Image();
	image.src = window.getComputedStyle(this.props.overlaid)['background-image'].replace(/"/g,"").replace(/url\(\|\)$/ig, "");

	this.imageWidth = image.width;
	this.imageHeight = image.height;
	this.aspectRatio = this.imageWidth / this.imageHeight;

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

	<!--
	Load Carto's code so we can pull in our Carto maps.
	-->
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />

	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

	<!--
	Load Carto's code so we can pull in our Carto maps.
	-->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />

	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

	<!--
	Load Carto's code so we can pull in our Carto maps.
	-->

	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

	<!--
	Load Carto's code so we can pull in our Carto maps.
	-->
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />

Eric Brelsford ebrelsford

Potential issues and workarounds when using Carto.js v3 with maps made with the Builder interface

Analysis and Widgets don't work

Legends don't work