{"id":16647776,"url":"https://github.com/liodali/osm_flutter","last_synced_at":"2025-05-15T14:06:07.783Z","repository":{"id":37075503,"uuid":"242330397","full_name":"liodali/osm_flutter","owner":"liodali","description":"OpenStreetMap plugin for flutter","archived":false,"fork":false,"pushed_at":"2025-05-07T16:13:56.000Z","size":29300,"stargazers_count":248,"open_issues_count":151,"forks_count":108,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-07T16:51:47.286Z","etag":null,"topics":["dart","flutter","kotlin","map","osm","osm-flutter","swift","web-support"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_osm_plugin","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liodali.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["liodali"],"custom":["https://www.buymeacoffee.com/dalihamza"]}},"created_at":"2020-02-22T11:32:54.000Z","updated_at":"2025-05-07T16:14:01.000Z","dependencies_parsed_at":"2024-05-19T16:31:35.548Z","dependency_job_id":"1b90336c-8514-461f-a05e-0dc8bf0e4ad0","html_url":"https://github.com/liodali/osm_flutter","commit_stats":{"total_commits":1506,"total_committers":16,"mean_commits":94.125,"dds":0.03984063745019917,"last_synced_commit":"8fd02a6093a26475fdb72e9659828043f81c9006"},"previous_names":[],"tags_count":254,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liodali%2Fosm_flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liodali%2Fosm_flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liodali%2Fosm_flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liodali%2Fosm_flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liodali","download_url":"https://codeload.github.com/liodali/osm_flutter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","flutter","kotlin","map","osm","osm-flutter","swift","web-support"],"created_at":"2024-10-12T08:45:45.144Z","updated_at":"2025-05-15T14:06:02.772Z","avatar_url":"https://github.com/liodali.png","language":"Dart","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/liodali/osm_flutter/0.70.1/.github/OSM%20Flutter%20Logo.png?sanitize=true\" width=\"500px\"\u003e\n\u003c/p\u003e\n\n# flutter_osm_plugin \n\n![pub](https://img.shields.io/badge/pub-v1.3.7-blue)   \n\n\n## Platform Support\n| Android | iOS | Web |\n|:---:|:---:|:---:|\n| supported :heavy_check_mark: | supported :heavy_check_mark: (min iOS supported : 13) | supported :heavy_check_mark: |\n\n\n\u003cb\u003eosm plugin for flutter apps \u003c/b\u003e\n\n* current position (Android/iOS/web)\n* change position (Android/iOS/web) \n* create Marker manually (Android/iOS/web)\n* tracking user location (Android/iOS/web)\n* customize Icon Marker (Android/iOS/web)\n* customize user Marker (Android/iOS/web)\n* assisted selection position (Android/iOS)\n* set BoundingBox (Android/iOS/Web)\n* zoom into region (Android/iOS/web)\n* draw Road  (Android/iOS/web)\n* draw dotted Road (Android/iOS/web)\n* recuperate information (instruction/duration/distance) of the current road  (Android/iOS/web)\n* draw Road manually (Android/iOS/web)\n* draw multiple Roads  (Android/iOS/web)\n* ClickListener on Marker (Android/iOS/web)\n* ClickListener on Map (Android/iOS/web)\n* calculate distance between 2 points \n* address suggestion\n* draw shapes (Android/iOS/web)\n* simple dialog location picker (Android/iOS)\n* listen to region change (Android/iOS/Web)\n* set custom tiles (Android/iOS/Web) \n\n\n## Getting Started\n\u003cimg src=\"https://github.com/liodali/osm_flutter/blob/master/osm.gif?raw=true\" alt=\"openStreetMap flutter examples\"\u003e\u003cbr\u003e\n\u003cbr\u003e\n\u003cimg src=\"https://github.com/liodali/osm_flutter/blob/0.41.0/tileLayerRuntime.gif?raw=true\" alt=\"openStreetMap flutter examples\" width=260\u003e\u003cbr\u003e\n\u003cbr\u003e\n\u003cimg src=\"https://github.com/liodali/osm_flutter/blob/master/dialogSimplePickerLocation.gif?raw=true\" alt=\"openStreetMap flutter examples\"\u003e\u003cbr\u003e\n\n## Installing\n\nAdd the following to your `pubspec.yaml` file:\n\n    dependencies:\n      flutter_osm_plugin: ^1.3.7\n\n\n\n## Integration with Hooks\n\n\u003e To use our map library with `Flutter_Hooks` library use our new extension library\nhttps://pub.dev/packages/osm_flutter_hooks\nmany thanks for @ben-xD\n\n### Migration to `0.41.2` (Android Only)\n\n\u003e open file build.gradle inside android file\n\n    * change kotlin version from `1.5.21` to `1.7.20`\n    * change gradle version from `7.0.4` to `7.1.3`\n    * change compileSdkVersion to 33\n\n\n### Migration to `0.34.0` (Android Only)\n\u003e if you are using this plugin before Flutter 3\n\n\u003e you should make some modification in build.gradle before that run flutter clean \u0026\u0026 flutter pub get\n\n\u003e open file build.gradle inside android file\n\n    * change kotlin version from `1.5.21` to `1.6.21`\n    * change gradle version from `7.0.2` to `7.1.3` or `7.0.4`\n    * change compileSdkVersion to 32\n    \n### Migration to `0.16.0` (Android Only)\n\u003e if you are using this plugin before Flutter 2 \n\n\u003e you should make some modification in build.gradle before that run flutter clean \u0026\u0026 flutter pub get\n\n\u003e open file build.gradle inside android file\n\n    * change kotlin version from `1.4.21` to `1.5.21`\n    * change gradle version from `4.1.1` to `7.0.2`\n\n### For web integration\n\n\u003e To show buttons,UI that have to manage user click over the map, you should use this library : `pointer_interceptor`\n\n\n## Simple Usage\n#### Creating a basic `OSMFlutter` :\n  \n  \n```dart\n OSMFlutter( \n        controller:mapController,\n        osmOption: OSMOption(\n              userTrackingOption: UserTrackingOption(\n              enableTracking: true,\n              unFollowUser: false,\n            ),\n            zoomOption: ZoomOption(\n                  initZoom: 8,\n                  minZoomLevel: 3,\n                  maxZoomLevel: 19,\n                  stepZoom: 1.0,\n            ),\n            userLocationMarker: UserLocationMaker(\n                personMarker: MarkerIcon(\n                    icon: Icon(\n                        Icons.location_history_rounded,\n                        color: Colors.red,\n                        size: 48,\n                    ),\n                ),\n                directionArrowMarker: MarkerIcon(\n                    icon: Icon(\n                        Icons.double_arrow,\n                        size: 48,\n                    ),\n                ),\n            ),\n            roadConfiguration: RoadOption(\n                    roadColor: Colors.yellowAccent,\n            ),\n            markerOption: MarkerOption(\n                defaultMarker: MarkerIcon(\n                    icon: Icon(\n                      Icons.person_pin_circle,\n                      color: Colors.blue,\n                      size: 56,\n                    ),\n                )\n            ),\n        )\n    );\n\n```\n\n## MapController\n\n\u003e Declare `MapController` to control OSM map \n \n\u003cb\u003e1) Initialisation \u003c/b\u003e\n\n\u003e **Note**\n\u003e using the default constructor, you should use `initMapWithUserPosition` or `initPosition`\n\u003e if you want the map to initialize using static position use the named constructor `withPosition`\n\u003e or if you want to initialize the map with user position use `withUserPosition`\n\n```dart\n// default constructor\n MapController controller = MapController(\n                            initPosition: GeoPoint(latitude: 47.4358055, longitude: 8.4737324),\n                            areaLimit: BoundingBox( \n                                east: 10.4922941, \n                                north: 47.8084648, \n                                south: 45.817995, \n                                west:  5.9559113,\n                      ),\n            );\n// or set manually init position\n final controller = MapController.withPosition(\n            initPosition: GeoPoint(\n              latitude: 47.4358055,\n              longitude: 8.4737324,\n          ),\n);\n// init the position using the user location\nfinal controller = MapController.withUserPosition(\n        trackUserLocation: UserTrackingOption(\n           enableTracking: true,\n           unFollowUser: false,\n        )\n)\n\n// init the position using the user location and control map from outside\nfinal controller = MapController.withUserPosition(\n        trackUserLocation: UserTrackingOption(\n           enableTracking: true,\n           unFollowUser: false,\n        ),\n         useExternalTracking: true\n)\n```\n\n\n\n\u003cb\u003e2) Dispose \u003c/b\u003e\n\n```dart\n     controller.dispose();\n```\n\n\u003cb\u003e 3) Properties  of default `MapController` \u003c/b\u003e\n\n\u003e `MapController` has 2 named Constructor `MapController.withPosition`,\n`MapController.withUserPosition` to control initialization of the Map\n\n| Properties                   |  Description                                                        |\n| ---------------------------- | ----------------------------------------------------------------------- |\n| `initMapWithUserPosition`    | (UserTrackingOption?) initialize map with user position   |\n| `initPosition`               | (GeoPoint) if it isn't null, the map will be pointed at this position   |\n| `areaLimit`                  | (Bounding) set area limit of the map (default BoundingBox.world())   |\n| `customLayer`                | (CustomTile) set customer layer  using different osm server , this attribute used only with named constructor `customLayer`  |\n| ` useExternalTracking`       | (bool) if true,we will disable our logic to show userlocation marker or to move to the user position |\n\n\n\u003cb\u003e 3.1) Custom Layers with  `MapController` \u003c/b\u003e\n\n* To change the tile source in OSMFlutter, you should used our named constructor `customLayer`, see the example below\n\n```dart\n\ncontroller = MapController.customLayer(\n      initPosition: GeoPoint(\n        latitude: 47.4358055,\n        longitude: 8.4737324,\n      ),\n      customTile: CustomTile(\n        sourceName: \"opentopomap\",\n        tileExtension: \".png\",\n        minZoomLevel: 2,\n        maxZoomLevel: 19,\n        urlsServers: [\n         TileURLs(\n            //\"https://tile.opentopomap.org/{z}/{x}/{y}\"\n            url: \"https://tile.opentopomap.org/\",\n            subdomains: [],\n          )\n        ],\n        tileSize: 256,\n      ),\n    )\n\n```\n\n* also,you can use our predefined custom tiles like \n* `cyclOSMLayer` constructor for cycling tiles\n* `publicTransportationLayer` constructor for transport tiles ,it's public osm server\n* we support full server path like `(\"https://tile.opentopomap.org/{z}/{x}/{y}\")`\n\nFor more example see our example in `home_example.dart`\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cb\u003e 3.2) Change Layers in runtime \u003c/b\u003e\n\n```dart\n await controller.changeTileLayer(tileLayer: CustomTile(...));\n```\n\u003cb\u003e4) Set map on user current location \u003c/b\u003e\n\n```dart\n await controller.currentLocation();\n\n```\n\u003cb\u003e 5) Zoom IN \u003c/b\u003e\n\n```dart\n await controller.setZoom(stepZoom: 2);\n // or \n await controller.zoomIn();\n```\n\n\u003cb\u003e 5.1) Zoom Out \u003c/b\u003e\n\n```dart\n await controller.setZoom(stepZoom: -2);\n // or \n await controller.zoomOut();\n \n```\n\u003cb\u003e 5.2) change zoom level \u003c/b\u003e\n\n\u003e `zoomLevel` should be between `minZoomLevel` and `maxZoomLevel`\n\n```dart\n await controller.setZoom(zoomLevel: 8);\n```\n\u003cb\u003e 5.3) zoom to specific bounding box \u003c/b\u003e\n\n```dart\nawait controller.zoomToBoundingBox(BoundingBox(),paddingInPixel:0)\n```\n\n##### Note : \n\n* For the box attribute ,If you don't have bounding box,you can use list of geopoint like this `BoundingBox.fromGeoPoints`\n\n\u003cb\u003e 6) get current zoom level \u003c/b\u003eb\u003e\n\n```dart\nawait controller.getZoom();\n```\n\n\u003cb\u003e 7) BoundingBox \u003c/b\u003e\n\n\u003e set bounding box in the map\n\n```dart\nawait controller.limitAreaMap(BoundingBox( east: 10.4922941, north: 47.8084648, south: 45.817995, west: 5.9559113,));\n```\n\u003e remove bounding box in the map\n\n```dart\nawait controller.removeLimitAreaMap();\n```\n\n\n\u003cb\u003e 8)  Track user current position \u003c/b\u003e\n\n\u003e for iOS,you should add those line in your info.plist file\n```text\n   \u003ckey\u003eNSLocationWhenInUseUsageDescription\u003c/key\u003e\n\t\u003cstring\u003eany text you want\u003c/string\u003e\n\t\u003ckey\u003eNSLocationAlwaysUsageDescription\u003c/key\u003e\n\t\u003cstring\u003eany text you want\u003c/string\u003e\n``` \n\u003e from version 0.40.0 we can call only `enableTracking` will animate to user location \nwithout need to call `currentLocation`\n\n\u003e when `enableStopFollow` is true,map will not be centered if the user location changed\n\n\u003e you can disable rotation of personIcon using [disableUserMarkerRotation] (default: false)\n\n```dart\n await controller.enableTracking(enableStopFollow:false,);\n```\nor \n\n\u003e use this method below if you want to control the map(move to the user location and show the marker) while receiving the user location\n\n```dart\n await controller.startLocationUpdating();\n```\n\u003cb\u003e 9) Disable tracking user position \u003c/b\u003e\n\n```dart\n await controller.disabledTracking();\n```\nor \n\n\u003e use this method below if you already used `startLocationUpdating`\n\n```dart\n await controller.stopLocationUpdating();\n```\n\n\u003cb\u003e10) update the location \u003c/b\u003e\n\n\u003e Change the location without create marker\n\n```dart\n await controller.moveTo(GeoPoint(latitude: 47.35387, longitude: 8.43609),animate:true);\n```\n\n\n\u003cb\u003e 11) recuperation current position \u003c/b\u003e\n\n```dart\n GeoPoint geoPoint = await controller.myLocation();\n```\n\u003cb\u003e 12) get center map \u003c/b\u003e\n\n```dart\nGeoPoint centerMap = await controller.centerMap;\n```\n\u003cb\u003e 12.1) get geoPoint in the map \u003c/b\u003e\n\n* recuperate geoPoint of marker add it by user except static points\n\n```dart\nList\u003cGeoPoint\u003e geoPoints = await controller.geopoints;\n```\n\u003cb\u003e 13) get bounding box  map \u003c/b\u003e\n\n```dart\nBoundingBox bounds = await controller.bounds;\n```\n\n\u003cb\u003e 14) Map Listener  \u003c/b\u003e\n\n\u003e Get GeoPoint from  listener from controller directly\n (for more example: see home_example.dart )\n\na.1) single tap listener\n```dart\ncontroller.listenerMapSingleTapping.addListener(() {\n      if (controller.listenerMapSingleTapping.value != null) {\n        /// put you logic here\n      }\n    });\n```\na.2) long tap listener\n```dart\ncontroller.listenerMapLongTapping.addListener(() {\n      if (controller.listenerMapLongTapping.value != null) {\n        /// put you logic here\n      }\n    });\n```\na.3) region change listener\n```dart\ncontroller.listenerRegionIsChanging.addListener(() {\n      if (controller.listenerRegionIsChanging.value != null) {\n        /// put you logic here\n      }\n    });\n```\n\u003cb\u003e15) Create Marker Programmatically \u003c/b\u003e\n\n\u003e you can change marker icon by using attribute `markerIcon`\n\u003e the angle value should be between [0,2pi]\n\u003e set anchor of ther Marker\n\n```dart\nawait controller.addMarker(GeoPoint,\n      markerIcon:MarkerIcon,\n      angle:pi/3,\n      anchor:IconAnchor(anchor: Anchor.top,)\n);\n```\n \u003cb\u003e 15.1) Update Marker \u003c/b\u003e\n\n \u003e you can change the location,icon,angle,anchor of the specific marker\n\n \u003e The old configuration of the Marker will be keep it the same if not specificied\n\n\n```dart\nawait controller.changeLocationMarker(oldGeoPoint,newGeoPoint,MarkerIcon,angle,IconAnchor);\n```\n\n\u003cb\u003e 15.2) Change Icon Marker  \u003c/b\u003e\n\n\u003e You can change marker icon by using attribute `markerIcon` of existing Marker\n\u003e The GeoPoint/Marker should be exist\n\n```dart\nawait controller.setMarkerIcon(GeoPoint,MarkerIcon);\n```\n\n\u003cb\u003e 15.3) Remove marker \u003c/b\u003e\n\n```dart\n await controller.removeMarker(geoPoint);\n```\n* PS : static position cannot be removed by this method \n\n\n\u003cb\u003e16) Draw road,recuperate instructions ,distance in km and duration in sec\u003c/b\u003e\n\n\u003e you can add an middle position to pass your route through them\n\u003e change configuration of the road in runtime\n\u003e zoom into the region of the road\n\u003e change the type of the road that user want to use\n\n```dart\n RoadInfo roadInfo = await controller.drawRoad( \n   GeoPoint(latitude: 47.35387, longitude: 8.43609),\n   GeoPoint(latitude: 47.4371, longitude: 8.6136),\n   roadType: RoadType.car,\n   intersectPoint : [ GeoPoint(latitude: 47.4361, longitude: 8.6156), GeoPoint(latitude: 47.4481, longitude: 8.6266)]\n   roadOption: RoadOption(\n       roadWidth: 10,\n       roadColor: Colors.blue,\n       zoomInto: true,\n   ),\n);\n print(\"${roadInfo.distance}km\");\n print(\"${roadInfo.duration}sec\");\n print(\"${roadInfo.instructions}\");\n```\n\n\n### properties of `RoadOption` \n\n\n| Properties               | Description                         |\n| ------------------------ | ----------------------------------- |\n| `roadColor`              | (Color) required Field,  change the default color of the route in runtime    |\n| `roadWidth`              | (double) change the road width, default value 5.0       |\n| `roadBorderColor`        | (Color?) set color of border polyline       |\n| `roadBorderWidth`        | (double?) set border width of polyline, if width null or 0,polyline will drawed without border |\n| `zoomInto`               | (bool)  change zoom level to make the all the road visible (default:true)    |\n| `isDotted`               | (bool)  to draw dotted polyline   (default: false)    |\n\n**Note** drawing dotted polyline has limitation on web where we cannot draw dotted poyline with borderWidth \u003e 0 \n\n\u003cb\u003e 16.b) draw road manually \u003c/b\u003e\n```dart\nawait controller.drawRoadManually(\n        waysPoint,\n        interestPointIcon: MarkerIcon(\n          icon: Icon(\n            Icons.location_history,\n            color: Colors.black,\n          ),\n        ),\n        interestPoints: [waysPoint[3],waysPoint[6]],\n        zoomInto: true\n)\n```\n\n\u003cb\u003e17) Delete last road \u003c/b\u003e\n\n```dart\n await controller.removeLastRoad();\n```\n\n\u003cb\u003e18) draw multiple roads \u003c/b\u003e\n\n```dart\nfinal configs = [\n      MultiRoadConfiguration(\n        startPoint: GeoPoint(\n          latitude: 47.4834379430,\n          longitude: 8.4638911095,\n        ),\n        destinationPoint: GeoPoint(\n          latitude: 47.4046149269,\n          longitude: 8.5046595453,\n        ),\n      ),\n      MultiRoadConfiguration(\n          startPoint: GeoPoint(\n            latitude: 47.4814981476,\n            longitude: 8.5244329867,\n          ),\n          destinationPoint: GeoPoint(\n            latitude: 47.3982152237,\n            longitude: 8.4129691189,\n          ),\n          roadOptionConfiguration: MultiRoadOption(\n            roadColor: Colors.orange,\n          )),\n      MultiRoadConfiguration(\n        startPoint: GeoPoint(\n          latitude: 47.4519015578,\n          longitude: 8.4371175094,\n        ),\n        destinationPoint: GeoPoint(\n          latitude: 47.4321999727,\n          longitude: 8.5147623089,\n        ),\n      ),\n    ];\n    await controller.drawMultipleRoad(\n      configs,\n      commonRoadOption: MultiRoadOption(\n        roadColor: Colors.red,\n      ),\n    );\n\n```\n\n\u003cb\u003e19) delete all roads \u003c/b\u003e\n\n```dart \n await controller.clearAllRoads();\n```\n\n\n\u003cb\u003e20) Change static GeoPoint position \u003c/b\u003e\n\n\u003e add new staticPoints with empty list of geoPoints (notice: if you add static point without marker,they will get default maker used by plugin)\n\n\u003e change their position over time\n\n\u003e  change orientation of the static GeoPoint with `GeoPointWithOrientation`\n\n\n```dart\n await controller.setStaticPosition(List\u003cGeoPoint\u003e geoPoints,String id );\n```\n\u003cb\u003e21) Change/Add Marker old/new static GeoPoint position \u003c/b\u003e\n\n\u003e add marker of new static point\n\n\u003e change their marker of existing static geoPoint over time\n\n```dart\n await controller.setMarkerOfStaticPoint(String id,MarkerIcon markerIcon );\n```\n\n\u003cb\u003e22) change orientation of the map\u003c/b\u003e\n\n```dart\n await controller.rotateMapCamera(degree);\n```\n\n\u003cb\u003e23) Draw Shape in the map \u003c/b\u003e\n\n* Circle\n```dart\n /// to draw\n await controller.drawCircle(CircleOSM(\n              key: \"circle0\",\n              centerPoint: GeoPoint(latitude: 47.4333594, longitude: 8.4680184),\n              radius: 1200.0,\n              color: Colors.red,\n              borderColor:Colors.green,\n              strokeWidth: 0.3,\n            )\n          );\n /// to remove Circle using Key\n await controller.removeCircle(\"circle0\");\n\n /// to remove All Circle in the map \n await controller.removeAllCircle();\n\n```\n* Rect\n```dart\n /// to draw\n await controller.drawRect(RectOSM(\n              key: \"rect\",\n              centerPoint: GeoPoint(latitude: 47.4333594, longitude: 8.4680184),\n              distance: 1200.0,\n              color: Colors.red.withOpacity(0.4),\n              borderColor:Colors.green,\n              strokeWidth: 0.3,\n            ));\n /// to remove Rect using Key\n await controller.removeRect(\"rect\");\n\n /// to remove All Rect in the map \n await controller.removeAllRect();\n\n```\n* remove all shapes in the map\n```dart\n await controller.removeAllShapes();\n```\n\n### Interfaces:\n* OSMMixinObserver :\n\u003e contain listener methods to get event from native map view like when mapIsReady,mapRestored\n\n\u003e you should add ths line `controller.addObserver(this);` in initState\n\n\u003e override mapIsReady to implement your own logic after initialisation of the map\n\n\u003e `mapIsReady` will replace `listenerMapIsReady`\n\n| Methods                       | Description                         |\n| ----------------------------- | ----------------------------------- |\n| `mapIsReady`                  | (callback) Should be override this method, to get notified when map is ready to go or not |\n| `mapRestored`                 | (callback) Should be override this method, to get notified when map is restored you can also add you backup |\n| `onSingleTap`                 | (callback) Called when the user makes single click on map |\n| `onLongTap`                   | (callback) Called when the user makes long click on map |\n| `onRegionChanged`             | (callback) Notified when map is change region (on moves) |\n| `onRoadTap`                   | (callback) Notified when user click on the polyline (road) |\n| `onLocationChanged`           | (callback) Notified when user location changed  |\n\n\n** example \n```dart\nclass YourOwnStateWidget extends State\u003cYourWidget\u003e with OSMMixinObserver {\n\n   //etc\n  @override\n  void initState() {\n    super.initState();\n    controller.addObserver(this);\n  }\n    @override\n    Future\u003cvoid\u003e mapIsReady(bool isReady) async {\n      if (isReady) {\n        /// put you logic\n      }\n    }\n  @override\n  Future\u003cvoid\u003e mapRestored() async {\n    super.mapRestored();\n    /// TODO\n  }\n    @override\n  void onSingleTap(GeoPoint position) {\n    super.onSingleTap();\n    /// TODO\n  }\n\n  @override\n  void onLongTap(GeoPoint position) {\n    super.onLongTap();\n    /// TODO\n\n  }\n\n  @override\n  void onRegionChanged(Region region) {\n    super.onRegionChanged();\n    /// TODO\n  }\n\n  @override\n  void onRoadTap(RoadInfo road) {\n    super.onRoadTap();\n    /// TODO\n  }\n  @override\n  void onLocationChanged(GeoPoint userLocation) {\n    super.onLocationChanged();\n    /// TODO\n  }\n}\n```\n\n\n\n##  `OSMFlutter`\n\n| Properties                    | Description                         |\n| ----------------------------- | ----------------------------------- |\n| `mapIsLoading`                | (Widget)  show custom  widget when the map finish initialization     |\n| `osmOption`                   | (OSMOption) used to configure OSM Map such as zoom,road,userLocationMarker    |\n| `onGeoPointClicked`           | (callback) listener triggered when marker is clicked ,return current geoPoint of the marker         |\n| `onLocationChanged`           | (callback) it is fired when you activate tracking and  user position has been changed          |\n| `onMapMoved`                  | (callback) it is each the map moved user handler or navigate to another location using APIs       |\n| `onMapIsReady`                | (callback) listener trigger to get map is initialized or not |\n\n## `OSMOption` \n\n| Properties                    | Description                         |\n| ----------------------------- | ----------------------------------- |\n| `mapIsLoading`                | (Widget)  show custom  widget when the map finish initialization     |\n| `trackMyPosition`             | enable tracking user position.     |\n| `showZoomController`          | show default zoom controller.       |\n| `userLocationMarker`          | change user marker or direction marker icon in tracking location                |\n| `markerOption`                | configure marker of osm map                   |\n| `zoomOption`                  | set  configuration for zoom in the Map\n| `roadConfiguration`           | (RoadOption) set  default color,width,borderColor,borderWdith for polylines |\n| `staticPoints`                | List of Markers you want to show always ,should every marker have unique id |\n| `showContributorBadgeForOSM`  | (bool) enable to show copyright widget of osm in the map  |\n| `enableRotationByGesture`     | (bool) enable to rotation gesture for map, default: false  |\n| `showDefaultInfoWindow`       | (bool) enable/disable default infoWindow of marker (default = false)         |\n| `isPicker`                    | (bool) enable advanced picker from init of  the map (default = false)         |\n\n\n## `ZoomOption`\n\n| Properties                    | Description                                                  |\n| ----------------------------- | ------------------------------------------------------------ |\n| `stepZoom`                    | set step zoom to use in zoomIn()/zoomOut() (default 1)       |\n| `initZoom`                    | set init zoom level in the map (default 10)                  |\n| `maxZoomLevel`                | set maximum zoom level in the map  (2 \u003c= x \u003c= 19)            |\n| `minZoomLevel`                | set minimum zoom level in the map  (2 \u003c= x \u003c= 19 )           |\n\n### Custom Controller\n\u003e To create your own MapController to need to extends from `BaseMapController`,\n\u003e if you want to make a custom initialization to need to call init() and put your code after super.init()\n\n* example\n```dart\nclass CustomMapController extends BaseMapController {\n\n  @override\n  void dispose() {\n    /// TODO put you logic here\n    super.dispose();\n  }\n\n  @override\n  void init() {\n    super.init();\n    /// TODO put you logic here\n  }\n}\n```\n### STATIC Map: \n\n\u003e using `OSMViewer` we can show static map that contain on location\n\n\n```dart\nOSMViewer(\n        controller: SimpleMapController(\n          initPosition: GeoPoint(\n              latitude: 47.4358055,\n              longitude: 8.4737324,\n          ),\n        markerHome: const MarkerIcon(\n            icon: Icon(Icons.home),\n          ),\n        ),\n        zoomOption: const ZoomOption(\n        initZoom: 16,\n        minZoomLevel: 11,\n    )\n\n```\n\n\n## STATIC METHODS:\n\n\u003cb\u003e1) Calculate distance between 2 geoPoint position \u003c/b\u003e\n```dart\n double distanceEnMetres = await distance2point(GeoPoint(longitude: 36.84612143139903,latitude: 11.099388684927824,),\n        GeoPoint( longitude: 36.8388023164018, latitude: 11.096959785428027, ),);\n```\n\n\u003cb\u003e2) Get search Suggestion of text \u003c/b\u003e\n\n\u003e  you should know that i'm using public api, don't make lot of request\n\n```dart\n    List\u003cSearchInfo\u003e suggestions = await addressSuggestion(\"address\");\n```\n\n## show dialog picker\n\n\u003e simple dialog  location picker to selected user location   \n\n```dart\nGeoPoint p = await showSimplePickerLocation(\n                      context: context,\n                      isDismissible: true,\n                      title: \"Title dialog\",\n                      textConfirmPicker: \"pick\",\n                      initCurrentUserPosition: true,\n                    )\n```\n\n## CustomLocationPicker\n\u003e customizable widget to build  search location  \n\n\u003e you should use `PickerMapController` as controller for the widget\n see example  :  [ search widget ](https://github.com/liodali/osm_flutter/blob/master/example/lib/search_example.dart) \n\n#### Properties of `CustomLocationPicker`\n\n\n| Properties               | Description                         |\n| ------------------------ | ----------------------------------- |\n| `controller`             | (PickerMapController) controller of the widget     |\n| `appBarPicker`           | (AppBar) appbar for the widget        |\n| `topWidgetPicker`        | (Widget?) widget will be show on top of osm map,for example to show address suggestion                     |\n| `bottomWidgetPicker`     | (Widget?) widget will be show at bottom of screen for example to show more details about selected location or more action       |\n\n\n\n## NOTICE:\n\u003e `For now the map working for android,iOS , web will be available soon `\n\n\u003e ` If you get ssl certfiction exception,use can use http by following instruction below `\n\n\u003e ` If you want to use http in Android PIE or above : `\n  * enable useSecureURL and add ` android:usesCleartextTraffic=\"true\" `  in your manifest like example below :\n\n    * ` \u003capplication\n        ...\n        android:usesCleartextTraffic=\"true\"\u003e \n        `\n\u003e if you faced build error in fresh project you need to follow those instruction [#40](https://github.com/liodali/osm_flutter/issues/40)\n    \n    1) remove flutter_osm_plugin from pubspec, after that pub get\n    2) open android module in android studio ( right click in name of project -\u003e flutter-\u003e open android module in android studio)\n    3) update gradle version to 4.1.1 ( IDE will show popup to make update)\n    4) update kotlin version to 1.4.21 \u0026 re-build the project\n    5) re-add flutter_osm_plugin in pubspec , pub get ( or flutter clean \u0026 pub get )\n\n\u003e Before you publish your application using this library,\n\u003e you should take care about copyright of openStreetMap Data,\n\u003e that's why i add `CopyrightOSMWidget` see example and this issue [#101](https://github.com/liodali/osm_flutter/issues/101)\n\n#### MIT LICENCE\n","funding_links":["https://github.com/sponsors/liodali","https://www.buymeacoffee.com/dalihamza"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliodali%2Fosm_flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliodali%2Fosm_flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliodali%2Fosm_flutter/lists"}