1

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!

  • Hi @Kristen, welcome to GIS SE. I highly recommend taking the onboarding tour. Could you share the HTML & JS code of your application? Are you getting any error on your console? We need this information to replicate your problem and find the right solution. – ramiroaznar Nov 16 '18 at 7:17
3

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/

  • The url is now absolute, not relative, but anyway. That css still has lots of rules for the examples and if you're starting to play with the library, the basic piece of CSS above should be enough – Víctor Velarde Feb 21 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.