|
|
@ -47,18 +47,18 @@ export default function FeatureAirZone(props) { |
|
|
|
const infowindowOpen = data => { |
|
|
|
const infowindowOpen = data => { |
|
|
|
const content = |
|
|
|
const content = |
|
|
|
'<div class="tooltip-box">' + |
|
|
|
'<div class="tooltip-box">' + |
|
|
|
'<div class="tooltip-ti">' + |
|
|
|
|
|
|
|
'<span>' + |
|
|
|
|
|
|
|
data.title + |
|
|
|
|
|
|
|
'</span>' + |
|
|
|
|
|
|
|
'</div>' + |
|
|
|
|
|
|
|
'<div class="tooltip-txt">' + |
|
|
|
'<div class="tooltip-txt">' + |
|
|
|
'<div class="tooltip-txt-list">' + |
|
|
|
|
|
|
|
'<span>' + |
|
|
|
'<span>' + |
|
|
|
data.description + |
|
|
|
data.title + |
|
|
|
'</span>' + |
|
|
|
'</span>' + |
|
|
|
'</div>' + |
|
|
|
'</div>' + |
|
|
|
'</div>' + |
|
|
|
// '<div class="tooltip-txt">' +
|
|
|
|
|
|
|
|
// '<div class="tooltip-txt-list">' +
|
|
|
|
|
|
|
|
// '<span>' +
|
|
|
|
|
|
|
|
// data.description +
|
|
|
|
|
|
|
|
// '</span>' +
|
|
|
|
|
|
|
|
// '</div>' +
|
|
|
|
|
|
|
|
// '</div>' +
|
|
|
|
'</div>'; |
|
|
|
'</div>'; |
|
|
|
|
|
|
|
|
|
|
|
if (popup) { |
|
|
|
if (popup) { |
|
|
@ -67,10 +67,10 @@ export default function FeatureAirZone(props) { |
|
|
|
|
|
|
|
|
|
|
|
// Create a popup element
|
|
|
|
// Create a popup element
|
|
|
|
popup = new props.mapboxgl.Popup({ |
|
|
|
popup = new props.mapboxgl.Popup({ |
|
|
|
offset: [20, -20], |
|
|
|
offset: [0, 0], |
|
|
|
closeButton: false, |
|
|
|
closeButton: false, |
|
|
|
closeOnClick: false, |
|
|
|
closeOnClick: true, |
|
|
|
closeOnMove: true |
|
|
|
closeOnMove: false |
|
|
|
}) |
|
|
|
}) |
|
|
|
.setLngLat(data.coord) |
|
|
|
.setLngLat(data.coord) |
|
|
|
.setHTML(content) |
|
|
|
.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'; |
|
|
|
props.map.getCanvas().style.cursor = 'pointer'; |
|
|
|
const feature = e.features[0]; |
|
|
|
const feature = e.features[0]; |
|
|
|
const data = feature.properties; |
|
|
|
const data = feature.properties; |
|
|
@ -105,12 +105,22 @@ export default function FeatureAirZone(props) { |
|
|
|
infowindowOpen(data); |
|
|
|
infowindowOpen(data); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
props.map.on('mouseout', 'maine', () => { |
|
|
|
// props.map.on('mouseover', 'maine', e => {
|
|
|
|
props.map.getCanvas().style.cursor = ''; |
|
|
|
// props.map.getCanvas().style.cursor = 'pointer';
|
|
|
|
if (popup) { |
|
|
|
// const feature = e.features[0];
|
|
|
|
popup.remove(); |
|
|
|
// 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'); |
|
|
|
const buildingsLayer = props.map.getLayer('add-3d-buildings'); |
|
|
|
if (buildingsLayer) { |
|
|
|
if (buildingsLayer) { |
|
|
|