{"id":18378209,"url":"https://github.com/fabulous-dev/fabulous.xamarinforms.maps","last_synced_at":"2025-04-11T08:23:09.741Z","repository":{"id":78091814,"uuid":"552943704","full_name":"fabulous-dev/Fabulous.XamarinForms.Maps","owner":"fabulous-dev","description":"Xamarin.Forms.Maps implementation for Fabulous","archived":false,"fork":false,"pushed_at":"2023-02-17T08:33:58.000Z","size":416,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T22:42:21.169Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"F#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fabulous-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2022-10-17T13:21:10.000Z","updated_at":"2023-03-10T07:40:36.000Z","dependencies_parsed_at":"2023-02-25T21:30:40.613Z","dependency_job_id":null,"html_url":"https://github.com/fabulous-dev/Fabulous.XamarinForms.Maps","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabulous-dev%2FFabulous.XamarinForms.Maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabulous-dev%2FFabulous.XamarinForms.Maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabulous-dev%2FFabulous.XamarinForms.Maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabulous-dev%2FFabulous.XamarinForms.Maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fabulous-dev","download_url":"https://codeload.github.com/fabulous-dev/Fabulous.XamarinForms.Maps/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248361028,"owners_count":21090802,"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":[],"created_at":"2024-11-06T00:32:06.362Z","updated_at":"2025-04-11T08:23:09.653Z","avatar_url":"https://github.com/fabulous-dev.png","language":"F#","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Maps for Fabulous.XamarinForms\n\n[![build](https://github.com/fabulous-dev/Fabulous.XamarinForms.Maps/actions/workflows/build.yml/badge.svg)](https://github.com/fabulous-dev/Fabulous.XamarinForms.Maps/actions/workflows/dotnet.yml) [![Fabulous.XamarinForms.Maps NuGet version](https://badge.fury.io/nu/Fabulous.XamarinForms.Maps.svg)](https://badge.fury.io/nu/Fabulous.XamarinForms.Maps) [![Discord](https://img.shields.io/discord/716980335593914419?label=discord\u0026logo=discord)](https://discord.gg/bpTJMbSSYK)\n\nThe Map control is a cross-platform view for displaying and annotating maps. You can find all the details about this control on the [Xamarin.Forms.Maps documentation](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/map/).\n\n### How to use\n\n1. Add the [Fabulous.XamarinForms.Maps package](https://www.nuget.org/packages/Fabulous.XamarinForms.Maps) to your project.\n\n2. Open Fabulous.XamarinForms.Maps at the top of the file where you declare your Fabulous program (eg. Program.stateful).\n\n```f#\nopen Fabulous.XamarinForms.Maps\n```\n\n3. Depending on which platform you're targeting, you might need to do some configuration before the map widget will work. See \"Initialization and Configuration\" down below.\n\n### Initialization and Configuration\nThe Map widget will be rendered by the native map controls of each platform depending on the device you're running on. Some of those platforms require that you make some configuration before being able to use the `Map` widget.\n\nPlease follow the Xamarin.Forms documentation to learn about the requirements: [Xamarin.Forms Map Initialization and Configuration](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/map/setup)\n\n### Usage\nThis package adds several widgets for you to use:\n- `Map(region: MapSpan)` : Displays a map centered on the position specified\n- `MapWithPins(region: MapSpan) { MapPin; MapPin; ... }` : Displays a map with some pins on it\n\nTo learn more about the capabilities of the Map and MapWithPins widgets, see [Xamarin.Forms Map Control](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/map/map)  \nTo learn more about pins, see [Xamarin.Forms Map Pins](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/map/pins)\n\n```f#\nMap(MapSpan.FromCenterAndRadius(Position(47.640663, -122.1376177), Distance.FromMiles(250.)))\n    .hasZoomEnabled(true)\n    .hasScrollEnabled(true)\n    .mapType(MapType.Street)\n    .isShowingUser(true)\n    .isTrafficEnabled(true)\n    .onMapClicked (MapClicked)\n```\n```f#\nlet position = Position(36.9628066, -122.0194722)\nlet mapSpan = MapSpan(position, 0.01, 0.01)\n\n(MapWithPins(mapSpan) {\n    MapPin(position)\n        .address(\"My Address1\")\n        .label(\"I'm a marker1\")\n        .pinType(PinType.Place)\n        .onMarkerClicked(MarkerClicked)\n        .onInfoWindowClicked (MarkerClicked)\n\n    MapPin(Position(36.9641949, -122.0177232))\n        .address(\"My Address2\")\n        .label(\"I'm a marker1\")\n        .pinType(PinType.Place)\n        .onMarkerClicked(MarkerClicked)\n        .onInfoWindowClicked (MarkerClicked)\n})\n```\nIt is also possible to draw shapes directly on the map using the `.mapElements() { ... }` modifier.  \nIt supports several shapes: `MapCircle`, `MapPolygon`, `MapPolyline`.\n\n```f#\nMap(MapSpan.FromCenterAndRadius(Position(47.640663, -122.1376177), Distance.FromMiles(1.)))\n    .mapElements () {\n        // Draw a polygon on the map\n        MapPolygon(\n            [ Position(47.6458676, -122.1356007)\n              Position(47.6458097, -122.142789)\n              Position(47.6367593, -122.1428104)\n              Position(47.6368027, -122.1398707)\n              Position(47.6380172, -122.1376177)\n              Position(47.640663, -122.1352359)\n              Position(47.6426148, -122.1347209)\n              Position(47.6458676, -122.1356007) ]\n        )\n            .strokeWidth(8.)\n            .fillColor(Color.Red.ToFabColor())\n            .strokeColor (Color.Blue.ToFabColor())\n            \n        // Draw a circle on the map\n        MapCircle(Position(37.79752, -122.40183), Distance(250.))\n            .fillColor(Color.FromHex(\"#88FFC0CB\").ToFabColor())\n            .strokeColor(Color.FromHex(\"#88FF0000\").ToFabColor())\n            .strokeWidth (8.)\n            \n        // Draw a polyline on the map\n        MapPolyline(\n            [ Position(47.6381401, -122.1317367)\n              Position(47.6381473, -122.1350841)\n              Position(47.6382847, -122.1353094)\n              Position(47.6384582, -122.1354703)\n              Position(47.6401136, -122.1360819)\n              Position(47.6403883, -122.1364681)\n              Position(47.6407426, -122.1377019)\n              Position(47.6412558, -122.1404056)\n              Position(47.6414148, -122.1418647)\n              Position(47.6414654, -122.1432702) ]\n        )\n            .strokeColor(Color.Blue.ToFabColor())\n            .strokeWidth (12.)\n    }\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabulous-dev%2Ffabulous.xamarinforms.maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabulous-dev%2Ffabulous.xamarinforms.maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabulous-dev%2Ffabulous.xamarinforms.maps/lists"}