Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map tiles showing shaded overlays instead of colored heatmap #18

Open
mitchstonegc opened this issue Feb 7, 2024 · 0 comments
Open

Comments

@mitchstonegc
Copy link

I am having what seems to be a tile rendering issue on IoS and Android but it works perfectly fine on web. Instead of showing a coloured heatmap it gives me tiles of shadows. I have a layer selection widget that uses toggles to turn layers on and off which works fine. I have a few other layers in this widget which work on all platforms, its just this heatmap...

I have a feeling that the tile is loaded differently on a mobile device but this is not really my domain.

Map layers state

List<Widget> mapLayers = [];

Sets the TileLayer for the map and the current location marker on init

@override
void initState() {
  reverseGeo().then(
    (location) => {
      setState(
        () {
          LatLng loc = LatLng(location.latitude!, location.longitude!);
          mapCenter = loc;
          mapLayers = [
            TileLayer(
              key: const Key("tile_layer"),
              urlTemplate:'https://atlas.microsoft.com/map/tile/png?subscription-key=${AppConfig.mapsApiKey}&api-version=1.0&layer=basic&style=main&zoom={z}&x={x}&y={y}',
              tileProvider: CancellableNetworkTileProvider(),
            ),
            currentLocationMarker(loc)
          ];
          isMapLoading = false;
        },
      )
    },
  );
  super.initState();
}

Function to add and remove the heatmap layer when toggled

void _manageLayer(String layer, bool toggled) {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        _rebuildStream.add(null);
    });
    if (toggled) {
      MyHeatmap.build(context).then(
        (value) => {
          setState(() {
            _addLayer(
              HeatMapLayer(
                key: Key(AppConfig.heatmap),
                  heatMapDataSource: InMemoryHeatMapDataSource(data: value),
                  heatMapOptions: HeatMapOptions(
                    radius: 50,
                    gradient: gradients[index],
                    minOpacity: 0.4,
                  ),
                  reset: _rebuildStream.stream,
                ),
             );
         }),
       },
     );
   } else {
      _removeLayer(AppConfig.heatmap);
   }
}

void _addLayer(layer) {
    setState(() {
        // Inserts layer at last index to keep location marker on top
        mapLayers.insert(mapLayers.length - 1, layer);
   });
}

mobile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant