I am working on the map and hosting map on my own server. In addition, I also working to create my own style.json using maputnik and some manual works, and customize the icon with "sprite" as well. Moreover, I have the web app map running perfectly using Maplibre GL JS. And the problem come with my flutter mobile application, with exactly the same style.json & sprite but I dont see any icon show on the map. For example, icon of transportations, restaurants, banks...ect.
return MaplibreMap(
// zoom: _style!.zoom ?? 18,
doubleClickZoomEnabled: true,
minMaxZoomPreference: const MinMaxZoomPreference(0, 24),
compassEnabled: false,
styleString: _urlMapTheme(),
myLocationEnabled: true,
rotateGesturesEnabled: false,
tiltGesturesEnabled: true,
initialCameraPosition: CameraPosition(
target: currentPosition ?? centerPoint,
zoom: 18,
bearing: 0,
tilt: 5,
),
onMapCreated: (MaplibreMapController controller) {
debugPrint(
'--- [HomePage][MaplibreMap] onMapCreated');
// _controller = controller.setGeoJsonSource(sourceId, geojson)
},
onStyleLoadedCallback: () {
debugPrint(
'--- [HomePage][MaplibreMap] ');
},
onMapClick: (Point<double> point, LatLng latLng) {},
trackCameraPosition: true,
myLocationRenderMode: MyLocationRenderMode.NORMAL,
annotationOrder: const [
AnnotationType.line,
AnnotationType.circle,
AnnotationType.fill,
AnnotationType.symbol,
],
annotationConsumeTapEvents: const [
AnnotationType.fill,
AnnotationType.line,
AnnotationType.circle,
AnnotationType.symbol
],
);
My puspec.yaml:
maplibre_gl:
git:
url: https://github.com/m0nac0/flutter-maplibre-gl.git
ref: release-0.16.0