We Keep Coding

Why decoding the MVT using the specification protofile is different from using their python package

I'm decoding some proto buffers of Mapbox. See spec. In Python, I can do this pretty easily with:
import mapbox_vector_tile
mapbox_vector_tile.decode(buffer)
And I get the following JSON:
{
"default":{
"extent":4096,
"version":2,
"features":[
{
"geometry":{
"type":"Point",
"coordinates":[
1208,
2556
]
},
"properties":{
"original_address":"11919 Jamaica Ave, Jamaica, NY 11418, EE. UU."
},
"id":0,
"type":1
},
]
}
}
BUT, if I do the same in Javascript, with the following code:
async function decodeMessage(buffer) {
const PROTO_FILE = await protobuf.load("vector_tile.proto");
const testMessage = PROTO_FILE.lookupType("vector_tile.Tile");
const err = testMessage.verify(buffer);
if (err) {
throw err;
}
const message = testMessage.decode(buffer);
return testMessage.toObject(message);
}
Being the vector_tile.proto the file from the specification 2.1 (or the 2.0, it does not matter). I get the following result:
{
"layers": [
{
"name": "default",
"features": [
{
"tags": [
0,
0
],
"type": 1,
"geometry": [
9,
2416,
3080
]
},
],
"keys": [
"original_address"
],
"values": [
{
"stringValue": "Haags Kwartier 55, 2491 BM Den Haag, Netherlands"
}
],
"extent": 4096,
"version": 2
}
]
}
I do not understand why this difference in the format. I suppose the python package does some additional processing. Is that the case? Is there a way to get the same result on javascript?

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

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);

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]