map = { let map = this; if (!map) { // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div map = new mapboxgl.Map({ container, center: [31.553968, 48.649097], zoom: 5, style: 'mapbox://styles/mapbox/light-v10' }); } const fadeOutIncidents = settings.includes('Fade out past incidents') const largeIcons = settings.includes('Large icons') const showAllIncidents = settings.includes('View all incidents') const incidentTypeIds = incidentTypes.map(item => groupsData.find(g => g.title === item).group) const filterEqualOrLessThanCurrentDay = ['<=', ['number', ['get', 'index']], dayRange] const filterEqualCurrentDay = ['==', ['number', ['get', 'index']], dayRange] const filterIncidentTypes = ['in', ['get', 'group'], ['literal', incidentTypeIds ]] const filters = showAllIncidents ? filterIncidentTypes : fadeOutIncidents ? ['all', filterIncidentTypes, filterEqualOrLessThanCurrentDay] : ['all', filterIncidentTypes, filterEqualCurrentDay] const opacity = showAllIncidents ? 1 : [ 'step', ['get', 'index'], 0, dayRange - 5, 0.1, dayRange - 4, 0.2, dayRange - 3, 0.3, dayRange - 2, 0.4, dayRange - 1, 0.5, dayRange, 1 ] let incidentsLayer = { id: "incidents", type: "symbol", source: "incidents", layout: { 'icon-allow-overlap': true, 'icon-image': ['get', 'group'], 'icon-size': largeIcons ? 0.75 : 0.5, 'icon-ignore-placement': true, }, paint: { 'icon-opacity': opacity, }, filter: filters, } map.on('load', async () => { groupsData.forEach(async (item) => { if (!item.file) return const iconImage = await item.file.image() map.addImage(item.group, iconImage) }) }) map.on('click', 'incidents', (e) => { const coordinates = e.features[0].geometry.coordinates.slice() const props = e.features[0].properties const { link, geolocation, briefDescription, country, province, city, violenceLevel } = props new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(`

${briefDescription}

${violenceLevel ? 'Violence level: ' + violenceLevel : ''}

${link ? 'Link: ' + link + '' : ''}

${geolocation ? 'Geolocation: ' + geolocation + '' : ''}

${country ? 'Country: ' + country : ''}

${province ? 'Province: ' + province : ''}

${city ? 'City/town: ' + city : ''}

`) .addTo(map) }) map.on('mouseenter', 'incidents', () => { map.getCanvas().style.cursor = 'pointer' }) map.on('mouseleave', 'incidents', () => { map.getCanvas().style.cursor = '' }) // Wait until the map loads, then yield the container again. yield new Promise(resolve => { if (map.loaded()) resolve(map) else map.on('load', () => resolve(map)) }) if (!map.getSource('incidents')) { map.addSource('incidents', { type: 'geojson', data: data }) } if (map.getLayer(incidentsLayer.id)) { map.removeLayer(incidentsLayer.id) } map.addLayer(incidentsLayer) }