## Overview CARTO.js lets you create custom location intelligence applications that leverage the power of the CARTO Platform. ### Audience This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with [Leaflet](https://leafletjs.com/) from a developer's point of view. This conceptual documentation is designed to let you quickly start exploring and developing applications with the CARTO.js library. We also publish the [CARTO.js API Reference]({{site.cartojs_docs}}/reference/). ### Hello, World The easiest way to start learning about the CARTO.js library is to see a simple example. The following web page displays a map adding a layer over it. ```html Single layer | CARTO
``` [View example]({{site.cartojs_docs}}/examples/#example-add-a-layer). Even in this simple example, there are a few things to note: - We declare the application as HTML5 using the `` declaration. - We load the CARTO.js library using a `script` tag. - We create a `div` element named "map" to hold the map. - We define the JavaScript that creates a map in the `div`. These steps are explained below. ### Declaring your application as HTML5 We recommend that you declare a true DOCTYPE within your web application. Within the examples here, we've declared our applications as HTML5 using the simple HTML5 DOCTYPE as shown below: ```html ``` Most current browsers will render content that is declared with this DOCTYPE in "standards mode" which means that your application should be more cross-browser compliant. The DOCTYPE is also designed to degrade gracefully; browsers that don't understand it will ignore it, and use "quirks mode" to display their content. We add styles to the map through the file `style.css`, declaring: ```css body { margin: 0; padding: 0; } #map { position: absolute; height: 100%; width: 100%; z-index: 0; } ``` This CSS declaration indicates that the map container
(with id map) should take up 100% of the height of the HTML body. ### Loading the CARTO.js library To load the Maps JavaScript API, use a script tag like the one in the following example: ```html ``` The URL contained in the script tag is the location of a JavaScript file that loads all of the code you need for using the CARTO.js library. This script tag is required. We are using the minified version of the library. **Tip:** If you have experience with **npm** and a build system in your project (webpack, rollup…), you can install CARTO.js library with `npm install @carto/carto.js`. Then you can import it easily with `import carto from '@carto/carto.js` (or `var carto = require('@carto/carto.js')`, depending on your module system). #### HTTPS or HTTP We think security on the web is pretty important, and recommend using HTTPS whenever possible. As part of our efforts to make the web more secure, we've made all of the CARTO components available over HTTPS. Using HTTPS encryption makes your site more secure, and more resistant to snooping or tampering. We recommend loading the CARTO.js library over HTTPS using the `