Google Map Dynamic Input By XML

(Ellis Taylor) #1

Hi all,

 

I am looking to use an XML feed that contains tags for longitude and latitude in it as inputs to plot points on my Google Map within Matrix.

 

I have read that this is possible using the Metadata Keyword Replacements, however I would like to read directly from the Data Source Record Set assets.

 

Has anyone come across a way to do this?

 

 

 

Many Thanks!

 

 

Ellis

(Bart Banda) #2

Hi Ellis,

this should be fairly straight forward with a XML data source asset and an asset listing.

Have a read about XML data sources here, http://manuals.matrix.squizsuite.net/data/chapters/xml-data-source, essentially you would connect this to your XML feed and then create an asset listing (http://manuals.matrix.squizsuite.net/asset-listing) that lists data record sets which will be your items from your XML feed.

Hope that helps.

Cheers,

Bart

(Ellis Taylor) #3

Thanks for that Bart.

I managed to get to that part with the Asset Listing working properly.


Can I use my asset listing to pull through the latitude and longitude onto my Google Map then?




Many thanks for that



Ellis

(Nic Hubbard) #4

Can I use my asset listing to pull through the latitude and longitude onto my Google Map then?

 

You can accomplish what you are wanting if you forgo the Google Map asset and just use standard Google Maps API code. So you use an asset listing to build the javascript array of locations, then load that up into a Google Map. 

 

Let me know if you are interested and I can provide the code.

(Ellis Taylor) #5

It had crossed my mind to use a substitute in place of the Google Map asset so thanks for that Nic, that would be a huge help if you could message me the code for it.

 

Many Thanks,

 

Ellis

(Nic Hubbard) #6

Alright, here it goes. You need to build an asset listing that builds a javascript array of objects:

 

Page Contents

<script type="text/javascript">
var zs_waypoints = [%asset_listing%];
</script>

Default Format

{"longitude": "%asset_metadata_Longitude%",
"latitude": "%asset_metadata_Latitude%",
"title": "%asset_name^escapequotes%"},

Obviously you need to use your appropriate keywords for long and lat. In my case I wasn't using the Google Map Location assets.

 

 

 

Position Format -1 (list item in the list)

{"longitude": "%asset_metadata_Longitude%",
​"latitude": "%asset_metadata_Latitude%",
"title": "%asset_name^escapequotes%"}

Example of final javascript array file: http://50.78.184.66/files/listings.js

 

Next you need to build the map, which, is a bit more work. Take a look at the final page:

 

http://50.78.184.66/locations

 

And also the .js file that has the Google Map code:

 

http://50.78.184.66/__data/assets/js_file/0010/82/zs.js

 

 

Hope this helps. Sorry if I didn't have a chance to explain every detail, but let me know if you have questions.

(Ellis Taylor) #7

Hi Nic,

 

Thanks for the guidance above. So far I've got the first part working correctly where the keyword replacement features in the script tag.  

 

<script type="text/javascript">

var zs_waypoints = [{"longitude": "-0.949461","latitude": "53.267975","title": "A1 northbound between A57/A638 and B6387 | Northbound | Roadworks"},
{"longitude": "-0.949461","latitude": "53.267975","title": "A1 northbound between A57/A638 and B6387 | Northbound | Roadworks"},
{"longitude": "-1.726932","latitude": "55.356712","title": "A1 southbound between A1068 and A697 | Southbound | Roadworks"},

...
];</script>

 

 

However, I'm not quite sure how to incorporate these coordinates into zs.js and then also how to create the map using zs.js. I wonder if you could a little more detail on that particular part.

 

-------

 

I've managed to get zs.js to create the map, (see screenshot) and I've still got the zs_waypoints array working as above.

 

However, the array doesnt seem to be populating the pins on the front end. I've tried to track down and debug anything not working properly in FireBug and its not throwing any errors so I'm a bit confused as to where I must have gone wrong.

 

 

 

 

 

Cheers

 

 

Ellis

 

 

-------

 

 

Had a bit of success, the part of zs.js that set the colours dependent on the state was crashing the script. Thats a really good idea though so I'll be using that in a slightly different way.

 

 

Thanks for all your help! (see second screenshot)

 

 

 

Ellis

 

 

 

 

  Screen Shot 2013-06-03 at 10.46.36.png (247 KB) Screen Shot 2013-06-03 at 12.27.23.png (188 KB)

(Nic Hubbard) #8

Sorry, just woke up and saw your post. Looks like you ended up getting it working?

(Ellis Taylor) #9

I did manage to sort it in the end, apologies for the running commentary.

 

Just when I thought I'd come to an issue I managed to fix it.

 

 

 

Thanks for all the help!

 

 

 

Ellis

(Ellis Taylor) #10

Just a slight expansion to the Google Maps issue I posted above.

 

Now that I have created the Google Map with a single RSS feed that represents one of England's busiest (and most prone to incident) roads I would like a way of including multiple RSS feeds for other busy roads. However, due to the unprecedented amount of collisions on English roads the RSS feed size is far too large to load all of them at the same time.

 

I plan to load the Google Map with no feeds on the initial page load, from here users can use checkboxes to tick and submit which roads (feeds) they would like to be plotted. My first thought was to use a structured root node with GET variable to switch which root nodes the Map would use to plot the points, I tested the structured root node on a folder and some test pages and it has worked fine, however when I try and switch the root node to a folder containing the RSS's and tell it to list out each data source record dependent on the GET variable I get my No Results page.

 

The issue obviously sits in the configuration of the asset listing.

 

Is there a difference as to how Matrix handles standard assets in comparison to how it handles shadow assets or is there a major difference in set up between listing a dynamic feed and listing standard assets?

 

Has anyone come across this before?

 

And lastly, if anyone has tried this before, did they find another way of doing it?

 

 

 

 

Cheers,

 

Ellis

[attachment=625:Screen Shot 2013-06-06 at 10.47.47.png] Screen Shot 2013-06-06 at 10.47.47.png (9.27 KB)

(Nic Hubbard) #11

Have you tried setting Direct Children to YES?

(Ellis Taylor) #12

I did try that yeah. It didn't seem to make a difference as the Data Source Record Set are not direct children of the folder that they sit in. They belong to the RSS.

 

I'm not too sure on this one as it worked just fine for the Folder and Standard Page example but wouldn't for the Folder and RSS.

 

 

Ellis

(Nic Hubbard) #13

I did try that yeah. It didn't seem to make a difference as the Data Source Record Set are not direct children of the folder that they sit in. They belong to the RSS.

 

I'm not too sure on this one as it worked just fine for the Folder and Standard Page example but wouldn't for the Folder and RSS.

 

You have to make sure the shadow assets are direct children of the root node that you have selected. So, if your root node is a Folder that holds the RSS Data Source asset, the Asset Listing will not find the shadow assets.

(Eric) #14

Hey Nic any chance you can resurect those links? I need to build something like this and need an example.

 

Example of final javascript array file: http://50.78.184.66/files/listings.js

 

Next you need to build the map, which, is a bit more work. Take a look at the final page:

 

http://50.78.184.66/locations

 

And also the .js file that has the Google Map code:

 

http://50.78.184.66/...e/0010/82/zs.js

 

I have csv datasource that has lat/long in it, but it seems that Google map listing asset doesn't want to output it on the map even though I've maped %ds__lat% %ds__long% to record set.