Skip to content

Instantly share code, notes, and snippets.

@jsanz

jsanz/README.md

Last active September 28, 2017 15:58
Show Gist options
  • Save jsanz/ce6e7bd4827019294c4817fd5176727a to your computer and use it in GitHub Desktop.
Save jsanz/ce6e7bd4827019294c4817fd5176727a to your computer and use it in GitHub Desktop.
Download ZIP
Comparing basemaps
Raw
README.md
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Compare Basemaps</title>
<meta name="description" content="Comparing CARTO basemaps">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<label for="pointColor">Points</label>
<input value="#fabada" id="pointColor">
<label for="linesColor">Lines</label>
<input value="blue" id="lineColor">
<label for="polygonColor">Polygon</label>
<input value="orange" id="polygonColor">
<button id="refresh" onclick="updateMap()">refresh</button>
<span class="notice">
<p>Use the map on the left to navigate</p>
</span>
</div>
<div id="wrapper">
<div id="map1" class="box"></div>
<div id="map2" class="box"></div>
<div id="map3" class="box"></div>
</div>
<script type="text/cartocss" id="stylePoi">
@pointsColor: /*points*/;
@lineColor: /*lines*/;
@polyColor: /*polygons*/;
/* Points */
#layer['mapnik::geometry_type'=1] {
marker-width: 7;
marker-fill: @pointsColor;
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 1;
marker-line-opacity: 1;
marker-placement: point;
marker-type: ellipse;
marker-allow-overlap: true;
}
/* Lines */
#layer['mapnik::geometry_type'=2] {
line-color: @lineColor;
line-width: 1.5;
line-opacity: 1;
}
/* Polygons */
#layer['mapnik::geometry_type'=3] {
polygon-fill: @polyColor;
polygon-opacity: 0.9;
polygon-gamma: 0.5;
line-color: #FFF;
line-width: 1;
line-opacity: 0.5;
line-comp-op: soft-light;
}
</script>
<script src="https://unpkg.com/leaflet"></script>
<script src="https://unpkg.com/leaflet.sync"></script>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.core.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
// select first matching elements, context is optional
function $(selector, context) {
return (context || document).querySelector(selector);
}
var stylePoi = $("#stylePoi").text,
sqlPoly = 'SELECT * FROM cb_2013_us_county_500k',
sqlLine = 'SELECT * FROM ne_10m_railroads WHERE continent ilike \'north america\'',
sqlPoi = 'SELECT * FROM railroad_data',
center = [3.164141, -100.986328],
defZoom = 4,
options = { attribution: 'CARTO', minZoom: 0, maxZoom: 20 };
/* basemaps */
var voyager = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', options);
var positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png', options);
var darkmatter = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels//{z}/{x}/{y}.png', options);
/* label overlays */
var voyager_labels = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', options);
var positron_labels = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}.png', options);
var darkmatter_labels = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_only_labels/{z}/{x}/{y}.png', options);
/* layer groups */
var lg1 = L.layerGroup([]),
lg2 = L.layerGroup([]),
lg3 = L.layerGroup([]);
/* function to update the maps */
var updateMap = function () {
/* Clear the layer groups */
lg1.clearLayers();
lg2.clearLayers();
lg3.clearLayers();
/* get the new style based on the inputs */
var updatedStyle = stylePoi
.replace('/*points*/', $('#pointColor').value)
.replace('/*lines*/', $('#lineColor').value)
.replace('/*polygons*/', $('#polygonColor').value);
/* map config */
var layerData = {
user_name: 'ramirocartodb',
sublayers: [
{ sql: sqlPoly, cartocss: updatedStyle },
{ sql: sqlLine, cartocss: updatedStyle },
{ sql: sqlPoi, cartocss: updatedStyle }
],
maps_api_template: 'https://ramirocartodb.carto.com' // Optional
};
/* call getTiles */
cartodb.Tiles.getTiles(layerData, function (tilesUrl, error) {
if (tilesUrl == null) {
console.log("error: ", error.errors.join('\n'));
return;
}
lg1.addLayer(voyager);
lg1.addLayer(L.tileLayer(tilesUrl.tiles[0], options));
lg1.addLayer(voyager_labels);
lg2.addLayer(darkmatter);
lg2.addLayer(L.tileLayer(tilesUrl.tiles[0], options));
lg2.addLayer(darkmatter_labels);
lg3.addLayer(positron);
lg3.addLayer(L.tileLayer(tilesUrl.tiles[0], options));
lg3.addLayer(positron_labels);
});
}
// execute when the document is ready
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
var map1 = L.map('map1', {
layers: lg1,
center: center,
zoom: defZoom
});
var map2 = L.map('map2', {
layers: lg2,
center: center,
zoom: defZoom,
zoomControl: false
});
var map3 = L.map('map3', {
layers: lg3,
center: center,
zoom: defZoom,
zoomControl: false
});
// Synchronize maps using the leaflet plugin
map1.sync(map2);
map1.sync(map3);
// Disable drag and zoom handlers.
map2.dragging.disable();
map2.touchZoom.disable();
map2.doubleClickZoom.disable();
map2.scrollWheelZoom.disable();
map2.keyboard.disable();
// Disable drag and zoom handlers.
map3.dragging.disable();
map3.touchZoom.disable();
map3.doubleClickZoom.disable();
map3.scrollWheelZoom.disable();
map3.keyboard.disable();
// Initialize the maps with the default values from the HTML inputs
updateMap();
}
}
Raw
style.css
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.wrapper {
width: 980px;
background: silver;
margin: 0 auto;
}
.box {
float: left;
height: 100vh;
width: 32.5%;
border: 3px solid white;
}
.header {
margin: 5px;
}
.header label {
margin: 0 0 5px 0;
}
.header .notice {
float: right;
}
.header .notice p {
margin: 4px 0 0 0;
padding: 0;
}
.header input {
width: 70px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment