Initial commit
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Change feature columns | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Change the feature columns</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Change the columns returned in the feature event.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Click on the markers</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<ul class="actions">
|
||||
<li>
|
||||
<input id="red" type="radio" name="style" onclick="setMoreData()">
|
||||
<label for="red">More data</label>
|
||||
</li>
|
||||
<li>
|
||||
<input id="green" type="radio" name="style" onclick="setLessData()" checked>
|
||||
<label for="green">Less data</label>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 30, lng: 0 },
|
||||
zoom: 3,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style, {
|
||||
featureClickColumns: ['name']
|
||||
});
|
||||
|
||||
client.addLayer(layer);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
|
||||
layer.on('featureClicked', featureEvent => {
|
||||
let content = '';
|
||||
|
||||
if (featureEvent.data.name) {
|
||||
content += `<h3>${featureEvent.data.name.toUpperCase()}</h3>`;
|
||||
}
|
||||
|
||||
if (featureEvent.data.pop_max) {
|
||||
content += `<p class="open-sans">${featureEvent.data.pop_max} <span>max inhabitants</span></p>`;
|
||||
}
|
||||
|
||||
if (featureEvent.data.pop_min) {
|
||||
content += `<p class="open-sans">${featureEvent.data.pop_min} <span>min inhabitants</span></p>`;
|
||||
}
|
||||
|
||||
document.getElementById('info').innerHTML = content;
|
||||
});
|
||||
|
||||
function setMoreData() {
|
||||
layer.setFeatureClickColumns(['name', 'pop_max', 'pop_min']);
|
||||
document.getElementById('info').innerHTML = '';
|
||||
}
|
||||
|
||||
function setLessData() {
|
||||
layer.setFeatureClickColumns(['name']);
|
||||
document.getElementById('info').innerHTML = '';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Change feature columns | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Change the feature columns</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Change the columns returned in the feature event.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Click on the markers</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<ul class="actions">
|
||||
<li>
|
||||
<input id="red" type="radio" name="style" onclick="setMoreData()">
|
||||
<label for="red">More data</label>
|
||||
</li>
|
||||
<li>
|
||||
<input id="green" type="radio" name="style" onclick="setLessData()" checked>
|
||||
<label for="green">Less data</label>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([30, 0], 3);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style, {
|
||||
featureClickColumns: ['name']
|
||||
});
|
||||
|
||||
client.addLayer(layer);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
|
||||
layer.on('featureClicked', featureEvent => {
|
||||
let content = '';
|
||||
|
||||
if (featureEvent.data.name) {
|
||||
content += `<h3>${featureEvent.data.name.toUpperCase()}</h3>`;
|
||||
}
|
||||
|
||||
if (featureEvent.data.pop_max) {
|
||||
content += `<p class="open-sans"><span>${featureEvent.data.pop_max}</span> max inhabitants</p>`;
|
||||
}
|
||||
|
||||
if (featureEvent.data.pop_min) {
|
||||
content += `<p class="open-sans"><span>${featureEvent.data.pop_min}</span> min inhabitants</p>`;
|
||||
}
|
||||
|
||||
document.getElementById('info').innerHTML = content;
|
||||
});
|
||||
|
||||
function setMoreData() {
|
||||
layer.setFeatureClickColumns(['name', 'pop_max', 'pop_min']);
|
||||
document.getElementById('info').innerHTML = '';
|
||||
}
|
||||
|
||||
function setLessData() {
|
||||
layer.setFeatureClickColumns(['name']);
|
||||
document.getElementById('info').innerHTML = '';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Change order | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Move the layers</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Update the order of your layers.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Click to move countries layer to front/back</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<ul>
|
||||
<li onclick="bringToBack()">
|
||||
<input type="radio" name="style" id="bringToBack">
|
||||
<label for="bringToBack">Bring to back</label>
|
||||
</li>
|
||||
<li onclick="bringToFront()">
|
||||
<input type="radio" name="style" checked id="bringToFront">
|
||||
<label for="bringToFront">Bring to front</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 30, lng: 0 },
|
||||
zoom: 3,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const spainCitiesSource = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const spainCitiesStyle = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const spainCitiesLayer = new carto.layer.Layer(spainCitiesSource, spainCitiesStyle);
|
||||
|
||||
const europeCountriesSource = new carto.source.Dataset('ne_adm0_europe');
|
||||
const europeCountriesStyle = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
polygon-fill: #826DBA;
|
||||
polygon-opacity: 0.8;
|
||||
::outline {
|
||||
line-width: 1;
|
||||
line-color: #FFFFFF;
|
||||
line-opacity: 0.8;
|
||||
}
|
||||
}
|
||||
`);
|
||||
const europeCountriesLayer = new carto.layer.Layer(europeCountriesSource, europeCountriesStyle);
|
||||
|
||||
client.addLayers([europeCountriesLayer, spainCitiesLayer]);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
|
||||
function bringToBack() {
|
||||
spainCitiesLayer.bringToBack();
|
||||
// or
|
||||
// spainCitiesLayer.setOrder(0);
|
||||
// or
|
||||
// client.moveLayer(spainCitiesLayer, 0);
|
||||
}
|
||||
|
||||
function bringToFront() {
|
||||
spainCitiesLayer.bringToFront();
|
||||
// or
|
||||
// spainCitiesLayer.setOrder(1);
|
||||
// or
|
||||
// client.moveLayer(spainCitiesLayer, 1);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Change order | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Move the layers</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Update the order of your layers.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Click to move countries layer to front/back</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<ul>
|
||||
<li onclick="bringToBack()">
|
||||
<input type="radio" name="style" id="bringToBack">
|
||||
<label for="bringToBack">Bring to back</label>
|
||||
</li>
|
||||
<li onclick="bringToFront()">
|
||||
<input type="radio" name="style" checked id="bringToFront">
|
||||
<label for="bringToFront">Bring to front</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
<script>
|
||||
const map = L.map('map').setView([30, 0], 3);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const spainCitiesSource = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const spainCitiesStyle = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const spainCitiesLayer = new carto.layer.Layer(spainCitiesSource, spainCitiesStyle);
|
||||
|
||||
const europeCountriesSource = new carto.source.Dataset('ne_adm0_europe');
|
||||
const europeCountriesStyle = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
polygon-fill: #826DBA;
|
||||
polygon-opacity: 0.8;
|
||||
::outline {
|
||||
line-width: 1;
|
||||
line-color: #FFFFFF;
|
||||
line-opacity: 0.8;
|
||||
}
|
||||
}
|
||||
`);
|
||||
const europeCountriesLayer = new carto.layer.Layer(europeCountriesSource, europeCountriesStyle);
|
||||
|
||||
client.addLayers([europeCountriesLayer, spainCitiesLayer]);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
|
||||
function bringToBack() {
|
||||
spainCitiesLayer.bringToBack();
|
||||
// or
|
||||
// spainCitiesLayer.setOrder(0);
|
||||
// or
|
||||
// client.moveLayer(spainCitiesLayer, 0);
|
||||
}
|
||||
|
||||
function bringToFront() {
|
||||
spainCitiesLayer.bringToFront();
|
||||
// or
|
||||
// spainCitiesLayer.setOrder(1);
|
||||
// or
|
||||
// client.moveLayer(spainCitiesLayer, 1);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Change source | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Change the source</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Update the source of your layers.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Select different sources</p>
|
||||
</section>
|
||||
|
||||
<div id="controls">
|
||||
<ul>
|
||||
<li onclick="setAllCities()">
|
||||
<input type="radio" name="source" checked id="all">
|
||||
<label for="all">All cities</label>
|
||||
</li>
|
||||
<li onclick="setEuropeanCities()">
|
||||
<input type="radio" name="source" id="europe">
|
||||
<label for="europe">European cities</label>
|
||||
</li>
|
||||
<li onclick="setSpanishCities()">
|
||||
<input type="radio" name="source" id="spain">
|
||||
<label for="spain">Spanish cities</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 30, lng: 0 },
|
||||
zoom: 3,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.SQL('SELECT * FROM ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style);
|
||||
|
||||
client.addLayer(layer);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
|
||||
function setAllCities() {
|
||||
source.setQuery(`
|
||||
SELECT *
|
||||
FROM ne_10m_populated_places_simple
|
||||
`);
|
||||
}
|
||||
|
||||
function setEuropeanCities() {
|
||||
source.setQuery(`
|
||||
SELECT *
|
||||
FROM ne_10m_populated_places_simple
|
||||
WHERE adm0name IN (SELECT admin FROM ne_adm0_europe)
|
||||
`);
|
||||
}
|
||||
|
||||
function setSpanishCities() {
|
||||
source.setQuery(`
|
||||
SELECT *
|
||||
FROM ne_10m_populated_places_simple
|
||||
WHERE adm0name = \'Spain\'
|
||||
`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Change source | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Change the source</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Update the source of your layers.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Select different sources</p>
|
||||
</section>
|
||||
|
||||
<div id="controls">
|
||||
<ul>
|
||||
<li onclick="setAllCities()">
|
||||
<input type="radio" name="source" checked id="all">
|
||||
<label for="all">All cities</label>
|
||||
</li>
|
||||
<li onclick="setEuropeanCities()">
|
||||
<input type="radio" name="source" id="europe">
|
||||
<label for="europe">European cities</label>
|
||||
</li>
|
||||
<li onclick="setSpanishCities()">
|
||||
<input type="radio" name="source" id="spain">
|
||||
<label for="spain">Spanish cities</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([30, 0], 3);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.SQL('SELECT * FROM ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style);
|
||||
|
||||
client.addLayer(layer);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
|
||||
function setAllCities() {
|
||||
source.setQuery('SELECT * FROM ne_10m_populated_places_simple');
|
||||
}
|
||||
|
||||
function setEuropeanCities() {
|
||||
source.setQuery(`
|
||||
SELECT *
|
||||
FROM ne_10m_populated_places_simple
|
||||
WHERE adm0name IN (SELECT admin FROM ne_adm0_europe)
|
||||
`);
|
||||
}
|
||||
|
||||
function setSpanishCities() {
|
||||
source.setQuery(`
|
||||
SELECT *
|
||||
FROM ne_10m_populated_places_simple
|
||||
WHERE adm0name = \'Spain\'
|
||||
`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Change style | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Change the style</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Update the style of your layers.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Select different styles</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<ul>
|
||||
<li onclick="setRed()">
|
||||
<input type="radio" name="style" checked id="red">
|
||||
<label for="red">Size 7px - Red</label>
|
||||
</li>
|
||||
<li onclick="setGreen()">
|
||||
<input type="radio" name="style" id="green">
|
||||
<label for="green">Size 9px - Green</label>
|
||||
</li>
|
||||
<li onclick="setBlue()">
|
||||
<input type="radio" name="style" id="blue">
|
||||
<label for="blue">Size 11px - Blue</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 30, lng: 0 },
|
||||
zoom: 3,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style);
|
||||
|
||||
client.addLayer(layer);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
|
||||
function setRed() {
|
||||
style.setContent(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
function setGreen() {
|
||||
style.setContent(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #9BC63B;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
function setBlue() {
|
||||
style.setContent(`
|
||||
#layer {
|
||||
marker-width: 9;
|
||||
marker-fill: #1785FB;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Change style | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Change the style</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Update the style of your layers.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Select different styles</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<ul>
|
||||
<li onclick="setRed()">
|
||||
<input type="radio" name="style" checked id="red">
|
||||
<label for="red">Size 7px - Red</label>
|
||||
</li>
|
||||
<li onclick="setGreen()">
|
||||
<input type="radio" name="style" id="green">
|
||||
<label for="green">Size 9px - Green</label>
|
||||
</li>
|
||||
<li onclick="setBlue()">
|
||||
<input type="radio" name="style" id="blue">
|
||||
<label for="blue">Size 11px - Blue</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
<script>
|
||||
const map = L.map('map').setView([30, 0], 3);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style);
|
||||
|
||||
client.addLayer(layer);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
|
||||
function setRed() {
|
||||
style.setContent(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
function setGreen() {
|
||||
style.setContent(`
|
||||
#layer {
|
||||
marker-width: 9;
|
||||
marker-fill: #9BC63B;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
function setBlue() {
|
||||
style.setContent(`
|
||||
#layer {
|
||||
marker-width: 11;
|
||||
marker-fill: #1785FB;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Feature click | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Detect feature click</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Interact with the features on the click event.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Click on the markers</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 30, lng: 0 },
|
||||
zoom: 3,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style, {
|
||||
featureClickColumns: ['name', 'pop_max']
|
||||
});
|
||||
|
||||
client.addLayer(layer);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
|
||||
layer.on('featureClicked', featureEvent => {
|
||||
const content = `
|
||||
<h3>${featureEvent.data.name.toUpperCase()}</h3>
|
||||
<p class="open-sans">${featureEvent.data.pop_max} <small>max inhabitants</small></p>
|
||||
`;
|
||||
|
||||
document.getElementById('info').innerHTML = content;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Feature click | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Detect feature click</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Interact with the features on the click event.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Click on the markers</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([30, 0], 3);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style, {
|
||||
featureClickColumns: ['name', 'pop_max']
|
||||
});
|
||||
|
||||
client.addLayer(layer);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
|
||||
layer.on('featureClicked', featureEvent => {
|
||||
const content = `
|
||||
<h3>${featureEvent.data.name.toUpperCase()}</h3>
|
||||
<p class="open-sans">${featureEvent.data.pop_max} <small>max inhabitants</small></p>
|
||||
`;
|
||||
|
||||
document.getElementById('info').innerHTML = content;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Feature over/out | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Detect feature over/out</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Interact with the features on the over/out event.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Move the mouse over the markers</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 30, lng: 0 },
|
||||
zoom: 3,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 10;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style, {
|
||||
featureOverColumns: ['name', 'pop_max']
|
||||
});
|
||||
|
||||
client.addLayer(layer);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
|
||||
layer.on('featureOver', featureEvent => {
|
||||
const content = `
|
||||
<h3>${featureEvent.data.name.toUpperCase()}</h3>
|
||||
<p class="open-sans">${featureEvent.data.pop_max} <small>max inhabitants</small></p>
|
||||
`;
|
||||
|
||||
document.getElementById('info').innerHTML = content;
|
||||
featureVisible = true;
|
||||
});
|
||||
|
||||
layer.on('featureOut', featureEvent => {
|
||||
hideInfo();
|
||||
});
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function () {
|
||||
var context = this, args = arguments;
|
||||
var later = function () {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
|
||||
const hideInfo = debounce(function () {
|
||||
document.getElementById('info').innerHTML = '';
|
||||
}, 500);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Feature over/out | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Detect feature over/out</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Interact with the features on the over/out event.</p>
|
||||
<div class="separator"></div>
|
||||
<section class="usage">
|
||||
<header>USAGE</header>
|
||||
<p class="open-sans">Move the mouse over the markers</p>
|
||||
</section>
|
||||
<div id="controls">
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([30, 0], 3);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 10;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style, {
|
||||
featureOverColumns: ['name', 'pop_max']
|
||||
});
|
||||
|
||||
client.addLayer(layer);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
|
||||
layer.on('featureOver', featureEvent => {
|
||||
const content = `
|
||||
<h3>${featureEvent.data.name.toUpperCase()}</h3>
|
||||
<p class="open-sans">${featureEvent.data.pop_max} <small>max inhabitants</small></p>
|
||||
`;
|
||||
|
||||
document.getElementById('info').innerHTML = content;
|
||||
featureVisible = true;
|
||||
});
|
||||
|
||||
layer.on('featureOut', featureEvent => {
|
||||
hideInfo();
|
||||
});
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
|
||||
const hideInfo = debounce(function () {
|
||||
document.getElementById('info').innerHTML = '';
|
||||
}, 500);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Layer with aggregation cluster | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Server tile aggregation cluster</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">This map has smart backend aggregation cluster applied. See source code for details.</p>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 38.479395, lng: -102.480469 },
|
||||
zoom: 3,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
// Define source using value 1 as count to count the number
|
||||
// of points within the aggregation that will be created
|
||||
const source = new carto.source.SQL(`
|
||||
SELECT *, 1 as count
|
||||
FROM stormevents_locations_2014
|
||||
`);
|
||||
|
||||
// Aggregation option summing al values of field count
|
||||
const aggregation = new carto.layer.Aggregation({
|
||||
threshold: 1,
|
||||
resolution: 32,
|
||||
placement: carto.layer.Aggregation.placement.SAMPLE,
|
||||
columns: {
|
||||
total_agg: {
|
||||
aggregateFunction: carto.layer.Aggregation.operation.SUM,
|
||||
aggregatedColumn: "count"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-fill: red;
|
||||
marker-width: ramp([total_agg], 6,25 , quantiles);
|
||||
}
|
||||
#layer::labels {
|
||||
text-name: [total_agg];
|
||||
text-face-name: 'DejaVu Sans Book';
|
||||
text-size: 10;
|
||||
text-fill: #FFFFFF;
|
||||
text-label-position-tolerance: 0;
|
||||
text-halo-radius: 1;
|
||||
text-halo-fill: #6F808D;
|
||||
text-allow-overlap: true;
|
||||
text-placement: point;
|
||||
text-placement-type: dummy;
|
||||
}
|
||||
`);
|
||||
|
||||
const layer = new carto.layer.Layer(source, style, { aggregation });
|
||||
|
||||
client.addLayer(layer);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Layer with aggregation cluster | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Server tile aggregation cluster</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">This map has smart backend aggregation cluster applied. See source code for details.</p>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([38.479395, -102.480469], 3);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
// Define source using value 1 as count to count the number
|
||||
// of points within the aggregation that will be created
|
||||
const source = new carto.source.SQL(`
|
||||
SELECT *, 1 as count
|
||||
FROM stormevents_locations_2014
|
||||
`);
|
||||
|
||||
// Aggregation option summing al values of field count
|
||||
const aggregation = new carto.layer.Aggregation({
|
||||
threshold: 1,
|
||||
resolution: 32,
|
||||
placement: carto.layer.Aggregation.placement.SAMPLE,
|
||||
columns: {
|
||||
total_agg: {
|
||||
aggregateFunction: carto.layer.Aggregation.operation.SUM,
|
||||
aggregatedColumn: "count"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-fill: red;
|
||||
marker-width: ramp([total_agg], 6,25 , quantiles);
|
||||
}
|
||||
#layer::labels {
|
||||
text-name: [total_agg];
|
||||
text-face-name: 'DejaVu Sans Book';
|
||||
text-size: 10;
|
||||
text-fill: #FFFFFF;
|
||||
text-label-position-tolerance: 0;
|
||||
text-halo-radius: 1;
|
||||
text-halo-fill: #6F808D;
|
||||
text-allow-overlap: true;
|
||||
text-placement: point;
|
||||
text-placement-type: dummy;
|
||||
}
|
||||
`);
|
||||
|
||||
const layer = new carto.layer.Layer(source, style, { aggregation });
|
||||
|
||||
client.addLayer(layer);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Layer with aggregation | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Server tile aggregation</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">This map has smart backend aggregation applied. See source code for details.</p>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 30, lng: 0 },
|
||||
zoom: 3,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: ramp([population], (#ecda9a, #f7945d, #ee4d5a), jenks());
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
|
||||
// Aggregation option
|
||||
const aggregation = new carto.layer.Aggregation({
|
||||
threshold: 1,
|
||||
resolution: 4,
|
||||
placement: carto.layer.Aggregation.placement.SAMPLE,
|
||||
columns: {
|
||||
population: {
|
||||
aggregateFunction: carto.layer.Aggregation.operation.SUM,
|
||||
aggregatedColumn: 'pop_max'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const layer = new carto.layer.Layer(source, style, { aggregation });
|
||||
|
||||
client.addLayer(layer);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Layer with aggregation | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Server tile aggregation</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">This map has smart backend aggregation applied. See source code for details.</p>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([30, 0], 3);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: ramp([population], (#ecda9a, #f7945d, #ee4d5a), jenks());
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
|
||||
// Aggregation option
|
||||
const aggregation = new carto.layer.Aggregation({
|
||||
threshold: 1,
|
||||
resolution: 4,
|
||||
placement: carto.layer.Aggregation.placement.SAMPLE,
|
||||
columns: {
|
||||
population: {
|
||||
aggregateFunction: carto.layer.Aggregation.operation.SUM,
|
||||
aggregatedColumn: 'pop_max'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const layer = new carto.layer.Layer(source, style, { aggregation });
|
||||
|
||||
client.addLayer(layer);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Layer with zoom options | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 30, lng: 0 },
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style, { minzoom: 3, maxzoom: 3 });
|
||||
|
||||
client.addLayer(layer);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Layer with zoom options | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
const map = L.map('map').setView([30, 0], 3);
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style, {minzoom: 3, maxzoom: 3});
|
||||
|
||||
client.addLayer(layer);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Multilayer | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Add more layers</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Add multiple CARTO layers to your map.</p>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 40, lng: 0 },
|
||||
zoom: 5,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const spainCitiesSource = new carto.source.SQL(`
|
||||
SELECT *
|
||||
FROM ne_10m_populated_places_simple
|
||||
WHERE adm0name = \'Spain\'
|
||||
`);
|
||||
const spainCitiesStyle = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const spainCitiesLayer = new carto.layer.Layer(spainCitiesSource, spainCitiesStyle);
|
||||
|
||||
const europeCountriesSource = new carto.source.Dataset('ne_adm0_europe');
|
||||
const europeCountriesStyle = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
polygon-fill: #826DBA;
|
||||
polygon-opacity: 0.8;
|
||||
::outline {
|
||||
line-width: 1;
|
||||
line-color: #FFFFFF;
|
||||
line-opacity: 0.8;
|
||||
}
|
||||
}
|
||||
`);
|
||||
const europeCountriesLayer = new carto.layer.Layer(europeCountriesSource, europeCountriesStyle);
|
||||
|
||||
client.addLayers([europeCountriesLayer, spainCitiesLayer]);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Multilayer | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Add more layers</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Add multiple CARTO layers to your map.</p>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([40, 0], 5);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const spainCitiesSource = new carto.source.SQL(`
|
||||
SELECT *
|
||||
FROM ne_10m_populated_places_simple
|
||||
WHERE adm0name = \'Spain\'
|
||||
`);
|
||||
const spainCitiesStyle = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const spainCitiesLayer = new carto.layer.Layer(spainCitiesSource, spainCitiesStyle);
|
||||
|
||||
const europeCountriesSource = new carto.source.Dataset('ne_adm0_europe');
|
||||
const europeCountriesStyle = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
polygon-fill: #826DBA;
|
||||
polygon-opacity: 0.8;
|
||||
::outline {
|
||||
line-width: 1;
|
||||
line-color: #FFFFFF;
|
||||
line-opacity: 0.8;
|
||||
}
|
||||
}
|
||||
`);
|
||||
const europeCountriesLayer = new carto.layer.Layer(europeCountriesSource, europeCountriesStyle);
|
||||
|
||||
client.addLayers([europeCountriesLayer, spainCitiesLayer]);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Single layer | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Google Maps -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Add a layer</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Add one CARTO layer to your map.</p>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 30, lng: 0 },
|
||||
zoom: 3,
|
||||
fullscreenControl: false,
|
||||
gestureHandling: 'cooperative'
|
||||
});
|
||||
|
||||
// Hide the map labels and geometry strokes
|
||||
map.set('styles', [{
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}, {
|
||||
elementType: 'geometry.stroke',
|
||||
stylers: [{ visibility: 'off' }]
|
||||
}]);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style);
|
||||
|
||||
client.addLayer(layer);
|
||||
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Single layer | CARTO</title>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
|
||||
<!-- Include Leaflet -->
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
|
||||
<!-- Include CARTO.js -->
|
||||
<script src="../../../dist/public/carto.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
<link href="../style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<aside class="toolbox">
|
||||
<div class="box">
|
||||
<header>
|
||||
<h1>Add a layer</h1>
|
||||
<button class="github-logo js-source-link"></button>
|
||||
</header>
|
||||
<section>
|
||||
<p class="description open-sans">Add one CARTO layer to your map.</p>
|
||||
</section>
|
||||
<footer class="js-footer"></footer>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([30, 0], 3);
|
||||
map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18
|
||||
}).addTo(map);
|
||||
|
||||
const client = new carto.Client({
|
||||
apiKey: 'default_public',
|
||||
username: 'cartojs-test'
|
||||
});
|
||||
|
||||
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
|
||||
const style = new carto.style.CartoCSS(`
|
||||
#layer {
|
||||
marker-width: 7;
|
||||
marker-fill: #EE4D5A;
|
||||
marker-line-color: #FFFFFF;
|
||||
}
|
||||
`);
|
||||
const layer = new carto.layer.Layer(source, style);
|
||||
|
||||
client.addLayer(layer);
|
||||
client.getLeafletLayer().addTo(map);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user