Integrating OpenStreetMaps with Cordova

2019-03-01 13:46发布

站内问答 / 移动开发
1240 1 5

I was wondering if any of you might have any idea how i can use Open Street Maps(OSM) with cordova? Searching for days now..

All i can conclude is that i am not supposed to directly use OSM's API's as their servers will block me out if i have too many calls.. So there are free open sources names like 1.Openlayers 2.Leaflet that allow me to use OSM for free.. however i followed all their tutorials but i cant get the map to show up on the emulator..

Im using Visual studios 2015 community edition. And working with Cordova. There is HTML,CSS and JavaScript(jQuery) involved.. But i simply see no map..

Edits 2, 3, 4

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
              integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
              crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
               integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
               crossorigin=""></script>
        <style>
            #mapid { 
                height: 180px; 
            }
        </style>
    </head>

    <body id="Main">

        <div id="mapid"></div>

        <script>
        var mymap = L.map('mapid').setView([51.505, -0.09], 13);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={mytoken}', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'mytoken'
        }).addTo(mymap);
        </script>

        </body>
</html>

This is what i see SS of what i see

Edits 5, 6

In Cordova emulator this is what i see Cant display map

Edit 7

I have edited the whitelist.. Im guessing it is here cause the only place i can see to add the whitelist in the config.xml is

Whitelist

Edit 8

I have also added the CSP as can be seen below enter image description here

Edit 9

So NOW, In my JS file

1. This is the first image the original file and you can see i have covered my token

enter image description here 2. So like you said i replaced it with an image from the internetSo i took a pic of an OWL from the internet

enter image description here 3. I then added it to the CSP

enter image description here 4. Now i can zoom in and zoom out make the owl tiles become many and few.

The problem i have now is with this:

https://api.tiles.mapbox.com/v4/MapID/997/256/{z}/{x}/{y}.png?access_token=mytoken

so i tried to put:

IN THE CSP but still the vector image is not showing :( any ideas now?

1条回答
别忘想泡老子
2楼-- · 2019-03-01 13:49

You seem to mix up things.

As mentioned by @scai, OSM does not provide you with any API when it comes to raster tiles.

You just access tiles as plain images:

OSM tile example © OpenStreetMap

Leaflet (and all other JS mapping libraries like OpenLayers, but also Google Maps) just stitch such tile images together, provide user navigation (panning, zooming) and other functionalities (markers, etc.)

There is nothing specific when integrating such map in a hybrid mobile app using Cordova, except for white listing / CSP the Tile Server.

  1. Start by making a simple HTML page (without Cordova) with a working Leaflet map.

  2. Add a Content Security Policy (CSP) to tell the browser that you allow the page to fetch images only from the Tile Server. For example, if you load tiles from OSM at https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, your <meta> tag could look like:

<meta
  http-equiv="Content-Security-Policy"
  content="img-src 'self' https://*.tile.openstreetmap.org/"
>

  1. Replace any CDN resource by local copies. Typically do not load Leaflet from unpkg.com. The point of having an installed mobile app is to have as much resources available on the phone storage as possible, and libraries code is typically the thing you do not need to fetch over the air everytime. You can download a copy of all Leaflet assets (CSS, JS, images) on its download page.

  2. Copy the page and all its assets into your Cordova project. Whitelist network requests to the Tile Server (in config.xml):

<access origin="https://*.tile.openstreetmap.org/" />

or (unsafe):

<access origin="*" />

If you need further help with CSP and Cordova whitelist plugin, I am certain you can find plenty resources, including here on SO. Obviously, reading through the reference documentation (as linked throughout this post) should be your starting point as well.

BTW OSM does warn that you should not abuse of their tiles, whatever the method through which you access them (including through Leaflet for instance).

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)