Open meli27 opened 2 years ago
I think this will not work, as that flutter library is not supported. You need to use this together with openlayers to get the tiles working. The styles used in here are not mapbox compatible and only work with openlayers.
Thanks for your answer. Sorry I didn't give so much context, right now i am using this library flutter_vector_tiles_maps: https://github.com/greensopinion/flutter-vector-map-tiles. So in the URL I used this one, and it is supposed to work, because is vector based.
It looks like a problem with flutter then. Could you share your code so i could have a look and may find a hint where things are going wrong. But as i said, i doubt that this will work at all as this hardly depends on the openlayers library!
Sure! I think one option should be receiving positive Y and then on your service convert it to negative.
FlutterMap(
mapController: widget.mapController,
options: MapOptions(
onPositionChanged: (posChange, _) => {zoom = posChange.zoom},
controller: widget.mapController,
rotation: 0.0,
interactiveFlags: InteractiveFlag.doubleTapZoom |
InteractiveFlag.drag |
InteractiveFlag.pinchMove |
InteractiveFlag.pinchZoom,
plugins: [VectorMapTilesPlugin()],
// Initially center map on given position
center: vpIsSet ? vesselPosition.position : LatLng(0, 0),
zoom: zoom != null ? zoom! : widget.defaultZoom,
maxZoom: 18),
layers: <LayerOptions>[
// normally you would see TileLayerOptions which provides raster tiles
// instead this vector tile layer replaces the standard tile layer
VectorTileLayerOptions(
theme: _mapTheme(),
backgroundTheme: _backgroundTheme(),
renderMode: RenderMode.vector,
tileProviders: TileProviders({
'openmaptiles': _cachingTileProvider(_urlTemplate()). -> Sending url
})),
TileLayerOptions(
urlTemplate:
'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
opacity: 1.0,
backgroundColor: const Color(0x00000000),
)
],
);
VectorTileProvider _cachingTileProvider(String urlTemplate) {
return MemoryCacheVectorTileProvider(
delegate: NetworkVectorTileProvider(
urlTemplate: urlTemplate,
// this is the maximum zoom of the provider, not the
// maximum of the map. vector tiles are rendered
// to larger sizes to support higher zoom levels
maximumZoom: 16),
maxSizeBytes: 1024 * 1024 * 2);
}
vector_theme.Theme _mapTheme() {
// maps are rendered using themes
// to provide a dark theme do something like this:
return provided_themes.ProvidedThemes.lightTheme();
}
_backgroundTheme() {
return _mapTheme().copyWith(types: {
vector_theme.ThemeLayerType.background,
vector_theme.ThemeLayerType.fill
});
}
String _urlTemplate() {
var url =
'https://ows.terrestris.de/osm-vectortiles/osm:osm_world_vector@mapbox-vector-tiles@pbf/{z}/{x}/{-y}.pbf';
return url;
}
The error you see tells us that flutter is requesting the URL without replacing the variables with values. Normally a working request looks like this: https://ows.terrestris.de/osm-vectortiles/osm:osm_world_vector@mapbox-vector-tiles@pbf/9/267/341.pbf
The library you use, flutter, should replace the variables ({z}/{x}/{-y}) with correct numbers, but it doesnt. This is something i cannot help you with, i am sorry. Maybe you should ask for support on the flutter side.
I am using this url :https://ows.terrestris.de/osm-vectortiles/osm:osm_world_vector@mapbox-vector-tiles@pbf/{z}/{x}/{-y}.pbf in Flutter with the lib flutter-vector-map-tiles. But I am getting this error Unable to parse number For input string: "{-y}". Hope someone can help