Related
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 ?
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 ]
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);
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(""));
}
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