Reading Json file in php (or javascript) with sub array - javascript

This is my json file maps.json
[{
"type": "FeatureCollection",
"name": "maps",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties":
{ "IDLo": "1", "SoHieu": "1-1", "KyHieu": "C", "TenLo": "C1-1", "TenCty": "CMC Data Center"},
"geometry": { "type": "Polygon", "coordinates": [ [ [ 106.791800519464871, 10.854928689692501 ],
[ 106.792069337729856, 10.855930098557222 ],
[ 106.792653322236532, 10.855766231881775 ],
[ 106.79231961680415, 10.854783029941672 ],
[ 106.791800519464871, 10.854928689692501 ] ] ] } },
{ "type": "Feature", "properties":
{ "IDLo": "2", "SoHieu": "1-2", "KyHieu": "C", "TenLo": "C1-2", "TenCty": "ASCENDAS" },
"geometry": { "type": "Polygon", "coordinates": [ [ [ 106.79264868743887, 10.855779887550094 ],
[ 106.792064702932166, 10.855943754285464 ],
[ 106.791786615071828, 10.854942345054598 ],
[ 106.79101723865827, 10.855151730898562 ],
[ 106.790461062937595, 10.855306494254153 ],
[ 106.789969774384346, 10.855424842648457 ],
[ 106.789478485831097, 10.855688850436046 ],
[ 106.78819928167357, 10.857819111634392 ],
[ 106.790915273109462, 10.859412245764197 ],
[ 106.791907119811313, 10.857746282442497 ],
[ 106.792111050908886, 10.857518691103408 ],
[ 106.792379869173871, 10.857291099590915 ],
[ 106.792583800271444, 10.856999782201919 ],
[ 106.792732113796944, 10.856544598212894 ],
[ 106.792741383392297, 10.856116724630859 ],
[ 106.79264868743887, 10.855779887550094 ] ] ] } }
]}]
I don't know how to read it til "TenCty": "CMC Data Center", and how can I replace "CMC Data Center" with something else and save it in maps.json file.
When users submit a form, information will save in MySqli and also save in json file? Is it possible? In javascript or PHP will ok.
This json file is map's information to show in Leaflet, so I must save as json. Any sugguestions? And thanks in advance

You need to complete a couple of steps.
First get the contents of the json file:
$contents = file_get_contents('maps.json');
Then apply json_decode() and convert to array:
$contents_decoded = json_decode($contents, true);
Now you can get "TenCty": "CMC Data Center":
echo $contents_decoded[0]['features'][0]['properties']['TenCty']; //CMC Data Center
You can replace the value:
$contents_decoded[0]['features'][0]['properties']['TenCty'] = 'something else';
Now you can encode the new array:
$contents = json_encode($contents_decoded);
echo $contents;
Output:
[{"type":"FeatureCollection","name":"maps","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"features":[{"type":"Feature","properties":{"IDLo":"1","SoHieu":"1-1","KyHieu":"C","TenLo":"C1-1","TenCty":"something else"},"geometry":{"type":"Polygon","coordinates":[[[106.79180051946487,10.854928689692501],[106.79206933772986,10.855930098557222],[106.79265332223653,10.855766231881775],[106.79231961680415,10.854783029941672],[106.79180051946487,10.854928689692501]]]}},{"type":"Feature","properties":{"IDLo":"2","SoHieu":"1-2","KyHieu":"C","TenLo":"C1-2","TenCty":"ASCENDAS"},"geometry":{"type":"Polygon","coordinates":[[[106.79264868743887,10.855779887550094],[106.79206470293217,10.855943754285464],[106.79178661507183,10.854942345054598],[106.79101723865827,10.855151730898562],[106.7904610629376,10.855306494254153],[106.78996977438435,10.855424842648457],[106.7894784858311,10.855688850436046],[106.78819928167357,10.857819111634392],[106.79091527310946,10.859412245764197],[106.79190711981131,10.857746282442497],[106.79211105090889,10.857518691103408],[106.79237986917387,10.857291099590915],[106.79258380027144,10.85699978220192],[106.79273211379694,10.856544598212894],[106.7927413833923,10.856116724630859],[106.79264868743887,10.855779887550094]]]}}]}]
The final step is you can put the new contents back to the maps.json file:
file_put_contents('maps.json', $contents);

Related

Get Geojson list of proprieties with javascript

Lets say I have a GeoJson file named 'cities' ("cities.geojson")
Here is an sample of this file :
{"type": "FeatureCollection","name": "cities", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },"features": [{"type": "Feature", "properties": { "Id" :"1" , "Name": "OUJ-DK1", "country : morocco", "continent" : "Africa"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -1.920918, 34.713995, 0.0 ], ... , [ -1.920918, 34.713995, 0.0 ] ] ] ] } }
As you see, it has 4 feature proprieties :
Id", "Name", "country", "continent"
I tried uploading the GeoJson file using OpenLayers :
my_goejson = new ol.layer.Vector({
title: 'Geojson file',
source: new ol.source.Vector({
url: "C:/cities.geojson",
format: new ol.format.GeoJSON()
}),
style: style,});
My aim is to get the list of the proprieties of this file. I mean my goal is to obtain this list below :
["Id", "Name", "country", "continent"]
I already tried this line :
console.log(Object.keys(my_goejson.source.properties));
But it s not working
Any ideas ?

Leaflet AJAX - Call properties.description

I currently have a geojson file with various storm tracking polygons. Below is an example of the storm track code in geojson:
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-99.77300262,
44.60599899
],
[
-98.35206604,
43.85266495
],
[
-98.36608887,
43.83942413
],
[
-98.38034821,
43.82631302
],
[
-98.3948288,
43.81333542
],
[
-98.40955353,
43.80049515
],
[
-98.42449188,
43.78779221
],
[
-98.43965912,
43.77523422
],
[
-98.45504761,
43.76281357
],
[
-98.47065735,
43.75054169
],
[
-98.48647308,
43.73841858
],
[
-98.50251007,
43.72644043
],
[
-98.51876068,
43.71461868
],
[
-98.53520966,
43.70294571
],
[
-98.55186462,
43.69142914
],
[
-98.56872559,
43.68006897
],
[
-98.58578491,
43.66886902
],
[
-98.60303497,
43.65782928
],
[
-98.6204834,
43.64694977
],
[
-98.63811493,
43.6362381
],
[
-98.65594482,
43.62569046
],
[
-98.6739502,
43.61531067
],
[
-98.69213867,
43.60509872
],
[
-98.71050262,
43.59506226
],
[
-98.72904205,
43.58519745
],
[
-98.74775696,
43.5755043
],
[
-98.76663208,
43.56599045
],
[
-98.78568268,
43.55664825
],
[
-98.80488586,
43.54749298
],
[
-98.82424927,
43.538517
],
[
-98.84377289,
43.52971649
],
[
-98.8634491,
43.52110672
],
[
-98.88327026,
43.51268005
],
[
-98.90324402,
43.50443649
],
[
-98.9233551,
43.49638367
],
[
-98.94360352,
43.48851776
],
[
-98.96398926,
43.48084641
],
[
-98.98451233,
43.47336197
],
[
-99.00514984,
43.4660759
],
[
-99.02592468,
43.45897675
],
[
-99.04682159,
43.45207977
],
[
-99.06348419,
43.44674301
],
[
-99.77300262,
44.60599899
]
]
]
},
"properties": {
"name": "Storm: C8, Valid: 22Jul18 09:30Z",
"styleUrl": "#strmCone",
"styleHash": "-13cdefe0",
"styleMapHash": {
"normal": "#strmCone_n",
"highlight": "#strmCone_h"
},
"description": "\n \n <html>\n <body>\n <table width=\"250px\">\n <tr>\n <td colspan=\"2\">\n <h3><b>C8</b> Storm Report</h3>\n <p>\n <b>Issue Time:</b> 22Jul18 09:30Z UTC<br>\n <b>Scan Time:</b> 22Jul18 09:24Z UTC<br>\n <b>Source:</b> Auto Plot Mode.<br>\n <b>Storm Type:</b> Hail<br>\n <b>Echo Top Alt:</b> 50000ft<br>\n </p>\n <p>\n Hail at 44.61N, 99.77W Nexrad Site: ABR ID: C8 Scan Time: 09:24Z Echo Top: 50K feet Direction: 141 degrees Velocity: 19 knots\n </p>\n <hr>\n </td>\n </tr>\n </table>\n </body>\n </html>\n \n ",
"stroke": "#ffff00",
"stroke-opacity": 0.4980392156862745,
"stroke-width": 4,
"fill": "#00ff00",
"fill-opacity": 0.4980392156862745
},
"id": "StrmCone3921090"
},
To call this file in my leaflet map, I'm using this code:
function popUp(f,l){
var out = [];
if (f.properties){
for(key in f.properties){
out.push(key+": "+f.properties[key]);
}
l.bindPopup(out.join("<br />"));
}
}
var storm_tracks = new L.GeoJSON.AJAX("http://tropicalwx.us:81/TropicalWX/modules/weather_map/includes/kml/radar/storm_track.geojson",{onEachFeature:popUp});
storm_tracks.addTo(map);
This works fine, but it shows all of the property instead of just the description part of the property (see image below). How can I get this code to just show the description part of properties (i.e. remove the stroke/stroke-opacity, stroke-width, etc.)
Do you mean you only want the content of the 'Description' property? Firsts step might be this, then optimise.
function popUp(f,l){
var out = [];
if (f.properties){
for(key in f.properties){
if (key == 'description') {out.push(key+": "+f.properties[key]);}
}
l.bindPopup(out.join("<br />"));
}
}
var storm_tracks = new L.GeoJSON.AJAX("http://tropicalwx.us:81/TropicalWX/modules/weather_map/includes/kml/radar/storm_track.geojson",{onEachFeature:popUp});
storm_tracks.addTo(map);
Peebee's answer worked as needed. Conversely, I was able to use this code as well (to remove the "description" label):
function popUp(f,l){
var out = [];
out.push(f.properties["description"]);
l.bindPopup(out.join(""));
}

how to change color of exactly one feature (multipolygon) at a time - dynamic styling google API

I am creating a map using Google API. I have defined the multi-polygon layer of buildings as json file. I want to be able to click at polygon and have its color changed to another. After clicking at the second building, only second building should have changed color and the previously clicked ones should go back to their original fill. In other words, I want to be able to select only one building by click and have it displayed in different color then others.
So far I tried with dynamic styling from google map API examples here.
However what I got so far is only being able to click and 'unclick' buildings color. What should I do to get described results?
var buildings = {
"type": "FeatureCollection",
"name": "buildings_layer",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name_1": "HIQ", "addr_nr": "3", "addr_stree": "Gustave-Naville-Weg", "descriptio": "Pavillon II für Architektur" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.508053374921182, 47.409945493110904, 524.154999999998836 ], [ 8.507733029701146, 47.409506514443301, 523.865000000005239 ], [ 8.507593213859357, 47.409553556049616, 523.740999999994528 ], [ 8.507704801729497, 47.409706338427313, 523.919999999998254 ], [ 8.507724154119826, 47.409735716985452, 523.929999999993015 ], [ 8.50791195204587, 47.40999305367589, 524.012000000002445 ], [ 8.508053374921182, 47.409945493110904, 524.154999999998836 ] ] ] ] } },
{ "type": "Feature", "properties": { "name_1": "HPM", "addr_nr": "3", "addr_stree": "Otto-Stern-Weg", "descriptio": "Zellbiologie \/ Biochemie" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.510424206560639, 47.409831344813142, 528.319000000003143 ], [ 8.510447505495517, 47.409823662930137, 528.347999999998137 ], [ 8.510480687529748, 47.409869229727256, 527.111000000004424 ], [ 8.51058712998627, 47.40983370187864, 527.600000000005821 ], [ 8.510554561494247, 47.409787679671524, 528.210999999995693 ], [ 8.510577538817596, 47.409779820844342, 528.043999999994412 ], [ 8.510591621745974, 47.409798795616886, 528.001999999993131 ], [ 8.510693918897799, 47.409764700333952, 526.967999999993481 ], [ 8.510508470488023, 47.409510179668921, 526.216000000000349 ], [ 8.510519713353803, 47.409506549373837, 526.089999999996508 ], [ 8.510483539536088, 47.409456503833148, 528.327000000004773 ], [ 8.510412296671355, 47.409479000563181, 528.046000000002095 ], [ 8.510176066911402, 47.409155053807922, 528.569000000003143 ], [ 8.510187838375566, 47.409151355679001, 528.611000000004424 ], [ 8.510160709934256, 47.409113567319714, 528.615000000005239 ], [ 8.510067967151468, 47.409143705734991, 528.57499999999709 ], [ 8.510060896837672, 47.40913409265417, 528.596999999994296 ], [ 8.509901329328159, 47.409187148927202, 528.582999999998719 ], [ 8.509935290502499, 47.409235263240461, 528.506999999997788 ], [ 8.509941580155729, 47.409233073132619, 528.509000000005472 ], [ 8.510179229753403, 47.409557973376906, 528.032000000006519 ], [ 8.510105684216887, 47.409582743734717, 528.26600000000326 ], [ 8.510142205150705, 47.409632273456758, 528.107999999992899 ], [ 8.510152339753995, 47.409628878346375, 527.959000000002561 ], [ 8.510341013793047, 47.409882067599845, 526.850999999995111 ], [ 8.51043776296215, 47.409850495390771, 527.961999999999534 ], [ 8.510424206560639, 47.409831344813142, 528.319000000003143 ] ] ] ] } },
]
}
My code so far:
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
map.data.addGeoJson(buildings);
map.data.setStyle(function(feature){
if (feature.getProperty('isColorful'))
return({
fillColor: 'red',
strokeColor: 'red',
strokeWeight:2
});
else
return ({
fillColor: 'grey',
strokeWeight:2
});
});
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});
When you click on a building, clear the isColorful properties of all the other buildings (or keep a reference to the one that is colored and set it back).
clear all the buildings:
map.data.addListener('click', function(event) {
map.data.forEach(function(feature) {
feature.setProperty('isColorful',false);
});
event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});
proof of concept fiddle
or
keep a reference to the "active" building:
var coloredBuilding = null;
map.data.addListener('click', function(event) {
if (coloredBuilding != null) {
coloredBuilding.setProperty('isColorful', false);
}
event.feature.setProperty('isColorful', true);
coloredBuilding = event.feature;
});
proof of concept fiddle

Google maps API v3 : containsLocation() vs. geojson data

I have on my web application a city geographically divided into neighborhoods. I used geojson file described as an array of the following :
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Polygon",
"color" : "red",
"coordinates": [
[
[
2.38317,
48.867111
],
[
2.363713,
48.867554
],
[
2.364399,
48.867126
],
[
2.39839,
48.85133
],
[
2.39432,
48.856541
],
[
2.39223,
48.857571
],
[
2.38965,
48.85844
],
[
2.38746,
48.86282
],
[
2.38377,
48.86607
],
[
2.38317,
48.867111
]
]
]
},
"properties": {
"id" : "11",
"name": "11ème : arr",
"description": "this is 11",
"arr": "11e"
}
}, ...
My aim is to look where the user's address is located withing my polygons. I get the address from HTML5 get my locationor by entering own address in a autocomplete search bar it returns => google.maps.LatLng object.
How is it possibile to explore the drown polygons objects knowing that containsLocation needs LatLng formatted polygons
Here's the example which uses google.maps.Polygon object
I found the answer, I've converted all features with this script
https://github.com/JasonSanford/geojson-google-maps/blob/master/GeoJSON.js

Reading JSON in Javascript

I am trying to parse some json that my server replies me.
I am getting this answer from the server:
{
"ROWCOUNT": 1,
"COLUMNS": [
"REGISTRATION_DT",
"USERNAME",
"PASSWORD",
"FNAME",
"LNAME",
"EMAIL",
"MOBILE",
"FACEBOOK_ID"
],
"DATA": {
"REGISTRATION_DT": [
"March, 17 2012 16:18:00"
],
"USERNAME": [
"user"
],
"PASSWORD": [
pass
],
"FNAME": [
"name"
],
"LNAME": [
"lname"
],
"EMAIL": [
"somemail"
],
"MOBILE": [
mobile
],
"FACEBOOK_ID": [
"fbid"
]
}
}
I am trying to extract the data with this way:
var xml2 = this.responseData;
var xml3 = JSON.parse(xml2);
Ti.API.log(xml3.DATA[0].FNAME);
What I am doing wrong here?
You're reading your JSON wrong. DATA is an object of arrays and not vica versa.
Ti.API.log( xml3.DATA.FNAME[0] );
Ti.API.log(xml3.DATA.FNAME[0]);
Two fields come without quotes:
"PASSWORD": [
pass
]
And
"MOBILE": [
mobile
],
xml3.DATA is an object, not an array.
You need to write
xml3.DATA.FNAME[0]

Categories