Integrating OpenStreetMaps with Cordova

Question

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 suppose

Answer 1

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:

_{© 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/"
>

3. 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.

4. 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).