|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> |
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
|
<style> |
|
html, |
|
body, |
|
#map { |
|
width: 100%; |
|
height: 100%; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
|
|
.leaflet-popup-content ul { |
|
padding-left: 1.2em; |
|
} |
|
</style> |
|
|
|
<!-- Include Carto.js --> |
|
<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.4/carto.min.js"></script> |
|
<!-- Include Leaflet --> |
|
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> |
|
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"> |
|
|
|
<!-- Geocoder--> |
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> |
|
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> |
|
|
|
</head> |
|
|
|
<body> |
|
<div id="map"></div> |
|
<div id="searchbox"> |
|
<script> |
|
let layer; |
|
let input; |
|
let map; |
|
|
|
function main() { |
|
let map = L.map('map', { |
|
zoomControl: false, |
|
center: [41.390205, 2.154007], |
|
zoom: 4 |
|
}); |
|
|
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', { |
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>' |
|
}).addTo(map); |
|
|
|
// define client |
|
const client = new carto.Client({ |
|
apiKey: 'default_public', |
|
username: 'oboix' |
|
}); |
|
|
|
const source = new carto.source.SQL(` |
|
SELECT * FROM world_table_2 |
|
`); |
|
// define CartoCSS code to style data on map |
|
const style = new carto.style.CartoCSS( |
|
` |
|
#world_table_2 { |
|
polygon-fill: #3E7BB6; |
|
polygon-opacity: 0.7; |
|
line-color: #FFF; |
|
line-width: 0.5; |
|
line-opacity: 1;} |
|
` |
|
); |
|
// create CARTO layer from source and style variables |
|
const layer = new carto.layer.Layer(source, style, { |
|
featureClickColumns: ['name', 'iso3', 'area', 'pop2005'] |
|
}); |
|
|
|
// add CARTO layer to the client |
|
client.addLayer(layer); |
|
|
|
// get tile from client and add them to the map object |
|
client.getLeafletLayer().addTo(map); |
|
|
|
// Geocoder |
|
L.Control.geocoder().addTo(map); |
|
|
|
// Interactivity |
|
const popup = L.popup({ |
|
autoPan: false |
|
}); |
|
|
|
layer.on('featureClicked', function (featureEvent) { |
|
const data = featureEvent.data; |
|
const content = |
|
` |
|
<h3>${data.name}</h3> |
|
<ul> |
|
<li><strong>Area</strong>:${data.area}</li> |
|
<li><strong>ISO3</strong>:${data.iso3}</li> |
|
<li><strong>Population (2005)</strong>:${data.pop2005}</li> |
|
</ul> |
|
` |
|
popup.setContent(content); |
|
popup.setLatLng(featureEvent.latLng); |
|
if (!popup.isOpen()) { |
|
popup.openOn(map); |
|
} |
|
}); |
|
} |
|
window.onload = main; |
|
</script> |
|
</body> |
|
|
|
</html> |
