Simplecode Map Preview

About app

Simplecode Map Preview is an application which presents you a map of the world. There are four types of maps available in the app. It shows your current location on a map, as well as the destinations you've marked and searched for. It also shows the distance between the destinations and directions to them and thus guides you step by step.

🛠 App languages

Mobile app: Dart and Flutter

Features

• Google Map example
• Yandex Map example
• OSM Map example
• Navigation with MapBox example

Logic of app

Before working with maps, the application will ask you for permission to get your current location and take your coordinates (Latitude, Longitude). All this logic is contained in a block called location_bloc. After that it gives the coordinates to another block (address_bloc), which manages the state of all maps.

 try {
      if (await location.requestService()) {
        await location.getLocation().then((location) {
          latitude = location.latitude;
          longitude = location.longitude;
        });
        ...
      }
    } catch (_) {
      final response = await api.getIpAddress();
      ...
    }

Google Map

  BlocBuilder<AddressBloc, AddressState>(
        builder: (context, state) {
          return GoogleMap(
            initialCameraPosition: CameraPosition(
              target: LatLng(widget.latitude!, widget.longitude!),
              zoom: 1,
            ),
            onMapCreated: (GoogleMapController googleMapController) {
              _baseController = googleMapController;
              if (widget.locationStatus == PermissionStatus.granted) {
                _baseController?.animateCamera(
                  CameraUpdate.newLatLngZoom(
                    LatLng(widget.latitude!, widget.longitude!),
                    18,
                  ),
                );
              }

              _controller.complete(googleMapController);
            },
            polylines: state.polylineGoogle?.cast<Polyline>() ?? {},
            markers: state.markersGoogle ?? {},
            onTap: (latLng) {
              if (widget.connectionStatus == ConnectionStatus.online) {
                BlocProvider.of<AddressBloc>(context).add(
                  AddressEvent.initAddress(
                    lat: latLng.latitude,
                    lng: latLng.longitude,
                    selectionObject: true,
                  ),
                );
              }
            },
          );
        },
      ),

Yandex Map

BlocBuilder<AddressBloc, AddressState>(
      builder: (context, state) {
          return YandexMap(
            onMapCreated: (YandexMapController yandexMapController) async {
              _baseController = yandexMapController;
              if (widget.locationStatus == PermissionStatus.granted) {
                yandexMapController.moveCamera(
                  CameraUpdate.newCameraPosition(
                    CameraPosition(
                      target: Point(
                        latitude: widget.latitude!,
                        longitude: widget.longitude!,
                      ),
                      zoom: 16,
                    ),
                  ),
                  animation: const MapAnimation(
                    duration: 2.0,
                  ),
                );
              }
              _controller.complete(yandexMapController);
            },
            onMapTap: (point) {
              if (widget.connectionStatus == ConnectionStatus.online) {
                BlocProvider.of<AddressBloc>(context).add(AddressEvent.initAddress(
                  lat: point.latitude,
                  lng: point.longitude,
                  selectionObject: true,
                ));
              }
            },
            mapObjects: [
              ...state.markersYandex ?? [],
              ...state.polylineYandex ?? [],
            ],
          );
        },
      ),

OSM Map

BlocBuilder<AddressBloc, AddressState>(
        builder: (context, state) {
          return OSMFlutter(
            controller: mapController,
            initZoom: widget.locationStatus == PermissionStatus.granted ? 18 : 2,
            stepZoom: 5,
            staticPoints: [
              if (widget.locationStatus == PermissionStatus.granted)
                StaticPositionGeoPoint(
                  Constants.keyCurrLoc,
                  MarkerIcon(
                    assetMarker: AssetMarker(
                      image: AssetImage(AppAssets.images.location),
                    ),
                  ),
                  [
                    GeoPoint(
                      latitude: widget.latitude!,
                      longitude: widget.longitude!,
                    ),
                  ],
                ),
            ],
          );
        },
      ),

Presentation Mobile App