leodc · March 14, 2018 16:46
diff --git a/routes.html b/routes.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Repubikla - rutas</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>

    <style media="screen">
    html, body{
      height: 100%;
      width: 100%;
      margin: 0;
    }
    </style>
  </head>
 <body>
  <div id="mapid" style="width: 100%; height: 100%;"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  <script src="migrationLayer.js"></script>


  <script>
  var map = L.map('mapid').setView([19.4319, -99.1329], 13);

  var CartoDB_DarkMatter = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    subdomains: 'abcd',
    maxZoom: 19
  }).addTo(map)


  $.getJSON("https://repubikla.carto.com:443/api/v2/sql?q=select ST_AsGeoJSON(the_geom) from public.rutas where ruta_motivo like 'Ir al trabajo' AND ST_Intersects(the_geom, ST_SetSRID('POLYGON((-99.26216125488281 19.27744323287618, -99.02320861816406 19.27744323287618, -99.02320861816406 19.55526092584745, -99.26216125488281 19.55526092584745, -99.26216125488281 19.27744323287618))'::geometry,4326))", function(response){
    var data = [];
    var counter = 0;
    for(var row of response.rows){
      var coordinatesArray = JSON.parse(row.st_asgeojson).coordinates[0];

      for(var i = 0; i < coordinatesArray.length-1; i++){
        var coordinatesObj = {
          "color":"#3366cc",
          "labels":[null,null]
        }

        coordinatesObj.from = coordinatesArray[i];
        coordinatesObj.to = coordinatesArray[i+1];

        data.push(coordinatesObj);
      }

      if(++counter == 15){
        break
      }
    }

    var migrationLayer = new L.migrationLayer({
      map: map,
      data: data,
      pulseRadius:0,
      pulseBorderWidth:0,
      arcWidth:0,
      arcLabel:false
    }
  );

  migrationLayer.addTo(map);

  migrationLayer.play();
 });

 </script>



 </body>
 </html>



 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Repubikla - rutas</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>

	<style media="screen">
	html, body{
	height: 100%;
	width: 100%;
	margin: 0;
	}
	</style>
	</head>
	<body>
	<div id="mapid" style="width: 100%; height: 100%;"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
	<script src="migrationLayer.js"></script>


	<script>
	var map = L.map('mapid').setView([19.4319, -99.1329], 13);

	var CartoDB_DarkMatter = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	maxZoom: 19
	}).addTo(map)


	$.getJSON("https://repubikla.carto.com:443/api/v2/sql?q=select ST_AsGeoJSON(the_geom) from public.rutas where ruta_motivo like 'Ir al trabajo' AND ST_Intersects(the_geom, ST_SetSRID('POLYGON((-99.26216125488281 19.27744323287618, -99.02320861816406 19.27744323287618, -99.02320861816406 19.55526092584745, -99.26216125488281 19.55526092584745, -99.26216125488281 19.27744323287618))'::geometry,4326))", function(response){
	var data = [];
	var counter = 0;
	for(var row of response.rows){
	var coordinatesArray = JSON.parse(row.st_asgeojson).coordinates[0];

	for(var i = 0; i < coordinatesArray.length-1; i++){
	var coordinatesObj = {
	"color":"#3366cc",
	"labels":[null,null]
	}

	coordinatesObj.from = coordinatesArray[i];
	coordinatesObj.to = coordinatesArray[i+1];

	data.push(coordinatesObj);
	}

	if(++counter == 15){
	break
	}
	}

	var migrationLayer = new L.migrationLayer({
	map: map,
	data: data,
	pulseRadius:0,
	pulseBorderWidth:0,
	arcWidth:0,
	arcLabel:false
	}
	);

	migrationLayer.addTo(map);

	migrationLayer.play();
	});

	</script>



	</body>
	</html>



	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>