I'm trying to take the coordinates from my JSON file and give them to Mapbox inside of an HTML file without manually typing in the data. I looked over some posts and found one that loads the json into my HTML file.
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);
This is great but I don't know how to access the values within the JSON file that I want, being the coordinates.
{
"type": "featurecollections",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-0.153788,
51.513878
]
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-0.162122,
51.485349
]
}
},
// etc...
And make them work with the next few lines of code to place markers on a map.
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);
}
What am I missing that will make this all work as intended?
You can use an online mock JSON server like https://www.npoint.io/ and the code will be like;
$.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);
});
});
Your for loop should be something like this:
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);
}You also need to move everything related with map inside the loadJson() method and joining both you'll end up with something like this:
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);
}
});