mapboxgl.accessToken = 'pk.eyJ1IjoicXVlcm9kZXNlbm8iLCJhIjoiY2t1NWNkOGt2NHl4MDJvbXA0cnlobTR0MSJ9.Mz3Kv34bj_Zt_dIGNsrkmg'; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/querodeseno/cku5coh7b2hdj17nxheesyr9c', // style URL zoom: 8, pitch: 50, // pitch in degrees bearing: -30, center:[-8.5781055,42.8985624] }); const nav = new mapboxgl.NavigationControl({ visualizePitch: true }); // Add zoom and rotation controls to the map. map.addControl(nav, 'bottom-right'); map.scrollZoom.disable(); map.on('click', ({ point }) => { const features = map.queryRenderedFeatures(point, { layers: ['aviturga'] }); if (!features.length) { return; } const feature = features[0]; const popup = new mapboxgl.Popup({ offset: [0, -15] }) .setLngLat(feature.geometry.coordinates) .setHTML( `

${feature.properties.titulo}

${feature.properties.place_name}

<img src='${feature.properties.image}' style='width:100%;height:auto'

${feature.properties.horario}

` ) .addTo(map); }); jQuery('.fly').click(function() { jQuery('.fly').removeClass('active'); jQuery(this).addClass('active'); var destino = jQuery(this).attr('data-coord'); var dpitch = jQuery(this).attr('data-pitch'); var dbearing = jQuery(this).attr('data-bearing'); var dzoom = jQuery(this).attr('data-zoom'); volandovoy(destino,dpitch,dbearing,dzoom); }); map.on('idle',function(){ map.resize() }) function volandovoy(p1,p2,p3,p4) { var latLng = p1.split(","); var lat = parseFloat(latLng[0]); var lng = parseFloat(latLng[1]); map.flyTo({ center: [lng, lat], pitch: p2, bearing: p3, zoom: p4, speed: 0.8, curve: 1, easing: function (t) { return t; }, essential: true }); }