0
У меня возникли проблемы с пониманием того, почему некоторые из всплывающих окон не отображаются на карте. Я проверил все, и причиной, по-видимому, являются координаты или то, как карта сосредоточена на Тихоокеанском регионе, а не в Атлантике. Интересно, это его ошибка.Не все всплывающие окна Mapbox
Всплывающие окна, которые не отображаются, находятся в Индонезии в координатах: [117.298827, -3.988473] и [106.84513, -6.21462]. Когда я меняю координаты, всплывающее окно отлично отображает. Как мне изменить координаты?
Это код:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 25%;
top: 0;
left: 0;
padding: 10px;
}
.map-overlay .map-overlay-inner {
background-color: #fff;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
}
.map-overlay h2 {
line-height: 24px;
display: block;
margin: 0 0 10px;
}
.map-overlay input {
background-color: transparent;
display: inline-block;
width: 100%;
position: relative;
margin: 0;
cursor: ew-resize;
}
</style>
<div id='map'></div>
<div class='map-overlay top'>
<div class='map-overlay-inner'>
<h2>Deployment Map</h2>
</div>
</div>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoia3Z5YiIsImEiOiJjaXUwMHEwcmgwMDAxMnlvM3NzMm0xbGozIn0.JL_eeNZL_lDoJxijNqFPoA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: [-171.351550, 22.458428],
zoom: 2
});
map.on('load', function() {
map.addSource('locations', {
'type': 'geojson',
'data': {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-119.417931, 36.778259]
},
"properties": {
"title": "California",
"marker-symbol": "fire-station-15",
"Year": 2003,
"Network": "3G Roll Out"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [106.84513, -6.21462]
},
"properties": {
"title": "Jakarta",
"marker-symbol": "fire-station-15",
"Year": 2004,
"Network": "WiMax Network"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [117.298827, -3.988473]
},
"properties": {
"title": "Indonesia",
"marker-symbol": "fire-station-15",
"Year": 2008,
"Network": "LTE 4G National Roll Out"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-116.973635, 41.678383]
},
"properties": {
"title": "USA Western States",
"marker-symbol": "fire-station-15",
"Year": 2013,
"Network": "LTE 4G National Roll Out"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-84.970223, 34.769802]
},
"properties": {
"title": "Dalton, Georgia",
"marker-symbol": "fire-station-15",
"Year": 2015,
"Network": "City Wi-Fi"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-83.953125, 33.672545]
},
"properties": {
"title": "North-West Georgia, USA",
"marker-symbol": "fire-station-15",
"Year": 2017,
"Network": "11 City Hybrid Wireless Solution"
}
}]
}
});
map.addLayer({
'id': 'location-markers',
'type': 'symbol',
'source': 'locations',
"layout": {
"icon-image": "{marker-symbol}",
'icon-size': 2,
'icon-allow-overlap': true
}
});
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['location-markers'] });
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
if (!features.length) {
popup.remove();
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(feature.geometry.coordinates)
.setHTML('<b><font color="red"> Location Information</font></b>'+'<br><b><font color="red">Location: </font></b>'+feature.properties.title+'<br><b><font color="red">Year: </font></b>'+feature.properties.Year+'<br><b><font color="red">Network: </font></b>'+feature.properties.Network)
.addTo(map);
});
});
</script>
</body>
</html>