ramiroaznar · July 18, 2018 16:41
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>GR11 Vector Map | CARTO VL</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <!-- Include CARTO VL JS -->
  <script src="https://libs.cartocdn.com/carto-vl/v0.5.3/carto-vl.min.js"></script>
  <!-- Include Mapbox GL JS -->
  <script src="https://libs.cartocdn.com/mapbox-gl/v0.45.0-carto1/mapbox-gl.js"></script>
  <!-- Include Mapbox GL CSS -->
 	<link href="https://libs.cartocdn.com/mapbox-gl/v0.45.0-carto1/mapbox-gl.css" rel="stylesheet" />
 	<link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
 </head>
 <body>

 	<div id="loader">
 		<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
 			<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
 				<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
 			</svg>
 		</div>
 	</div>

 	<div id="map"></div>

  <script>
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
      center: [-0.63, 42.8],
      zoom: 10,
      scrollZoom: true,
      dragRotate: false,
      touchZoomRotate: false,
    });

    // Define pop-up
    const popup = new mapboxgl.Popup({
      closeButton: false,
      closeOnClick: false
    });

    // Define user
    carto.setDefaultAuth({
      user: 'ramirocartodb',
      apiKey: 'Gcmg4-AbSzHr2guCmYySuw'
    });

    // Define tracks layer
    const tracksSource = new carto.source.Dataset('gr11_tracks');
    const tracksViz = new carto.Viz(`
 			@height_diff: $height_diff
 			@distance: $distance
 			@origin: $origin
 			@destination: $destination
 			@dow: $dow
 			@date: $date
 			@ratio: $height_diff / $distance

      width: 2
      color: ramp(linear(@ratio, 57, 153), [#0a3e39, #84ebe1])
    `);
    const tracksLayer = new carto.Layer('tracksLayer', tracksSource, tracksViz);

 		// Define stops layer
 		const stopsSource = new carto.source.Dataset('gr11_stops');
    const stopsViz = new carto.Viz(`
 			@names: $names

 			width: zoom() / 20
 			color: white
 			strokeColor: black
 			symbol: image('https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/marker-18.svg')
    `);
    const stopsLayer = new carto.Layer('stopsLayer', stopsSource, stopsViz);
 		
 		// Add layers
    stopsLayer.addTo(map, 'watername_ocean');
 		tracksLayer.addTo(map, 'stopsLayer');

 		// Set interactivity
 		const tracksInteractivity = new carto.Interactivity(tracksLayer);
 		const stopsInteractivity = new carto.Interactivity(stopsLayer);

 		tracksInteractivity.on('featureEnter', featureEvent => {
    	featureEvent.features[0].color.blendTo('rgba(255, 0, 0, 0.5)', 100);

 			if (featureEvent.features.length > 0) {
 				const vars = featureEvent.features[0].variables;
 				popup.setHTML(`
 					<div>
 						<h2 class ="h2">${vars.origin.value} - ${vars.destination.value}</h2>
 						<h3 class ="h3">${vars.dow.value}, ${vars.date.value}</h3>
 						<p class="description open-sans">Distance: ${vars.distance.value} Km</p>
 						<p class="description open-sans">Height Difference: ${vars.height_diff.value} m</p>
 					</div>
 				`);
 				popup.setLngLat([featureEvent.coordinates.lng, featureEvent.coordinates.lat]);
 			if (!popup.isOpen()) {
 				popup.addTo(map);
 			}
 			} else {
 				popup.remove();
 			}

 		});
 		
 		stopsInteractivity.on('featureEnter', featureEvent => {
    	featureEvent.features[0].color.blendTo('rgba(255, 0, 0, 0.5)', 100);

 				if (featureEvent.features.length > 0) {
 					const vars = featureEvent.features[0].variables;
 					popup.setHTML(`
 						<div>
 							<h3 class ="h3">${vars.names.value}</h3>
 						</div>
 					`);
 					popup.setLngLat([featureEvent.coordinates.lng, featureEvent.coordinates.lat]);
 				if (!popup.isOpen()) {
 					popup.addTo(map);
 				}
 				} else {
 					popup.remove();
 				}

 		});

 		tracksInteractivity.on('featureLeave', featureEvent => {
    	featureEvent.features[0].color.reset();
 		});

 		stopsInteractivity.on('featureLeave', featureEvent => {
 				featureEvent.features[0].color.reset();
 		});

    tracksLayer.on('loaded', hideLoader);

    function hideLoader() {
      document.getElementById('loader').style.opacity = '0';
    }
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>GR11 Vector Map \| CARTO VL</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<!-- Include CARTO VL JS -->
	<script src="https://libs.cartocdn.com/carto-vl/v0.5.3/carto-vl.min.js"></script>
	<!-- Include Mapbox GL JS -->
	<script src="https://libs.cartocdn.com/mapbox-gl/v0.45.0-carto1/mapbox-gl.js"></script>
	<!-- Include Mapbox GL CSS -->
	<link href="https://libs.cartocdn.com/mapbox-gl/v0.45.0-carto1/mapbox-gl.css" rel="stylesheet" />
	<link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
	</head>
	<body>

	<div id="loader">
	<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
	<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
	<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
	</svg>
	</div>
	</div>

	<div id="map"></div>

	<script>
	const map = new mapboxgl.Map({
	container: 'map',
	style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
	center: [-0.63, 42.8],
	zoom: 10,
	scrollZoom: true,
	dragRotate: false,
	touchZoomRotate: false,
	});

	// Define pop-up
	const popup = new mapboxgl.Popup({
	closeButton: false,
	closeOnClick: false
	});

	// Define user
	carto.setDefaultAuth({
	user: 'ramirocartodb',
	apiKey: 'Gcmg4-AbSzHr2guCmYySuw'
	});

	// Define tracks layer
	const tracksSource = new carto.source.Dataset('gr11_tracks');
	const tracksViz = new carto.Viz(`
	@height_diff: $height_diff
	@distance: $distance
	@origin: $origin
	@destination: $destination
	@dow: $dow
	@date: $date
	@ratio: $height_diff / $distance

	width: 2
	color: ramp(linear(@ratio, 57, 153), [#0a3e39, #84ebe1])
	`);
	const tracksLayer = new carto.Layer('tracksLayer', tracksSource, tracksViz);

	// Define stops layer
	const stopsSource = new carto.source.Dataset('gr11_stops');
	const stopsViz = new carto.Viz(`
	@names: $names

	width: zoom() / 20
	color: white
	strokeColor: black
	symbol: image('https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/marker-18.svg')
	`);
	const stopsLayer = new carto.Layer('stopsLayer', stopsSource, stopsViz);

	// Add layers
	stopsLayer.addTo(map, 'watername_ocean');
	tracksLayer.addTo(map, 'stopsLayer');

	// Set interactivity
	const tracksInteractivity = new carto.Interactivity(tracksLayer);
	const stopsInteractivity = new carto.Interactivity(stopsLayer);

	tracksInteractivity.on('featureEnter', featureEvent => {
	featureEvent.features[0].color.blendTo('rgba(255, 0, 0, 0.5)', 100);

	if (featureEvent.features.length > 0) {
	const vars = featureEvent.features[0].variables;
	popup.setHTML(`
	<div>
	<h2 class ="h2">${vars.origin.value} - ${vars.destination.value}</h2>
	<h3 class ="h3">${vars.dow.value}, ${vars.date.value}</h3>
	<p class="description open-sans">Distance: ${vars.distance.value} Km</p>
	<p class="description open-sans">Height Difference: ${vars.height_diff.value} m</p>
	</div>
	`);
	popup.setLngLat([featureEvent.coordinates.lng, featureEvent.coordinates.lat]);
	if (!popup.isOpen()) {
	popup.addTo(map);
	}
	} else {
	popup.remove();
	}

	});

	stopsInteractivity.on('featureEnter', featureEvent => {
	featureEvent.features[0].color.blendTo('rgba(255, 0, 0, 0.5)', 100);

	if (featureEvent.features.length > 0) {
	const vars = featureEvent.features[0].variables;
	popup.setHTML(`
	<div>
	<h3 class ="h3">${vars.names.value}</h3>
	</div>
	`);
	popup.setLngLat([featureEvent.coordinates.lng, featureEvent.coordinates.lat]);
	if (!popup.isOpen()) {
	popup.addTo(map);
	}
	} else {
	popup.remove();
	}

	});

	tracksInteractivity.on('featureLeave', featureEvent => {
	featureEvent.features[0].color.reset();
	});

	stopsInteractivity.on('featureLeave', featureEvent => {
	featureEvent.features[0].color.reset();
	});

	tracksLayer.on('loaded', hideLoader);

	function hideLoader() {
	document.getElementById('loader').style.opacity = '0';
	}
	</script>
	</body>
	</html>