Skip to content

Instantly share code, notes, and snippets.

Avatar
🗺️
Mapping

Jorge Sanz jsanz

🗺️
Mapping
View GitHub Profile
@jsanz
jsanz / README.md
Last active Apr 22, 2019
Python: word cloud of FOSS4G 2019 submissions
View README.md
@jsanz
jsanz / README.md
Last active Jun 28, 2019
Leaflet Geocoder with CARTO.js
View README.md

Just a minimal CARTO.js example with the defalut Leaflet Control Geocoder.

Simply add the JS and CSS imports

<!-- Geocoder-->
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
@jsanz
jsanz / README.md
Last active Aug 25, 2021
CARTO VL + Airship + Vue component
View README.md

Minimal example on how to wrap Airship components as a Vue ones and then use them on a CARTO VL visualization. This just outlines the procedure explained in the Airship + Vue guide.

On this minimal example a layer switcher component is used to handle the UI so it only knows about its state, and then emits input methods to the parent Vue instance to allow mapping the boolean property of the sweitcher and then react to changes on it on the layer.

A range slider is used twice (to show component reusability) to allow filtering the visualization by a couple of fields.

Check also how the isLayerVisible computed variable is used for conditional rendering of several classes and widgets disable.

@jsanz
jsanz / index.html
Last active Jun 17, 2019
CARTO VL - Basemap Switcher
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CARTO VL: Switch the basemap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="https://carto.com/favicon.ico">
@jsanz
jsanz / index.html
Last active Jan 2, 2019
CARTO VL: Selection by polygon
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CARTO VL: Selection by polygon example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="https://carto.com/favicon.ico">
@jsanz
jsanz / index.html
Last active Dec 5, 2018
CARTO VL - Table Widget example
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v1.0.3/airship.css">
<script src="https://libs.cartocdn.com/airship-components/v1.0.3/airship.js"></script>
<script src="https://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
@jsanz
jsanz / .gitignore
Last active Dec 3, 2018
Python: Download all the maps from your account
@jsanz
jsanz / pgdump+copy.md
Last active Apr 24, 2019
CARTO new COPY endpoint & ogr2ogr
View pgdump+copy.md

These are the steps to test the new CARTO COPY endpoint (more details here and here.

  1. Downloaded a Brooklyn PLUTO shapefile from here as a data testing example.
  2. Generated a 1 row dataset to upload to CARTO the definition of the shapefile
  3. Uploaded it to CARTO using normal Import API (with a client I have for convenience)
  4. Removed the row
  5. Converted the original shapefile into a PGDump file
  6. Generated the COPY command using the third line of bkmappluto.txt
  7. Removed first 4 and last 2 lines of the resulting $file.
  8. Encoding the COPY command to be used on a URL, I run curl command to upload the dataset
@jsanz
jsanz / index.html
Last active Aug 14, 2018 — forked from padawannn/index.html
HaCkARTO.js · Javier Aragón submission
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CARTO.js App</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- 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 -->
View app.css
This file has been truncated, but you can view the full file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #4285F4;
}