J'utilise des filtres dans Mapbox Studio pour styler un fichier geoJSON avec 189 polygones. J'ai pu filtrer mes données pour créer des calques, mais il n'a reconnu que 100 de mes polygones. J'ai fait des recherches et j'ai vu qu'en fait, Studio ne pouvait traiter que 100. J'utilise ce style pour l'intégrer dans une carte mapbox.js (j'étais capable de le faire), mais je n'ai pas pu formater les 89 autres polygones en raison de problème de filtre. J'ai téléchargé le JSON de cette carte. Puis-je ajouter manuellement les couches restantes dans le JSON? Si oui, comment lier le fichier JSON local en tant que style de ma carte dans mon code mapbox.js?Intégrer le style JSON local dans la carte mapbox.js (et filtrer plus de 100 polygones dans Mapbox)
code mapbox.js (avec style Studio MapBox défectueux):
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
.map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map' class='map'></div>
<style>
.legend {
background-color: #d6d6d6;
border-radius: 3px;
bottom: 30px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
position: absolute;
right: 10px;
z-index: 1;
}
.legend h4 {
margin: 0 0 10px;
}
.legend div span {
border-radius: 50%;
display: inline-block;
height: 10px;
margin-right: 5px;
width: 10px;
}
</style>
<div id='map'></div>
<div id='HVI-legend' class='legend'>
<h4>HVI</h4>
<div><span style='background-color: #EB6769'></span>1</div>
<div><span style='background-color: #F3B3B4'></span>0.5</div>
<div><span style='background-color: #FCFCFF'></span>0</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RhbWxlcm4iLCJhIjoiY2l3MnkwZ2tnMDEwejJ6anZtM240c2d3byJ9.ZTqhEH-1r0WelPq2n0rshQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/stamlern/ciwa09zej000f2pmrr8lm10ju',
center: [-73.949, 40.71],
zoom: 10.1
});
</script>
</body>
</html>