ramiroaznar

<!DOCTYPE html>
<html>
  <head>
    <title>Click on button to open a Leaflet popup | CARTO.s v4.1</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <!-- Include jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Include Leaflet -->
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

ramiroaznar

L.AnimatedMarker = L.Marker.extend({
  options: {
    // meters
    distance: 200,
    // ms
    interval: 1000,
    // animate on add?
    autoStart: true,
    // callback onend
    onEnd: function(){},

ramiroaznar

<!DOCTYPE html>
<html>
<head>
  <title>How to add a Singapore basemap in Leaflet</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="http://cartodb.com/assets/favicon.ico" />
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

ramiroaznar

<html>
	<head>
		<title>Getting coordinates from a Leaflet map</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
		<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
		<style type="text/css">
		 	html, body, #map{
		 		height: 100%;
		 		padding: 0;

ramiroaznar

<!DOCTYPE html>
<html>
  <head>
    <title>CARTO.js + Highchart.js</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="http://cartodb.com/assets/favicon.ico" />

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

ramiroaznar

The good, the handsome and the turbo.

• Author: @ramiroaznar
• Link: http://bit.ly/turbo-carto-geocamp
• Slides: http://bit.ly/turbo-carto-talk

INDEX

• CARTOCSS vs. TURBO CARTO

ramiroaznar

The map is set to drag the marker and get its new location with a popup. Uncomment from line 32 to 39, and comment line 41 to 51 in order to see how to add markers on click.

ramiroaznar

<html>
<head>
  <title>How to create an interactive heatmap with Leaflet.js</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  	<script src="leaflet-heat.js"></script>
	<style type="text/css">
	 	html, body, #map{
	 		height: 100%;

ramiroaznar

{% test is_in_null_island(model, column_name) %}

with validation as (

    select
        st_x({{ column_name }}) as lng,
        st_y({{ column_name }}) as lat
    from 
        {{ model }}

ramiroaznar

<html>
<head>
  <title>Interaction and styling GeoJSON with Leaflet.js</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<style type="text/css">
	 	html, body, #map{
	 		height: 100%;
	 		padding: 0;