viewof map = { var container = html`

` //var container = html`

` //transform: rotateZ(-135deg); var content = html`

${container}

Informazioni

Tocca una traiettoria od un' area!

`; yield content; // Give the container dimensions. var map = container.value = new mapboxgl.Map({ container, center: [10.294592, 43.597031], zoom: 10.5, style: "mapbox://styles/mapbox/streets-v10", scrollZoom: true }); map.addControl(new mapboxgl.NavigationControl(),'top-left'); map.addControl(new mapboxgl.ScaleControl(),'bottom-left'); var layerList = document.getElementById('menu'); var inputs = layerList.getElementsByTagName('input'); var traj_filter=[]; if(all_trajs=="toggle"){ traj_filter=["all", ["==", 'recettore', receptor_by], ["==", "data_evento", evento_by], ["==", 'meteo', meteo_by]]} else{ traj_filter=["all", ["==", 'uid', trajs_sel], ["==", 'recettore', receptor_by], ["==", "data_evento", evento_by], ["==", 'meteo', meteo_by]]; }; function switchLayer(layer) { var layerId = layer.target.id; map.setStyle('mapbox://styles/mapbox/' + layerId); } for (var i = 0; i < inputs.length; i++) { inputs[i].onclick = switchLayer; } invalidation.then(() => map.remove()); map.on('style.load', function (e) { map.addSource('trajs', { "type": "geojson", "data": trj, }); map.addSource('sources', { "type": "geojson", "data": trj2, }); var center = { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [10.294592, 43.597031] }, "properties": { "title": "Mapbox", "description": "Calambrone", "icon": { "className": 'my-icon icon-sf', // class name to style "html": '★', // add content inside the marker, in this case a star "iconSize": null, // size of icon, use null to set the size in CSS 'marker-color': '#3bb2d0', 'marker-size': 'large', 'marker-symbol': 'commercial' } } }, ] }; // add markers to map /*center.features.forEach(function(marker, i) { // create a HTML element for each feature var el = document.createElement('div'); el.className = 'marker'; el.innerHTML = '' + marker.properties.description + '' // make a marker for each feature and add it to the map new mapboxgl.Marker(el) .setLngLat(marker.geometry.coordinates) .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups .setHTML('

' + marker.properties.title + '

' + marker.properties.description + '

')) .addTo(map); console.log("i: "+i) });*/ //recettore rec.features.forEach(function(marker, i) { // create a HTML element for each feature if(marker.properties.recettore == receptor_by) { var el2 = document.createElement('div'); el2.className = 'marker'; el2.innerHTML = '' + marker.properties.recettore + '' // make a marker for each feature and add it to the map new mapboxgl.Marker(el2) .setLngLat(marker.geometry.coordinates) .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups .setHTML('

' + marker.properties.recettore + '

')) .addTo(map); } }); // Draws sources area map.addLayer({ 'id': 'trj2', 'type': 'fill', 'source': 'sources', 'layout': {}, 'paint': { 'fill-color': ['get', "color"], //'#acdd12', 'fill-opacity': 0.5 }, }); //Draw Trajectories map.addLayer({ 'id': 'trj', //'type': 'fill', 'type': 'line', 'source': 'trajs', 'layout': {}, 'paint': { 'line-color': 'rgba(255, 0, 0, 1)', 'line-width': 1 },/* 'paint': { 'fill-antialias': true, 'fill-color':'#ff4412', 'fill-opacity': 0.8, 'fill-outline-color': '#ff4412', }, */ "filter": traj_filter// ["==", "uid", trajs_sel] }); /* map.addLayer({ "id": "trj", "type": "point", "source": "trajs", "layout": { "line-join": "round", "line-cap": "round" }, "paint": { "line-color": "lightgreen", "line-width": 8 } });*/ }); map.on('render', afterChangeComplete); // warning: this fires many times per second! function afterChangeComplete () { if (!map.loaded()) { return } // still not loaded; bail out. // now that the map is loaded, it's safe to query the features: map.off('render', afterChangeComplete); // remove this handler now that we're done. } map.on('mousemove', function(e) { var states = map.queryRenderedFeatures(e.point, { layers: ['trj', 'trj2'] }) var pd = document.getElementById('pd') if (states.length > 0) { var {id, type, source, paint} = states[0].layer //var {name, density} = states[0].properties //pd.innerHTML = `

${name}

${density} people per square if(id=="trj"){ var {end, data_evento, recettore, start, uid} = states[0].properties; pd.innerHTML = `Recettore: ${recettore}
evento: ${data_evento}
start at: ${start}
end at: ${end}
Numero traiettoria: ${uid}

`; }else{ if(id=="trj2"){ var {color, name,} = states[0].properties pd.innerHTML = `Area: ${name}

` } } console.log(states[0].properties); console.log(id); } else { //document.getElementById('pd').innerHTML = `
Hover over a state!
` } }) }