-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (72 loc) · 2.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html>
<head>
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.7.0/carto-vl.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
}
#map {
position: absolute;
height: 100%;
width: 100%;
}
.popup {
padding: 0 12px;
min-width: 200px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamdpcHBlciIsImEiOiJjamp6NGdwMHphdGo0M3BwMXN5dWtjOGIyIn0.t38MazjsoIQpGBtvkG0OmQ';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/jgipper/cjlreswle9lwf2rojrgnhsmyg',
center: [-104.890233, 39.755458],
zoom: 10.0,
dragRotate: false
});
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
const s = carto.expressions;
const viz = new carto.Viz({
variables: {
size: s.div(s.sqrt(s.prop('pop_min')),100),
name: s.prop('name'),
population: s.prop('pop_min')
},
width: s.var('size'),
color: s.ramp(s.buckets(s.prop('worldcity'), [1, 0]), s.palettes.PRISM),
strokeWidth: 0
});
const layer = new carto.Layer('layer', source, viz);
const interactivity = new carto.Interactivity(layer);
interactivity.on('featureClick', featureEvent => {
const coords = featureEvent.coordinates;
const feature = featureEvent.features[0];
new mapboxgl.Popup()
.setLngLat([coords.lng, coords.lat])
.setHTML('<div class="popup"><h2>' + feature.variables.name.value + '</h2><p>'+ feature.variables.population.value + '</p></div>')
.addTo(map);
});
interactivity.on('featureEnter', featureEvent => {
featureEvent.features[0].color.blendTo('rgba(0, 255, 0, 0.8)', 100);
});
interactivity.on('featureLeave', featureEvent => {
featureEvent.features[0].color.reset();
});
layer.addTo(map);
</script>
</body>
</html>