I'm having a bit of a problem here, I'm creating a Leaflet project and need to access to data outside of a variable, in my case a polygon. Until now I have the data inside the polygon with
data:[28.63,34.29,12.23,9.33,6.97,3.93,4.63]
but I'd prefer the data to be outside of this variable with
var koeln = [28.63,34.29,12.23,9.33,6.97,3.93,4.63];
I'm now looking for a result how to access to the var koeln inside of the data, I've tried to put it in brakes or other things, but nothing seems to work..
edit:
var wahl2017 = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties":
{"name":"Wahlbezirk 13","partei":"cdu","wahlbeteiligung":69.42, "drittpa1":"gruen","drittpa2":"fdp", data:[28.63,34.29,12.23,9.33,6.97,3.93,4.63],title:"Köln I"}, "geometry": { "type": "Polygon", "coordinates": [ [ [6.976650953292847, 50.84119137806263 ],
(and so on)
Refering to your comment, you have this data structure:
var wahl2017 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Wahlbezirk 13",
"partei": "cdu",
"wahlbeteiligung": 69.42,
"drittpa1": "gruen",
"drittpa2": "fdp",
data: [28.63, 34.29, 12.23, 9.33, 6.97, 3.93, 4.63],
title: "Köln I"
}
}]
};
You can access the data like this:
let koeln = wahl2017.features[0].properties.data
You can access the data variables with var koeln = wahl2017.features[0].properties.data
When you have more cities you can call .forEach()
var cities = [];
wahl2017.features.forEach(function(city){
cities.push({name: city.properties.name, data: city.properties.data});
})
console.log(cities);
console.log(cities[0].data);
Related
I've got a JSON from a database but now I need to convert it into GeoJson to use it in my map
I found this solution but it shows an undefined array.
$.getJSON("./origin/neworigin.json", function(jsonData) {
var outGeoJson = {}
outGeoJson['properties'] = jsonData
outGeoJson['type']= "Feature"
outGeoJson['geometry']= {"type": "Point", "coordinates":
[jsonData['latitude'], jsonData['longitude']]}
console.log(outGeoJson)
});
This is an example from myJSON
[{"station":"BORJA","institution":"SENCICO","longitude":"-77.0064","latitude":"-12.0855"},
{"station":"SCARQ","institution":"SENCICO","longitude":"-71.5408","latitude":"-16.385"},
{"station":"SCAR2","institution":"SENCICO","longitude":"-71.5364","latitude":"-16.3934"},...
in browser
Check if the array is empty or not.
Try change the variable names.
OR
Provide more details.
You have two options to create a valid GeoJSON form JSON.
create GeoJSON.Point array and GeoJSON.FeatureCollection
create GeoJSON.MultiPoint object
Here are code snippets:
const jsonData = [{
"station": "BORJA",
"institution": "SENCICO",
"longitude": "-77.0064",
"latitude": "-12.0855"
},
{
"station": "SCARQ",
"institution": "SENCICO",
"longitude": "-71.5408",
"latitude": "-16.385"
},
{
"station": "SCAR2",
"institution": "SENCICO",
"longitude": "-71.5364",
"latitude": "-16.3934"
}
];
// to GeoJSON.Point array
const geoJSONPointArr = jsonData.map(row => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [row.longitude, row.latitude]
},
"properties": row
}
});
console.log(geoJSONPointArr);
// to GeoJSON.FeatureCollection
const pointArrFeatureCollection = {
"type": "FeatureCollection",
"features": geoJSONPointArr
}
console.log(pointArrFeatureCollection);
// to GeoJSON.MultiPoint
const geoJSONMultiPoint = {
"type": "Feature",
"geometry": {
"type": "MultiPoint",
"coordinates": jsonData.map(row => [row.longitude, row.latitude])
},
"properties": {
originalData: jsonData
}
}
console.log(geoJSONMultiPoint);
I would also recommend using the turf library, which is very convenient when working with the GeoJSON format.
I am trying to write a section of JavaScript code that allows a user to analyse a route they have plotted on a map. After the user has finished plotting their route, I want to determine if the route they have plotted crosses over any areas of interest.
To do this I am using the lineIntersect method in Turf.js which should allow me to pass a LineString and MultiPolygon.
I have created a Turf.js MultiPolygon:
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
51.50836874890726,
-0.091989636996398
],
[
51.50797826040486,
-0.088994163337176
],
[
51.507701047593805,
-0.085230241948645
],
(the full object had too many characters to post here so I pasted the full output to CodePen)
and converted the user's route to a Turf.js LineString:
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
51.50350693825546,
-0.027165818854444357
],
[
51.50115610069437,
-0.041240038776924066
]
]
}
}
However when I pass these two objects to the lineIntersect method:
turf.lineIntersect(myLineString, myMultiPolygon);
I am getting the following error:
Uncaught Error: coordinates must contain numbers
com turf/turf/turf.min.js:1
There is an extra number 4 at line 8782 in the feature data.
(Line 8782)
[4
51.49960254940379,
-0.093191432240797
],
Once it is eliminated you can use it.
...
var feat1 = ... //that corrected code
var turf_pgon1 = turf.polygon(feat1.geometry.coordinates);
var line1 = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
51.50350693825546,
-0.027165818854444357
],
[
51.50115610069437,
-0.041240038776924066
]
]
}
}
// turf-intersection
var ans = turf.lineIntersect(line1, turf_pgon1);
To get the coordinates of the intersection points.
var xy1 = ans.features[0].geometry.coordinates; //[ 51.503118870662334, -0.02948913916413884 ]
var xy2 = ans.features[1].geometry.coordinates; //[ 51.50157899855393, -0.038708193285440035 ]
I've created a map using mapbox and plotted multiple custom points that you can interact with. I am also using Wordpress and want to use advanced custom fields to create each point so they can easily be managed from a non-technical person. The fields are all setup, but I am having trouble passing them into the javascript in my php template.
I've tried using a loop but I can't use the loop inside javascript. Here is my Mapbox code that I am using to plot the points and want to use advanced custom fields with:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/coptmarketing/cjvi7hc4602dk1cpgqul6mz0b',
center: [-76.615573, 39.285685],
zoom: 16 // starting zoom
});
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"title": "Shake Shack",
"id": "shake-shack"
},
"geometry": {
"type": "Point",
"coordinates": [-76.609844, 39.286894]
}
},
{
"type": "Feature",
"properties": {
"title": "Starbucks",
"id": "starbucks"
},
"geometry": {
"type": "Point",
"coordinates": [-76.619071, 39.286649]
}
}
]
};
I've stored the data in a JSON array:
[{"title":"Shake Shack","slug":"shake-shack","latitude":"-76.609844","longitude":"39.286894"},{"title":"Starbucks","slug":"starbucks","latitude":"-76.619071","longitude":"39.286649"}]
How do I insert this into the geoJSON?
Figured it out:
First I created a plugin that stored the custom post data in a JSON array and stored it on the server. This also updated every time I updated, saved or deleted a post. Here is the example JSON:
data = {"placeList": [{"title":"Shake Shack","slug":"shake-shack","latitude":"-76.609844","longitude":"39.286894"},{"title":"Starbucks","slug":"starbucks","latitude":"-76.619071","longitude":"39.286649"}]}
Then in the php file, I called the .json file and in my javascript, inserted the array into the GeoJSON:
var placeJson = data;
var geojson = {
type: "FeatureCollection",
features: [],
};
for (i = 0; i < placeJson.placeList.length; i++) {
geojson.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [placeJson.placeList[i].latitude, placeJson.placeList[i].longitude]
},
"properties": {
"id": placeJson.placeList[i].slug,
"title": placeJson.placeList[i].title
}
});
}
I have this js variable which is parsing a json content inline:
var places = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"icon": "theatre"
},
"geometry": {
"type": "Point",
"coordinates": [-77.038659, 38.931567]
}
}]
};
I need this content to be inside an external json file since it is a long list to load dynamically.
Can you tell me how to call the json file (the code must be as it is and not parsed)? I tried dozens of solution here but without results :(
Thanks in advance for your help
I really don't understand my problem :
I have geojson files, I need to get the content and return a valid variable.
My test :
//this works
var obj_valid = {"type": "FeatureCollection","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },"features": [{ "type": "Feature", "properties": { "id": "14001", "nom": "val1" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 0.301, 49.371 ], xxx , [ 0.301, 49.371 ] ] ] ] } }]};
//doesn't work
var obj_fail = $.getJSON("geojson/com/14001.json");
I would like to return the same content that what is in my first var "obj_valid". I tried $.getJSON, $.ajax, $.getScript but without success, the output is different :
What is my mistake ??
Thanks in advance for your help,
$.getJSON is an ajax request and is asynchrounous. It doesn't return data , it returns a promise.
You need to consume the response data in a success or done callback
$.getJSON("geojson/com/14001.json", function(responseData){
// do something with responseData
});
// OR
$.getJSON("geojson/com/14001.json").done(function(responseData){
// do something with responseData
});
See $.getJSON docs
Shouldn't it be like this
var obj_fail = {};
$.getJSON("geojson/com/14001.json")
.done(function(data){
obj_fail = data;
});
Hope this helps!