{"id":13466683,"url":"https://github.com/Mehigh17/BlazorLeaflet","last_synced_at":"2025-03-26T00:31:25.769Z","repository":{"id":41154905,"uuid":"210115471","full_name":"Mehigh17/BlazorLeaflet","owner":"Mehigh17","description":"BlazorLeaflet is a Blazor component wrapping Leaflet's APIs, offering a simple and homogeneous implementation of the Leaflet maps.","archived":false,"fork":false,"pushed_at":"2022-11-25T12:19:44.000Z","size":7791,"stargazers_count":182,"open_issues_count":39,"forks_count":91,"subscribers_count":23,"default_branch":"master","last_synced_at":"2024-10-29T20:32:40.054Z","etag":null,"topics":["blazor","interop","leaflet","leaflet-maps","maps"],"latest_commit_sha":null,"homepage":"","language":"C#","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/Mehigh17.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-22T08:36:17.000Z","updated_at":"2024-10-28T16:00:17.000Z","dependencies_parsed_at":"2022-08-10T01:42:51.636Z","dependency_job_id":null,"html_url":"https://github.com/Mehigh17/BlazorLeaflet","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehigh17%2FBlazorLeaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehigh17%2FBlazorLeaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehigh17%2FBlazorLeaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehigh17%2FBlazorLeaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mehigh17","download_url":"https://codeload.github.com/Mehigh17/BlazorLeaflet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245566098,"owners_count":20636390,"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":["blazor","interop","leaflet","leaflet-maps","maps"],"created_at":"2024-07-31T15:00:48.567Z","updated_at":"2025-03-26T00:31:23.378Z","avatar_url":"https://github.com/Mehigh17.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions","C# #"],"sub_categories":["Tools \u0026 Utilities"],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"media/logo.png\" width=300\u003e\n    \u003ch1\u003eBlazor Leaflet\u003c/h1\u003e\n    \u003cdiv\u003e\n        \u003ca href=\"#description\"\u003eDescription\u003c/a\u003e •\n        \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n        \u003ca href=\"#samples\"\u003eSamples\u003c/a\u003e •\n        \u003ca href=\"#contribute\"\u003eContribute\u003c/a\u003e •\n        \u003ca href=\"https://mehigh17.github.io/BlazorLeaflet\"\u003eAPI Doc\u003c/a\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n# Description\n\nBlazorLeaflet is a wrapper offering easy-to-use Blazor components that expose the \u003ca href=\"https://leafletjs.com/\"\u003eLeaflet API\u003c/a\u003e in C#. It allows you to create easily customizable maps without getting outside your existing .NET ecosystem.\n\nThe wrapper is still in its early days so it's very lackluster and doesn't expose the entirety of leaflet's API.\n\nCheck out the samples project to learn how to use it.\n\n\u003cimg src=\"media/example1.gif\" height=400\u003e\n\n# Installation\n\nInstall the package in the target project:\n\n```\ndotnet add package BlazorLeaflet\n```\n\nIn your `_Host.cshtml` (Blazor Server) or `index.html` (Blazor WebAssembly), reference the interoperability script in the `\u003chead\u003e` element like so:\n\n```html\n\u003cscript src=\"_content/BlazorLeaflet/leafletBlazorInterops.js\"\u003e\u003c/script\u003e\n```\n\nYou can now use the components and the rest of the library.\n\n# Samples\n\nCreate the map\n\n```html\n\u003c!-- You must wrap the map component in a container setting its actual size. --\u003e\n\u003cdiv id=\"mapContainer\" style=\"width: 300px; height: 300px;\"\u003e\n    \u003cLeafletMap Map=\"_map\" /\u003e\n\u003c/div\u003e\n```\n\nBind the parameters to the respective objects like so\n\n```cs\nprivate Map _map = new Map(jsRuntime);\nprivate PointF _startAt = new PointF(47.5574007f, 16.3918687f);\n```\n\nAdd a marker with a tooltip and an icon\n\n```cs\n// Create the marker\nvar marker = new Marker(0.23f, 32f);\nmarker.Tooltip = new Tooltip { Content = \"This is a nice location!\" };\nmarker.Icon = new Icon { Url = \"... some url\" };\n\n// Add it to the layers collection\n_map.AddLayer(marker);\n```\n\nOr add a rectangle that highlights a zone\n\n```cs\nvar rect = new Rectangle { Shape = new RectangleF(21f, 20f, 10f, 20f) };\nrect.Fill = true; // This will fill the rectangle with a color\nrect.FillColor = Color.Red; // Make the filled area red\nrect.Popup = new Popup { Content = \"This is a restricted area!\" }; // Create a popup when the area is clicked\n\n// Add it to the layers collection\n_map.RemoveAdd(rect);\n```\n\nOr fit bounds on certain corners\n\n```cs\n_map.FitBounds(new PointF(45.943f, 24.967f), new PointF(46.943f, 25.967f), maxZoom: 5f);\n```\n\n# Contribute\n\nThe `master` branch is used as the development branch. If you are looking for a specific release, check the tags. If you are willing to contribute, fork this repository, and create your own branch from master, preferably give it a meaningful name, regarding your change or the issue that you are targeting. For large modifications, create an issue before, and a WIP pull request. Always rebase before review requests.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMehigh17%2FBlazorLeaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMehigh17%2FBlazorLeaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMehigh17%2FBlazorLeaflet/lists"}