Shoaib Burq sabman

This example shows how to create a Leaflet map with a basemap and an empty CartoDB.js layer. Once the layer is created a function is attached the event of the layers selector checkboxes so on any state change, the sublayers are removed and recreated according to the user selection.

CartoDB's MVT service + Mapbox GL

Check index.html for some examples. These use a beta feature of CartoDB's Maps API: fixed URLs. So there is no need to use cartodb.js and tiles can be consumed using a named map name.

cartodb.js example

Check cartodb.js.html to see the integration with cartodb.js and in particular with cartodb.core.js.

Mapbox GL resources

API reference

If you are running a large website where you will need to test new features on a seperate url before pushing them live then the following instructions are for you ;)

For this example imagine your url is apple.com and you want a development/staging site on a subdomain which is dev.apple.com

Setup

First thing you'll want to do is go ahead and create your website in plesk and add the subdomain dev.apple.com at the same time.
ssh into the server e.g. $ ssh username@ipaddress
Once logged in cd into the private directory (this will be where all git repos are stored) e.g. $ cd ~/private
Create the main repo e.g. $ git init --bare apple.git

	var map = L.map('map', {
	scrollWheelZoom: false,
	center: [-18, -46],
	zoom: 8
	});

	L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: '<a href="http://cartodb.com">CartoDB</a> © 2014',
	maxZoom: 18
	}).addTo(map);

	<!doctype html>
	<html>
	<head>
	<title>Tornadoes total versus max damage</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
	<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
	<style>
	canvas{
	}

	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>carto-mapboxgl-demo</title>
	<link href='https://api.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body {

	<!doctype html>
	<head>
	<title>Choropleth map with time range slider</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://www.w3schools.com/lib/w3data.js"></script>
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/styles.css">

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }

	AllCops:
	RunRailsCops: true

	# Commonly used screens these days easily fit more than 80 characters.
	Metrics/LineLength:
	Max: 120

	# Too short methods lead to extraction of single-use methods, which can make
	# the code easier to read (by naming things), but can also clutter the class
	Metrics/MethodLength:

	<!DOCTYPE html>
	<html>
	<head>
	<title>leaflet.draw + CARTO</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet-src.js"></script>