Trafico,incidencias,Estado de carreteras online,en directo

Estado de trafico en directo por carretera y autopistas para todo tipo de vehiculos camiones,coches,autoutilitares,furgonetas.Trafico en directo con todas las incidencias en la carretera por toda europa.Vista directa del tipo de incidencia de trafico como:accidentes,lluvia,heladas,carretera cerrada,carril cerrados,viento,peligros,zona en obras,desviaciones,niebla,atascos todo gracias a nuestra aplicaccion gratuita.Para una mejor experiencia visual, recomendamos uno de estos navegadores web,Mozilla Firefox,Google Chrome o Microsoft Edge.Busque o centre el mapa en el área donde desea conocer la situación del tráfico en la carretera y todos los datos aparecerán en la ruta seleccionada.

' + '
' + '
' + createCustomPopupHeader() + '
' + '
' + createCustomPopupBody(displayedFeatures) + '
' + '
' + ''; clusterWrapper.innerHTML = clusterHTML; return clusterWrapper; } function createCustomPopupBody(displayedFeatures) { return displayedFeatures.map(function(feature) { return ( '
' + '
' + '
' + '
' + '
' + '
' + '
' + '

From: ' + feature.properties.from + '

' + '

To: ' + feature.properties.to + '

' + '
' + '
' + formatters.formatAsMetricDistance(feature.properties.lengthMeters) + '
' + '
' ); }).join(''); } function createCustomPopupHeader() { return ['Category', 'Streets', 'Length'].map(function(text) { return '
' + text + '
'; }).join(''); } function createDisplayedIncidentsData() { var array = []; for (var incidentId in incidentsData) { var incident = incidentsData[incidentId], properties = incident.properties; if (isDescribedAsCluster(properties)) { properties.from = properties.features[0].properties.from; properties.to = properties.features[0].properties.to; properties.delaySeconds = calculateClusteredIncidentsDelay(properties); } if (!properties.delaySeconds) { properties.delaySeconds = 0; } array.push(incident); } if (sortedByValue && sortDirection) { array.sort(compareIncidentCategory); } return array; } function createIncidentDetailsContent(properties) { var incidentDetailsElement = DomHelpers.elementFactory('div', ''); incidentDetailsElement.innerHTML = '
' + '
' + '
' + (isDescribedAsCluster(properties) ? '
' + (properties.clusterSize > 99 ? '99+' : properties.clusterSize) : '
') + '
' + '
' + '
' + '
' + (properties.roadNumber ? '' + properties.roadNumber + '' : '') + '
' + properties.from + '
' + '
' + properties.to + '
' + '
' + '
'; return incidentDetailsElement; } function createIncidentHeader() { var headerNames = [ { text: 'Incident', attribute: 'from' }, { text: 'Delay', attribute: 'delaySeconds' }, { text: 'Length', attribute: 'lengthMeters' } ], incidentHeader = document.querySelector('.tt-side-panel__header'); incidentHeader.innerHTML = ''; headerNames.forEach(function(headerName) { var headerElement = DomHelpers.elementFactory('div', ''), sortIcon = headerName.attribute === sortedByValue ? sortDirection === 'asc' ? '' + '' + '' : '' + '' + '' : '' + '' + ''; headerElement.innerHTML = headerName.text + sortIcon; headerElement.setAttribute('data-sort', headerName.attribute); headerElement.addEventListener('click', handleIncidentsSort); incidentHeader.appendChild(headerElement); }); } function createIncidentItemRow(markerData) { var properties = markerData.properties, delaySeconds = properties.delaySeconds, lengthMeters = properties.lengthMeters; var incidentDelay = DomHelpers.elementFactory('div', '', formatters.formatToDurationTimeString(delaySeconds)), incidentLength = DomHelpers.elementFactory('div', '', formatters.formatAsMetricDistance(lengthMeters)), incidentDetailsContent = createIncidentDetailsContent(properties), incidentsListItem = DomHelpers.elementFactory('div', 'tt-incidents-list__item'); incidentsListItem.setAttribute('data-id', properties.id); incidentsListItem.appendChild(incidentDetailsContent); incidentsListItem.appendChild(incidentDelay); incidentsListItem.appendChild(incidentLength); return incidentsListItem; } function createIncidentsList(isSorted) { results.innerHTML = ''; if (!displayedIncidentsData.length) { var placeholder = DomHelpers.elementFactory('div', 'tt-overflow__placeholder -small', 'No data for this view, try to move or zoom...'); results.appendChild(placeholder); return; } var incidentsList = DomHelpers.elementFactory('div', 'tt-incidents-list'); displayedIncidentsData.forEach(function(markerData) { var incidentsItemRow = createIncidentItemRow(markerData); incidentsList.appendChild(incidentsItemRow); }); incidentsList.addEventListener('click', handleResultItemClick); results.appendChild(incidentsList); var selectedIncidentElement = document.querySelector('div[data-id="' + selectedIncidentId + '"]'); if (selectedIncidentId && selectedIncidentElement) { selectedIncidentElement.classList.add(selectedClass); } else { selectedIncidentId = ''; } if (isSorted) { document.querySelector('.js-results').scrollTop = 0; } } function createMarkerContentFactory(feature, defaultFactoryMethod, oldMarker) { var marker = defaultFactoryMethod(feature), name = feature.properties.id; if (!isDescribedAsCluster(feature.properties)) { if (!oldMarker) { marker.getPopup().on('open', makeResultItemSelected.bind(null, name)); } else { return oldMarker; } return marker; } var content = marker.getElement(), newMarker = new tt.Marker({ element: content, anchor: 'top' }), popup = new tt.Popup() .setDOMContent(createClusterPopupContent(feature)) .setMaxWidth('none'); newMarker.setPopup(popup); if (!oldMarker) { newMarker.getPopup().on('open', makeResultItemSelected.bind(null, name)); } else { oldMarker.getPopup().setDOMContent(createClusterPopupContent(feature)); return oldMarker; } return newMarker; } function findParentNodeId(element, dataId) { if (element.getAttribute(dataId)) { return element.getAttribute(dataId); } while (element.parentNode) { element = element.parentNode; if (element.getAttribute(dataId)) { return element.getAttribute(dataId); } } return null; } function handleIncidentsSort(event) { var actualMarkersData = displayedIncidentsData, sortProperty = event.currentTarget.getAttribute('data-sort'); sortDirection = sortedByValue === sortProperty ? !sortDirection || sortDirection === 'desc' ? 'asc' : 'desc' : 'asc'; sortedByValue = sortProperty; displayedIncidentsData = actualMarkersData.sort(compareIncidentCategory); createIncidentHeader(); createIncidentsList(true); } function handleResultItemClick(event) { var target = event.target, markerId = findParentNodeId(target, 'data-id'), selectedIncidentElementClassList = document.querySelector('div[data-id="' + markerId + '"]').classList; if (selectedIncidentElementClassList.contains(selectedClass)) { return; } for (var marker in incidentsMarkers) { var currentMarker = incidentsMarkers[marker]; if (currentMarker.getPopup().isOpen()) { currentMarker.togglePopup(); } } var selectedMarker = incidentsMarkers[markerId]; if (!selectedMarker.getPopup().isOpen()) { selectedMarker.togglePopup(); } selectedMarker.getPopup().once('close', function() { document.querySelector('div[data-id="' + markerId + '"]').classList.remove(selectedClass); selectedIncidentId = ''; }); } function isDescribedAsCluster(features) { return Boolean(features.features && features.clusterSize); } function makeResultItemSelected(markerId) { var selectedIncidentElementClassList = document.querySelector('div[data-id="' + markerId + '"]').classList, selectedMarker = incidentsMarkers[markerId], offsetY = Math.floor(selectedMarker.getPopup().getElement().getBoundingClientRect().height * 0.5); selectedIncidentId = markerId; map.flyTo({ center: incidentsMarkers[markerId].getLngLat(), offset: [0, offsetY], speed: 0.5 }); [].slice.call(document.querySelectorAll('.tt-incidents-list__item')) .forEach(function(DOMElement) { DOMElement.classList.remove(selectedClass); }); selectedIncidentElementClassList.add(selectedClass); } function unselectIncidentResult() { if (!selectedIncidentId) { return; } document.querySelector('div[data-id="' + selectedIncidentId + '"]').classList.remove(selectedClass); selectedIncidentId = ''; }
Iniciar sesión
Nombre de usuario
Contraseña
¿Has olvidado tu contraseña? Recordar