4

Is it possible to have an electron app showing offline map? I downloaded the mbtiles and stored in the electron app, but I'm not able to show it in the angular side of the electron app.

I have the following code:

<mgl-map
  class="map"
  id = "map"
  [style]="'mbtiles://assets/resources/downloaded.mbtiles'"
  [center]="[mapCenter.longitude, mapCenter.latitude]"
  (load) = "onLoad($event)"
  (dragEnd)="mapDrag()"
  [doubleClickZoom]="false"
  [bearing]="[bearing]"
  [zoom]="[zoom]"
  [pitch]="[pitch]">
</mgl-map>

But I get the error

zone-evergreen.js:1068 Fetch API cannot load mbtiles://User/hello/path/to/file.mbtiles. URL scheme "mbtiles" is not supported.

So, in order to make it works in an online way I have to change the style for

[style]="'mapbox://styles/mapbox/streets-v9'"

Is it possible to make it works serving the mbtiles from the nodejs code or in other way?

Faabass
  • 1,394
  • 8
  • 29
  • 58

1 Answers1

1

To serve up your local mbtiles file, you need to register the mbtiles protocol in main.js. Something like this should do it:

 const electron = require('electron');
 const protocol = electron.protocol;
 const path = require('path');
 
 protocol.registerHttpProtocol('mbtiles', (req, cb) => {
   const url = 'assets/resources/downloaded.mbtiles';
   cb({ path: path.normalize(`${__dirname}/${url}`) })
});

You can read up on protocol handlers in electron here: https://www.electronjs.org/docs/api/protocol#protocol

aengus
  • 605
  • 6
  • 13