maplibre / maplibre-react-native

A MapLibre react native module for creating custom maps
Other
252 stars 53 forks source link

Missing addProtocol method fot custom protocols, Protomaps / pmtiles support #28

Open punov opened 1 year ago

punov commented 1 year ago

Motivation

At the moment, we have a frontend integration with Protomaps vector tiles, that have a full support of Maplibre GL: https://protomaps.com/docs/frontends/maplibre

Inside our Mobile application, we use Maplibre as tool for rendering maps, but we don't have a chance to render same vector tiles since this custom protocol is not supported out of the box, and there's no way to add it.

Implementation

Expectations is to have the same addProtocol method to provide a loadFn for custom tile servers like pmtiles.

import * as pmtiles from "pmtiles";

let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);

If there's any known workaround to provide support for custom protocol using the existing Maplibre API, I'd appreciate any directions / advices.

jthiard commented 1 year ago

Hi @punov I didn't got deep into it, but if I understand it right the addProtocol method in maplibre-gl-js is used to override with javascript code the tiles fetching when using a specific protocol in source url.

As this maplibre-react-native lib is a wrapper on top of maplibre-gl-native - and not maplibre-gl-js, fetching the tiles is made at the native level, and you won't be able to customize it with javascript code.

I'm unsure if it may be customized at the android / iOS level (with java/objectiveC or kotlin/swift hooks) or if it requires to go deeper at the C++ level.

punov commented 1 year ago

@jthiard thanks for your answer, after going through the source code, I have the same understanding. I'm ok to customize the native code to support it, but at the moment I struggle finding the proper hook for tileserver fetch operations.

addProtocol method is as simple as calling the function to fetch the data according to current coordinates and zoom level, so getting closer to the function that executes it in native code is a step #1 for me.

lseelenbinder commented 1 year ago

@punov You'll be looking for functionality around here:

src/mbgl/storage

Most likely an adaptation of src/mbgl/storage/http_file_source.hpp and platform/default/src/mbgl/storage/http_file_source.cpp with some of platform/default/src/mbgl/storage/file_source_manager.cpp.

It's a bit of a mess, but generally you can register handlers for types of files, and there's a default FileSourceManager normally invoked. You'll need to create your own and pass it through via ResourceOptions: src/mbgl/map/map.cpp.

Does this help point you in the right direction?