Estoy tratando de tomar las coordenadas de mi archivo JSON y dárselas a Mapbox dentro de un archivo HTML sin escribir manualmente los datos. Revisé algunas publicaciones y encontré una que carga el json en mi archivo HTML.
function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("application/json"); xobj.open('GET', 'C:\Users\ArkPr\yelp\restaurants.json', true); xobj.onreadystatechange = function () { if (xobj.readyState == 4 && xobj.status == "200") { callback(JSON.parse(xobj.responseText)); } }; xobj.send(null); } loadJSON(function(json) { var actual_JSON = JSON.parse(json);Esto es genial, pero no sé cómo acceder a los valores dentro del archivo JSON que quiero, siendo las coordenadas.
{ "type": "featurecollections", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -0.153788, 51.513878 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -0.162122, 51.485349 ] } }, // etc...Y haz que funcionen con las siguientes líneas de código para colocar marcadores en un mapa.
for (const { geometry, properties } of actual_JSON.features) { // create a HTML element for each feature const el = document.createElement('div'); el.className = 'marker'; // make a marker for each feature and add to the map new mapboxgl.Marker(el).setLngLat(geometry.coordinates).addTo(map); }¿Qué me estoy perdiendo que hará que todo funcione según lo previsto?
Puede usar un servidor JSON simulado en línea como https://www.npoint.io/ y el código será como;
$.getJSON("https://api.npoint.io/43c8857fb1f218a3b356", null, (actual_JSON)=>{ actual_JSON.features.forEach((feature)=> { const el = document.createElement('div'); el.className = 'marker'; new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map); }); });Su bucle for debería ser algo como esto:
var json = { "type": "featurecollections", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -0.153788, 51.513878 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -0.162122, 51.485349 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -0.101429, 51.513136 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -0.138386, 51.512087 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -100.445882, 39.78373 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -0.192881, 51.504062 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -0.089901, 51.505143 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -100.445882, 39.78373 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -0.139175, 51.492591 ] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -100.445882, 39.78373 ] } } ] } for (let feature of json.features) { const el = document.createElement('div'); el.className = 'marker'; console.log(feature.geometry.coordinates); } También necesita mover todo lo relacionado con el map dentro del método loadJson() y unir ambos terminará con algo como esto:
function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("application/json"); xobj.open("GET", "C:\Users\ArkPr\yelp\restaurants.json", true); xobj.onreadystatechange = function() { if (xobj.readyState == 4 && xobj.status == "200") { callback(JSON.parse(xobj.responseText)); } }; xobj.send(null); } loadJSON(function(json) { mapboxgl.accessToken = ':3'; const map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", center: [-0.19346, 51.50405], zoom: 9 }); for (let feature of json.features) { const el = document.createElement('div'); el.className = 'marker'; // make a marker for each feature and add to the map new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map); } });