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

Add four misc CARTO.js examples to Dev center #2211

Merged
merged 7 commits into from
Dec 26, 2018
Merged

Add four misc CARTO.js examples to Dev center #2211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
28aef2a
add 3 examples
oriolbx Dec 14, 2018
dcdd805
add storymap.js example
oriolbx Dec 14, 2018
6d792c5
fix typo
oriolbx Dec 17, 2018
f412ce7
fix typo
oriolbx Dec 17, 2018
72917ba
fix another typo
oriolbx Dec 17, 2018
2df1bcf
fix examples.json storymap
oriolbx Dec 19, 2018
3e0429b
Adapt example to avoid breaking buggy storymap.js selector
VictorVelarde Dec 19, 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
29 changes: 29 additions & 0 deletions examples/examples.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,14 @@
"gmaps": "public/misc/popups-gmaps.html"
}
},
{
"title": "Pop-Ups with embed videos",
"desc": "Create pop-up information windows with embed videos.",
"file": {
"leaflet": "public/misc/popups-video-leaflet.html",
"gmaps": "public/misc/popups-video-gmaps.html"
}
},
{
"title": "Legends",
"desc": "Create dynamic legends",
Expand Down Expand Up @@ -209,6 +217,27 @@
"leaflet": "public/misc/hexagon-aggregation-leaflet.html",
"gmaps": "public/misc/hexagon-aggregation-gmaps.html"
}
},
{
"title": "Filter data using drawing tools",
"desc": "Filter data based on a drawn circle",
"file": {
"leaflet": "public/misc/filter-data-map-leaflet.html",
"gmaps": "public/misc/filter-data-map-gmaps.html"
}
},
{
"title": "Dropdown menu with data from CARTO dataset",
"desc": "Look for data within your dataset using dropdown menu.",
"file": {
"leaflet": "public/misc/custom-search-dataset-leaflet.html",
"gmaps": "public/misc/custom-search-dataset-gmaps.html"
}
},
{
"title": "Storymap using CARTO.js and Storymap.js",
"desc": "Create a storytelling map using Storymap.js",
"file": "public/misc/storymap-leaflet.html"
}
]
}
Expand Down
178 changes: 178 additions & 0 deletions examples/public/misc/custom-search-dataset-gmaps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
<!DOCTYPE html>
<html>
<head>
<title>Custom search dataset | 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">
<style>
#selectDrop {
background-color: #d2eaef;
opacity: 0.8;
position: absolute;
top: 50px;
left: 50px;
width: auto;
height: auto;
padding: 10px;
display: block;
z-index: 9000;

}

#selectDrop input {
width: 200px;
}

div#results {
background: #FFF;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="searchbox">
<select id="selectDrop">
<option selected value="">Please Select</option>
</select>
</div>
<!-- Description -->
<aside class="toolbox">
<div class="box">
<header>
<h1>Look for data within your dataset</h1>
<button class="github-logo js-source-link"></button>
</header>
<section>
<p class="description open-sans">Look for data within your dataset using dropdown menu.</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
let input;
// set map with initial zoom and coodinates view
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40, lng: 2 },
zoom: 4,
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' }]
}]);

// populate dropdown menu
populateDrowpDown()



// set CARTO client
const client = new carto.Client({
apiKey: 'default_public',
username: 'cartojs-test'
});

const source = new carto.source.SQL(`
SELECT * FROM ne_adm0_europe
`);
// define CartoCSS code to style data on map
const style = new carto.style.CartoCSS(`
#ne_adm0_europe {
polygon-fill: #3E7BB6;
polygon-opacity: 0.7;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
}

#layer::labels {
text-name: [admin];
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-dy: -10;
text-allow-overlap: true;
text-placement: point;
text-placement-type: dummy;
}
`);
// create CARTO layer from source and style variables
const Cartolayer = new carto.layer.Layer(source, style);

// add CARTO layer to the client
client.addLayer(Cartolayer);

// get tile from client and add them to the map object
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));


// function to get list of country names to populate dropdown menu
function populateDrowpDown(){
return fetch(
`https://cartojs-test.carto.com/api/v2/sql?format=geojson&q=SELECT the_geom, admin FROM ne_adm0_europe ORDER BY admin ASC`
).then((resp) => resp.json())
.then((response) => {
return response['features'].map(function(feature){
option = document.createElement("option")
option.setAttribute("value", feature.properties.admin)
option.textContent = feature.properties.admin
document.getElementById("selectDrop").appendChild(option);
});
}).catch((error) => {
console.log(error)
})
}

// when select option from downdown menu, change bounding box of map
// to geometry of the selected country
document.getElementById('selectDrop').addEventListener("change", function (e) {
input = e.currentTarget.selectedOptions[0].attributes[0].value;
// calculate the xmax, ymax, xmin, ymin coordinates of the bounding box
// of the country polygon of the CARTO dataset
return fetch(
`https://cartojs-test.carto.com/api/v2/sql?format=geojson&q=
WITH bbox as (
SELECT ST_Envelope(the_geom) as the_geom
FROM ne_adm0_europe
WHERE admin Ilike '${input}'
)
SELECT the_geom, ST_Xmax(the_geom) as xmax,
ST_Ymax(the_geom) as ymax,
ST_Xmin(the_geom) as xmin,
ST_Ymin(the_geom) as ymin
FROM bbox
`)
.then((resp) => resp.json())
.then((response) => {
// get coordinates
coordinates = response['features'][0].properties

// set LatLng objects from coordinates from CARTO
let sw = new google.maps.LatLng(coordinates.ymin, coordinates.xmin);
let ne = new google.maps.LatLng(coordinates.ymax, coordinates.xmax);

// instantiate Google bounds
bounds = new google.maps.LatLngBounds(sw, ne)

// set bounds of map to the geometry from CARTO
map.fitBounds(bounds);
})
});
</script>
</body>
</html>
147 changes: 147 additions & 0 deletions examples/public/misc/custom-search-dataset-leaflet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<title>Custom search dataset | 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@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
<!-- Include CARTO.js -->
<script src="../../../dist/public/carto.js"></script>
<link href="../style.css" rel="stylesheet">
<style>
#selectDrop {
background-color: #d2eaef;
opacity: 0.8;
position: absolute;
top: 10px;
left: 50px;
width: auto;
height: auto;
padding: 10px;
display: block;
z-index: 9000;

}

#selectDrop input {
width: 200px;
}

div#results {
background: #FFF;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="searchbox">
<select id="selectDrop">
<option selected value="">Please Select</option>
</select>
</div>
<!-- Description -->
<aside class="toolbox">
<div class="box">
<header>
<h1>Look for data within your dataset</h1>
<button class="github-logo js-source-link"></button>
</header>
<section>
<p class="description open-sans">Look for data within your dataset using dropdown menu.</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
// set map with initial zoom and coodinates view
const map = L.map('map').setView([40, 2], 4);
let input;
// disable scroll wheel zoom
map.scrollWheelZoom.disable();

// populate dropdown menu
populateDrowpDown()

// add basemaps to map
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);

// set CARTO client
const client = new carto.Client({
apiKey: 'default_public',
username: 'cartojs-test'
});

const source = new carto.source.SQL(`
SELECT * FROM ne_adm0_europe
`);
// define CartoCSS code to style data on map
const style = new carto.style.CartoCSS(`
#ne_adm0_europe {
polygon-fill: #3E7BB6;
polygon-opacity: 0.7;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
}

#layer::labels {
text-name: [admin];
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-dy: -10;
text-allow-overlap: true;
text-placement: point;
text-placement-type: dummy;
}
`);
// create CARTO layer from source and style variables
const Cartolayer = new carto.layer.Layer(source, style);

// add CARTO layer to the client
client.addLayer(Cartolayer);

// get tile from client and add them to the map object
client.getLeafletLayer().addTo(map);


// function to get list of country names to populate dropdown menu
function populateDrowpDown(){
return fetch(
`https://cartojs-test.carto.com/api/v2/sql?format=geojson&q=SELECT the_geom, admin FROM ne_adm0_europe ORDER BY admin ASC`
).then((resp) => resp.json())
.then((response) => {
return response['features'].map(function(feature){
option = document.createElement("option")
option.setAttribute("value", feature.properties.admin)
option.textContent = feature.properties.admin
document.getElementById("selectDrop").appendChild(option);
});
}).catch((error) => {
console.log(error)
})
}

// when select option from downdown menu, change bounding box of map
// to geometry of the selected country
document.getElementById('selectDrop').addEventListener("change", function (e) {
input = e.currentTarget.selectedOptions[0].attributes[0].value;
return fetch(`https://cartojs-test.carto.com/api/v2/sql?format=geojson&q=SELECT * FROM ne_adm0_europe where admin Ilike '${input}'`)
.then((resp) => resp.json())
.then((response) => {
geojsonLayer = L.geoJson(response)
map.fitBounds(geojsonLayer.getBounds());
})
});

</script>
</body>
</html>
Loading