examples/editor/index.js
function generateSnippet (config) {
    const apiKey = config.b || 'default_public';
    const username = config.c;
    const serverURL = config.d || 'https://{user}.carto.com';
    const vizSpec = config.e || '';
    const center = config.f || { lat: 0, lng: 0 };
    const zoom = config.g || 10;
    const basemap = BASEMAPS[config.h] || 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';

    const source = config.i === sourceTypes.DATASET
        ? `new carto.source.Dataset("${config.a}")`
        : `new carto.source.SQL(\`${config.a}\`)`;

    return `<!DOCTYPE html>
<html>
<head>
<title>Exported map | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="http://libs.cartocdn.com/carto-vl/v${carto.version}/carto-vl.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<style>
    html, body {
        margin: 0;
    }
    #map {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new mapboxgl.Map({
        container: 'map',
        style: '${basemap}',
        center: [${center.lng}, ${center.lat}],
        zoom: ${zoom}
    });

    carto.setDefaultConfig({
        serverURL: '${serverURL}'
    });

    carto.setDefaultAuth({
        username: '${username}',
        apiKey: '${apiKey}'
    });


    const source = ${source};
    const viz = new carto.Viz(\`
        ${vizSpec}
    \`);
    const layer = new carto.Layer('layer', source, viz);

    layer.addTo(map, 'watername_ocean');
</script>
</body>
</html>
`;
}
function generateSnippet (config) {
    const apiKey = config.b || 'default_public';
    const username = config.c;
    const serverURL = config.d || 'https://{user}.carto.com';
    const vizSpec = config.e || '';
    const center = config.f || { lat: 0, lng: 0 };
    const zoom = config.g || 10;
    const basemap = BASEMAPS[config.h] || 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';

    const source = config.i === sourceTypes.DATASET
        ? `new carto.source.Dataset("${config.a}")`
        : `new carto.source.SQL(\`${config.a}\`)`;

    return `<!DOCTYPE html>
<html>
<head>
<title>Exported map | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="http://libs.cartocdn.com/carto-vl/v${carto.version}/carto-vl.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<style>
    html, body {
        margin: 0;
    }
    #map {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new mapboxgl.Map({
        container: 'map',
        style: '${basemap}',
        center: [${center.lng}, ${center.lat}],
        zoom: ${zoom}
    });

    carto.setDefaultConfig({
        serverURL: '${serverURL}'
    });

    carto.setDefaultAuth({
        username: '${username}',
        apiKey: '${apiKey}'
    });


    const source = ${source};
    const viz = new carto.Viz(\`
        ${vizSpec}
    \`);
    const layer = new carto.Layer('layer', source, viz);

    layer.addTo(map, 'watername_ocean');
</script>
</body>
</html>
`;
}
function generateSnippet ( config ) { const apiKey = config . b || 'default_public' ; const username = config . c ; const serverURL = config . d || 'https://{user}.carto.com' ; const vizSpec = config . e || '' ; const center = config . f || { lat : 0 , lng : 0 } ; const zoom = config . g || 10 ; const basemap = BASEMAPS [ config . h ] || 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json' ; const source = config . i === sourceTypes . DATASET ? ` ${ config . a } ` : ` \` ${ config . a } \` ` ; return ` ${ carto . version } ${ basemap } ${ center . lng } ${ center . lat } ${ zoom } ${ serverURL } ${ username } ${ apiKey } ${ source } \` ${ vizSpec } \` ` ; }
Generates an HTML template for the given map configuration
Generates an HTML template for the given map configuration