Integrating KML Layers with Google Maps

I am currently working on a project involving the integration of KML layers with Google Maps component within Perspective. I have some specific questions and am seeking guidance or additional documentation.

KML File Integration: Is the correct approach to integrate a KML layer to first save a KML file from Google Earth, then host it on the gateway using the Web Dev module? I have attempted this method but have not been successful. Are there specific steps or configurations I am missing?

URL Configuration: When integrating the KML layer, what is the correct format of the URL? Is it a direct link to the hosted KML file on the gateway? I would appreciate any examples or guidelines on how to correctly set this up.

Additional Documentation: I have searched the manual for “kml” but haven’t found extensive information. Are there other resources, examples, or documentation available that delve deeper into the integration of KML layers with Google Maps in Inductive Automation’s platform?

Any insights, suggestions, or references to additional resources would be greatly appreciated. I am particularly interested in any best practices or common pitfalls to avoid during this integration process.

Thank you for your assistance!

Hi Justin,

First we'll need to host the .kml file as a resource in the Webdev module which is documented here, and the URL formats for Webdev resources are documented here as well.

Once the file is hosted, you can reach it via URL from the Google Map component. Alternatively, we have a bit more information on utilizing JSON for kml's on map components documented over here, but this is specific to the Perspective Map Component.

You could even host a JSON that contains the URL to your Webdev hosted .kml file like in the non-Google map component example, and the rest of the JSON can contain the other .kml info the Google Map component is expecting:

image

Hi Ben,

I am also trying to get KML working for the first time. I've followed all of your advice here. If I paste the URL I have configured the Google map component with into a browser, it opens the correct file and displays my KML data. But the graphics described by the KML data is not displayed on the map. Do you have any advice for troubleshooting this?

Thanks,

Eric

I will be eagerly waiting to see if you are able to get it working, as I wasn’t successful in my endeavors. I stuck to the Leaflet Perspective map that we had already developed, but I would love to see if I could make use of the Google Map using all the KML files we already have available.

OK, I got this to work. Here is what I did.

First, this requires two Google API's to be enabled which are 'Maps Embedded API' and 'Maps Javascript API'. These are both tied to your Google API key.

Next, you absolutely cannot host the KML file in the Webdev module as stated above if your gateway is not publicly accessible. See this web page where Google makes it clear that the KML file must be hosted on a publicly accessible website with no authentication required to access it. In my case, my gateway is not, so it was the main problem.

[KML and GeoRSS Layers | Maps JavaScript API | Google for Developers]

I used the instructions found here to host my kml files on my Google drive.

Give that a shot. I hope it works for you as well. Good Luck!

Eric