I am using Jboss fuse 6.3 and apache camel 2.17.I wanted to split a huge json message in to multiple messages in camel spring dsl.
Sample message structure is below in this message i have 9 arrays of countries i need to split in to array of two as 5 messages the last message contains only one array.The order of messages doesn't matter.
Input message:
[{
"Cities": [{
"name": "Paris",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Marseille",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Lyon",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Toulouse",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Nice",
"lat": "89.75",
"lng": "4.77"
}],
"country": "FR"
},
{
"Cities": [{
"name": "Berlin",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Hamburg",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Munich",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Cologne",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Frankfurt",
"lat": "89.75",
"lng": "4.77"
}],
"country": "DE"
}, {
"Cities": [{
"name": "mumbai",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Bangalore",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Delhi",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Chattisgarh",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Hyderabad",
"lat": "89.75",
"lng": "4.77"
}],
"country": "IN"
}, {
"Cities": [{
"name": "Aberdeen",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Armagh",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Bangor",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Bath",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Belfast",
"lat": "89.75",
"lng": "4.77"
}],
"country": "UK"
}, {
"Cities": [{
"name": "Budapest",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Debrecen",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Szeged",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Miskolc",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Pecs",
"lat": "89.75",
"lng": "4.77"
}],
"country": "HUNGARY"
}, {
"Cities": [{
"name": "Alingsas",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Arboga",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Arvika",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Askersund",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Avesta",
"lat": "89.75",
"lng": "4.77"
}],
"country": "SWEDEN"
}, {
"Cities": [{
"name": "Amsterdam",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Den Helder",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Edam",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Haarlem",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Purmerend",
"lat": "89.75",
"lng": "4.77"
}],
"country": "NETHERLANDS"
}, {
"Cities": [{
"name": "Abrantes",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Agualva-Cacem",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Agueda",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Albufeira",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Alcacer do Sal",
"lat": "89.75",
"lng": "4.77"
}],
"country": "PORTUGAL"
}, {
"Cities": [{
"name": "Barcelona",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "madrid",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Saragossa",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Salamanca",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Granada",
"lat": "89.75",
"lng": "4.77"
}],
"country": "SPAIN"
}
]
Expected output:
First split:
[{
"Cities": [{
"name": "Paris",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Marseille",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Lyon",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Toulouse",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Nice",
"lat": "89.75",
"lng": "4.77"
}],
"country": "FR"
},
{
"Cities": [{
"name": "Berlin",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Hamburg",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Munich",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Cologne",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Frankfurt",
"lat": "89.75",
"lng": "4.77"
}],
"country": "DE"
}
]
Second split:
[{
"Cities": [{
"name": "mumbai",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Bangalore",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Delhi",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Chattisgarh",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Hyderabad",
"lat": "89.75",
"lng": "4.77"
}],
"country": "IN"
},{
"Cities": [{
"name": "Aberdeen",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "Armagh",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Bangor",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Bath",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Belfast",
"lat": "89.75",
"lng": "4.77"
}],
"country": "UK"
}
]
.
.
.
Fifth split:
[{
"Cities": [{
"name": "Barcelona",
"lat": "45.75",
"lng": "4.583333"
}, {
"name": "madrid",
"lat": "45.97",
"lng": "4.54"
}, {
"name": "Saragossa",
"lat": "24.75",
"lng": "4.75"
}, {
"name": "Salamanca",
"lat": "37.75",
"lng": "4.755"
}, {
"name": "Granada",
"lat": "89.75",
"lng": "4.77"
}],
"country": "SPAIN"
}
]
I tried below referring Apache Camel with Json Array split from the post of Ricardo.But iam not sure how to configure aggregate(AggregationStrategies.groupedExchange()) in spring dsl.
Camel route:
<split streaming="true">
<jsonpath>$</jsonpath>
<aggregate completionTimeout="1000" completionSize="2" groupExchanges="true">
</aggregate>
<log message="${body}"></log>
</split>
Here's a simple example of how you could split your JSON array using Spring DSL:
<split>
<jsonpath>$</jsonpath>
<!-- Add rest of the logic here -->
</split>
The Spring DSL example from the mentioned question is this one:
<camel:route>
<camel:from uri="direct:start" />
<camel:split streaming="true">
<camel:jsonpath>$</camel:jsonpath>
<camel:aggregate completionSize="5"
completionTimeout="1000" groupExchanges="true">
<camel:correlationExpression>
<camel:constant>true</camel:constant>
</camel:correlationExpression>
<camel:log message="${body}"></camel:log>
<camel:to uri="mock:result"></camel:to>
</camel:aggregate>
</camel:split>
</camel:route>
There's a full implementation example here.
The groupExchange property just return a default aggregation strategy: GroupedExchangeAggregationStrategy.
You could implement your own and pass it as a bean parameter to your DSL like this:
<camel:route>
<camel:from uri="direct:start" />
<camel:split streaming="true">
<camel:jsonpath>$</camel:jsonpath>
<camel:aggregate strategyRef="stringConcatStrategy" completionSize="5"
completionTimeout="1000" >
<camel:correlationExpression>
<camel:constant>true</camel:constant>
</camel:correlationExpression>
<camel:log message="${body}"></camel:log>
<camel:to uri="mock:result"></camel:to>
</camel:aggregate>
</camel:split>
</camel:route>
Cheers!
Related
I have tried many alternatives and the better result was with this statement:
json_normalize(a['solution'][0]['tour'])
I can see just one block of tours at a time. vehicle_id 0 information and I need them all together. Thank you.
The JSON is:
{
"total_clusters": 6,
"solution": [
{
"vehicles_id": "0",
"vehicles_location": {
"lat": "",
"lng": ""
},
"tour": [
{
"shipping_id": "4a4b0750-63a7-11ea-8955-43fcb2cd860a",
"type": "dropoff",
"location_id": "797",
"coordinates": {
"lat": "-34.545736",
"lng": "-58.488340"
},
"cluster": 0
},
{
"shipping_id": "75e5a2c0-6314-11ea-b657-ddd473c629a3",
"type": "dropoff",
"location_id": "114",
"coordinates": {
"lat": "-34.568707",
"lng": "-58.452963"
},
"cluster": 0
}
]
},
{
"vehicles_id": "1",
"vehicles_location": {
"lat": "",
"lng": ""
},
"tour": [
{
"shipping_id": "c83ac7c0-51c4-11ea-9aef-973de7785221",
"type": "pickup",
"location_id": "687",
"coordinates": {
"lat": "-34.592824",
"lng": "-58.375457"
},
"cluster": 1
},
{
"shipping_id": "b5a295c0-51c4-11ea-b36d-651ee769ca89",
"type": "pickup",
"location_id": "687",
"coordinates": {
"lat": "-34.592824",
"lng": "-58.375457"
},
"cluster": 1
}
]
}
]
}
Desired Output
You need to pass the record_path parameter to json_normalize.
From the docs:
record_path : str or list of str, default None
Path in each object to list of records. If not passed, data will be assumed to be an array of records.
import pandas as pd
import json
raw_json_data = """{contents_of_your_json_here}"""
json_data = json.loads(raw_json_data)
df = pd.json_normalize(json_data, ["solution", "tour"])
Result:
I am fetching my data from Google Directions and because the way the JSON response was set up, like this:
Object {
"geocoded_waypoints": Array [
Object {
"geocoder_status": "OK",
"place_id": "ChIJ2YDFT9zweUgRgt5Tws6n3hs",
"types": Array [
"premise",
],
},
Object {
"geocoder_status": "OK",
"place_id": "ChIJW2PCihXxeUgRRWgA9kOzpjY",
"types": Array [
"establishment",
"food",
"lodging",
"point_of_interest",
"restaurant",
],
},
],
"routes": Array [
Object {
"bounds": Object {
"northeast": Object {
"lat": 52.9242042,
"lng": -1.4751044,
},
"southwest": Object {
"lat": 52.900484,
"lng": -1.4801554,
},
},
"copyrights": "Map data ©2018 Google",
"legs": Array [
Object {
"distance": Object {
"text": "3.1 km",
"value": 3137,
},
"duration": Object {
"text": "38 mins",
"value": 2309,
},
"end_address": "Full St, Derby DE1 3AF, UK",
"end_location": Object {
"lat": 52.9242042,
"lng": -1.4756769,
},
"start_address": "50 Chatham St, Derby DE23 8TH, UK",
"start_location": Object {
"lat": 52.900484,
"lng": -1.4801443,
},
"steps": Array [
Object {
"distance": Object {
"text": "3.1 km",
"value": 3137,
},
"duration": Object {
"text": "38 mins",
"value": 2309,
},
"end_location": Object {
"lat": 52.9242042,
"lng": -1.4756769,
},
"html_instructions": "Walk to Full St, Derby DE1 3AF, UK",
"polyline": Object {
"points": "_c{aIza`Hm#BEyHC_AyAk#iCw#KCGAGAMBSFE#iBz#C#E#QDe#TMFUHWJm#TIm#k#_Em#yDuE`BIDw#SEPCJGPINILEDGFWTcBbAwB~#WJ]PIDOHWNMJ?##??#?#?#A??#?#?#A??#?#A??#A?A??#AAA?A??AA??A?AA??AI#EBGBOHo#XGBIDKBGBG#G#G#OBu#JG#KBID?A?AA??AA??AA?A?A??#A??#A??#?#?#]UGG}AiAcAu#g#a#kAw#c#Wu#_#c#U}#e#y#g#WQKGGEEAWGc#Iq#EW?k#?M#g#FoBPq#J[HSDIBGB]Ja#RcAdAYX{AdAq#Ry#Hu#BU?yA#g#AYAAIAG?CAECGACCGEEEECCEAICK?C#A#A?C#C#EDCBABCDABABCDGYgBkBwBsBw#y#GCGAYe#cAqACCAECE?C?G#Kc#NC#gBj#MDKDaBdAq#^GHCFCFCNCFEHEFwCZi##MAMCIIMOSa#Yq#Oc#Qk#CEKc#EQWuAG?ICCIAKAKKFIDIFE#OPONMLa#h#?#",
},
"start_location": Object {
"lat": 52.900484,
"lng": -1.4801443,
},
"steps": Array [
Object {
"distance": Object {
"text": "26 m",
"value": 26,
},
"duration": Object {
"text": "1 min",
"value": 17,
},
"end_location": Object {
"lat": 52.9007148,
"lng": -1.4801554,
},
"html_instructions": "Head <b>north</b> on <b>Chatham St</b> toward <b>Randolph Rd</b>",
"polyline": Object {
"points": "_c{aIza`Hm#B",
},
"start_location": Object {
"lat": 52.900484,
"lng": -1.4801443,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.1 km",
"value": 126,
},
"duration": Object {
"text": "1 min",
"value": 88,
},
"end_location": Object {
"lat": 52.9007561,
"lng": -1.4782714,
},
"html_instructions": "Turn <b>right</b> onto <b>Randolph Rd</b>",
"maneuver": "turn-right",
"polyline": Object {
"points": "md{aI~a`HEyHC_A",
},
"start_location": Object {
"lat": 52.9007148,
"lng": -1.4801554,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.3 km",
"value": 332,
},
"duration": Object {
"text": "4 mins",
"value": 223,
},
"end_location": Object {
"lat": 52.90362829999999,
"lng": -1.4785171,
},
"html_instructions": "Turn <b>left</b> onto <b>St Thomas Rd</b>",
"maneuver": "turn-left",
"polyline": Object {
"points": "wd{aIdv_HyAk#iCw#KCGAGAMBSFE#iBz#C#E#QDe#TMFUHWJm#T",
},
"start_location": Object {
"lat": 52.9007561,
"lng": -1.4782714,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.2 km",
"value": 153,
},
"duration": Object {
"text": "2 mins",
"value": 104,
},
"end_location": Object {
"lat": 52.90412999999999,
"lng": -1.4763973,
},
"html_instructions": "Turn <b>right</b> to stay on <b>St Thomas Rd</b>",
"maneuver": "turn-right",
"polyline": Object {
"points": "uv{aIvw_HIm#k#_Em#yD",
},
"start_location": Object {
"lat": 52.90362829999999,
"lng": -1.4785171,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.1 km",
"value": 129,
},
"duration": Object {
"text": "2 mins",
"value": 103,
},
"end_location": Object {
"lat": 52.9052488,
"lng": -1.4769249,
},
"html_instructions": "Turn <b>left</b> onto <b>Portland St</b>",
"maneuver": "turn-left",
"polyline": Object {
"points": "yy{aInj_HuE`BID",
},
"start_location": Object {
"lat": 52.90412999999999,
"lng": -1.4763973,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "32 m",
"value": 32,
},
"duration": Object {
"text": "1 min",
"value": 24,
},
"end_location": Object {
"lat": 52.9055291,
"lng": -1.4768217,
},
"html_instructions": "Slight <b>right</b> at <b>Goodale St</b>",
"maneuver": "turn-slight-right",
"polyline": Object {
"points": "y`|aIvm_Hw#S",
},
"start_location": Object {
"lat": 52.9052488,
"lng": -1.4769249,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.4 km",
"value": 418,
},
"duration": Object {
"text": "5 mins",
"value": 325,
},
"end_location": Object {
"lat": 52.9089381,
"lng": -1.4789711,
},
"html_instructions": "Turn <b>left</b> onto <b>Pear Tree Rd</b><div style=\"font-size:0.9em\">Go through 1 roundabout</div>",
"maneuver": "turn-left",
"polyline": Object {
"points": "qb|aIbm_HEPCJGPINILEDGFWTcBbAwB~#WJ]PIDOHWNMJ?##??#?#?#A??#?#?#A??#?#A??#A?A??#AAA?A??AA??A?AA??AI#EBGBOHo#XGBIDKBGBG#G#G#OBu#JG#KBID",
},
"start_location": Object {
"lat": 52.9055291,
"lng": -1.4768217,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "1.0 km",
"value": 984,
},
"duration": Object {
"text": "13 mins",
"value": 760,
},
"end_location": Object {
"lat": 52.9173185,
"lng": -1.4781371,
},
"html_instructions": "At the roundabout, take the <b>1st</b> exit onto <b>Normanton Rd</b>",
"maneuver": "roundabout-left",
"polyline": Object {
"points": "{w|aIpz_H?A?AA??AA??AA?A?A??#A??#A??#?#?#]UGG}AiAcAu#g#a#kAw#c#Wu#_#c#U}#e#y#g#WQKGGEEAWGc#Iq#EW?k#?M#g#FoBPq#J[HSDIBGB]Ja#RcAdAYX{AdAq#Ry#Hu#BU?yA#g#AYA",
},
"start_location": Object {
"lat": 52.9089381,
"lng": -1.4789711,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.3 km",
"value": 272,
},
"duration": Object {
"text": "3 mins",
"value": 207,
},
"end_location": Object {
"lat": 52.9193378,
"lng": -1.4764257,
},
"html_instructions": "At the roundabout, take the <b>3rd</b> exit onto <b>Babington Ln</b>",
"maneuver": "roundabout-left",
"polyline": Object {
"points": "gl~aIju_HAIAG?CAECGACCGEEEECCEAICK?C#A#A?C#C#EDCBABCDABABCDGYgBkBwBsBw#y#GCGA",
},
"start_location": Object {
"lat": 52.9173185,
"lng": -1.4781371,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "82 m",
"value": 82,
},
"duration": Object {
"text": "1 min",
"value": 54,
},
"end_location": Object {
"lat": 52.91985400000001,
"lng": -1.4756332,
},
"html_instructions": "Slight <b>right</b> to stay on <b>Babington Ln</b>",
"maneuver": "turn-slight-right",
"polyline": Object {
"points": "{x~aItj_HYe#cAqACCAECE?C?G#K",
},
"start_location": Object {
"lat": 52.9193378,
"lng": -1.4764257,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.2 km",
"value": 217,
},
"duration": Object {
"text": "2 mins",
"value": 144,
},
"end_location": Object {
"lat": 52.9216227,
"lng": -1.4768472,
},
"html_instructions": "Turn <b>left</b> onto <b>St Peters St</b>",
"maneuver": "turn-left",
"polyline": Object {
"points": "a|~aIte_Hc#NC#gBj#MDKDaBdAq#^GHCFCFCNCFEHEF",
},
"start_location": Object {
"lat": 52.91985400000001,
"lng": -1.4756332,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.3 km",
"value": 266,
},
"duration": Object {
"text": "3 mins",
"value": 186,
},
"end_location": Object {
"lat": 52.9234756,
"lng": -1.4752851,
},
"html_instructions": "Slight <b>right</b> onto <b>Corn Market</b>",
"maneuver": "turn-slight-right",
"polyline": Object {
"points": "cg_bIhm_HwCZi##MAMCIIMOSa#Yq#Oc#Qk#CEKc#EQWuA",
},
"start_location": Object {
"lat": 52.9216227,
"lng": -1.4768472,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.1 km",
"value": 100,
},
"duration": Object {
"text": "1 min",
"value": 74,
},
"end_location": Object {
"lat": 52.9242042,
"lng": -1.4756769,
},
"html_instructions": "At the roundabout, take the <b>2nd</b> exit onto <b>Full St</b><div style=\"font-size:0.9em\">Destination will be on the right</div>",
"maneuver": "roundabout-left",
"polyline": Object {
"points": "wr_bIpc_HG?ICCIAKAKKFIDIFE#OPONMLa#h#?#",
},
"start_location": Object {
"lat": 52.9234756,
"lng": -1.4752851,
},
"travel_mode": "WALKING",
},
],
"travel_mode": "WALKING",
},
],
"traffic_speed_entry": Array [],
"via_waypoint": Array [],
},
],
"overview_polyline": Object {
"points": "_c{aIza`Hm#BEyHC_AyAk#uC{#OCa#JoB|#IBw#ZiBr#u#mFm#yDuE`BIDw#SI\\Q`#OR_#\\cBbAwB~#u#\\YNe#\\#??BA#?DCBE#EEAAg#RmAf#yB^IBAAAACACBA#?#e#[uGyE{DsBeBgA]IuAOcA?u#HoBPq#Jo#NQF]Ja#R}A~A{AdAq#RoBLoB#aACCQGUSWOEO#KDORCFCDGY_F_F_A}#GAYe#gAuAEW#Kc#NkBl#YJsCdBKPGVIPEFwCZw#?WMa#q#i#uAg#gBWuAG?ICCICWULOH_#`#o#x#",
},
"summary": "Normanton Rd",
"warnings": Array [
"Walking directions are in beta. Use caution – This route may be missing sidewalks or pedestrian paths.",
],
"waypoint_order": Array [],
},
],
"status": "OK",
}
I am trying to get data from transit details which has the latitudes and longitude values which i am trying to acquire to be able to view this on in the map using MapView in React native and i believe i am successful of on doing this as this is my attempt on fetching the data setting the state:
fetch('https://maps.googleapis.com/maps/api/directions/json?origin=' + latitude + ',' + longitude + '&destination=' + goingto + '&mode=transit&transit_mode=bus&key=' + apiDirectionskey)
.then((resdirections) => resdirections.json())
.then((responseJson4) => {
//const departureloc1 = responseJson4.routes[0].legs[0].steps[1];
//console.log(departureloc1)
const departureloc = responseJson4.routes[0].legs[0].steps[1].transit_details.departure_stop.location;
console.log(departureloc);
const stopmarkers = Object.keys(departureloc).map(value => {
// noinspection JSAnnotator
if (typeof departureloc['lat'] === undefined && typeof departureloc['lng'] === undefined) {
console.log('null');
} else {
return {
latlng: {
latitude: departureloc['lat'],
longitude: departureloc['lng']
}
}
}
this.setState({ departureloc: stopmarkers });
});
})
}
printing the fetch call above will result in this JSON result
Object {
"lat": 52.90736,
"lng": -1.453532,
}
The next section is my render function below which has a mapview in my attempt to set the markers.
<View style={styles.container}>
<Mainlogo/>
<TextInput style={styles.boxInput} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Going To?"
underlineColorAndroid='transparent'
onChangeText={(dest) => this.setState({goingto : dest})}
/>
<TouchableOpacity style={styles.button} onPress={this.fetchDirections.bind(this)}>
<Text style={styles.textButton}> Go {this.props.type}</Text>
</TouchableOpacity>
{this.state.departureloc.map(marker => (
<MapView.Marker
coordinate={marker.latlng}
image={require('../img/busstop1.png')}
/>
))}
</MapView> : <Text style={{fontWeight: 'bold', color: '#546e7a', textAlign: 'center'}}>Please wait.. loading</Text>}
</View>
I am unsuccessful at this stage and instead i cannot get around with this error.
I am very new to this and anyone that can guide and give me pointers on the correct way would be greatly appreciated thanks
At render time, this.state.departureloc is unset, likely because render() gets called before your API calls return. Try setting this.state.departureloc = [] in your constructor(props) function.
Also it's not good to iterate within your JSX rendering. Consider extracting that rendering to before your return statement and storing it in a variable.
Looking at this example from https://codepen.io/anon/pen/WzdOqz
Is there a way so that I can control the maximum length of the red line (path)?
For example I would only like to keep 20 points of the red line shown everytime (meaning while the marker moves, the red line shrinks starting from the beginning)
var map;
function initialize() {
var markLAT = coords[50].lat;
var markLNG = coords[50].lng;
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(markLAT, markLNG),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
autoRefresh();
}
google.maps.event.addDomListener(window, 'load', initialize);
var icon = new google.maps.MarkerImage("https://maps.google.com/mapfiles/ms/micons/blue.png");
function moveMarker(map, marker, lat, lon) {
marker.setPosition(new google.maps.LatLng(lat, lon));
}
function autoRefresh() {
var i, route, marker;
route = new google.maps.Polyline({
path: [],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false,
map: map
});
marker = new google.maps.Marker({
map: map,
icon: icon
});
for (i = 0; i < coords.length; i++) {
setTimeout(function(coords) {
route.getPath().push(new google.maps.LatLng(coords.lat, coords.lng));
moveMarker(map, marker, coords.lat, coords.lng);
}, 20 * i, coords[i]);
}
}
var coords = [{
"lat": 8.893260000000001,
"lng": 76.61427
},
{
"lat": 8.894430000000002,
"lng": 76.61418
},
{
"lat": 8.89484,
"lng": 76.61416000000001
},
{
"lat": 8.894860000000001,
"lng": 76.61383000000001
},
{
"lat": 8.89488,
"lng": 76.61375000000001
},
{
"lat": 8.89563,
"lng": 76.61370000000001
},
{
"lat": 8.896270000000001,
"lng": 76.61366000000001
},
{
"lat": 8.896700000000001,
"lng": 76.61364
},
{
"lat": 8.89671,
"lng": 76.61351
},
{
"lat": 8.896740000000001,
"lng": 76.61312000000001
},
{
"lat": 8.89675,
"lng": 76.61307000000001
},
{
"lat": 8.89677,
"lng": 76.61305
},
{
"lat": 8.89729,
"lng": 76.61303000000001
},
{
"lat": 8.89755,
"lng": 76.61311
},
{
"lat": 8.898050000000001,
"lng": 76.61311
},
{
"lat": 8.898280000000002,
"lng": 76.61321000000001
},
{
"lat": 8.899180000000001,
"lng": 76.61289000000001
},
{
"lat": 8.900350000000001,
"lng": 76.61396
},
{
"lat": 8.900860000000002,
"lng": 76.61467
},
{
"lat": 8.90127,
"lng": 76.61581000000001
},
{
"lat": 8.901710000000001,
"lng": 76.61796000000001
},
{
"lat": 8.902190000000001,
"lng": 76.61932
},
{
"lat": 8.902370000000001,
"lng": 76.62017
},
{
"lat": 8.902370000000001,
"lng": 76.62088
},
{
"lat": 8.902460000000001,
"lng": 76.6212
},
{
"lat": 8.90313,
"lng": 76.62217000000001
},
{
"lat": 8.903450000000001,
"lng": 76.62240000000001
},
{
"lat": 8.903970000000001,
"lng": 76.62272
},
{
"lat": 8.90409,
"lng": 76.62280000000001
},
{
"lat": 8.904,
"lng": 76.62288000000001
},
{
"lat": 8.90342,
"lng": 76.6233
},
{
"lat": 8.902560000000001,
"lng": 76.62386000000001
},
{
"lat": 8.90033,
"lng": 76.62522000000001
},
{
"lat": 8.89601,
"lng": 76.62777000000001
},
{
"lat": 8.88676,
"lng": 76.63327000000001
},
{
"lat": 8.884450000000001,
"lng": 76.63461000000001
},
{
"lat": 8.882610000000001,
"lng": 76.63582000000001
},
{
"lat": 8.88089,
"lng": 76.63711
},
{
"lat": 8.87918,
"lng": 76.63862
},
{
"lat": 8.87785,
"lng": 76.63936000000001
},
{
"lat": 8.875760000000001,
"lng": 76.63996
},
{
"lat": 8.87273,
"lng": 76.64141000000001
},
{
"lat": 8.87067,
"lng": 76.64251
},
{
"lat": 8.869280000000002,
"lng": 76.64336
},
{
"lat": 8.86805,
"lng": 76.6447
},
{
"lat": 8.86782,
"lng": 76.6451
},
{
"lat": 8.86677,
"lng": 76.64822000000001
},
{
"lat": 8.86645,
"lng": 76.64933
},
{
"lat": 8.866200000000001,
"lng": 76.65092
},
{
"lat": 8.86546,
"lng": 76.6533
},
{
"lat": 8.86508,
"lng": 76.65451
},
{
"lat": 8.86495,
"lng": 76.65667
},
{
"lat": 8.864880000000001,
"lng": 76.65962
},
{
"lat": 8.86519,
"lng": 76.66080000000001
},
{
"lat": 8.866240000000001,
"lng": 76.66343
},
{
"lat": 8.86646,
"lng": 76.66454
},
{
"lat": 8.866200000000001,
"lng": 76.66933
},
{
"lat": 8.86569,
"lng": 76.67323
},
{
"lat": 8.86522,
"lng": 76.67823
},
{
"lat": 8.863840000000001,
"lng": 76.68872
},
{
"lat": 8.86359,
"lng": 76.6907
},
{
"lat": 8.86364,
"lng": 76.69282000000001
},
{
"lat": 8.86317,
"lng": 76.69574
},
{
"lat": 8.863420000000001,
"lng": 76.69850000000001
},
{
"lat": 8.8634,
"lng": 76.69958000000001
},
{
"lat": 8.863050000000001,
"lng": 76.70048000000001
},
{
"lat": 8.862350000000001,
"lng": 76.70149
},
{
"lat": 8.862020000000001,
"lng": 76.70239000000001
},
{
"lat": 8.86176,
"lng": 76.70448
},
{
"lat": 8.86218,
"lng": 76.70703
},
{
"lat": 8.863180000000002,
"lng": 76.70957
},
{
"lat": 8.8636,
"lng": 76.71115
},
{
"lat": 8.86382,
"lng": 76.71257
},
{
"lat": 8.86383,
"lng": 76.71368000000001
},
{
"lat": 8.86354,
"lng": 76.71509
},
{
"lat": 8.863240000000001,
"lng": 76.71595
},
{
"lat": 8.86259,
"lng": 76.71731000000001
}
];
#map {
width: 99, 9%;
position: relative;
height: 500px;
border: 1px solid black;
margin-top: 30px;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="map"></div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC-S80K6c6OmI9nUVxR3PjIxj-PKybFeY"></script>
Remove the points from the path that are more than the specified number of points before the marker's location. Your example only contains 77 points. Below is an example that limits the polyline to 20 points after the marker.
code snippet:
var map;
function initialize() {
var markLAT = coords[50].lat;
var markLNG = coords[50].lng;
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(markLAT, markLNG),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
autoRefresh();
}
google.maps.event.addDomListener(window, 'load', initialize);
var icon = new google.maps.MarkerImage("https://maps.google.com/mapfiles/ms/micons/blue.png");
function moveMarker(map, marker, lat, lon) {
marker.setPosition(new google.maps.LatLng(lat, lon));
}
function autoRefresh() {
var i, route, marker;
route = new google.maps.Polyline({
path: [],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false,
map: map
});
marker = new google.maps.Marker({
map: map,
icon: icon
});
console.log("coords.length=" + coords.length);
for (i = 0; i < coords.length; i++) {
setTimeout(function(coords) {
route.getPath().push(new google.maps.LatLng(coords.lat, coords.lng));
if (route.getPath().getLength() > 20)
for (var i = 0; i < route.getPath().getLength() - 20; i++) {
route.getPath().removeAt(0);
}
moveMarker(map, marker, coords.lat, coords.lng);
}, 200 * i, coords[i]);
}
}
var coords = [{
"lat": 8.893260000000001,
"lng": 76.61427
},
{
"lat": 8.894430000000002,
"lng": 76.61418
},
{
"lat": 8.89484,
"lng": 76.61416000000001
},
{
"lat": 8.894860000000001,
"lng": 76.61383000000001
},
{
"lat": 8.89488,
"lng": 76.61375000000001
},
{
"lat": 8.89563,
"lng": 76.61370000000001
},
{
"lat": 8.896270000000001,
"lng": 76.61366000000001
},
{
"lat": 8.896700000000001,
"lng": 76.61364
},
{
"lat": 8.89671,
"lng": 76.61351
},
{
"lat": 8.896740000000001,
"lng": 76.61312000000001
},
{
"lat": 8.89675,
"lng": 76.61307000000001
},
{
"lat": 8.89677,
"lng": 76.61305
},
{
"lat": 8.89729,
"lng": 76.61303000000001
},
{
"lat": 8.89755,
"lng": 76.61311
},
{
"lat": 8.898050000000001,
"lng": 76.61311
},
{
"lat": 8.898280000000002,
"lng": 76.61321000000001
},
{
"lat": 8.899180000000001,
"lng": 76.61289000000001
},
{
"lat": 8.900350000000001,
"lng": 76.61396
},
{
"lat": 8.900860000000002,
"lng": 76.61467
},
{
"lat": 8.90127,
"lng": 76.61581000000001
},
{
"lat": 8.901710000000001,
"lng": 76.61796000000001
},
{
"lat": 8.902190000000001,
"lng": 76.61932
},
{
"lat": 8.902370000000001,
"lng": 76.62017
},
{
"lat": 8.902370000000001,
"lng": 76.62088
},
{
"lat": 8.902460000000001,
"lng": 76.6212
},
{
"lat": 8.90313,
"lng": 76.62217000000001
},
{
"lat": 8.903450000000001,
"lng": 76.62240000000001
},
{
"lat": 8.903970000000001,
"lng": 76.62272
},
{
"lat": 8.90409,
"lng": 76.62280000000001
},
{
"lat": 8.904,
"lng": 76.62288000000001
},
{
"lat": 8.90342,
"lng": 76.6233
},
{
"lat": 8.902560000000001,
"lng": 76.62386000000001
},
{
"lat": 8.90033,
"lng": 76.62522000000001
},
{
"lat": 8.89601,
"lng": 76.62777000000001
},
{
"lat": 8.88676,
"lng": 76.63327000000001
},
{
"lat": 8.884450000000001,
"lng": 76.63461000000001
},
{
"lat": 8.882610000000001,
"lng": 76.63582000000001
},
{
"lat": 8.88089,
"lng": 76.63711
},
{
"lat": 8.87918,
"lng": 76.63862
},
{
"lat": 8.87785,
"lng": 76.63936000000001
},
{
"lat": 8.875760000000001,
"lng": 76.63996
},
{
"lat": 8.87273,
"lng": 76.64141000000001
},
{
"lat": 8.87067,
"lng": 76.64251
},
{
"lat": 8.869280000000002,
"lng": 76.64336
},
{
"lat": 8.86805,
"lng": 76.6447
},
{
"lat": 8.86782,
"lng": 76.6451
},
{
"lat": 8.86677,
"lng": 76.64822000000001
},
{
"lat": 8.86645,
"lng": 76.64933
},
{
"lat": 8.866200000000001,
"lng": 76.65092
},
{
"lat": 8.86546,
"lng": 76.6533
},
{
"lat": 8.86508,
"lng": 76.65451
},
{
"lat": 8.86495,
"lng": 76.65667
},
{
"lat": 8.864880000000001,
"lng": 76.65962
},
{
"lat": 8.86519,
"lng": 76.66080000000001
},
{
"lat": 8.866240000000001,
"lng": 76.66343
},
{
"lat": 8.86646,
"lng": 76.66454
},
{
"lat": 8.866200000000001,
"lng": 76.66933
},
{
"lat": 8.86569,
"lng": 76.67323
},
{
"lat": 8.86522,
"lng": 76.67823
},
{
"lat": 8.863840000000001,
"lng": 76.68872
},
{
"lat": 8.86359,
"lng": 76.6907
},
{
"lat": 8.86364,
"lng": 76.69282000000001
},
{
"lat": 8.86317,
"lng": 76.69574
},
{
"lat": 8.863420000000001,
"lng": 76.69850000000001
},
{
"lat": 8.8634,
"lng": 76.69958000000001
},
{
"lat": 8.863050000000001,
"lng": 76.70048000000001
},
{
"lat": 8.862350000000001,
"lng": 76.70149
},
{
"lat": 8.862020000000001,
"lng": 76.70239000000001
},
{
"lat": 8.86176,
"lng": 76.70448
},
{
"lat": 8.86218,
"lng": 76.70703
},
{
"lat": 8.863180000000002,
"lng": 76.70957
},
{
"lat": 8.8636,
"lng": 76.71115
},
{
"lat": 8.86382,
"lng": 76.71257
},
{
"lat": 8.86383,
"lng": 76.71368000000001
},
{
"lat": 8.86354,
"lng": 76.71509
},
{
"lat": 8.863240000000001,
"lng": 76.71595
},
{
"lat": 8.86259,
"lng": 76.71731000000001
}
];
#map {
width: 99, 9%;
position: relative;
height: 500px;
border: 1px solid black;
margin-top: 30px;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="map"></div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC-S80K6c6OmI9nUVxR3PjIxj-PKybFeY"></script>
My Google Directions API request is:
https://maps.googleapis.com/maps/api/directions/json?origin=41.43206,-81.38992&destination=41.43206,-81.48992&key=xxxxxxxx
The response I receive is:
{
...
"routes": [
{
"bounds": {
"northeast": {
"lat": 41.4358763,
"lng": -81.3897891
},
"southwest": {
"lat": 41.4238459,
"lng": -81.4910838
}
},
"copyrights": "Map data ©2016 Google",
"legs": [
{
"distance": {
"text": "6.5 mi",
"value": 10537
},
"duration": {
"text": "14 mins",
"value": 857
},
"end_address": "4743-4753 Country Ln, Warrensville Heights, OH 44128, USA",
"end_location": {
"lat": 41.4322651,
"lng": -81.4910838
},
"start_address": "45 Bell St, Chagrin Falls, OH 44022, USA",
"start_location": {
"lat": 41.4318382,
"lng": -81.3897891
},
"steps": [
{
"distance": {
"text": "0.1 mi",
"value": 191
},
"duration": {
"text": "1 min",
"value": 33
},
"end_location": {
"lat": 41.4311157,
"lng": -81.3918637
},
"html_instructions": "Head <b>southwest</b> on <b>Bell St</b> toward <b>Pleasant Dr</b>",
"polyline": {
"points": "_d{{FdmwoNFVRx#bA`EVbAVdA"
},
"start_location": {
"lat": 41.4318382,
"lng": -81.3897891
},
"travel_mode": "DRIVING"
},
...
{
"distance": {
"text": "0.2 mi",
"value": 317
},
"duration": {
"text": "1 min",
"value": 32
},
"end_location": {
"lat": 41.4322651,
"lng": -81.4910838
},
"html_instructions": "Turn <b>left</b> onto <b>Country Ln</b><div style=\"font-size:0.9em\">Destination will be on the left</div>",
"maneuver": "turn-left",
"polyline": {
"points": "ix{{FldkpNxJ?x#Ln#PnAX"
},
"start_location": {
"lat": 41.4350887,
"lng": -81.49079350000001
},
"travel_mode": "DRIVING"
}
],
"traffic_speed_entry": [],
"via_waypoint": []
}
],
"overview_polyline": {
"points": "_d{{FdmwoNvBvIVdAs#`#_Af#cCnAp#vCf#rBlAzEHd#`#nEFz#Cj#Or#{#nBUl#Q|#c#dGVZz#vAxDdGtBnDzCrEhAjCdAnCZ~Ap#bJJ`CAn#X\\\\r#hSx^hAxCn#pBXr#FbR?dCAz#ElAOhBe#xCkBvHqAtF]|BOhBG~BFpOFxBhBt\\r#vMBpA?zH?z\\CV?rV#V?nT?|QBvl##vI#lJAdI?fDDhODxPHvq#?hB_#EgA?m##EDyBBmCCqE?{FAkHB}E?cDEwBBcE?cKA_#?VdFl#fMp#pNd#fK#fJApCxJ?hB^nAX"
}
...
}
Why is the start address in the sole leg different from the origin specified in the request? These two points are 6.5 miles apart.
Same is true for end_address and destination specified in the request.
Thanks,
Abhishek Batra
The DirectionsService reverse geocodes any location provided as coordinates, finds the nearest location on the road and uses that as the origin (or destination).
Your two points both happen to be in the middle of water.
Here's my code:
var jsonStr = (JSON.stringify(data, ['flightPositions', 'flightId', 'positions', 'lat', 'lon', 'date'], 4));
alert(jsonStr);
var jsonObj = JSON.parse(jsonStr);
alert(jsonObj.flightPositions);
},
The output from JSON.stringify seems to be correct. I've run it through JSLint and gives me no error:
{
"flightPositions": [
{
"flightId": 621650693,
"positions": [
{
"lat": 40.4272,
"lon": -74.3395,
"date": "2015-10-31T13:31:55.000Z"
},
{
"lat": 40.6833,
"lon": -74.1667,
"date": "2015-10-31T13:32:00.000Z"
},
{
"lat": 40.6133,
"lon": -74.0122,
"date": "2015-10-31T13:32:55.000Z"
},
{
"lat": 40.7538,
"lon": -74.0989,
"date": "2015-10-31T13:33:55.000Z"
},
{
"lat": 40.8125,
"lon": -74.1044,
"date": "2015-10-31T13:34:55.000Z"
},
{
"lat": 40.8147,
"lon": -74.1832,
"date": "2015-10-31T13:35:55.000Z"
},
{
"lat": 40.7624,
"lon": -74.2316,
"date": "2015-10-31T13:36:55.000Z"
},
{
"lat": 40.6829,
"lon": -74.2523,
"date": "2015-10-31T13:37:55.000Z"
}
]
},
{
"flightId": 621650363,
"positions": [
{
"lat": 40.7859,
"lon": -74.0978,
"date": "2015-10-31T13:29:21.000Z"
},
{
"lat": 40.7738,
"lon": -74.143,
"date": "2015-10-31T13:30:21.000Z"
},
{
"lat": 40.7169,
"lon": -74.1948,
"date": "2015-10-31T13:31:21.000Z"
},
{
"lat": 40.6602,
"lon": -74.2524,
"date": "2015-10-31T13:32:21.000Z"
},
{
"lat": 40.5888,
"lon": -74.3109,
"date": "2015-10-31T13:33:21.000Z"
},
{
"lat": 40.5004,
"lon": -74.3464,
"date": "2015-10-31T13:34:21.000Z"
},
{
"lat": 40.4213,
"lon": -74.3074,
"date": "2015-10-31T13:35:21.000Z"
},
{
"lat": 40.3152,
"lon": -74.2497,
"date": "2015-10-31T13:36:21.000Z"
},
{
"lat": 40.2224,
"lon": -74.1577,
"date": "2015-10-31T13:37:21.000Z"
},
{
"lat": 40.163,
"lon": -74.0203,
"date": "2015-10-31T13:38:21.000Z"
}
]
},
{
"flightId": 621650734,
"positions": [
{
"lat": 40.6742,
"lon": -74.1728,
"date": "2015-10-31T13:29:15.000Z"
},
{
"lat": 40.6369,
"lon": -74.1976,
"date": "2015-10-31T13:30:15.000Z"
},
{
"lat": 40.7258,
"lon": -74.1342,
"date": "2015-10-31T13:30:22.000Z"
},
{
"lat": 40.8227,
"lon": -74.0561,
"date": "2015-10-31T13:32:15.000Z"
},
{
"lat": 40.7436,
"lon": -74.2853,
"date": "2015-10-31T13:33:15.000Z"
},
{
"lat": 40.6199,
"lon": -74.2754,
"date": "2015-10-31T13:34:15.000Z"
},
{
"lat": 40.5328,
"lon": -74.2924,
"date": "2015-10-31T13:35:15.000Z"
},
{
"lat": 40.4304,
"lon": -74.2721,
"date": "2015-10-31T13:36:15.000Z"
},
{
"lat": 40.3341,
"lon": -74.2384,
"date": "2015-10-31T13:37:15.000Z"
},
{
"lat": 40.2547,
"lon": -74.173,
"date": "2015-10-31T13:38:15.000Z"
}
]
},
{
"flightId": 621633505,
"positions": [
{
"lat": 40.3481,
"lon": -74.7084,
"date": "2015-10-31T13:29:35.000Z"
},
{
"lat": 40.3788,
"lon": -74.6202,
"date": "2015-10-31T13:30:35.000Z"
},
{
"lat": 40.4126,
"lon": -74.5206,
"date": "2015-10-31T13:31:35.000Z"
},
{
"lat": 40.4436,
"lon": -74.4448,
"date": "2015-10-31T13:32:35.000Z"
},
{
"lat": 40.45,
"lon": -74.4333,
"date": "2015-10-31T13:32:35.000Z"
},
{
"lat": 40.481,
"lon": -74.3348,
"date": "2015-10-31T13:33:47.000Z"
},
{
"lat": 40.5225,
"lon": -74.2702,
"date": "2015-10-31T13:34:47.000Z"
},
{
"lat": 40.5691,
"lon": -74.2228,
"date": "2015-10-31T13:35:47.000Z"
},
{
"lat": 40.6234,
"lon": -74.1737,
"date": "2015-10-31T13:36:47.000Z"
},
{
"lat": 40.6804,
"lon": -74.1765,
"date": "2015-10-31T13:37:47.000Z"
}
]
},
{
"flightId": 621650749,
"positions": [
{
"lat": 40.6906,
"lon": -74.2433,
"date": "2015-10-31T13:34:54.000Z"
},
{
"lat": 40.631,
"lon": -74.5142,
"date": "2015-10-31T13:35:54.000Z"
},
{
"lat": 39.6624,
"lon": -74.6148,
"date": "2015-10-31T13:36:54.000Z"
},
{
"lat": 40.6833,
"lon": -74.1667,
"date": "2015-10-31T13:37:00.000Z"
},
{
"lat": 40.7207,
"lon": -74.1416,
"date": "2015-10-31T13:37:54.000Z"
}
]
}
]
}
alert output from JSON.stringify
However, I am getting the following for the JSON.parse:
[object Object],[object Object],[object Object],[object Object],[object Object]
What could be wrong here?
UPDATE
Changed alert to console.log (without concatenating string) and it gives me the following output:
Array [ Object, Object, Object, Object, Object ]
console
Your code to stringify and parse JSON is correct, the behavior you are seeing is due to the alert function. alert automatically tries to convert the parameter to a human-readable string (not a JSON string), in your case it converts every item inside the flightPositions array to string.
To debug JS you should use the console.log method (docs) and the browser developer's tools (use F12 to open the tools).
var jsonStr = (JSON.stringify(data, ['flightPositions', 'flightId', 'positions', 'lat', 'lon', 'date'], 4));
console.log(jsonStr);
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.flightPositions);