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

Update gmaps to v3.32 in v4 [WIP] #2126

Merged
merged 2 commits into from
Jun 4, 2018
Merged

Update gmaps to v3.32 in v4 [WIP] #2126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02cbdf3
Update gmaps reference to v3.32 ('stable') + some prettier formatting
VictorVelarde May 31, 2018
57ff56b
Remove upper restriction on Google Maps
ivanmalagon Jun 4, 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
628 changes: 323 additions & 305 deletions examples/internal/basemap-selector.html
View file
Open in desktop

Large diffs are not rendered by default.

1,073 changes: 540 additions & 533 deletions examples/internal/gmaps-geometry-editor.html
View file
Open in desktop

Large diffs are not rendered by default.

183 changes: 93 additions & 90 deletions examples/public/filters/bounding-box-gmaps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,118 @@
<!DOCTYPE html>
<html>
<head>
<title>Bounding Box filter | 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=AIzaSyAORE5iCjgLb4sMcWfmyRJgtP9VwfOrbJM&v=3.31"></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>Bounding Box filter</h1>
<button class="github-logo js-source-link"></button>
</header>
<section>
<p class="description open-sans">Apply a map bounding box filter to dataviews.</p>
<div class="separator"></div>
<section class="usage">
<header>USAGE</header>
<p class="open-sans">Move the map</p>
</section>
<div class="widget category"></div>
<div class="widget formula"></div>

<head>
<title>Bounding Box filter | 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=AIzaSyAORE5iCjgLb4sMcWfmyRJgtP9VwfOrbJM&v=3.32"></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>Bounding Box filter</h1>
<button class="github-logo js-source-link"></button>
</header>
<section>
<p class="description open-sans">Apply a map bounding box filter to dataviews.</p>
<div class="separator"></div>
<section class="usage">
<header>USAGE</header>
<p class="open-sans">Move the map</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div class="widget category"></div>
<div class="widget formula"></div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>

<script>
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 30, lng: 0},
zoom: 3,
zoomControl: true,
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' }]
}]);
<script>
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 30, lng: 0 },
zoom: 3,
zoomControl: true,
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: 'YOUR_API_KEY',
username: 'cartojs-test'
});
const client = new carto.Client({
apiKey: 'YOUR_API_KEY',
username: 'cartojs-test'
});

const source = new carto.source.Dataset(`
const source = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);
const style = new carto.style.CartoCSS(`
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, {
featureOverColumns: ['name', 'pop_max']
});
const layer = new carto.layer.Layer(source, style, {
featureOverColumns: ['name', 'pop_max']
});

client.addLayer(layer);
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
client.addLayer(layer);
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));

const categoryDataview = new carto.dataview.Category(source, 'adm0name', {
limit: 4,
operation: carto.operation.SUM,
operationColumn: 'pop_max'
});
categoryDataview.on('dataChanged', renderWidgetCategory);
const categoryDataview = new carto.dataview.Category(source, 'adm0name', {
limit: 4,
operation: carto.operation.SUM,
operationColumn: 'pop_max'
});
categoryDataview.on('dataChanged', renderWidgetCategory);

client.addDataview(categoryDataview);
client.addDataview(categoryDataview);

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

client.addDataview(formulaDataview);
client.addDataview(formulaDataview);

const bboxFilter = new carto.filter.BoundingBoxGoogleMaps(map);
const bboxFilter = new carto.filter.BoundingBoxGoogleMaps(map);

categoryDataview.addFilter(bboxFilter);
formulaDataview.addFilter(bboxFilter);
categoryDataview.addFilter(bboxFilter);
formulaDataview.addFilter(bboxFilter);

function renderWidgetCategory(data) {
let content = '';
content += `<ul>`
for (let category of data.categories) {
content += `<li>`
content += `<h3>${category.name}</h3>
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>`
document.querySelector('.widget.category').innerHTML = content;
content += `<li>`
}
content += `</ul>`
document.querySelector('.widget.category').innerHTML = content;
}

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

</html>
Loading