{"id":24915589,"url":"https://github.com/bjtrounson/blazorleafletinterop","last_synced_at":"2025-07-13T01:06:20.897Z","repository":{"id":200270189,"uuid":"705159146","full_name":"bjtrounson/BlazorLeafletInterop","owner":"bjtrounson","description":".NET 7 Blazor WASM Interop for Leaflet","archived":false,"fork":false,"pushed_at":"2024-01-19T09:51:32.000Z","size":504,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-01-19T10:58:20.416Z","etag":null,"topics":["blazor","blazor-webassembly","interop","leaflet","leafletjs","mapping","maps","net7"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bjtrounson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-10-15T07:50:51.000Z","updated_at":"2023-12-07T20:31:16.000Z","dependencies_parsed_at":"2024-01-19T11:10:17.984Z","dependency_job_id":null,"html_url":"https://github.com/bjtrounson/BlazorLeafletInterop","commit_stats":null,"previous_names":["bjtrounson/blazorleafletinterop"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjtrounson%2FBlazorLeafletInterop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjtrounson%2FBlazorLeafletInterop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjtrounson%2FBlazorLeafletInterop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjtrounson%2FBlazorLeafletInterop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bjtrounson","download_url":"https://codeload.github.com/bjtrounson/BlazorLeafletInterop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236761819,"owners_count":19200676,"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","blazor-webassembly","interop","leaflet","leafletjs","mapping","maps","net7"],"created_at":"2025-02-02T07:18:27.583Z","updated_at":"2025-02-02T07:18:28.395Z","avatar_url":"https://github.com/bjtrounson.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazor Leaflet Interop\n**It is a work in progress and only supports parts of the Leaflet API.** \\\nThis project is a component based wrapper around the Leaflet API, but some components can be used outside of RenderTree.\n\n## Implemented Components\n- [x] Map\n- [x] TileLayer\n- [x] Marker\n- [x] Popup, Tooltip\n- [x] Polyline, MultiPolyline\n- [x] FeatureGroup, LayerGroup, GeoJSON\n- [x] Control.Zoom, Control.Scale, Control.Attribution, Control.Layers\n- [x] Icon\n- [x] Events (**should work but are not tested**)\n- [ ] ImageOverlay, SVGOverlay, VideoOverlay\n- [ ] Renderers\n- [ ] Rectangle, Polygon, Circle, CircleMarker\n- [ ] Bounds, DivIcon\n\n## Installation\nInstall the package from NuGet\n```bash\ndotnet add package BlazorLeaflet\n```\n```powershell\nInstall-Package BlazorLeafletInterop\n```\nAdd the latest leaflet version to your index.html\n```html\n\u003c!-- ...index.html --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js\"\u003e\u003c/script\u003e\n```\nAdd this service to your Program.cs\n```csharp\n// ...Program.cs\nbuilder.Services.AddMapService();\n```\n\n## Examples\nTo make a simple map use the following code\n```csharp\n\u003cMap MapOptions=\"Options\"\u003e\n    \u003cTileLayer UrlTemplate=\"https://tile.openstreetmap.org/{z}/{x}/{y}.png\" /\u003e\n\u003c/Map\u003e\n\n@code {\n\tprivate MapOptions Options = new MapOptions() {\n\t\tCenter = new LatLng(51.505, -0.09),\n\t\tZoom = 13\n\t};\n}\n```\n\n### Marker Usage\n```csharp\n\u003cMap MapOptions=\"Options\"\u003e\n    \u003cTileLayer UrlTemplate=\"https://tile.openstreetmap.org/{z}/{x}/{y}.png\" /\u003e\n    \u003cMarker LatLng=\"new LatLng(51.5, -0.0.9)\"\u003e\u003c/Marker\u003e\n\u003c/Map\u003e\n\n@code {\n\tprivate MapOptions Options = new MapOptions() {\n\t\tCenter = new LatLng(51.505, -0.09),\n\t\tZoom = 13\n\t};\n}\n```\n\n### Popup Usage\n```csharp\n\u003cMap MapOptions=\"Options\"\u003e\n    \u003cTileLayer UrlTemplate=\"https://tile.openstreetmap.org/{z}/{x}/{y}.png\" /\u003e\n    \u003cMarker LatLng=\"new LatLng(51.5, -0.0.9)\"\u003e\n\t    \u003cPopup\u003e\n\t\t    \u003cb\u003eHello world!\u003c/b\u003e\u003cbr\u003e\n\t\t    I am a popup\n\t    \u003c/Popup\u003e\n    \u003c/Marker\u003e\n\u003c/Map\u003e\n\n@code {\n\tprivate MapOptions Options = new MapOptions() {\n\t\tCenter = new LatLng(51.505, -0.09),\n\t\tZoom = 13\n\t};\n}\n```\n### Accessing Leaflet Method's\n```csharp\n\u003cMap MapOptions=\"Options\"\u003e\n    \u003cTileLayer UrlTemplate=\"https://tile.openstreetmap.org/{z}/{x}/{y}.png\" /\u003e\n    \u003cMarker @ref=\"MarkerRef\" LatLng=\"new LatLng(51.5, -0.0.9)\"\u003e\n\t    \u003cPopup\u003e\n\t\t    \u003cb\u003eHello world!\u003c/b\u003e\u003cbr\u003e\n\t\t    I am a popup\n\t    \u003c/Popup\u003e\n    \u003c/Marker\u003e\n\u003c/Map\u003e\n\n@code {\n\t// Creating a reference to the component,\n\t// gives you access to the Leaflet methods for that class.\n\tprivate Marker? MarkerRef;\n\tprivate MapOptions Options = new MapOptions() {\n\t\tCenter = new LatLng(51.505, -0.09),\n\t\tZoom = 13\n\t};\n\n\tprotected override async Task OnAfterRenderAsync(bool firstRender) \n\t{\n\t\tif (MarkerRef is not null) await MarkerRef.OpenPopup();\n\t}\n}\n```\n\n## Contributing\nIf you want to contribute to this project, feel free to do so. Just fork the project and create a pull request.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjtrounson%2Fblazorleafletinterop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbjtrounson%2Fblazorleafletinterop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjtrounson%2Fblazorleafletinterop/lists"}