Reputation: 2260
I'd like to tile a large image and view it in a Flutter app with flutter_map package. I.e, use the flutter_map package as a large bitmap viewer for a zoomable, tiled image.
On the web I can achieve this with Leaflet and believe it's quite a common use case?
In Leaflet I can tile an image and create a map as follows. Assuming an image size of 7680x4320 which gets tiled with zoom levels 0 (512x512) through to level 4 (full image resolution).
var mapExtent = [0.00000000, -4320.00000000, 7680.00000000, 0.00000000];
var mapMinZoom = 0;
var mapMaxZoom = 4;
var mapMaxResolution = 1.00000000;
var mapMinResolution = Math.pow(2, mapMaxZoom) * mapMaxResolution;
var tileExtent = [0.00000000, -4320.00000000, 7680.00000000, 0.00000000];
var crs = L.CRS.Simple;
crs.transformation = new L.Transformation(1, -tileExtent[0], -1, tileExtent[3]);
crs.scale = function(zoom) {
return Math.pow(2, zoom) / mapMinResolution;
};
crs.zoom = function(scale) {
return Math.log(scale * mapMinResolution) / Math.LN2;
};
var layer;
var map = new L.Map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: crs
});
layer = L.tileLayer('{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
tileSize: L.point(512, 512),
noWrap: true,
tms: false
}).addTo(map);
map.fitBounds([
crs.unproject(L.point(mapExtent[2], mapExtent[3])),
crs.unproject(L.point(mapExtent[0], mapExtent[1]))
]);
Is there a way or example to use flutter_map and CrsSimple to achieve the same thing in Dart?
Thanks,
Upvotes: 2
Views: 524