examples/editor/index.js
/**
 * Generates an HTML template for the given map configuration
 */
Generates an HTML template for the given map configuration
Generates an HTML template for the given map configuration
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>Add layer | CARTO</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <!-- Include CARTO VL JS -->
        <script src="http://libs.cartocdn.com/carto-vl/v${carto.version}/carto-vl.js"></script>
        <!-- Include Mapbox GL JS -->
        <script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
        <!-- Include Mapbox GL CSS -->
        <link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/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},
                dragRotate: false,
                touchZoomRotate: false
            });
            carto.setDefaultConfig({
                serverURL: '${serverURL}'
            });
            carto.setDefaultAuth({
                user: '${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