index.js
let map = new mapboxgl.Map({
container: 'map',
style: 'https://vectortiles1.ams3.digitaloceanspaces.com/utrechtoverdetong/style.json',
zoom: 15,
pitch: 0,
bearing: 0,
center: [5.11863, 52.0935],
attributionControl: false
});
let myrests = [
{
name: 'Gys',
reviewed: true
},{
name: 'Tiger mama',
reviewed: false
}, {
name: 'Gauchos',
reviewed: false
}, {
name: 'Los Argentinos',
reviewed: true
},{
name: 'De Werfkring',
reviewed: true
}
]
map.on('load', function() {
map.addSource('rests', {
type: 'vector',
url: 'https://ta.webmapper.nl/stb/achtergrond/style/tilejson.json'
})
expression = ["match", ["get", "name"]];
myrests.forEach(function(row) {
expression.push(row['name'], row['reviewed'] === true ? 'reviewed' : 'not-reviewed')
})
expression.push('not-reviewed');
let mylayer = map.addLayer({
"id": 'rests-join',
'type': 'symbol',
'source': 'rests',
'source-layer': 'poi',
'filter': ['==', 'subclass', 'restaurant'],
'layout': {
'icon-image': expression,
'icon-allow-overlap': true
}
});
function isReviewed(props) {
for (var i=0; i<myrests.length; i++) {
if (props.name === myrests[i].name) {
return true;
}
}
return false;
}
map.on('click', 'rests-join', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var name = e.features[0].properties.name;
var reviewed = isReviewed(e.features[0].properties);
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(`<h2>${name}</h2><p>Bezocht: ${reviewed? 'ja' : 'nee'}`)
.addTo(map);
});
map.on('mouseenter', 'rests-join', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'rests-join', function () {
map.getCanvas().style.cursor = '';
});
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Demo Mapboxgl with external data bind</title>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<style>
#map {
height: 100vh;
width: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<script src='index.js'></script>
</body>
</html>