Is it possible to have ng-map open only remote KML files and not local files?

Currently utilizing Ionic with ng-map for displaying KML files on a map. I need to switch between different KMLs, loading them one at a time upon user request. The remote KMLs load successfully, as evidenced by the following code:

<div style="height: 100%">
  <ng-map center="41.876,-87.624" zoom="15" map-type-id="HYBRID" style="display:block; width: 100%; height:100%;">
    <kml-layer url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"></kml-layer>
  </ng-map>
</div>

The local KMLs are stored in a kml folder within the www directory of my Ionic application.

https://i.sstatic.net/XtcIX.png

When attempting to load a local KML file using the same syntax as the remote file, like so:

<div style="height: 100%">
  <ng-map center="41.876,-87.624" zoom="15" map-type-id="HYBRID" style="display:block; width: 100%; height:100%;">
    <kml-layer url="./kml/cta.kml"></kml-layer>
  </ng-map>
</div>

The lines from the KML do not appear on the map unlike with the remote file. The map loads without any errors but the specified line details are missing.

It raises the question of whether ng-map necessitates a remote KML for full functionality or if this issue lies within Ionic's directories.

No error messages are displayed, indicating that everything is functioning properly besides the fact that the local KML cannot be read properly resulting in the absence of the specified elements on the map compared to the remote KML file.

javascriptangularjsgoogle-mapsionic-frameworkng-map

Answer №1

This issue is not a bug in either the ng-map library or Ionic. The ng-map library uses KML Layers, which does not support loading KML files from localhost or a file system.

You have two main options:

1) Upload the KML file to a public server where Google's servers can access it, as Google servers handle the parsing and rendering of KML files.

2) Use a third-party library like geoxml3 library, which allows you to load and parse KML files hosted on localhost. Here's an example:

HTML

<div ng-app="mapApp" ng-controller="mapController">
    <ng-map center="41.876,-87.624" zoom="15" map-type-id="HYBRID" style="display:block; width: 100%; height:100%;" />
</div>

JavaScript

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function($scope, NgMap) {

        NgMap.getMap().then(function(map) {
            $scope.map = map;
            var myParser = new geoXML3.parser({ map: map });
            myParser.parse('cta.kml');
        });
    });

Check out the demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using the jQuery ajax function to validate a form, it is important to note that the $_POST variables

I have an HTML form along with a jQuery function for form validation. After submitting the form values to my PHP files, I notice that the $_POST variable is not being set. What could be causing this issue? <form id="signup" class="dialog-form" action= ...

javascriptphpjqueryajaxforms

Is there a way for me to determine the quality of a video and learn how to adjust it?

(function(){ var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd"; var player = dashjs.MediaPlayer().create(); player.initialize(document.querySelector("#videoPlayer"), url, })(); var bitrates = player.getBitrateInfoListFor("vid ...

javascripthtmlmpeg-dashdash.js

Looking for a practical example of MutationObserver in action? Interested in trying it

If you're interested in testing MutationObserver, check out this JSfiddle example I created. It's super simple and easy to follow. http://jsfiddle.net/bqcpna3k/6/ HTML Structure: <div> <input name='a' value='1'> ...

javascriptmutation-observers

I often find myself puzzled by a couple of lines of source code within the express framework

Within the file ./lib/express.js, function createApplication() { var app = function(req, res, next) { app.handle(req, res, next); }; mixin(app, proto); mixin(app, EventEmitter.prototype); app.request = { __proto__: req, app: ...

javascriptnode.jsexpress

What is the best way to generate an @ symbol using JavaScript?

When coding in Javascript, a challenge I am facing is creating a variable that includes the @ symbol in a string without it being misinterpreted as something else, especially when dealing with URLs. Does anyone have any suggestions on how to handle this ...

javascriptjqueryajaxflickr

The Vuejs single-file component fails to display on the page

Even though there are no errors in the browser and Webpack compiles successfully, the message "hello from dashboard" is not displaying on the page. I am currently using Vue version 2.6 In my main.js file: import Vue from 'vue' Vue.component(&a ...

javascriptvue.jsvuejs2vue-component

The Nuxt.js authentication module remains in place and does not redirect users who are already logged

An authenticated user can still access the /login page. If I click on a link to the /login page, I am redirected to a different page successfully. However, if I manually type in /login in the URL, I am still taken to the login page even though I am already ...

javascriptvue.jsnuxt.jsstoreserver-side

Troubleshooting JavaScript Integration in PHP Scripts

I'm currently working on creating an advertisement switcher that can display different ads based on whether the user is on mobile or desktop. I've tried inserting PHP includes directly into the code, and while it works fine, I'm struggling t ...

javascriptphp

Guide to Angular Directives: Assigning Attributes to innerHTML

Looking to add attributes to the inner HTML myTemplate.html <div class="custom-template"></div> HTML <template></template> directive app.directive('template', ['$compile', function($compile) { retur ...

javascripthtmlangularjsangular-directive

What is the best way to combine these arrays?

Having trouble finding the most efficient solution to this problem. I attempted using a loop, but I can't seem to make any progress. Any assistance would be greatly appreciated. This is my current data: [ [ ‘TWENTY’, 2000 ], [ ‘TWENTY’, 2000 ...

javascriptarrays

Checking for the presence of the key name "item[]" within an object in AngularJs

I currently have an object called "obj" with two keys: "goal" and "item[]". It looks like this: var obj = {goal:"abc",item[]:"def"}; These keys and values are dynamically generated. Now here's the problem - I need to determine if these keys exist ...

javascriptarraysangularjsobject

Unable to hide the mobile menu button

https://i.sstatic.net/5rdYY.pngI am currently working on a fun website project . I am facing an issue with the mobile menu button not disappearing using display:none in Safari on my iPhone when in landscape mode, even though it works fine in Chrome. My g ...

javascriptjqueryhtmlcss

Misplace reference to object during method execution

Here's a simple demonstration of the issue I'm facing. The count function is supposed to keep track of the number of items returned from a query. However, my current implementation causes me to lose reference to the function when calling it from ...

javascriptnode.jsexpress

JavaScript event target compatibility with IE8

Similar Question: Javascript IE Event The script I have written is causing issues specifically in IE8, while working fine on all other browsers. The error message I am seeing is: 'tagName is null or not an object'. Even though I am aware tha ...

javascriptjquery

Scrolling in iOS 8 causing flickering problem with background image

Utilizing the Supersized jQuery slider plugin to create a full-page background slider with a fade-in effect and added height for scrolling. The slider functions correctly on desktop, but upon testing on an iOS 8 iPad device, there is noticeable flickering ...

javascriptjqueryhtmlioscss

When attempting to execute the 'npm start' command, an error was encountered stating "start" script is

Encountering an issue when running "npm start." Other users have addressed similar problems by adjusting the package.json file, so I made modifications on mine: "scripts": { "start": "node app.js" }, However, t ...

javascriptnode.jsjsonnpmwebpack

React component stuck in endless loop due to Intersection Observer

My goal is to track the visibility of 3 elements and update state each time one of them becomes visible. Despite trying various methods like other libraries, useMemo, useCallback, refs, etc., I still face challenges with my latest code: Endless loop scenar ...

javascriptreactjstypescriptnext.jsintersection-observer

What is the reason for parsing JavaScript code when the page is first loaded?

I recently placed an Adsense (for content) code on my website in order to show a single ad: <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script> <ins class="adsbygoogle" style="display:inline-block;width ...

javascripthtmlasynchronousadsense

Adjusting the filter location in React-admin

This is the common method of implementing filters in react-admin https://i.stack.imgur.com/M8yq7.png However, in my particular scenario, I require the filters to be inside each column heading. For example: https://i.stack.imgur.com/GU2Pz.png The filter ...

javascriptreactjsreact-admin

Prevent Loading of Nested States in UI-Router

Imagine having two states configured using angularjs ui-router: .state('branding', { url: "/{branding}", controller: 'BrandingCtrl', templateUrl: '/app/Branding.html' }) .state('branding.index', { ur ...

javascriptangularjsangular-ui-router