OL3 and kml problem issue on Android 6.0.1

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

OL3 and kml problem issue on Android 6.0.1

ScigallaP
Hello,

I'm new in OL and have an first simple question here.

My frist small project to show kml files with OL and OSM runs fine on my
local PC and on a webserver too. The result is shown on desktop (chrome
and firefox) and mobile browser (chrome and opera).

But when I cpoy the complete code (and file structure including kml
files) on my Android cellphone or tablet, only the OSM map is shown, but
no kml. Not with chrome and not with opera.

My devices are Galaxy Tab S2 and HTC ONE M8, both Android 6.

I want use it locale on Android devices, to beware download large kml
(>10 MB).

Here my code:

### BEGIN HTML code ###
<html>
     <head>
         <title>Hallo OSM</title>
         <link rel="stylesheet" href="ol.css" type="text/css" />
         <link rel="stylesheet" href="samples.css" type="text/css" />
     </head>
     <body>
         <div id="map" class="map"></div>
         <script src="ol.js"></script>
         <script>

       var vector = new ol.layer.Vector({
         source: new ol.source.Vector({
           url: 'kml/hydranten6.kml',
           format: new ol.format.KML({
               extractStyles: true,
               extractAttributes: false,
               maxDepth: 30
               })
         })
       });

         var ltg = new ol.layer.Vector({
         source: new ol.source.Vector({
           url: 'kml/leitungen.kml',
           format: new ol.format.KML({
               extractStyles: true,
               extractAttributes: false,
               maxDepth: 30
               })
         })
       });
         var osmLayer = new ol.layer.Tile({
             source: new ol.source.OSM()
             });
         var musterort = ol.proj.transform([13.94, 50.96], 'EPSG:4326',
'EPSG:3857');
         var view = new ol.View({
             center: musterort,
             zoom: 18
             });
         var map = new ol.Map({
             layers: [ltg, vector],
             target: 'map'
             });
         map.setView(view);
         </script>
     </body>
</html>
### END HTML code ###

The HTML file, ol.css, samples.css, ol.js and both kml files are stored
in the same structure on Android as on PC and webserver.

Any help would be appreciated.

Thanks in advance!
_______________________________________________
Users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/openlayers-users
Reply | Threaded
Open this post in threaded view
|

Re: OL3 and kml problem issue on Android 6.0.1

ThomasG
Hi,

Do you serve your HTML via a local server?
If you just put files like that without a web server, you will hit the same origin policy issue to load KML because of an url call to kml file from an url like file://your/path/your_index.html

Try a server like https://github.com/NanoHttpd/nanohttpd
Otherwise, try to use this recipe http://stackoverflow.com/questions/8648616/webview-javascript-cross-domain-from-a-local-html-file (never tested so no warranty)

Cheers

Thomas Gratier


2016-09-02 14:59 GMT+02:00 ScigallaP <[hidden email]>:
Hello,

I'm new in OL and have an first simple question here.

My frist small project to show kml files with OL and OSM runs fine on my local PC and on a webserver too. The result is shown on desktop (chrome and firefox) and mobile browser (chrome and opera).

But when I cpoy the complete code (and file structure including kml files) on my Android cellphone or tablet, only the OSM map is shown, but no kml. Not with chrome and not with opera.

My devices are Galaxy Tab S2 and HTC ONE M8, both Android 6.

I want use it locale on Android devices, to beware download large kml (>10 MB).

Here my code:

### BEGIN HTML code ###
<html>
    <head>
        <title>Hallo OSM</title>
        <link rel="stylesheet" href="ol.css" type="text/css" />
        <link rel="stylesheet" href="samples.css" type="text/css" />
    </head>
    <body>
        <div id="map" class="map"></div>
        <script src="ol.js"></script>
        <script>

      var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'kml/hydranten6.kml',
          format: new ol.format.KML({
              extractStyles: true,
              extractAttributes: false,
              maxDepth: 30
              })
        })
      });

        var ltg = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'kml/leitungen.kml',
          format: new ol.format.KML({
              extractStyles: true,
              extractAttributes: false,
              maxDepth: 30
              })
        })
      });
        var osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM()
            });
        var musterort = ol.proj.transform([13.94, 50.96], 'EPSG:4326', 'EPSG:3857');
        var view = new ol.View({
            center: musterort,
            zoom: 18
            });
        var map = new ol.Map({
            layers: [ltg, vector],
            target: 'map'
            });
        map.setView(view);
        </script>
    </body>
</html>
### END HTML code ###

The HTML file, ol.css, samples.css, ol.js and both kml files are stored in the same structure on Android as on PC and webserver.

Any help would be appreciated.

Thanks in advance!
_______________________________________________
Users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/openlayers-users


_______________________________________________
Users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/openlayers-users