Skip to content

Instantly share code, notes, and snippets.

@rochoa

rochoa/app.js

Last active March 16, 2017 13:01
Show Gist options
  • Save rochoa/76357f23fcc2b0877f27 to your computer and use it in GitHub Desktop.
Save rochoa/76357f23fcc2b0877f27 to your computer and use it in GitHub Desktop.
Download ZIP
[CARTO] Maps API Sandwich
Raw
app.js
var map = L.map('map', {
scrollWheelZoom: false,
center: [54.09806018306312, -3.80126953125],
zoom: 6
});
//var mapConfigEditor = CodeMirror.fromTextArea(document.getElementById('map_config_editor'), {
// theme: 'monokai',
// lineNumbers: true,
// mode: "javascript",
// height: "100px",
// lineWrapping: true,
// foldGutter: true,
// gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
//});
var windshaftLayer = null;
function updateMap() {
if (windshaftLayer) {
map.removeLayer(windshaftLayer);
}
var mapConfigJson = getMapConfig(getEnabledMapLayers());
var request = new XMLHttpRequest();
request.open('POST', currentEndpoint(), true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.onload = function() {
if (this.status >= 200 && this.status < 400){
var layergroup = JSON.parse(this.response);
var tilesEndpoint = currentEndpoint() + '/' + layergroup.layergroupid + '/all/{z}/{x}/{y}.png';
var protocol = 'https:' == document.location.protocol ? 'https' : 'http';
if (layergroup.cdn_url && layergroup.cdn_url[protocol]) {
var domain = layergroup.cdn_url[protocol];
if ('http' === protocol) {
domain = '{s}.' + domain;
}
tilesEndpoint = protocol + '://' + domain + '/' + currentUser() + '/api/v1/map/' + layergroup.layergroupid + '/all/{z}/{x}/{y}.png';
}
windshaftLayer = L.tileLayer(tilesEndpoint, {
maxZoom: 18
}).addTo(map);
document.getElementById('map_config').innerHTML = JSON.stringify(mapConfigJson, null, 4);
} else {
throw 'Error calling server: Error ' + this.status + ' -> ' + this.response;
}
};
request.send(JSON.stringify(mapConfigJson));
}
function currentUser() {
return currentEndpoint().match(/http[s]*:\/\/([^.]*).*/)[1];
}
function currentEndpoint() {
return document.getElementById('endpoint').value || 'http://development.localhost.lan:8181/api/v1/map';
}
//CodeMirror.commands.save = function() {
// updateMap();
//};
var winHeight = (window.innerHeight || 600) + 'px';
document.getElementById('viewer').style.height = winHeight;
document.getElementById('map').style.height = winHeight;
var map_layers = document.getElementById('map_layers');
var more_layers = document.getElementById('more_layers');
Object.keys(layers).forEach(function(layerId) {
var layer = layers[layerId];
var listElement = document.createElement('li');
listElement.innerHTML = layerId;
listElement.id = layerId;
if (layer.checked) {
map_layers.appendChild(listElement);
} else {
more_layers.appendChild(listElement);
}
});
function getMapConfig(mapLayerIds) {
var enabledLayers = mapLayerIds.map(function(layerId) {
return layers[layerId].config;
});
return {
version: "1.3.0",
layers: enabledLayers
};
}
jQuery(function($) {
$(".connectedSortable").sortable({
placeholder: "ui-state-highlight",
connectWith: ".connectedSortable",
stop: updateMap
}).disableSelection();
});
function getEnabledMapLayers() {
var enabledMapLayers = [];
for (var i = 0; i < map_layers.childNodes.length; i++) {
enabledMapLayers.push(map_layers.childNodes[i].id);
}
return enabledMapLayers;
}
updateMap();
document.getElementById('show_mapconfig').addEventListener('click', function() {
document.getElementById('map_config_viewer').style.display = 'block';
}, false);
document.getElementById('close_mapconfig').addEventListener('click', function() {
document.getElementById('map_config_viewer').style.display = 'none';
}, false);
Raw
examples.js
function getCartoCss(id, rules) {
return '#' + id + ' {\n\t' +
rules.join('\n\t')
+ '\n}'
}
var layers = {
plain: {
config: {
"type": "plain",
"options": {
"color": "#fabada"
}
},
checked: false
},
labels_basemap_light: {
config: {
"type": "http",
"options": {
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
"subdomains": ["a", "b", "c"]
}
},
checked: false
},
basemap_light: {
config: {
"type": "http",
"options": {
"urlTemplate": "http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png",
"subdomains": ["a", "b", "c"]
}
},
checked: true
},
labels_basemap_dark: {
config: {
"type": "http",
"options": {
"urlTemplate": "http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
"subdomains": ["a", "b", "c"]
}
},
checked: false
},
basemap_dark: {
config: {
"type": "http",
"options": {
"urlTemplate": "http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
"subdomains": ["a", "b", "c"]
}
},
checked: false
},
basemap_nokia: {
config: {
"type": "http",
"options": {
"urlTemplate": "https://{s}.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.night/{z}/{x}/{y}/256/png8?lg=eng&token=A7tBPacePg9Mj_zghvKt9Q&app_id=KuYppsdXZznpffJsKT24",
"subdomains": "1234"
}
},
checked: false
},
urban_areas: {
config: {
"type": "cartodb",
"options": {
"sql": 'SELECT * FROM ne_50m_urban_areas',
"cartocss": [
'#ne_50m_urban_areas{',
' polygon-fill: #666;',
' polygon-opacity: 0.7;',
' line-color: #FFF;',
' line-width: 1;',
' line-opacity: 1;',
'}'
].join(' '),
"interactivity": "cartodb_id",
"cartocss_version": "2.3.0"
}
},
checked: false
},
urban_areas_red: {
config: {
"type": "mapnik",
"options": {
"sql": 'SELECT * FROM ne_50m_urban_areas',
"cartocss": [
'#ne_50m_urban_areas{',
' polygon-fill: #c33;',
' polygon-opacity: 0.7;',
' line-color: #FFF;',
' line-width: 1;',
' line-opacity: 1;',
'}'
].join(' '),
"interactivity": "cartodb_id",
"cartocss_version": "2.2.0"
}
},
checked: true
},
torque: {
config: {
"type": "torque",
options: {
sql: "select *, (CASE WHEN \"road_type\" = '6' THEN 1 WHEN \"road_type\" = '3' THEN 2 WHEN \"road_type\" = '1' THEN 3 WHEN \"road_type\" = '2' THEN 4 WHEN \"road_type\" = '7' THEN 5 WHEN \"road_type\" = '9' THEN 6 ELSE 7 END) as torque_category FROM (SELECT to_timestamp(date || ' ' || time, 'DD/MM/YYYY HH24:MI') date_time, * FROM dftroadsafety_accidents_2012) _cdb_wrap",
cartocss: [
'Map {',
'-torque-frame-count:512;',
'-torque-animation-duration:30;',
'-torque-time-attribute:"date_time";',
'-torque-aggregation-function:"CDB_Math_Mode(torque_category)";',
'-torque-resolution:1;',
'-torque-data-aggregation:linear;',
'}',
'',
'#dftroadsafety_accidents_2012{',
' comp-op: multiply;',
' marker-fill-opacity: 0.9;',
' marker-line-color: #FFF;',
' marker-line-width: 0;',
' marker-line-opacity: 1;',
' marker-type: ellipse;',
' marker-width: 3;',
' marker-fill: #FF9900;',
'}',
'#dftroadsafety_accidents_2012[frame-offset=1] {',
' marker-width:5;',
' marker-fill-opacity:0.45; ',
'}',
'#dftroadsafety_accidents_2012[frame-offset=2] {',
' marker-width:7;',
' marker-fill-opacity:0.225; ',
'}',
'#dftroadsafety_accidents_2012[value=1] {',
' marker-fill: #A6CEE3;',
'}',
'#dftroadsafety_accidents_2012[value=2] {',
' marker-fill: #1F78B4;',
'}',
'#dftroadsafety_accidents_2012[value=3] {',
' marker-fill: #B2DF8A;',
'}',
'#dftroadsafety_accidents_2012[value=4] {',
' marker-fill: #33A02C;',
'}',
'#dftroadsafety_accidents_2012[value=5] {',
' marker-fill: #FB9A99;',
'}',
'#dftroadsafety_accidents_2012[value=6] {',
' marker-fill: #E31A1C;',
'}'
].join(' '),
cartocss_version: "1.0.0"
}
},
checked: true
},
named: {
config: {
"type": "named",
"options": {
"name": "world_borders"
}
},
checked: false
},
sigpac: {
config: {
"type": "http",
"options": {
"urlTemplate": "http://sigpac.magrama.es/SDG/raster/MTN25@3857/{z}.{x}.{y}.img",
"subdomains": ["a", "b", "c"],
"tms": true
}
},
checked: false
},
nurburgring_multipolygons: {
config: {
type: "mapnik",
options: {
sql: 'select * from nurburgring_area_multipolygons',
"cartocss_version": "2.3.0",
cartocss: getCartoCss('nurburgring_area_multipolygons', [
'polygon-fill: #FF3300;',
'polygon-opacity: 0.7;',
'line-color: #FFF;',
'line-width: 0.3;',
'line-opacity: 1;'
])
}
},
checked: false
},
world_borders: {
config: {
type: "mapnik",
options: {
sql: 'select * from world_borders_public',
"cartocss_version": "2.3.0",
cartocss: getCartoCss('world_borders_public', [
'polygon-fill: #FF3300;',
'polygon-opacity: 0.7;',
'line-color: #FFF;',
'line-width: 0.3;',
'line-opacity: 1;'
])
}
},
checked: false
},
bbox: {
config: {
type: "mapnik",
options: {
sql: 'select ST_Transform(ST_MakeEnvelope(-124.7625, 24.521, -66.9326, 49.3845, 4326), 3857) the_geom_webmercator',
"cartocss_version": "2.3.0",
cartocss: getCartoCss('layer', [
'polygon-fill: #FF3300;',
'polygon-opacity: 0.7;',
'line-color: #333;',
'line-width: 1;',
'line-opacity: 0.2;'
])
}
},
checked: true
},
bbox_centroid: {
config: {
type: "mapnik",
options: {
sql: 'select ST_Transform(ST_MakeEnvelope(6, 49, 9, 52, 4326), 3857) the_geom_webmercator',
"cartocss_version": "2.3.0",
cartocss: getCartoCss('layer', [
'polygon-fill: #FF3300;',
'polygon-opacity: 0.7;',
'line-color: #333;',
'line-width: 1;',
'line-opacity: 0.2;'
])
}
},
checked: true
},
bbox_uk: {
config: {
type: "mapnik",
options: {
sql: 'select ST_Transform(ST_MakeEnvelope(-5, 51, 2, 54, 4326), 3857) the_geom_webmercator',
"cartocss_version": "2.3.0",
cartocss: getCartoCss('layer', [
'polygon-fill: #FFF;',
'polygon-opacity: 0.7;',
'line-color: #333;',
'line-width: 1;',
'line-opacity: 1.0;'
])
}
},
checked: true
},
torque_populated: {
config: {
type: "torque",
options: {
sql: 'select * from ne_10m_populated_places_simple',
"cartocss_version": "2.3.0",
cartocss: 'Map {\n-torque-frame-count:1;\n-torque-animation-duration:30;\n-torque-time-attribute:"cartodb_id";\n-torque-aggregation-function:"count(cartodb_id)";\n-torque-resolution:2;\n-torque-data-aggregation:linear;\n}\n\n#ne_10m_populated_places_simple_3{\n comp-op: lighter;\n marker-fill-opacity: 0.9;\n marker-line-color: #2167AB;\n marker-line-width: 5;\n marker-line-opacity: 1;\n marker-type: ellipse;\n marker-width: 6;\n marker-fill: #FF9900;\n}\n#ne_10m_populated_places_simple_3[frame-offset=1] {\n marker-width:8;\n marker-fill-opacity:0.45; \n}\n#ne_10m_populated_places_simple_3[frame-offset=2] {\n marker-width:10;\n marker-fill-opacity:0.225; \n}'
}
},
checked: false
},
torque_marker_file: {
config: {
type: "torque",
options: {
sql: 'select * from ne_10m_populated_places_simple',
"cartocss_version": "2.3.0",
cartocss: [
'Map {',
'-torque-frame-count:1;',
'-torque-animation-duration:30;',
'-torque-time-attribute:"cartodb_id";',
'-torque-aggregation-function:"count(cartodb_id)";',
'-torque-resolution:1;',
'-torque-data-aggregation:linear;',
'}',
'',
'#ne_10m_populated_places_simple{',
' marker-fill-opacity: 0.9;',
' marker-line-color: #FFF;',
' marker-line-opacity: 1;',
' marker-placement: point;',
' marker-type: ellipse;',
' marker-width: 12;',
' marker-fill: #F84F40;',
' marker-file: url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Map_marker_font_awesome.svg/24px-Map_marker_font_awesome.svg.png);',
' marker-allow-overlap: true;',
'}'
].join('\n')
}
},
checked: false
},
torque_heatmap: {
config: {
type: "torque",
options: {
sql: 'select * from ne_10m_populated_places_simple',
"cartocss_version": "2.3.0",
cartocss: [
'Map {',
' -torque-frame-count:1;',
' -torque-animation-duration:10;',
' -torque-time-attribute:\"cartodb_id\";',
' -torque-aggregation-function:\"count(cartodb_id)\";',
' -torque-resolution:1;',
' -torque-data-aggregation:linear;',
'}',
'',
'#ne_10m_populated_places_simple{',
' image-filters: colorize-alpha(blue, cyan, lightgreen, yellow , orange, red);',
' marker-file: url(http://s3.amazonaws.com/com.cartodb.assets.static/alphamarker.png);',
' marker-fill-opacity: 0.4;',
' marker-width: 12;',
'}',
'#ne_10m_populated_places_simple[frame-offset=1] {',
' marker-width:14;',
' marker-fill-opacity:0.2; ',
'}',
'#ne_10m_populated_places_simple[frame-offset=2] {',
' marker-width:16;',
' marker-fill-opacity:0.1; ',
'}'
].join('\n')
}
},
checked: false
},
nasa: {
config: {
"type": "http",
"options": {
"urlTemplate": "http://map1.vis.earthdata.nasa.gov/wmts-webmerc/MODIS_Terra_CorrectedReflectance_TrueColor/default/2014-09-24/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpeg",
"subdomains": ["a", "b", "c"]
}
},
checked: false
},
toner_labels: {
config: {
"type": "http",
"options": {
"urlTemplate": "http://{s}.tile.stamen.com/toner-labels/{z}/{x}/{y}.png",
"subdomains": ["a", "b", "c"]
}
},
checked: true
}
};
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CartoDB Maps API sandwich demo</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<style>
body {
margin: 0;
padding: 0;
border: 0;
}
h2 {
font-size: 16px;
margin: 12px 0 8px;
}
#manage {
width: 15%;
float: left;
text-align: center;
}
#viewer {
float: left;
width: 85%;
height: 600px;
}
#map {
height: 600px;
}
.connectedSortable {
background-color: #fcfcfc;
margin: 0;
padding: 8px 2em;
min-height: 20px;
text-align: left;
font-size: 14px;
}
.connectedSortable li {
min-height: 20px;
}
.ui-state-highlight {
min-height: 16px;
border: solid 1px #333;
}
#map_config_viewer {
display: none;
position: fixed;
top: 0;
left: 15%;
background-color: #ccc;
width: 85%;
z-index: 1000;
padding: 10px;
}
#map_config {
height: 400px;
overflow: scroll;
padding: 10px;
}
</style>
</head>
<body>
<div>
<div id="manage">
<input id="endpoint" value="https://rochoa.cartodb.com/api/v1/map" />
<p>
<em>drag&drop to make a sandwich</em>
</p>
<h2>Map</h2>
<ol id="map_layers" class="connectedSortable"></ol>
<h2>More layers</h2>
<ul id="more_layers" class="connectedSortable"></ul>
<h2>How to get this map?</h2>
<p>Use a <a href="http://docs.cartodb.com/cartodb-platform/maps-api.html#anonymous-maps">mapconfig for CartoDB Maps API</a></p>
<button><strong id="show_mapconfig">See MapConfig</strong></button>
</div>
<div id="viewer">
<div id="map"></div>
</div>
</div>
<div id="map_config_viewer">
<pre id="map_config"></pre>
<button><strong id="close_mapconfig">Close</strong></button>
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="./examples.js"></script>
<script src="./app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment