Skip to content

Instantly share code, notes, and snippets.

View ivanmalagon's full-sized avatar
✨

Ivan Malagon ivanmalagon

✨
19 followers · 10 following
  • Madrid
View GitHub Profile
@ivanmalagon
ivanmalagon / createobject.js
Last active August 29, 2015 13:56
Create object in Javascript - As seen on 'The good parts'
if (typeof Object.create !== 'function') {
Object.create = function(o) {
var F = function() {};
F.prototype = o;
return new F();
};
}
@ivanmalagon
ivanmalagon / index.html
Created September 22, 2016 10:30
Easing function proof of concept
<html>
<head>
<style>
.orange {
height: 64;
width: 64;
margin-top: 64;
margin-left: 64;
background-color: orange;
}
@ivanmalagon
ivanmalagon / index.html
Last active November 21, 2017 12:12
HaCkARTO.js boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CARTO.js App</title>
<!-- Include Leaflet 1.2.0 Library -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<!-- Include cartodb.js Library -->
<script src="https://rawgit.com/CartoDB/cartodb.js/dist/carto.js"></script>
@ivanmalagon
ivanmalagon / index.html
Last active January 12, 2018 16:37
OpenLayers
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>OpenLayers – Vector tiles – Points aggregation | CARTO</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
<script src="https://openlayers.org/en/v4.6.4/examples/resources/mapbox-streets-v6-style.js"></script>
<style>
@ivanmalagon
ivanmalagon / index.html
Created January 12, 2018 16:40
MapboxGL with CARTO MVT
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Carto - Windshaft Aggregation API - Mapbox GL example</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.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
@ivanmalagon
ivanmalagon / index.html
Last active March 12, 2018 10:12
Get bounds in CARTO.js
<!DOCTYPE html>
<html>
<head>
<title>Bounds example | CARTO</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
<!-- Include CARTO.js -->
@ivanmalagon
ivanmalagon / index.js
Created April 2, 2018 20:53
BICIMAD AND SQL API
const axios = require('axios');
const CLIENT_ID = 'YOUR_BICIMAD_CLIENT_ID';
const PASSKEY = 'YOUR_BICIMAD_PASSKEY';
const USERNAME = 'YOUR_USERNAME';
const TABLE_NAME = 'YOUR_TABLE_NAME';
const API_KEY = 'YOUR_CARTO_API_KEY';
const BICIMAD_URL = `https://rbdata.emtmadrid.es:8443/BiciMad/get_stations/${CLIENT_ID}/${PASSKEY}/`;
const BATCH_QUERY_URL = `https://${USERNAME}.carto.com/api/v2/sql/job?api_key=${API_KEY}`;
const MAX_JOB_SIZE = 16000;
@ivanmalagon
ivanmalagon / bundle.js
Created June 6, 2018 16:33
Madrid commuting - Hackarto VL
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
@ivanmalagon
ivanmalagon / index.js
Created June 7, 2018 09:49
UID GENERATOR
function S4 () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
@ivanmalagon
ivanmalagon / gist:6c2e4d29aa70e9d4746c42104bed1945
Created January 15, 2020 14:36
Styled Components TIps
Props tips
https://codesandbox.io/s/sc-props-ppsij
const Paragraph2 = styled.p(
props => css`
width: 400px;
margin: auto;
/* props can be accessed from the above props */
color: ${props.color};