Add CRS.SIMPLE support?

[fireyy]

Sometimes, maps do not represent things on the surface of the earth and, as such, do not have a concept of geographical latitude and geographical longitude. Most times this refers to big scanned images, such as game maps. CRS.Simple

[maratkalibek]

Any progress on this issue?

[strxetics]

It may already be implemented #191 Did somebody check that?

[johnpryan]

#191 was closed but if someone would like to implement and test it I'm happy to merge. There should also be an example app added to demonstrate.

[ftognetto]

@johnpryan which is the fork to be tested?

[johnpryan]

CrsSimple is now part of this package

[frankxzx]

it sounds like a good way to implement a custom 2D map with bitmap image and draw maker with pixel (x, y) and is there any demo for CRS.SIMPLE ?

[Dev-Owl]

Looking at the example for the web component and CRS Simple trying to adapt this for Flutter breaks first with the bounds for the image overlay. They have to be in the range of -90 to 90 / -180 to 180 as the latlong class doesn't allow other values. I removed this constraint but the result is not what I would expect. The zoom seems to be broken, I can't see the complete picture.

If anybody has a working example with an image and CRS Simple I would be happy :)

[Ronjack]

@Dev-Owl
this should be a working sample and nearest implementation for this: https://leafletjs.com/examples/crs-simple/crs-simple.html:

import 'package:flutter/material.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:proj4dart/proj4dart.dart' as proj4;

import 'zoom_and_add_buttons_plugin_option.dart';

class CRSSimpleMap extends StatefulWidget {
  @override
  State<CRSSimpleMap> createState() => _CRSSimpleMapState();
}

class _CRSSimpleMapState extends State<CRSSimpleMap> {
  final _mapController = MapController();

  final _markers = <Marker>[];

  final _imageHeight = 1552.0;

  final _imageWidth = 1404.0;

  final double _minZoom = 1;

  final double _maxZoom = 4;

  final _overlayImages = <OverlayImage>[];

  proj4.Point _point = proj4.Point(x: 0, y: 0);

  @override
  void initState() {
    _mapController.onReady.then((_) {
      final _northEast = _mapController.pointToLatLng(CustomPoint(_imageWidth, 0))!;

      final _southWest = _mapController.pointToLatLng(CustomPoint(0, _imageHeight))!;

      _mapController.fitBounds(LatLngBounds(_southWest, _northEast));
      _overlayImages.add(
        OverlayImage(
          bounds: _mapController.bounds!,
          gaplessPlayback: false,
          opacity: 0.6,
          imageProvider: Image.asset(
            'assets/images/X.png',
          ).image,
        ),
      );
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.only(top: 8.0, bottom: 2.0),
          child: Text(
            '(LAT: ${_point.x.toStringAsFixed(5)}, LONG: ${_point.y.toStringAsFixed(5)})',
          ),
        ),
        Expanded(
          child: FlutterMap(
            mapController: _mapController,
            options: MapOptions(
              onTap: (tapPosition, latLng) {
                setState(() {
                  _point = proj4.Point(x: latLng.latitude, y: latLng.longitude);
                  _markers.add(
                    Marker(
                      width: 100.0,
                      height: 100.0,
                      point: latLng,
                      anchorPos: AnchorPos.align(AnchorAlign.center),
                      builder: (ctx) => Icon(
                        Icons.circle_outlined,
                        color: Colors.black,
                      ),
                    ),
                  );
                });
              },
              plugins: [
                ZoomAndAddButtonsPlugin(),
              ],
              minZoom: _minZoom,
              maxZoom: _maxZoom,
            ),
            layers: [
              OverlayImageLayerOptions(overlayImages: _overlayImages),
              MarkerLayerOptions(markers: _markers),
            ],
          ),
        ),
      ],
    );
  }
}

@johnpryan I had problems with the CrsSimple() so I removed it and used the standard crs. because in this way I wasnt able to set the correct display boundaries(swPanBoundary/ nePanBoundary). I think this can be added into the example folder.