diff --git a/src/components/map/mapbox/feature/FeatureAirZone.js b/src/components/map/mapbox/feature/FeatureAirZone.js index 27c9f2aa..207af6d0 100644 --- a/src/components/map/mapbox/feature/FeatureAirZone.js +++ b/src/components/map/mapbox/feature/FeatureAirZone.js @@ -47,18 +47,18 @@ export default function FeatureAirZone(props) { const infowindowOpen = data => { const content = '
' + - '
' + - '' + - data.title + - '' + - '
' + '
' + - '
' + '' + - data.description + + data.title + '' + '
' + - '
' + + // '
' + + // '
' + + // '' + + // data.description + + // '' + + // '
' + + // '
' + '
'; if (popup) { @@ -67,10 +67,10 @@ export default function FeatureAirZone(props) { // Create a popup element popup = new props.mapboxgl.Popup({ - offset: [20, -20], + offset: [0, 0], closeButton: false, - closeOnClick: false, - closeOnMove: true + closeOnClick: true, + closeOnMove: false }) .setLngLat(data.coord) .setHTML(content) @@ -95,7 +95,7 @@ export default function FeatureAirZone(props) { }); }); - props.map.on('mouseover', 'maine', e => { + props.map.on('click', 'maine', e => { props.map.getCanvas().style.cursor = 'pointer'; const feature = e.features[0]; const data = feature.properties; @@ -105,12 +105,22 @@ export default function FeatureAirZone(props) { infowindowOpen(data); }); - props.map.on('mouseout', 'maine', () => { - props.map.getCanvas().style.cursor = ''; - if (popup) { - popup.remove(); - } - }); + // props.map.on('mouseover', 'maine', e => { + // props.map.getCanvas().style.cursor = 'pointer'; + // const feature = e.features[0]; + // const data = feature.properties; + // data.coord = e.lngLat; + // data.title = feature.properties.name; + + // infowindowOpen(data); + // }); + + // props.map.on('mouseout', 'maine', () => { + // props.map.getCanvas().style.cursor = ''; + // if (popup) { + // popup.remove(); + // } + // }); const buildingsLayer = props.map.getLayer('add-3d-buildings'); if (buildingsLayer) {