Customize icon Location user

[msyamsul725]

Is it possible to create a custom icon to replace the user's location icon in MapLibre Flutter? I would like to replace the default location icon (blue circle) with a custom marker or icon (e.g., a specific image). If it’s feasible, how can it be implemented? Are there any specific parameters or methods required to achieve this?

[josxha]

Unfortunally, no. For example on Android this would be possible by using the LocationComponentOptions but it is not implemented in flutter.
A workaround would be to create a Symbol with the Icon you want and update its position regulary.

[msyamsul725]

I have tried using the "add symbol" method with an example on the Place Symbol page. However, the icon does not appear when I apply the specified map style as shown here.

Future<void> _toggleDraggable() async {
    var draggable = _selectedSymbol!.options.draggable;
    draggable ??= false;

    _updateSelectedSymbol(
      SymbolOptions(draggable: !draggable),
    );
  }

  Future<void> _changeAlpha() async {
    var current = _selectedSymbol!.options.iconOpacity;
    current ??= 1.0;

    _updateSelectedSymbol(
      SymbolOptions(iconOpacity: current < 0.1 ? 1.0 : current * 0.75),
    );
  }

  Future<void> _changeRotation() async {
    var current = _selectedSymbol!.options.iconRotate;
    current ??= 0;
    _updateSelectedSymbol(
      SymbolOptions(iconRotate: current == 330.0 ? 0.0 : current + 30.0),
    );
  }

  Future<void> _toggleVisible() async {
    var current = _selectedSymbol!.options.iconOpacity;
    current ??= 1.0;

    _updateSelectedSymbol(
      SymbolOptions(iconOpacity: current == 0.0 ? 1.0 : 0.0),
    );
  }

  Future<void> _changeZIndex() async {
    var current = _selectedSymbol!.options.zIndex;
    current ??= 0;
    _updateSelectedSymbol(
      SymbolOptions(zIndex: current == 12 ? 0 : current + 1),
    );
  }

  Future<void> _getLatLng() async {
    final latLng = await controller!.getSymbolLatLng(_selectedSymbol!);
    if (!mounted) return;

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(latLng.toString()),
      ),
    );
  }

  Future<void> _changeIconOverlap() async {
    setState(() {
      _iconAllowOverlap = !_iconAllowOverlap;
    });
    await controller!.setSymbolIconAllowOverlap(_iconAllowOverlap);
    await controller!.setSymbolTextAllowOverlap(_iconAllowOverlap);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Center(
          child: SizedBox(
            width: 300.0,
            height: 200.0,
            child: MapLibreMap(
              onMapCreated: _onMapCreated,
              onStyleLoadedCallback: _onStyleLoaded,
              initialCameraPosition: const CameraPosition(
                target: LatLng(-33.852, 151.211),
                zoom: 11.0,
              ),
                    styleString: '''{
                                      "version": 8,
                                      "sources": {
                      "OSM": {
                        "type": "raster",
                        "tiles": [
                          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                          "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
                          "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        ],
                        "tileSize": 256,
                        "attribution": "© OpenStreetMap contributors",
                        "maxzoom": 18
                      }
                                      },
                                      "layers": [
                      {
                        "id": "OSM-layer",
                        "source": "OSM",
                        "type": "raster"
                      }
                                      ]
                                    }''',
            ),
          ),
        ),