Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve examples #2177

Merged
merged 3 commits into from
Jul 16, 2018
Merged

Improve examples #2177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
812da1a
Merge branch 'master' into 2168-performance-guide
Jul 13, 2018
eb718f9
Improve examples formatting
Jul 13, 2018
20d2d79
Merge branch 'master' into improve-examples
Jul 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/public/dataviews/category.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,8 @@ <h1>Category widget</h1>
username: 'cartojs-test'
});

const source = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);
const source = new carto.source.Dataset('ne_10m_populated_places_simple');

const categoryDataview = new carto.dataview.Category(source, 'adm0name', {
limit: 10,
operation: carto.operation.SUM,
Expand All @@ -89,6 +88,7 @@ <h1>Category widget</h1>
const limit = document.getElementById('limit').value;
const operation = document.getElementById('operation').value;
const operationColumn = document.getElementById('operationColumn').value;

categoryDataview.setColumn(column);
categoryDataview.setLimit(parseInt(limit));
categoryDataview.setOperation(operation);
Expand Down
2 changes: 2 additions & 0 deletions examples/public/dataviews/error-handling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ <h1>Status and error handling</h1>
const source = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);

const formulaDataview = new carto.dataview.Formula(source, 'pop_max', {
operation: carto.operation.COUNT
});
Expand Down Expand Up @@ -89,6 +90,7 @@ <h1>Status and error handling</h1>
function applyDataviewChanges() {
const column = document.getElementById('column').value;
const operation = document.getElementById('operation').value;

formulaDataview.setColumn(column);
formulaDataview.setOperation(operation);
}
Expand Down
6 changes: 3 additions & 3 deletions examples/public/dataviews/formula.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,8 @@ <h1>Formula widget</h1>
username: 'cartojs-test'
});

const source = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);
const source = new carto.source.Dataset('ne_10m_populated_places_simple');

const formulaDataview = new carto.dataview.Formula(source, 'pop_max', {
operation: carto.operation.COUNT
});
Expand All @@ -78,6 +77,7 @@ <h1>Formula widget</h1>
function applyDataviewChanges() {
const column = document.getElementById('column').value;
const operation = document.getElementById('operation').value;

formulaDataview.setColumn(column);
formulaDataview.setOperation(operation);
}
Expand Down
14 changes: 5 additions & 9 deletions examples/public/dataviews/histogram.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,8 @@ <h1>Histogram widget</h1>
username: 'cartojs-test'
});

const source = new carto.source.SQL(`
SELECT * FROM airbnb_listings WHERE price < 150
`);
const source = new carto.source.SQL('SELECT * FROM airbnb_listings WHERE price < 150');

const histogramDataview = new carto.dataview.Histogram(source, 'price', {
bins: 5
});
Expand All @@ -83,12 +82,9 @@ <h1>Histogram widget</h1>
const bins = parseInt(document.getElementById('bins').value);
const startValue = parseFloat(document.getElementById('start').value);
const endValue = parseFloat(document.getElementById('end').value);
const start = Number.isFinite(startValue)
? startValue
: null;
const end = Number.isFinite(endValue)
? endValue
: null;

const start = Number.isFinite(startValue) ? startValue : null;
const end = Number.isFinite(endValue) ? endValue : null;

try {
histogramDataview.setColumn(column);
Expand Down
6 changes: 3 additions & 3 deletions examples/public/dataviews/time-series.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,8 @@ <h1>Time Series widget</h1>
username: 'cartojs-test'
});

const source = new carto.source.Dataset(`
railroad_data
`);
const source = new carto.source.Dataset('railroad_data');

const timeseriesDataview = new carto.dataview.TimeSeries(source, 'date', {
aggregation: carto.dataview.timeAggregation.AUTO,
offset: 1
Expand All @@ -89,6 +88,7 @@ <h1>Time Series widget</h1>
const column = document.getElementById('column').value;
const aggregation = document.getElementById('aggregation').value;
const offset = document.getElementById('offset').value;

timeseriesDataview.setColumn(column);
timeseriesDataview.setAggregation(aggregation);
timeseriesDataview.setOffset(parseInt(offset));
Expand Down
41 changes: 19 additions & 22 deletions examples/public/filters/bounding-box-gmaps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ <h1>Bounding Box filter</h1>
fullscreenControl: false,
gestureHandling: 'cooperative'
});

// Hide the map labels and geometry strokes
map.set('styles', [{
elementType: 'labels',
Expand All @@ -57,16 +58,14 @@ <h1>Bounding Box filter</h1>
username: 'cartojs-test'
});

const source = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);
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;
}
`);
#layer {
marker-width: 7;
marker-fill: #EE4D5A;
marker-line-color: #FFFFFF;
}
`);
const layer = new carto.layer.Layer(source, style, {
featureOverColumns: ['name', 'pop_max']
});
Expand All @@ -79,15 +78,15 @@ <h1>Bounding Box filter</h1>
operation: carto.operation.SUM,
operationColumn: 'pop_max'
});
categoryDataview.on('dataChanged', renderWidgetCategory);

categoryDataview.on('dataChanged', renderWidgetCategory);
client.addDataview(categoryDataview);

const formulaDataview = new carto.dataview.Formula(source, 'pop_max', {
operation: carto.operation.COUNT,
});
formulaDataview.on('dataChanged', renderWidgetFormula);

formulaDataview.on('dataChanged', renderWidgetFormula);
client.addDataview(formulaDataview);

const bboxFilter = new carto.filter.BoundingBoxGoogleMaps(map);
Expand All @@ -96,15 +95,14 @@ <h1>Bounding Box filter</h1>
formulaDataview.addFilter(bboxFilter);

function renderWidgetCategory(data) {
let content = '';
content += `<ul>`
for (let category of data.categories) {
content += `<li>`
content += `<h3>${category.name}</h3>
<p class="open-sans">${parseInt(category.value)} <small>inhabitants</small></p>`;
content += `<li>`
}
content += `</ul>`
const categories = data.categories.map(category => `
<li>
<h3>${category.name}</h3>
<p class="open-sans">${parseInt(category.value)} <small>inhabitants</small></p>
</li>
`).join('');
const content = `<ul>${categories}</ul>`;

document.querySelector('.widget.category').innerHTML = content;
}

Expand All @@ -114,5 +112,4 @@ <h1>Bounding Box filter</h1>
}
</script>
</body>

</html>
</html>
25 changes: 11 additions & 14 deletions examples/public/filters/bounding-box-leaflet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,7 @@ <h1>Bounding Box filter</h1>
username: 'cartojs-test'
});

const source = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
const style = new carto.style.CartoCSS(`
#layer {
marker-width: 7;
Expand All @@ -69,15 +67,15 @@ <h1>Bounding Box filter</h1>
operation: carto.operation.SUM,
operationColumn: 'pop_max'
});
categoryDataview.on('dataChanged', renderWidgetCategory);

categoryDataview.on('dataChanged', renderWidgetCategory);
client.addDataview(categoryDataview);

const formulaDataview = new carto.dataview.Formula(source, 'pop_max', {
operation: carto.operation.COUNT,
});
formulaDataview.on('dataChanged', renderWidgetFormula);

formulaDataview.on('dataChanged', renderWidgetFormula);
client.addDataview(formulaDataview);

const bboxFilter = new carto.filter.BoundingBoxLeaflet(map);
Expand All @@ -86,15 +84,14 @@ <h1>Bounding Box filter</h1>
formulaDataview.addFilter(bboxFilter);

function renderWidgetCategory(data) {
let content = '';
content += `<ul>`
for (let category of data.categories) {
content += `<li>`
content += `<p class="category">${category.name}</p>
<p class="open-sans">${parseInt(category.value)} <small>inhabitants</small></p>`;
content += `<li>`
}
content += `</ul>`
const categories = data.categories.map(category => `
<li>
<h3>${category.name}</h3>
<p class="open-sans">${parseInt(category.value)} <small>inhabitants</small></p>
</li>
`).join('');
const content = `<ul>${categories}</ul>`;

document.querySelector('.widget.category').innerHTML = content;
}

Expand Down
66 changes: 37 additions & 29 deletions examples/public/filters/custom-bounding-box-leaflet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,31 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw-src.css" />
<!-- Include CARTO.js -->
<script src="../../../dist/public/carto.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; height: 100%; width: 100%; }
.column-right { display: flex; flex-direction: column; right: 0; z-index: 1000; }
.widgets { position: absolute; padding: 20px; background: white; }
#widgetCategory { padding: 10px; font-size: 1.2em; }
#widgetCategory span { font-size: 1.5em; }
#widgetFormula { padding: 10px; font-size: 1.5em; }
#widgetFormula span { font-size: 2em; }
</style>
<link href="../style.css" rel="stylesheet">
</head>

<body>
<div id="map"></div>
<div class="widgets column-right">
<h2>POPULATION</h2>
<p>Select a custom bounding box</p>
<div id="widgetCategory"></div>
<div id="widgetFormula"></div>
</div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Custom Bounding Box filter</h1>
<button class="github-logo js-source-link"></button>
</header>
<section>
<p class="description open-sans">Apply a custom bounding box filter to dataviews.</p>
<div class="separator"></div>
<section class="usage">
<header>USAGE</header>
<p class="open-sans">Click on the <em>Draw a rectangle</em> button and draw a rectangle</p>
</section>
<div class="widget category"></div>
<div class="widget formula"></div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>

<script>
const map = L.map('map').setView([30, 0], 3);

Expand All @@ -43,16 +48,16 @@ <h2>POPULATION</h2>
username: 'cartojs-test'
});

const source = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);
const source = new carto.source.Dataset('ne_10m_populated_places_simple');

const style = new carto.style.CartoCSS(`
#layer {
marker-width: 20;
marker-fill: #FF583E;
marker-line-color: #FFFFFF;
}
`);

const layer = new carto.layer.Layer(source, style, {
featureOverColumns: ['name', 'pop_max']
});
Expand All @@ -65,15 +70,15 @@ <h2>POPULATION</h2>
operation: carto.operation.SUM,
operationColumn: 'pop_max'
});
categoryDataview.on('dataChanged', renderWidgetCategory);

categoryDataview.on('dataChanged', renderWidgetCategory);
client.addDataview(categoryDataview);

const formulaDataview = new carto.dataview.Formula(source, 'pop_max', {
operation: carto.operation.COUNT,
});
formulaDataview.on('dataChanged', renderWidgetFormula);

formulaDataview.on('dataChanged', renderWidgetFormula);
client.addDataview(formulaDataview);

const bboxFilter = new carto.filter.BoundingBox(map);
Expand Down Expand Up @@ -114,17 +119,20 @@ <h2>POPULATION</h2>
});

function renderWidgetCategory(data) {
let content = '';
for (let category of data.categories) {
content += `<b>${category.name}</b>
<p><span>${parseInt(category.value)}</span> inhabitants</p>`;
}
document.getElementById('widgetCategory').innerHTML = content;
const categories = data.categories.map(category => `
<li>
<h3>${category.name}</h3>
<p class="open-sans">${parseInt(category.value)} <small>inhabitants</small></p>
</li>
`).join('');
const content = `<ul>${categories}</ul>`;

document.querySelector('.widget.category').innerHTML = content;
}

function renderWidgetFormula(data) {
const content = `<span>${data.result}</span> cities`;
document.getElementById('widgetFormula').innerHTML = content;
const content = `<h2 class="h2">${data.result} <small>cities</small></h2>`;
document.querySelector('.widget.formula').innerHTML = content;
}
</script>
</body>
Expand Down
Loading