Skip to content

Flutter implementation of the ArcGis map framework by esri

License

Notifications You must be signed in to change notification settings

fluttercommunity/arcgis_map_sdk

Repository files navigation

Arcgis Maps SDK for Flutter

Flutter Community: arcgis_map_sdk

Arcgis on iPad

Setup

Add the package to your app

In your app's pubspec.yaml dependencies, add:

dependencies:
  arcgis_map_sdk: ^0.8.0

Android only setup

(Android) In <app>/android/app/proguard-rules.pro add:

-keep class dev.fluttercommunity.arcgis_map_sdk_android.** { *; }

Use ArcgisMap

Integrate the ArcgisMap Widget

import 'package:arcgis_map_sdk/arcgis_map_sdk.dart';
import 'package:arcgis_map_sdk_platform_interface/arcgis_map_sdk_platform_interface.dart';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ArcgisMap(
        apiKey: arcGisApiKey,
        initialCenter: const LatLng(51.16, 10.45),
        zoom: 8,
        mapStyle: MapStyle.twoD,
        basemap: BaseMap.arcgisChartedTerritory,
        onMapCreated: (controller) async {
          
          const pinLayerId = 'pins';
          await controller.addGraphic(
            layerId: pinLayerId,
            graphic: PointGraphic(
              latitude: 51.091062,
              longitude: 6.880812,
              attributes: Attributes({
                'id': 'phntm',
                'name': 'PHNTM GmbH',
                'family': 'Office',
              }),
              symbol: const PictureMarkerSymbol(
                webUri:
                "https://github.com/fluttercommunity/arcgis_map/assets/1096485/94178dba-5bb8-4f1e-a160-31bfe4c93d17",
                mobileUri:
                "https://github.com/fluttercommunity/arcgis_map/assets/1096485/94178dba-5bb8-4f1e-a160-31bfe4c93d17",
                width: 314 / 2,
                height: 120 / 2,
              ),
            ),
          );

          await controller.addGraphic(
            layerId: pinLayerId,
            graphic: PointGraphic(
              latitude: 48.1234963,
              longitude: 11.5910182,
              attributes: Attributes({
                'id': 'tapped',
                'name': 'Tapped UG',
                'family': 'Office',
              }),
              symbol: const PictureMarkerSymbol(
                webUri:
                "https://github.com/fluttercommunity/arcgis_map/assets/1096485/c84c524c-78b7-46e5-9bf1-a3a91853b2cf",
                mobileUri:
                "https://github.com/fluttercommunity/arcgis_map/assets/1096485/c84c524c-78b7-46e5-9bf1-a3a91853b2cf",
                width: 312 / 2,
                height: 111 / 2,
              ),
            ),
          );
        },
      ),
    );
  }

Checkout the example app example/lib/main.dart for more details.

Platform support

Feature web ios android
3D Map
Vector tiles
centerPosition
rotation
setInteraction
addViewPadding
toggleBaseMap
moveCamera
moveCameraToPoints
use AutoPanMode
exportImage
zoomIn
zoomOut
getZoom
addGraphic
removeGraphic
updateGraphicSymbol
getGraphicsInView
getVisibleGraphicIds
FeatureLayer
updateFeatureLayer
destroyLayer
mouse cursor
visibleGraphics
getBounds
attributionText
onClickListener
polygonContainsPoint

Development

  1. Clone the repository.
  2. cd into the project directory.
  3. Run ./am deps and ensure it completes without errors.

The project has its own collection of scripts wrapped into one convenient command called am. Run ./am -h to explore what the command can do. This uses the cli tool https://github.com/phntmxyz/sidekick.