How to run basic setup CARTO VL?

Question

I'm new to HTML and to CARTO VL, hoping to jump right in to make a map with animated lines and points, which combined are unavailable in CARTO Builder. I've tried to run the basic CARTO VL set-up guide here: https://carto.com/developers/carto-vl/guides/getting-started/

But I can't even get this to work. I've pasted the exact code into an IDE, and then opened the .html file with a Google Chrome browser. The webpage is just blank. Is it a matter of subbing in my own API key? Or using a different IDE? Or opening the file a different way?

I think I'm missing something fundamental and obvious to programming - not sure what it is!

Answer 1

You're probably making no mistake, Kristen. If you copy & paste exactly the last piece of code from that guide (with the whole html code), there is a relative link to style.css, which you have probably not noticed.

The link in the code is: <link rel="stylesheet" type="text/css" href="../../style.css"> a file which you are probably missing locally.

To get it working quickly you can try with: <link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">

It is important to notice that style.css is a file with quite a lot of styles, for the examples, and it is currently not meant to be used outside 'as-it-is'.

If you are going to play a bit with the library, it could probably be enough to just replace the link with this (and just forget about that css import):

<style>
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  height: 100%;
  width: 100%;
}
</style>

If you are planning for a bigger application (with toolbars, panels, histograms...) then you should definitively try with CARTO Airship library: https://carto.com/developers/airship/