├── .gitattributes ├── .gitignore ├── DPBlazorMap.sln ├── DPBlazorMapLibrary ├── Components │ └── Map │ │ ├── Map.razor │ │ └── Map.razor.cs ├── DI │ └── MapDependencyInjection.cs ├── DPBlazorMapLibrary.csproj ├── Factorys │ ├── IconFactory.cs │ ├── Interfaces │ │ ├── ICircleFactory.cs │ │ ├── ICircleMarkerFactory.cs │ │ ├── IGeoJSONFactory.cs │ │ ├── IIconFactory.cs │ │ ├── IImageOverlayFactory.cs │ │ ├── IMarkerFactory.cs │ │ ├── IPolygoneFactory.cs │ │ ├── IPolylineFactory.cs │ │ ├── IRectangleFactory.cs │ │ ├── ITileLayerFactory.cs │ │ └── IVideoOverlayFactory.cs │ └── LayerFactory.cs ├── JsInterops │ ├── Base │ │ ├── BaseJsInterop.cs │ │ ├── IBaseJsInterop.cs │ │ └── JsInteropConfig.cs │ ├── Events │ │ ├── EventedJsInterop.cs │ │ └── IEventedJsInterop.cs │ ├── LeftletDefaultIconFactories │ │ ├── IIconFactoryJsInterop.cs │ │ └── IconFactoryJsInterop.cs │ └── Maps │ │ ├── IMapJsInterop.cs │ │ └── MapJsInterop.cs ├── Models │ ├── BaseJsReferences │ │ └── JsReferenceBase.cs │ ├── Basics │ │ ├── Icons │ │ │ ├── Icon.cs │ │ │ └── IconOptions.cs │ │ ├── LatLng.cs │ │ ├── LatLngBounds.cs │ │ └── Point.cs │ ├── Events │ │ ├── Event.cs │ │ ├── Evented.cs │ │ └── MouseEvent.cs │ ├── GeoJSON │ │ ├── Crs.cs │ │ ├── Feature.cs │ │ ├── GeoJSON.cs │ │ └── Geometry.cs │ ├── Layers │ │ ├── GridLayer.cs │ │ ├── GridLayerOptions.cs │ │ ├── InteractiveLayer.cs │ │ ├── InteractiveLayerOptions.cs │ │ ├── Layer.cs │ │ ├── LayerOptions.cs │ │ ├── Markers │ │ │ ├── Marker.cs │ │ │ └── MarkerOptions.cs │ │ ├── OtherLayers │ │ │ ├── FeatureGroups │ │ │ │ └── FeatureGroup.cs │ │ │ ├── GeoJSON │ │ │ │ ├── GeoJSONLayer.cs │ │ │ │ └── GeoJSONOptions.cs │ │ │ └── LayerGroups │ │ │ │ └── LayerGroup.cs │ │ ├── RasterLayers │ │ │ ├── ImageOverlays │ │ │ │ ├── ImageOverlay.cs │ │ │ │ └── ImageOverlayOptions.cs │ │ │ ├── TileLayers │ │ │ │ ├── TileLayer.cs │ │ │ │ └── TileLayerOptions.cs │ │ │ └── VideoOverlays │ │ │ │ ├── VideoOverlay.cs │ │ │ │ └── VideoOverlayOptions.cs │ │ └── VectorLayers │ │ │ ├── CircleMarkers │ │ │ ├── CircleMarker.cs │ │ │ └── CircleMarkerOptions.cs │ │ │ ├── Circles │ │ │ ├── Circle.cs │ │ │ └── CircleOptions.cs │ │ │ ├── Paths │ │ │ ├── Path.cs │ │ │ └── PathOptions.cs │ │ │ ├── Polygons │ │ │ ├── Polygon.cs │ │ │ └── PolygonOptions.cs │ │ │ ├── Polylines │ │ │ ├── Polyline.cs │ │ │ └── PolylineOptions.cs │ │ │ └── Rectangles │ │ │ ├── Rectangle.cs │ │ │ └── RectangleOptions.cs │ └── Maps │ │ ├── MapEvented.cs │ │ └── MapOptions.cs ├── _Imports.razor └── wwwroot │ ├── evented.js │ ├── iconFactory.js │ └── map.js ├── LICENSE └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Build results 17 | [Dd]ebug/ 18 | [Dd]ebugPublic/ 19 | [Rr]elease/ 20 | [Rr]eleases/ 21 | x64/ 22 | x86/ 23 | bld/ 24 | [Bb]in/ 25 | [Oo]bj/ 26 | [Ll]og/ 27 | 28 | # Visual Studio 2015/2017 cache/options directory 29 | .vs/ 30 | # Uncomment if you have tasks that create the project's static files in wwwroot 31 | #wwwroot/ 32 | 33 | # Visual Studio 2017 auto generated files 34 | Generated\ Files/ 35 | 36 | # MSTest test Results 37 | [Tt]est[Rr]esult*/ 38 | [Bb]uild[Ll]og.* 39 | 40 | # NUNIT 41 | *.VisualState.xml 42 | TestResult.xml 43 | 44 | # Build Results of an ATL Project 45 | [Dd]ebugPS/ 46 | [Rr]eleasePS/ 47 | dlldata.c 48 | 49 | # Benchmark Results 50 | BenchmarkDotNet.Artifacts/ 51 | 52 | # .NET Core 53 | project.lock.json 54 | project.fragment.lock.json 55 | artifacts/ 56 | 57 | # StyleCop 58 | StyleCopReport.xml 59 | 60 | # Files built by Visual Studio 61 | *_i.c 62 | *_p.c 63 | *_h.h 64 | *.ilk 65 | *.meta 66 | *.obj 67 | *.iobj 68 | *.pch 69 | *.pdb 70 | *.ipdb 71 | *.pgc 72 | *.pgd 73 | *.rsp 74 | *.sbr 75 | *.tlb 76 | *.tli 77 | *.tlh 78 | *.tmp 79 | *.tmp_proj 80 | *_wpftmp.csproj 81 | *.log 82 | *.vspscc 83 | *.vssscc 84 | .builds 85 | *.pidb 86 | *.svclog 87 | *.scc 88 | 89 | # Chutzpah Test files 90 | _Chutzpah* 91 | 92 | # Visual C++ cache files 93 | ipch/ 94 | *.aps 95 | *.ncb 96 | *.opendb 97 | *.opensdf 98 | *.sdf 99 | *.cachefile 100 | *.VC.db 101 | *.VC.VC.opendb 102 | 103 | # Visual Studio profiler 104 | *.psess 105 | *.vsp 106 | *.vspx 107 | *.sap 108 | 109 | # Visual Studio Trace Files 110 | *.e2e 111 | 112 | # TFS 2012 Local Workspace 113 | $tf/ 114 | 115 | # Guidance Automation Toolkit 116 | *.gpState 117 | 118 | # ReSharper is a .NET coding add-in 119 | _ReSharper*/ 120 | *.[Rr]e[Ss]harper 121 | *.DotSettings.user 122 | 123 | # JustCode is a .NET coding add-in 124 | .JustCode 125 | 126 | # TeamCity is a build add-in 127 | _TeamCity* 128 | 129 | # DotCover is a Code Coverage Tool 130 | *.dotCover 131 | 132 | # AxoCover is a Code Coverage Tool 133 | .axoCover/* 134 | !.axoCover/settings.json 135 | 136 | # Visual Studio code coverage results 137 | *.coverage 138 | *.coveragexml 139 | 140 | # NCrunch 141 | _NCrunch_* 142 | .*crunch*.local.xml 143 | nCrunchTemp_* 144 | 145 | # MightyMoose 146 | *.mm.* 147 | AutoTest.Net/ 148 | 149 | # Web workbench (sass) 150 | .sass-cache/ 151 | 152 | # Installshield output folder 153 | [Ee]xpress/ 154 | 155 | # DocProject is a documentation generator add-in 156 | DocProject/buildhelp/ 157 | DocProject/Help/*.HxT 158 | DocProject/Help/*.HxC 159 | DocProject/Help/*.hhc 160 | DocProject/Help/*.hhk 161 | DocProject/Help/*.hhp 162 | DocProject/Help/Html2 163 | DocProject/Help/html 164 | 165 | # Click-Once directory 166 | publish/ 167 | 168 | # Publish Web Output 169 | *.[Pp]ublish.xml 170 | *.azurePubxml 171 | # Note: Comment the next line if you want to checkin your web deploy settings, 172 | # but database connection strings (with potential passwords) will be unencrypted 173 | *.pubxml 174 | *.publishproj 175 | 176 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 177 | # checkin your Azure Web App publish settings, but sensitive information contained 178 | # in these scripts will be unencrypted 179 | PublishScripts/ 180 | 181 | # NuGet Packages 182 | *.nupkg 183 | # The packages folder can be ignored because of Package Restore 184 | **/[Pp]ackages/* 185 | # except build/, which is used as an MSBuild target. 186 | !**/[Pp]ackages/build/ 187 | # Uncomment if necessary however generally it will be regenerated when needed 188 | #!**/[Pp]ackages/repositories.config 189 | # NuGet v3's project.json files produces more ignorable files 190 | *.nuget.props 191 | *.nuget.targets 192 | 193 | # Microsoft Azure Build Output 194 | csx/ 195 | *.build.csdef 196 | 197 | # Microsoft Azure Emulator 198 | ecf/ 199 | rcf/ 200 | 201 | # Windows Store app package directories and files 202 | AppPackages/ 203 | BundleArtifacts/ 204 | Package.StoreAssociation.xml 205 | _pkginfo.txt 206 | *.appx 207 | 208 | # Visual Studio cache files 209 | # files ending in .cache can be ignored 210 | *.[Cc]ache 211 | # but keep track of directories ending in .cache 212 | !*.[Cc]ache/ 213 | 214 | # Others 215 | ClientBin/ 216 | ~$* 217 | *~ 218 | *.dbmdl 219 | *.dbproj.schemaview 220 | *.jfm 221 | *.pfx 222 | *.publishsettings 223 | orleans.codegen.cs 224 | 225 | # Including strong name files can present a security risk 226 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 227 | #*.snk 228 | 229 | # Since there are multiple workflows, uncomment next line to ignore bower_components 230 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 231 | #bower_components/ 232 | 233 | # RIA/Silverlight projects 234 | Generated_Code/ 235 | 236 | # Backup & report files from converting an old project file 237 | # to a newer Visual Studio version. Backup files are not needed, 238 | # because we have git ;-) 239 | _UpgradeReport_Files/ 240 | Backup*/ 241 | UpgradeLog*.XML 242 | UpgradeLog*.htm 243 | ServiceFabricBackup/ 244 | *.rptproj.bak 245 | 246 | # SQL Server files 247 | *.mdf 248 | *.ldf 249 | *.ndf 250 | 251 | # Business Intelligence projects 252 | *.rdl.data 253 | *.bim.layout 254 | *.bim_*.settings 255 | *.rptproj.rsuser 256 | 257 | # Microsoft Fakes 258 | FakesAssemblies/ 259 | 260 | # GhostDoc plugin setting file 261 | *.GhostDoc.xml 262 | 263 | # Node.js Tools for Visual Studio 264 | .ntvs_analysis.dat 265 | node_modules/ 266 | 267 | # Visual Studio 6 build log 268 | *.plg 269 | 270 | # Visual Studio 6 workspace options file 271 | *.opt 272 | 273 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 274 | *.vbw 275 | 276 | # Visual Studio LightSwitch build output 277 | **/*.HTMLClient/GeneratedArtifacts 278 | **/*.DesktopClient/GeneratedArtifacts 279 | **/*.DesktopClient/ModelManifest.xml 280 | **/*.Server/GeneratedArtifacts 281 | **/*.Server/ModelManifest.xml 282 | _Pvt_Extensions 283 | 284 | # Paket dependency manager 285 | .paket/paket.exe 286 | paket-files/ 287 | 288 | # FAKE - F# Make 289 | .fake/ 290 | 291 | # JetBrains Rider 292 | .idea/ 293 | *.sln.iml 294 | 295 | # CodeRush personal settings 296 | .cr/personal 297 | 298 | # Python Tools for Visual Studio (PTVS) 299 | __pycache__/ 300 | *.pyc 301 | 302 | # Cake - Uncomment if you are using it 303 | # tools/** 304 | # !tools/packages.config 305 | 306 | # Tabs Studio 307 | *.tss 308 | 309 | # Telerik's JustMock configuration file 310 | *.jmconfig 311 | 312 | # BizTalk build output 313 | *.btp.cs 314 | *.btm.cs 315 | *.odx.cs 316 | *.xsd.cs 317 | 318 | # OpenCover UI analysis results 319 | OpenCover/ 320 | 321 | # Azure Stream Analytics local run output 322 | ASALocalRun/ 323 | 324 | # MSBuild Binary and Structured Log 325 | *.binlog 326 | 327 | # NVidia Nsight GPU debugger configuration file 328 | *.nvuser 329 | 330 | # MFractors (Xamarin productivity tool) working folder 331 | .mfractor/ 332 | 333 | # Local History for Visual Studio 334 | .localhistory/ 335 | -------------------------------------------------------------------------------- /DPBlazorMap.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.0.31903.59 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DPBlazorMapLibrary", "DPBlazorMapLibrary\DPBlazorMapLibrary.csproj", "{FEDEC39B-4F30-415F-A0A3-60F2B2CC99BE}" 7 | EndProject 8 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{C53DA0C0-CB14-453C-ABCD-DE3766FA06CA}" 9 | ProjectSection(SolutionItems) = preProject 10 | LICENSE = LICENSE 11 | README.md = README.md 12 | EndProjectSection 13 | EndProject 14 | Global 15 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 16 | Debug|Any CPU = Debug|Any CPU 17 | Release|Any CPU = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 20 | {FEDEC39B-4F30-415F-A0A3-60F2B2CC99BE}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 21 | {FEDEC39B-4F30-415F-A0A3-60F2B2CC99BE}.Debug|Any CPU.Build.0 = Debug|Any CPU 22 | {FEDEC39B-4F30-415F-A0A3-60F2B2CC99BE}.Release|Any CPU.ActiveCfg = Release|Any CPU 23 | {FEDEC39B-4F30-415F-A0A3-60F2B2CC99BE}.Release|Any CPU.Build.0 = Release|Any CPU 24 | EndGlobalSection 25 | GlobalSection(SolutionProperties) = preSolution 26 | HideSolutionNode = FALSE 27 | EndGlobalSection 28 | GlobalSection(ExtensibilityGlobals) = postSolution 29 | SolutionGuid = {BBCFB4D2-B66D-4525-B602-EAFDD7483E36} 30 | EndGlobalSection 31 | EndGlobal 32 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Components/Map/Map.razor: -------------------------------------------------------------------------------- 1 | @namespace DPBlazorMapLibrary 2 | 3 |
-------------------------------------------------------------------------------- /DPBlazorMapLibrary/Components/Map/Map.razor.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using DPBlazorMapLibrary.JsInterops.Maps; 3 | using Microsoft.AspNetCore.Components; 4 | using Microsoft.JSInterop; 5 | 6 | namespace DPBlazorMapLibrary 7 | { 8 | public partial class Map 9 | { 10 | [Inject] 11 | public IJSRuntime JsRuntime { get; set; } 12 | 13 | [Inject] 14 | public IMapJsInterop MapJsInterop { get; set; } 15 | 16 | [Inject] 17 | public IEventedJsInterop EventedJsInterop { get; set; } 18 | 19 | public MapEvented MapEvented { get; set; } 20 | 21 | [Parameter] 22 | public string DivId { get; set; } = "mapId"; 23 | 24 | [Parameter] 25 | public string CssClass { get; set; } = "mapClass"; 26 | 27 | 28 | [Parameter] 29 | public MapOptions MapOptions { get; set; } 30 | 31 | [Parameter] 32 | public EventCallback AfterRender { get; set; } 33 | 34 | public IJSObjectReference MapReference { get; set; } 35 | 36 | private const string getCenter = "getCenter"; 37 | private const string getZoom = "getZoom"; 38 | private const string getMinZoom = "getMinZoom"; 39 | private const string getMaxZoom = "getMaxZoom"; 40 | private const string setView = "setView"; 41 | private const string setZoom = "setZoom"; 42 | private const string zoomIn = "zoomIn"; 43 | private const string zoomOut = "zoomOut"; 44 | private const string setZoomAround = "setZoomAround"; 45 | private const string invalidateSize = "invalidateSize"; 46 | private const string fitBounds = "fitBounds"; 47 | private const string panTo = "panTo"; 48 | private const string flyTo = "flyTo"; 49 | private const string flyToBounds = "flyToBounds"; 50 | 51 | protected override async Task OnAfterRenderAsync(bool firstRender) 52 | { 53 | if (firstRender) 54 | { 55 | this.MapReference = await this.MapJsInterop.Initialize(DivId, this.MapOptions); 56 | this.MapEvented = new MapEvented(this.MapReference, this.EventedJsInterop); 57 | await this.AfterRender.InvokeAsync(); 58 | } 59 | } 60 | 61 | public async Task GetCenter() 62 | { 63 | return await this.MapReference.InvokeAsync(getCenter); 64 | } 65 | 66 | public async Task GetZoom() 67 | { 68 | return await this.MapReference.InvokeAsync(getZoom); 69 | } 70 | 71 | public async Task GetMinZoom() 72 | { 73 | return await this.MapReference.InvokeAsync(getMinZoom); 74 | } 75 | 76 | public async Task GetMaxZoom() 77 | { 78 | return await this.MapReference.InvokeAsync(getMaxZoom); 79 | } 80 | 81 | /// 82 | /// Sets the view of the map (geographical center and zoom) with the given animation options. 83 | /// 84 | /// 85 | /// 86 | /// 87 | public async Task SetView(LatLng latLng, int zoom) 88 | { 89 | await this.MapReference.InvokeAsync(setView, latLng, zoom); 90 | } 91 | 92 | public async Task SetZoom(int zoom) 93 | { 94 | await this.MapReference.InvokeAsync(setZoom, zoom); 95 | } 96 | 97 | public async Task ZoomIn(int zoomDelta) 98 | { 99 | await this.MapReference.InvokeAsync(zoomIn, zoomDelta); 100 | } 101 | 102 | public async Task ZoomOut(int zoomDelta) 103 | { 104 | await this.MapReference.InvokeAsync(zoomOut, zoomDelta); 105 | } 106 | 107 | public async Task SetZoomAround(LatLng latLng, int zoom) 108 | { 109 | await this.MapReference.InvokeAsync(setZoomAround, latLng, zoom); 110 | } 111 | 112 | public async Task InvalidateSize() 113 | { 114 | await this.MapReference.InvokeAsync(invalidateSize); 115 | } 116 | 117 | /// 118 | /// Задает вид карты (географический центр и масштабирование), выполняя плавную анимацию панорамирования и масштабирования. 119 | /// https://leafletjs.com/reference.html#:~:text=of%20pixels%20(animated).-,flyTo,-(%3CLatLng%3E%20latlng%2C%20%3CNumber 120 | /// 121 | /// lat lng 122 | /// уровень zoom 123 | /// 124 | public async Task FlyTo(LatLng latLng, int? zoom) 125 | { 126 | await this.MapReference.InvokeAsync(flyTo, latLng, zoom); 127 | } 128 | 129 | /// 130 | /// Задает вид карты с плавной анимацией, так же как flyTo. 131 | /// https://leafletjs.com/reference.html#:~:text=pan-zoom%20animation.-,flyToBounds,-(%3CLatLngBounds%3E%20bounds%2C%20%3CfitBounds 132 | /// 133 | /// область 134 | /// 135 | public async Task FlyToBounds(LatLngBounds latLngBounds) 136 | { 137 | await this.MapReference.InvokeAsync(flyToBounds, latLngBounds.ToLatLng()); 138 | } 139 | 140 | /// 141 | /// Задает вид карты, содержащий заданные географические границы, с максимально возможным уровнем масштабирования. 142 | /// https://leafletjs.com/reference.html#:~:text=left%20corner)%20stationary.-,fitBounds,-(%3CLatLngBounds%3E%20bounds%2C%20%3CfitBounds 143 | /// 144 | /// область 145 | public async Task FitBounds(LatLngBounds latLngBounds) 146 | { 147 | await this.MapReference.InvokeAsync(fitBounds, latLngBounds.ToLatLng()); 148 | } 149 | 150 | /// 151 | /// Перемещает карту в заданный центр. 152 | /// https://leafletjs.com/reference.html#:~:text=zoom%20level%20possible.-,panTo,-(%3CLatLng%3E%20latlng%2C%20%3CPan 153 | /// 154 | /// lat lng 155 | /// If true, panning will always be animated if possible. If false, it will not animate panning, either resetting the map view if panning more than a screen away, or just setting a new offset for the map pane (except for panBy which always does the latter). 156 | /// Duration of animated panning, in seconds. 157 | /// The curvature factor of panning animation easing (third parameter of the Cubic Bezier curve). 1.0 means linear animation, and the smaller this number, the more bowed the curve. 158 | /// If true, panning won't fire movestart event on start (used publicly for panning inertia). 159 | /// 160 | public async Task PanTo(LatLng latLng, bool animate = true, float duration = 0.25f, float easeLinearity = 0.25f, bool noMoveStart = false) 161 | { 162 | await this.MapReference.InvokeAsync(panTo, latLng, animate, duration, easeLinearity, noMoveStart); 163 | } 164 | 165 | public async Task OnClick(Func callback) 166 | { 167 | await this.MapEvented.OnClick(callback); 168 | } 169 | 170 | public async Task OnDblClick(Func callback) 171 | { 172 | await this.MapEvented.OnDblClick(callback); 173 | } 174 | 175 | public async Task OnMouseDown(Func callback) 176 | { 177 | await this.MapEvented.OnMouseDown(callback); 178 | } 179 | 180 | public async Task OnMouseUp(Func callback) 181 | { 182 | await this.MapEvented.OnMouseUp(callback); 183 | } 184 | 185 | public async Task OnMouseOver(Func callback) 186 | { 187 | await this.MapEvented.OnMouseOver(callback); 188 | } 189 | 190 | public async Task OnMouseOut(Func callback) 191 | { 192 | await this.MapEvented.OnMouseOut(callback); 193 | } 194 | 195 | public async Task OnContextMenu(Func callback) 196 | { 197 | await this.MapEvented.OnContextMenu(callback); 198 | } 199 | 200 | public async Task Off(string eventType) 201 | { 202 | await this.MapEvented.Off(eventType); 203 | } 204 | } 205 | } 206 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/DI/MapDependencyInjection.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using DPBlazorMapLibrary.JsInterops.LeftletDefaultIconFactories; 3 | using DPBlazorMapLibrary.JsInterops.Maps; 4 | using Microsoft.Extensions.DependencyInjection; 5 | 6 | namespace DPBlazorMapLibrary 7 | { 8 | public static class MapDependencyInjection 9 | { 10 | public static IServiceCollection AddMapService(this IServiceCollection services) 11 | { 12 | AddJsInterops(services); 13 | AddFactorys(services); 14 | return services; 15 | } 16 | 17 | private static void AddJsInterops(IServiceCollection services) 18 | { 19 | services.AddTransient(); 20 | services.AddTransient(); 21 | services.AddTransient(); 22 | } 23 | private static void AddFactorys(IServiceCollection services) 24 | { 25 | services.AddTransient(); 26 | services.AddTransient(); 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/DPBlazorMapLibrary.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | net6.0 5 | enable 6 | enable 7 | False 8 | True 9 | blazor;map;leaflet; 10 | https://github.com/DP-projects/DPBlazorMap 11 | polagaev.denis; 12 | DP Blaser Map is a library for Blazer, which is a wrapper on top of the Leaflet js library. 13 | 14 | https://github.com/DP-projects/DPBlazorMap 15 | MIT 16 | 1.2.0 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/IconFactory.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.LeftletDefaultIconFactories; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | public class IconFactory : IIconFactory 7 | { 8 | private const string _createIconJsFunction = "L.icon"; 9 | 10 | private readonly IIconFactoryJsInterop _iconFactoryJsInterop; 11 | private readonly IJSRuntime _jsRuntime; 12 | public IconFactory( 13 | IJSRuntime jsRuntime, 14 | IIconFactoryJsInterop iconFactoryJsInterop) 15 | { 16 | _jsRuntime = jsRuntime; 17 | _iconFactoryJsInterop = iconFactoryJsInterop; 18 | } 19 | 20 | #region Icon 21 | public async Task Create(IconOptions options) 22 | { 23 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createIconJsFunction, options); 24 | return new Icon(jsReference); 25 | } 26 | 27 | public async Task CreateDefault() 28 | { 29 | IJSObjectReference jsReference = await _iconFactoryJsInterop.CreateDefaultIcon(); 30 | return new Icon(jsReference); 31 | } 32 | #endregion 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/ICircleFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface ICircleFactory 4 | { 5 | Task CreateCircle(LatLng latLng, CircleOptions? options); 6 | Task CreateCircleAndAddToMap(LatLng latLng, Map map, CircleOptions? options); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/ICircleMarkerFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface ICircleMarkerFactory 4 | { 5 | Task CreateCircleMarker(LatLng latLng, CircleMarkerOptions? options); 6 | Task CreateCircleMarkerAndAddToMap(LatLng latLng, Map map, CircleMarkerOptions? options); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/IGeoJSONFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface IGeoJSONFactory 4 | { 5 | public Task CreateGeoJSONLayer(object geojson, GeoJSONOptions? options); 6 | public Task CreateGeoJSONLayerAndAddToMap(object geojson, Map map, GeoJSONOptions? options); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/IIconFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface IIconFactory 4 | { 5 | Task Create(IconOptions options); 6 | Task CreateDefault(); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/IImageOverlayFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | internal interface IImageOverlayFactory 4 | { 5 | public Task CreateImageOverlay(string imageUrl, LatLngBounds bounds, ImageOverlayOptions? options); 6 | public Task CreateImageOverlayAndAddToMap(string imageUrl, Map map, LatLngBounds bounds, ImageOverlayOptions? options); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/IMarkerFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface IMarkerFactory 4 | { 5 | public Task CreateMarker(LatLng latLng, MarkerOptions? options); 6 | public Task CreateMarkerAndAddToMap(LatLng latLng, Map map, MarkerOptions? options); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/IPolygoneFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface IPolygoneFactory 4 | { 5 | Task CreatePolygon(IEnumerable latLngs, PolygonOptions? options); 6 | 7 | Task CreatePolygonAndAddToMap(IEnumerable latLngs, Map map, PolygonOptions? options); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/IPolylineFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface IPolylineFactory 4 | { 5 | Task CreatePolyline(IEnumerable latLng, PolylineOptions? options); 6 | Task CreatePolylineAndAddToMap(IEnumerable latLng, Map map, PolylineOptions? options); 7 | 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/IRectangleFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface IRectangleFactory 4 | { 5 | Task CreateRectangle(LatLngBounds latLngBounds, RectangleOptions? options); 6 | Task CreateRectangleAndAddToMap(LatLngBounds latLngBounds, Map map, RectangleOptions? options); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/ITileLayerFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface ITileLayerFactory 4 | { 5 | public Task CreateTileLayer(string urlTemplate, TileLayerOptions? options); 6 | public Task CreateTileLayerAndAddToMap(string urlTemplate, Map map, TileLayerOptions? options); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/Interfaces/IVideoOverlayFactory.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public interface IVideoOverlayFactory 4 | { 5 | public Task CreateVideoOverlay(string video, LatLngBounds bounds, VideoOverlayOptions? options); 6 | public Task CreateVideoOverlayAndAddToMap(string video, Map map, LatLngBounds bounds, VideoOverlayOptions? options); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Factorys/LayerFactory.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | public class LayerFactory : IMarkerFactory, 7 | ITileLayerFactory, 8 | IVideoOverlayFactory, 9 | IImageOverlayFactory, 10 | IPolylineFactory, 11 | IPolygoneFactory, 12 | IRectangleFactory, 13 | ICircleFactory, 14 | ICircleMarkerFactory, 15 | IGeoJSONFactory 16 | { 17 | private const string _createMarkerJsFunction = "L.marker"; 18 | private const string _crateTileLayerJsFunction = "L.tileLayer"; 19 | private const string _createVideoOverlayJsFunction = "L.videoOverlay"; 20 | private const string _createImageOverlayJsFunction = "L.imageOverlay"; 21 | private const string _createPolylineJsFunction = "L.polyline"; 22 | private const string _createPolygonJsFunction = "L.polygon"; 23 | private const string _createRectangleJsFunction = "L.rectangle"; 24 | private const string _createCircleJsFunction = "L.circle"; 25 | private const string _createCircleMarkerJsFunction = "L.circleMarker"; 26 | private const string _createGeoJSONLayerJsFunction = "L.geoJSON"; 27 | 28 | 29 | private readonly IJSRuntime _jsRuntime; 30 | private readonly IEventedJsInterop _eventedJsInterop; 31 | 32 | 33 | public LayerFactory( 34 | IJSRuntime jsRuntime, 35 | IEventedJsInterop eventedJsInterop) 36 | { 37 | this._jsRuntime = jsRuntime; 38 | this._eventedJsInterop = eventedJsInterop; 39 | } 40 | 41 | #region Marker 42 | public async Task CreateMarker(LatLng latLng, MarkerOptions? options) 43 | { 44 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createMarkerJsFunction, latLng, options); 45 | return new Marker(jsReference, _eventedJsInterop); 46 | } 47 | 48 | public async Task CreateMarkerAndAddToMap(LatLng latLng, Map map, MarkerOptions? options) 49 | { 50 | Marker marker = await CreateMarker(latLng, options); 51 | await marker.AddTo(map); 52 | return marker; 53 | } 54 | #endregion 55 | 56 | #region Tile 57 | public async Task CreateTileLayer(string urlTemplate, TileLayerOptions? options) 58 | { 59 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_crateTileLayerJsFunction, urlTemplate, options); 60 | return new TileLayer(jsReference); 61 | } 62 | 63 | public async Task CreateTileLayerAndAddToMap(string urlTemplate, Map map, TileLayerOptions? options) 64 | { 65 | TileLayer tileLayer = await CreateTileLayer(urlTemplate, options); 66 | await tileLayer.AddTo(map); 67 | return tileLayer; 68 | } 69 | #endregion 70 | 71 | #region Video Overlay 72 | public async Task CreateVideoOverlay(string video, LatLngBounds bounds, VideoOverlayOptions? options) 73 | { 74 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createVideoOverlayJsFunction, video, bounds.ToLatLng(), options); 75 | return new VideoOverlay(jsReference, _eventedJsInterop); 76 | } 77 | 78 | 79 | public async Task CreateVideoOverlayAndAddToMap(string video, Map map, LatLngBounds bounds, VideoOverlayOptions? options) 80 | { 81 | VideoOverlay videoOverlay = await CreateVideoOverlay(video, bounds, options); 82 | await videoOverlay.AddTo(map); 83 | return videoOverlay; 84 | } 85 | 86 | #endregion 87 | 88 | #region Image Overlay 89 | 90 | public async Task CreateImageOverlay(string imageUrl, LatLngBounds bounds, ImageOverlayOptions? options) 91 | { 92 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createImageOverlayJsFunction, imageUrl, bounds.ToLatLng(), options); 93 | return new ImageOverlay(jsReference, _eventedJsInterop); 94 | } 95 | 96 | public async Task CreateImageOverlayAndAddToMap(string imageUrl, Map map, LatLngBounds bounds, ImageOverlayOptions? options) 97 | { 98 | var imageOverlay = await CreateImageOverlay(imageUrl, bounds, options); 99 | await imageOverlay.AddTo(map); 100 | return imageOverlay; 101 | } 102 | 103 | #endregion 104 | 105 | #region Polyline 106 | 107 | public async Task CreatePolyline(IEnumerable latLngs, PolylineOptions? options) 108 | { 109 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createPolylineJsFunction, latLngs, options); 110 | return new Polyline(jsReference, _eventedJsInterop); 111 | } 112 | 113 | public async Task CreatePolylineAndAddToMap(IEnumerable latLngs, Map map, PolylineOptions? options) 114 | { 115 | var polyline = await CreatePolyline(latLngs, options); 116 | await polyline.AddTo(map); 117 | return polyline; 118 | } 119 | 120 | #endregion 121 | 122 | #region Polygone 123 | 124 | public async Task CreatePolygon(IEnumerable latLngs, PolygonOptions? options) 125 | { 126 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createPolygonJsFunction, latLngs, options); 127 | return new Polygon(jsReference, _eventedJsInterop); 128 | } 129 | 130 | public async Task CreatePolygonAndAddToMap(IEnumerable latLngs, Map map, PolygonOptions? options) 131 | { 132 | var polygone = await CreatePolygon(latLngs, options); 133 | await polygone.AddTo(map); 134 | return polygone; 135 | } 136 | 137 | #endregion 138 | 139 | #region Rectangle 140 | public async Task CreateRectangle(LatLngBounds latLngBounds, RectangleOptions? options) 141 | { 142 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createRectangleJsFunction, latLngBounds.ToLatLng(), options); 143 | return new Rectangle(jsReference, _eventedJsInterop); 144 | } 145 | 146 | public async Task CreateRectangleAndAddToMap(LatLngBounds latLngBounds, Map map, RectangleOptions? options) 147 | { 148 | var rectangle = await CreateRectangle(latLngBounds, options); 149 | await rectangle.AddTo(map); 150 | return rectangle; 151 | } 152 | 153 | 154 | #endregion 155 | 156 | #region Circle 157 | public async Task CreateCircle(LatLng latLng, CircleOptions? options) 158 | { 159 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createCircleJsFunction, latLng, options); 160 | return new Circle(jsReference, _eventedJsInterop); 161 | } 162 | 163 | public async Task CreateCircleAndAddToMap(LatLng latLng, Map map, CircleOptions? options) 164 | { 165 | var circle = await CreateCircle(latLng, options); 166 | await circle.AddTo(map); 167 | return circle; 168 | } 169 | #endregion 170 | 171 | #region Create Circle Marker 172 | 173 | public async Task CreateCircleMarker(LatLng latLng, CircleMarkerOptions? options) 174 | { 175 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createCircleMarkerJsFunction, latLng, options); 176 | return new CircleMarker(jsReference, _eventedJsInterop); 177 | } 178 | 179 | public async Task CreateCircleMarkerAndAddToMap(LatLng latLng, Map map, CircleMarkerOptions? options) 180 | { 181 | var circleMarker = await CreateCircleMarker(latLng, options); 182 | await circleMarker.AddTo(map); 183 | return circleMarker; 184 | } 185 | 186 | #endregion 187 | 188 | #region GeoJSON layer 189 | 190 | public async Task CreateGeoJSONLayer(object geojson, GeoJSONOptions? options) 191 | { 192 | IJSObjectReference jsReference = await _jsRuntime.InvokeAsync(_createGeoJSONLayerJsFunction, geojson, options); 193 | return new GeoJSONLayer(jsReference); 194 | } 195 | 196 | public async Task CreateGeoJSONLayerAndAddToMap(object geojson, Map map, GeoJSONOptions? options) 197 | { 198 | var geoJson = await CreateGeoJSONLayer(geojson, options); 199 | await geoJson.AddTo(map); 200 | return geoJson; 201 | } 202 | 203 | #endregion 204 | } 205 | } 206 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/JsInterops/Base/BaseJsInterop.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Text; 6 | using System.Threading.Tasks; 7 | 8 | namespace DPBlazorMapLibrary.JsInterops.Base 9 | { 10 | public class BaseJsInterop : IAsyncDisposable, IBaseJsInterop 11 | { 12 | protected readonly Lazy> moduleTask; 13 | 14 | public BaseJsInterop(IJSRuntime jsRuntime, string jsFilePath) 15 | { 16 | this.moduleTask = new(() => jsRuntime.InvokeAsync( 17 | JsInteropConfig.Import, jsFilePath).AsTask()); 18 | } 19 | 20 | public async ValueTask DisposeAsync() 21 | { 22 | if (this.moduleTask.IsValueCreated) 23 | { 24 | IJSObjectReference module = await this.moduleTask.Value; 25 | await module.DisposeAsync(); 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/JsInterops/Base/IBaseJsInterop.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary.JsInterops.Base 2 | { 3 | public interface IBaseJsInterop 4 | { 5 | ValueTask DisposeAsync(); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/JsInterops/Base/JsInteropConfig.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary.JsInterops.Base 2 | { 3 | public static class JsInteropConfig 4 | { 5 | public const string BaseJsFolder = "./_content/DPBlazorMapLibrary/"; 6 | public const string MapFile = "map.js"; 7 | public const string EventedFile = "evented.js"; 8 | public const string IconFactoryFile = "iconFactory.js"; 9 | public const string Import = "import"; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/JsInterops/Events/EventedJsInterop.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Base; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary.JsInterops.Events 5 | { 6 | public class EventedJsInterop : BaseJsInterop, IEventedJsInterop 7 | { 8 | private static readonly string _jsFilePath = $"{JsInteropConfig.BaseJsFolder}{JsInteropConfig.EventedFile}"; 9 | private const string _onCallbackJsFanction = "onCallback"; 10 | 11 | public EventedJsInterop(IJSRuntime jsRuntime) : base(jsRuntime, _jsFilePath) 12 | { 13 | 14 | } 15 | 16 | public async ValueTask OnCallback( 17 | DotNetObjectReference eventedClass, 18 | IJSObjectReference evented, 19 | string eventType) 20 | { 21 | IJSObjectReference module = await moduleTask.Value; 22 | await module.InvokeVoidAsync(_onCallbackJsFanction, eventedClass, evented, eventType); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/JsInterops/Events/IEventedJsInterop.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace DPBlazorMapLibrary.JsInterops.Events 4 | { 5 | public interface IEventedJsInterop 6 | { 7 | ValueTask OnCallback(DotNetObjectReference eventedClass, IJSObjectReference eventedReference, string eventType); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/JsInterops/LeftletDefaultIconFactories/IIconFactoryJsInterop.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace DPBlazorMapLibrary.JsInterops.LeftletDefaultIconFactories 4 | { 5 | public interface IIconFactoryJsInterop 6 | { 7 | ValueTask CreateDefaultIcon(); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/JsInterops/LeftletDefaultIconFactories/IconFactoryJsInterop.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Base; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary.JsInterops.LeftletDefaultIconFactories 5 | { 6 | public class IconFactoryJsInterop : BaseJsInterop, IIconFactoryJsInterop 7 | { 8 | private static readonly string _jsFilePath = $"{JsInteropConfig.BaseJsFolder}{JsInteropConfig.IconFactoryFile}"; 9 | private const string _createDefaultIconJsFunction = "createDefaultIcon"; 10 | 11 | public IconFactoryJsInterop(IJSRuntime jsRuntime) : base(jsRuntime, _jsFilePath) 12 | { 13 | 14 | } 15 | 16 | public async ValueTask CreateDefaultIcon() 17 | { 18 | IJSObjectReference module = await moduleTask.Value; 19 | return await module.InvokeAsync(_createDefaultIconJsFunction); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/JsInterops/Maps/IMapJsInterop.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Base; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary.JsInterops.Maps 5 | { 6 | public interface IMapJsInterop : IBaseJsInterop 7 | { 8 | ValueTask Initialize(string id, MapOptions mapOptions); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/JsInterops/Maps/MapJsInterop.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Base; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary.JsInterops.Maps 5 | { 6 | public class MapJsInterop : BaseJsInterop, IMapJsInterop 7 | { 8 | private static readonly string _jsFilePath = $"{JsInteropConfig.BaseJsFolder}{JsInteropConfig.MapFile}"; 9 | private const string _initializeJsFunction = "initialize"; 10 | 11 | 12 | public MapJsInterop(IJSRuntime jsRuntime) : base(jsRuntime, _jsFilePath) 13 | { 14 | 15 | } 16 | 17 | public async ValueTask Initialize(string id, MapOptions mapOptions) 18 | { 19 | IJSObjectReference module = await moduleTask.Value; 20 | return await module.InvokeAsync(_initializeJsFunction, id, mapOptions); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/BaseJsReferences/JsReferenceBase.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | /// 6 | /// Base class for a reference to a js object 7 | /// 8 | public class JsReferenceBase 9 | { 10 | #pragma warning disable CS8618 11 | /// 12 | /// Js References 13 | /// 14 | public IJSObjectReference JsReference; 15 | #pragma warning restore CS8618 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Basics/Icons/Icon.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | public class Icon : JsReferenceBase 6 | { 7 | public Icon(IJSObjectReference jsReference) 8 | { 9 | JsReference = jsReference; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Basics/Icons/IconOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class IconOptions 4 | { 5 | /// 6 | /// (required) The URL to the icon image (absolute or relative to your script path). 7 | /// 8 | public string IconUrl { get; init; } = null; 9 | 10 | /// 11 | /// The URL to a retina sized version of the icon image (absolute or relative to your script path). Used for Retina screen devices. 12 | /// 13 | public string IconRetinaUrl { get; init; } = null; 14 | 15 | /// 16 | /// Size of the icon image in pixels. 17 | /// 18 | public Point IconSize { get; init; } = null; 19 | 20 | /// 21 | /// The coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins. 22 | /// 23 | public Point IconAnchor { get; init; } = null; 24 | 25 | /// 26 | /// The coordinates of the point from which popups will "open", relative to the icon anchor. 27 | /// 28 | public Point PopupAnchor { get; init; } = new Point(0, 0); 29 | /// 30 | /// The coordinates of the point from which tooltips will "open", relative to the icon anchor. 31 | /// 32 | public Point TooltipAnchor { get; init; } = new Point(0, 0); 33 | /// 34 | /// The URL to the icon shadow image. If not specified, no shadow image will be created. 35 | /// 36 | public string ShadowUrl { get; init; } = null; 37 | 38 | /// 39 | /// ? 40 | /// 41 | public string ShadowRetinaUrl { get; init; } = null; 42 | 43 | /// 44 | /// Size of the shadow image in pixels. 45 | /// 46 | public Point ShadowSize { get; init; } = null; 47 | 48 | /// 49 | /// The coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified). 50 | /// 51 | public Point ShadowAnchor { get; init; } = null; 52 | 53 | /// 54 | /// A custom class name to assign to both icon and shadow images. Empty by default. 55 | /// 56 | public string ClassName { get; init; } = null; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Basics/LatLng.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class LatLng 4 | { 5 | public LatLng() 6 | { 7 | } 8 | 9 | public LatLng(double lat, double lng) 10 | { 11 | Lat = lat; 12 | Lng = lng; 13 | Alt = 0; 14 | } 15 | 16 | public LatLng(double lat, double lng, double alt) 17 | { 18 | Lat = lat; 19 | Lng = lng; 20 | Alt = alt; 21 | } 22 | 23 | public double Lat { get; set; } 24 | public double Lng { get; set; } 25 | public double Alt { get; set; } 26 | 27 | /// 28 | /// Формула сферического закона косинусов, 29 | /// для расчета дистанции в милях 30 | /// 31 | /// точка 32 | /// расстояние до точки в милях 33 | /// 57 | /// Формула сферического закона косинусов, 58 | /// для расчета дистанции в километрах 59 | /// 60 | /// точка 61 | /// расстояние до точки в км 62 | /// 69 | /// Формула сферического закона косинусов, 70 | /// для расчета дистанции в метрах 71 | /// 72 | /// точка 73 | /// расстояние до точки в метрах 74 | /// ToLatLng() 19 | { 20 | return new List() { SouthWest, NorthEast }; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Basics/Point.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class Point 4 | { 5 | public Point(int x, int y) 6 | { 7 | X = x; 8 | Y = y; 9 | } 10 | 11 | public int X { get; } 12 | public int Y { get; } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Events/Event.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class Event 4 | { 5 | public string Type { get; set; } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Events/Evented.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | public class Evented : JsReferenceBase 7 | { 8 | #region Js functions name 9 | private const string _clickJsFunction = "click"; 10 | private const string _dblClickJsFunction = "dblclick"; 11 | private const string _mouseDownJsFunction = "mousedown"; 12 | private const string _mouseUpJsFunction = "mouseup"; 13 | private const string _mouseOverJsFunction = "mouseover"; 14 | private const string _mouseOutJsFunction = "mouseout"; 15 | private const string _contextMenuJsFunction = "contextmenu"; 16 | private const string _offJsFunction = "off"; 17 | #endregion 18 | 19 | protected IEventedJsInterop EventedJsInterop; 20 | private readonly IDictionary> MouseEvents = new Dictionary>(); 21 | 22 | public async Task OnClick(Func callback) 23 | { 24 | await On(_clickJsFunction, callback); 25 | } 26 | 27 | public async Task OnDblClick(Func callback) 28 | { 29 | await On(_dblClickJsFunction, callback); 30 | } 31 | 32 | public async Task OnMouseDown(Func callback) 33 | { 34 | await On(_mouseDownJsFunction, callback); 35 | } 36 | 37 | public async Task OnMouseUp(Func callback) 38 | { 39 | await On(_mouseUpJsFunction, callback); 40 | } 41 | 42 | public async Task OnMouseOver(Func callback) 43 | { 44 | await On(_mouseOverJsFunction, callback); 45 | } 46 | 47 | public async Task OnMouseOut(Func callback) 48 | { 49 | await On(_mouseOutJsFunction, callback); 50 | } 51 | 52 | public async Task OnContextMenu(Func callback) 53 | { 54 | await On(_contextMenuJsFunction, callback); 55 | } 56 | 57 | private async Task On(string eventType, Func callback) 58 | { 59 | if (this.MouseEvents.ContainsKey(eventType)) 60 | { 61 | return; 62 | } 63 | 64 | this.MouseEvents.Add(eventType, callback); 65 | await this.On(eventType); 66 | } 67 | 68 | private async Task On(string eventType) 69 | { 70 | DotNetObjectReference eventedClass = DotNetObjectReference.Create(this); 71 | await this.EventedJsInterop.OnCallback(eventedClass, this.JsReference, eventType); 72 | } 73 | 74 | public async Task Off(string eventType) 75 | { 76 | if (this.MouseEvents.ContainsKey(eventType)) 77 | { 78 | this.MouseEvents.Remove(eventType); 79 | await this.JsReference.InvokeAsync(_offJsFunction, eventType); 80 | } 81 | } 82 | 83 | [JSInvokable] 84 | public async Task OnCallback(string eventType, MouseEvent mouseEvent) 85 | { 86 | bool isEvented = this.MouseEvents.TryGetValue(eventType, out Func callback); 87 | if (isEvented) 88 | { 89 | await callback.Invoke(mouseEvent); 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Events/MouseEvent.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class MouseEvent : Event 4 | { 5 | /// 6 | /// The geographical point where the mouse event occurred. 7 | /// 8 | public LatLng LatLng { get; set; } 9 | 10 | /// 11 | /// Pixel coordinates of the point where the mouse event occurred relative to the map layer. 12 | /// 13 | public Point LayerPoint { get; set; } 14 | 15 | /// 16 | /// Pixel coordinates of the point where the mouse event occurred relative to the map сontainer. 17 | /// 18 | public Point ContainerPoint { get; set; } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/GeoJSON/Crs.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | public class Crs 6 | { 7 | [JsonPropertyName("type")] 8 | public string Type { get; set; } 9 | 10 | [JsonPropertyName("properties")] 11 | public object Properties { get; set; } 12 | } 13 | } -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/GeoJSON/Feature.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | public class Feature 6 | { 7 | [JsonPropertyName("type")] 8 | public string Type { get; set; } 9 | 10 | [JsonPropertyName("properties")] 11 | public object Properties { get; set; } 12 | 13 | [JsonPropertyName("geometry")] 14 | public Geometry Geometry { get; set; } 15 | } 16 | } -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/GeoJSON/GeoJSON.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | public class GeoJSON 6 | { 7 | [JsonPropertyName("type")] 8 | public string Type { get; set; } 9 | 10 | [JsonPropertyName("name")] 11 | public string Name { get; set; } 12 | 13 | [JsonPropertyName("crs")] 14 | public Crs Crs { get; set; } 15 | 16 | [JsonPropertyName("features")] 17 | public List Features { get; set; } 18 | 19 | public static GeoJSON DeserealizeFromString(string json) 20 | { 21 | var geoJson = System.Text.Json.JsonSerializer.Deserialize(json); 22 | return geoJson; 23 | } 24 | 25 | public static async Task DeserealizeFromStringAsync(Stream jsonStream) 26 | { 27 | var geoJson = await System.Text.Json.JsonSerializer.DeserializeAsync(jsonStream); 28 | return geoJson; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/GeoJSON/Geometry.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | public class Geometry 6 | { 7 | [JsonPropertyName("type")] 8 | public string Type { get; set; } 9 | 10 | [JsonPropertyName("coordinates")] 11 | public object[][][] Coordinates { get; set; } 12 | } 13 | } -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/GridLayer.cs: -------------------------------------------------------------------------------- 1 | using System.Drawing; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | /// 6 | /// Generic class for handling a tiled grid of HTML elements. 7 | /// This is the base class for all tile layers and replaces TileLayer.Canvas. 8 | /// GridLayer can be extended to create a tiled grid of HTML elements like , or
. 9 | /// GridLayer will handle creating and animating these DOM elements for you. 10 | ///
11 | public abstract class GridLayer : Layer 12 | { 13 | 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/GridLayerOptions.cs: -------------------------------------------------------------------------------- 1 | using System.Drawing; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | public class GridLayerOptions : LayerOptions 6 | { 7 | public GridLayerOptions() 8 | { 9 | Pane = "tilePane"; 10 | } 11 | 12 | /// 13 | /// Width and height of tiles in the grid. Use a number if width and height are equal, or L.point(width, height) otherwise. 14 | /// 15 | public int TileSize { get; set; } = 256; 16 | 17 | /// 18 | /// Opacity of the tiles. Can be used in the createTile() function. 19 | /// 20 | public double Opacity { get; set; } = 1.0; 21 | 22 | /// 23 | /// By default, a smooth zoom animation will update grid layers every integer zoom level. Setting this option to false will update the grid layer only when the smooth animation ends. 24 | /// 25 | public bool UpdateWhenZooming { get; set; } = true; 26 | 27 | /// 28 | /// Tiles will not update more than once every updateInterval milliseconds when panning. 29 | /// 30 | public int UpdateInterval { get; set; } = 200; 31 | 32 | public int ZIndex { get; set; } = 1; 33 | 34 | /// 35 | /// If set, tiles will only be loaded inside the set. 36 | /// 37 | public (LatLng TopLeft, LatLng BottomRight)? Bounds { get; set; } 38 | 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/InteractiveLayer.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | /// 4 | /// Some Layers can be made interactive - when the user interacts with such a layer, mouse events like click and mouseover can be handled. 5 | /// Use the event handling methods to handle these events. 6 | /// 7 | public abstract class InteractiveLayer : Layer 8 | { 9 | 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/InteractiveLayerOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class InteractiveLayerOptions : LayerOptions 4 | { 5 | /// 6 | /// If false, the layer will not emit mouse events and will act as a part of the underlying map. 7 | /// 8 | public bool Interactive { get; set; } = true; 9 | 10 | /// 11 | /// When true, a mouse event on this layer will trigger the same event on the map (unless L.DomEvent.stopPropagation is used). 12 | /// 13 | public bool BubblingMouseEvents { get; set; } = true; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/Layer.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | /// 6 | /// A set of methods from the Layer base class that all Leaflet layers use. 7 | /// Inherits all methods, options and events from L.Evented. 8 | /// 9 | public abstract class Layer : Evented 10 | { 11 | private const string _addToJsFunction = "addTo"; 12 | private const string _removeJsFunction = "remove"; 13 | private const string _removeFromJsFunction = "removeFrom"; 14 | private const string _bindPopupJsFunction = "bindPopup"; 15 | private const string _unbindPopupJsFunction = "unbindPopup"; 16 | private const string _openPopupJsFunction = "openPopup"; 17 | private const string _closePopupJsFunction = "closePopup"; 18 | private const string _togglePopupJsFunction = "togglePopup"; 19 | private const string _isPopupOpenJsFunction = "isPopupOpen"; 20 | private const string _setPopupContentJsFunction = "setPopupContent"; 21 | private const string _bindTooltipJsFunction = "bindTooltip"; 22 | private const string _unbindTooltipJsFunction = "unbindTooltip"; 23 | private const string _openTooltipJsFunction = "openTooltip"; 24 | private const string _closeTooltipJsFunction = "closeTooltip"; 25 | private const string _toggleTooltipJsFunction = "toggleTooltip"; 26 | private const string _isTooltipOpenJsFunction = "isTooltipOpen"; 27 | private const string _setTooltipContentJsFunction = "setTooltipContent"; 28 | 29 | /// 30 | /// Adds the layer to the given map or layer group. 31 | /// 32 | /// current map 33 | /// current object 34 | public async Task AddTo(Map map) 35 | { 36 | await JsReference.InvokeAsync(_addToJsFunction, map.MapReference); 37 | return this; 38 | } 39 | 40 | /// 41 | /// Removes the layer from the map it is currently active on. 42 | /// 43 | /// 44 | public async Task Remove() 45 | { 46 | await JsReference.InvokeAsync(_removeJsFunction); 47 | await JsReference.DisposeAsync(); 48 | return this; 49 | } 50 | 51 | /// 52 | /// Removes the layer from the given map 53 | /// 54 | /// current map 55 | /// this 56 | public async Task RemoveFrom(Map map) 57 | { 58 | await JsReference.InvokeAsync(_removeFromJsFunction, map.MapReference); 59 | return this; 60 | } 61 | 62 | //TODO: add RemoveFrom( group) 63 | 64 | //TODO: add Extension methods: onAdd, onRemove, getEvents, getAttribution, getAttribution 65 | 66 | 67 | #region Popup 68 | /// 69 | /// Binds a popup to the layer with the passed content and sets up the necessary event listeners. 70 | /// If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement. 71 | /// 72 | /// 73 | /// 74 | //TODO: add options? 75 | public async Task BindPopup(string content) 76 | { 77 | await JsReference.InvokeAsync(_bindPopupJsFunction, content); 78 | return this; 79 | } 80 | 81 | /// 82 | /// Removes the popup previously bound with bindPopup. 83 | /// 84 | /// this 85 | public async Task UnbindPopup() 86 | { 87 | await JsReference.InvokeAsync(_unbindPopupJsFunction); 88 | return this; 89 | } 90 | 91 | /// 92 | /// Opens the bound popup at the specified latlng or at the default popup anchor if no latlng is passed. 93 | /// 94 | /// 95 | /// this 96 | public async Task OpenPopup(LatLng? latLng) 97 | { 98 | await JsReference.InvokeAsync(_openPopupJsFunction, latLng); 99 | return this; 100 | } 101 | 102 | /// 103 | /// Closes the popup bound to this layer if it is open. 104 | /// 105 | /// 106 | public async Task ClosePopup() 107 | { 108 | await JsReference.InvokeAsync(_closePopupJsFunction); 109 | return this; 110 | } 111 | 112 | /// 113 | /// Opens or closes the popup bound to this layer depending on its current state. 114 | /// 115 | /// 116 | public async Task TogglePopup() 117 | { 118 | await JsReference.InvokeAsync(_togglePopupJsFunction); 119 | return this; 120 | } 121 | 122 | /// 123 | /// Returns true if the popup bound to this layer is currently open. 124 | /// 125 | /// true if the popup bound to this layer is currently open 126 | public async Task IsPopupOpen() 127 | { 128 | return await JsReference.InvokeAsync(_isPopupOpenJsFunction); 129 | } 130 | 131 | /// 132 | /// Sets the content of the popup bound to this layer. 133 | /// 134 | /// 135 | /// this 136 | public async Task SetPopupContent(string content) 137 | { 138 | await JsReference.InvokeAsync(_setPopupContentJsFunction, content); 139 | return this; 140 | } 141 | 142 | //TODO: getPopup() 143 | 144 | #endregion 145 | 146 | #region Tooltip 147 | /// 148 | /// Binds a tooltip to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement. 149 | /// 150 | /// content 151 | /// this 152 | //TODO: options? 153 | public async Task BindTooltip(string content) 154 | { 155 | await JsReference.InvokeAsync(_bindTooltipJsFunction, content); 156 | return this; 157 | } 158 | 159 | /// 160 | /// Removes the tooltip previously bound with bindTooltip. 161 | /// 162 | /// this 163 | public async Task UnbindTooltip() 164 | { 165 | await JsReference.InvokeAsync(_unbindTooltipJsFunction); 166 | return this; 167 | } 168 | 169 | /// 170 | /// Opens the bound tooltip at the specified latlng or at the default tooltip anchor if no latlng is passed. 171 | /// 172 | /// 173 | /// this 174 | public async Task OpenTooltip(LatLng? latLng) 175 | { 176 | await JsReference.InvokeAsync(_openTooltipJsFunction, latLng); 177 | return this; 178 | } 179 | 180 | /// 181 | /// Closes the tooltip bound to this layer if it is open. 182 | /// 183 | /// this 184 | public async Task CloseTooltip() 185 | { 186 | await JsReference.InvokeAsync(_closeTooltipJsFunction); 187 | return this; 188 | } 189 | 190 | /// 191 | /// Opens or closes the tooltip bound to this layer depending on its current state. 192 | /// 193 | /// this 194 | public async Task ToggleTooltip() 195 | { 196 | await JsReference.InvokeAsync(_toggleTooltipJsFunction); 197 | return this; 198 | } 199 | 200 | /// 201 | /// Returns true if the tooltip bound to this layer is currently open. 202 | /// 203 | /// true if the tooltip bound to this layer is currently open 204 | public async Task IsTooltipOpen() 205 | { 206 | return await JsReference.InvokeAsync(_isTooltipOpenJsFunction); 207 | } 208 | 209 | /// 210 | /// Sets the content of the tooltip bound to this layer. 211 | /// 212 | /// 213 | /// this 214 | public async Task SetTooltipContent(string content) 215 | { 216 | await JsReference.InvokeAsync(_setTooltipContentJsFunction, content); 217 | return this; 218 | } 219 | 220 | //TODO: getTooltip() 221 | 222 | #endregion 223 | } 224 | } 225 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/LayerOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class LayerOptions 4 | { 5 | public int Id { get; set; } 6 | /// 7 | /// By default the layer will be added to the map's overlay pane. 8 | /// Overriding this option will cause the layer to be placed on another pane by default. 9 | /// 10 | public string Pane { get; set; } = "overlayPane"; 11 | /// 12 | /// String to be shown in the attribution control, e.g. "© OpenStreetMap contributors". 13 | /// It describes the layer data and is often a legal obligation towards copyright holders and tile providers. 14 | /// 15 | public string Attribution { get; set; } = null; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/Markers/Marker.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | public class Marker : InteractiveLayer 7 | { 8 | private const string _getLatLngJsFunction = "getLatLng"; 9 | private const string _setLatLngJsFunction = "setLatLng"; 10 | private const string _setZIndexOffsetJsFunction = "setZIndexOffset"; 11 | private const string _getIconJsFunction = "getIcon"; 12 | private const string _setIconJsFunction = "setIcon"; 13 | private const string _setOpacityJsFunction = "setOpacity"; 14 | 15 | public Marker(IJSObjectReference jsReference, IEventedJsInterop eventedJsInterop) 16 | { 17 | JsReference = jsReference; 18 | EventedJsInterop = eventedJsInterop; 19 | } 20 | 21 | public async Task GetLatLng() 22 | { 23 | return await JsReference.InvokeAsync(_getLatLngJsFunction); 24 | } 25 | 26 | public async Task SetLatLng(LatLng latLng) 27 | { 28 | return await JsReference.InvokeAsync(_setLatLngJsFunction, latLng); 29 | } 30 | 31 | public async Task SetZIndexOffset(int number) 32 | { 33 | return await JsReference.InvokeAsync(_setZIndexOffsetJsFunction, number); 34 | } 35 | 36 | public async Task GetIcon() 37 | { 38 | return await JsReference.InvokeAsync(_getIconJsFunction); 39 | } 40 | 41 | public async Task SetIcon(Icon icon) 42 | { 43 | return await JsReference.InvokeAsync(_setIconJsFunction, icon); 44 | } 45 | 46 | public async Task SetOpacity(double number) 47 | { 48 | return await JsReference.InvokeAsync(_setOpacityJsFunction, number); 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/Markers/MarkerOptions.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using System.Text.Json.Serialization; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | public class MarkerOptions : InteractiveLayerOptions 7 | { 8 | public MarkerOptions() 9 | { 10 | BubblingMouseEvents = false; 11 | Pane = "markerPane"; 12 | } 13 | 14 | private Icon _iconRef; 15 | 16 | [JsonIgnore] 17 | public Icon IconRef 18 | { 19 | get => _iconRef; 20 | init 21 | { 22 | _iconRef = value; 23 | if (value != null) 24 | { 25 | Icon = _iconRef.JsReference; 26 | } 27 | else 28 | { 29 | Icon = null; 30 | } 31 | } 32 | } 33 | 34 | /// 35 | /// Icon instance to use for rendering the marker. See Icon documentation for details on how to customize the marker icon. If not specified, a common instance of L.Icon.Default is used. 36 | /// 37 | public IJSObjectReference Icon { get; init; } 38 | 39 | /// 40 | /// Whether the marker can be tabbed to with a keyboard and clicked by pressing enter. 41 | /// 42 | public bool Keyboard { get; init; } = true; 43 | 44 | /// 45 | /// Text for the browser tooltip that appear on marker hover (no tooltip by default). 46 | /// 47 | public string Title { get; init; } 48 | 49 | /// 50 | /// Text for the alt attribute of the icon image (useful for accessibility). 51 | /// 52 | public string Alt { get; init; } 53 | 54 | /// 55 | /// By default, marker images zIndex is set automatically based on its latitude. Use this option if you want to put the marker on top of all others (or below), specifying a high value like 1000 (or high negative value, respectively). 56 | /// 57 | public int ZIndexOffset { get; init; } = 0; 58 | 59 | /// 60 | /// The opacity of the marker. 61 | /// 62 | public double Opacity { get; init; } = 1d; 63 | 64 | /// 65 | /// If true, the marker will get on top of others when you hover the mouse over it. 66 | /// 67 | public bool RiseOnHover { get; init; } = false; 68 | 69 | /// 70 | /// The z-index offset used for the riseOnHover feature. 71 | /// 72 | public int RiseOffset { get; init; } = 250; 73 | 74 | /// 75 | /// Map pane where the markers shadow will be added. 76 | /// 77 | public string ShadowPane { get; init; } = "shadowPane"; 78 | 79 | 80 | #region Draggable marker options 81 | 82 | /// 83 | /// Whether the marker is draggable with mouse/touch or not. 84 | /// 85 | public bool Draggable { get; init; } = false; 86 | 87 | /// 88 | /// Whether to pan the map when dragging this marker near its edge or not. 89 | /// 90 | public bool AutoPan { get; init; } = false; 91 | 92 | /// 93 | /// Distance (in pixels to the left/right and to the top/bottom) of the map edge to start panning the map. 94 | /// 95 | public Point AutoPanPadding { get; init; } = new Point(50, 50); 96 | 97 | /// 98 | /// Number of pixels the map should pan by. 99 | /// 100 | public int AutoPanSpeed { get; init; } = 10; 101 | 102 | #endregion 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/OtherLayers/FeatureGroups/FeatureGroup.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Text; 6 | using System.Threading.Tasks; 7 | 8 | namespace DPBlazorMapLibrary 9 | { 10 | /// 11 | /// Extended LayerGroup that makes it easier to do the same thing to all its member layers: 12 | /// 13 | public class FeatureGroup : LayerGroup 14 | { 15 | //TODO: setStyle 16 | //TODO: bringToFront 17 | //TODO: bringToBack 18 | //TODO: getBounds 19 | 20 | public FeatureGroup(IJSObjectReference jsReference) : base(jsReference) 21 | { 22 | } 23 | 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/OtherLayers/GeoJSON/GeoJSONLayer.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | /// 6 | /// Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map. Extends FeatureGroup. 7 | /// 8 | public class GeoJSONLayer : FeatureGroup 9 | { 10 | public GeoJSONLayer(IJSObjectReference jsReference) : base(jsReference) 11 | { 12 | } 13 | 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/OtherLayers/GeoJSON/GeoJSONOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class GeoJSONOptions : LayerOptions 4 | { 5 | /// 6 | /// Whether default Markers for "Point" type Features inherit from group options. 7 | /// 8 | public bool MarkersInheritOptions { get; set; } = false; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/OtherLayers/LayerGroups/LayerGroup.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | public class LayerGroup : Layer 6 | { 7 | private const string _addLayerJsFunction = "addLayer"; 8 | private const string _removeLayerJsFunction = "removeLayer"; 9 | private const string _hasLayerJsFunction = "hasLayer"; 10 | 11 | //TODO: clearLayers 12 | //TODO: invoke 13 | //TODO: eachLayer 14 | //TODO: getLayer 15 | //TODO: getLayers 16 | //TODO: setZIndex 17 | //TODO: getLayerId 18 | 19 | public LayerGroup(IJSObjectReference jsReference) 20 | { 21 | JsReference = jsReference; 22 | } 23 | 24 | /// 25 | /// Adds the given layer to the group. 26 | /// 27 | /// 28 | public async Task AddLayer(Layer layer) 29 | { 30 | return await JsReference.InvokeAsync(_addLayerJsFunction, layer); 31 | } 32 | 33 | /// 34 | /// Removes the given layer from the group. 35 | /// 36 | /// 37 | /// 38 | public async Task RemoveLayer(Layer layer) 39 | { 40 | return await JsReference.InvokeAsync(_removeLayerJsFunction, layer); 41 | } 42 | 43 | /// 44 | /// Removes the layer with the given internal ID from the group. 45 | /// 46 | /// 47 | /// 48 | public async Task RemoveLayer(int id) 49 | { 50 | return await JsReference.InvokeAsync(_removeLayerJsFunction, id); 51 | } 52 | 53 | /// 54 | /// Returns true if the given layer is currently added to the group. 55 | /// 56 | /// 57 | /// 58 | public async Task HasLayer(Layer layer) 59 | { 60 | return await JsReference.InvokeAsync(_hasLayerJsFunction, layer); 61 | } 62 | 63 | /// 64 | /// Returns true if the given internal ID is currently added to the group. 65 | /// 66 | /// 67 | /// 68 | public async Task HasLayer(int id) 69 | { 70 | return await JsReference.InvokeAsync(_hasLayerJsFunction, id); 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/RasterLayers/ImageOverlays/ImageOverlay.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | /// 7 | /// Used to load and display a single image over specific bounds of the map. Extends Layer. 8 | /// 9 | public class ImageOverlay : InteractiveLayer 10 | { 11 | private const string _setOpacityJsFunction = "setOpacity"; 12 | private const string _bringToFrontJsFunction = "bringToFront"; 13 | private const string _bringToBackJsFunction = "bringToBack"; 14 | private const string _setUrlJsFunction = "setUrl"; 15 | private const string _setBoundsJsFunction = "setBounds"; 16 | private const string _setZIndexJsFunction = "setZIndex"; 17 | private const string _getBoundsJsFunction = "getBounds"; 18 | private const string _getElementJsFunction = "getElement"; 19 | 20 | //TODO: Add events load, error 21 | 22 | public ImageOverlay(IJSObjectReference jsReference, IEventedJsInterop eventedJsInterop) 23 | { 24 | JsReference = jsReference; 25 | EventedJsInterop = eventedJsInterop; 26 | } 27 | 28 | /// 29 | /// Sets the opacity of the overlay. 30 | /// 31 | /// 32 | /// 33 | public async Task SetOpacity(double opacity) 34 | { 35 | return await JsReference.InvokeAsync(_setOpacityJsFunction, opacity); 36 | } 37 | 38 | /// 39 | /// Brings the layer to the top of all overlays. 40 | /// 41 | /// 42 | public async Task BringToFront() 43 | { 44 | return await JsReference.InvokeAsync(_bringToFrontJsFunction); 45 | } 46 | 47 | /// 48 | /// Brings the layer to the bottom of all overlays. 49 | /// 50 | /// 51 | public async Task BringToBack() 52 | { 53 | return await JsReference.InvokeAsync(_bringToBackJsFunction); 54 | } 55 | 56 | /// 57 | /// Changes the URL of the image. 58 | /// 59 | /// 60 | /// 61 | public async Task SetUrl(string url) 62 | { 63 | return await JsReference.InvokeAsync(_setUrlJsFunction, url); 64 | } 65 | 66 | /// 67 | /// Update the bounds that this ImageOverlay covers 68 | /// 69 | /// 70 | /// 71 | public async Task SetBounds(LatLngBounds bounds) 72 | { 73 | return await JsReference.InvokeAsync(_setBoundsJsFunction, bounds); 74 | } 75 | 76 | /// 77 | /// Changes the zIndex of the image overlay. 78 | /// 79 | /// 80 | /// 81 | public async Task SetZIndex(int value) 82 | { 83 | return await JsReference.InvokeAsync(_setZIndexJsFunction, value); 84 | } 85 | 86 | //TODO: getBounds() 87 | 88 | //TODO: getElement() 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/RasterLayers/ImageOverlays/ImageOverlayOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class ImageOverlayOptions : InteractiveLayerOptions 4 | { 5 | public ImageOverlayOptions() 6 | { 7 | Interactive = true; 8 | } 9 | /// 10 | /// The opacity of the image overlay. 11 | /// 12 | public double Opacity { get; set; } = 1d; 13 | 14 | /// 15 | /// Text for the alt attribute of the image (useful for accessibility). 16 | /// 17 | public string Alt { get; set; } = null; 18 | 19 | /// 20 | /// Whether the crossOrigin attribute will be added to the image. If a String is provided, the image will have its crossOrigin attribute set to the String provided. 21 | /// This is needed if you want to access image pixel data. Refer to CORS Settings for valid String values. 22 | /// 23 | public bool CrossOrigin { get; set; } = false; 24 | 25 | /// 26 | /// URL to the overlay image to show in place of the overlay that failed to load. 27 | /// 28 | public string ErrorOverlayUrl { get; set; } = null; 29 | 30 | /// 31 | /// The explicit zIndex of the overlay layer. 32 | /// 33 | public int ZIndex { get; set; } = 1; 34 | 35 | /// 36 | /// A custom class name to assign to the image. Empty by default. 37 | /// 38 | public string ClassName { get; set; } = null; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/RasterLayers/TileLayers/TileLayer.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | /// 6 | /// Used to load and display tile layers on the map. Note that most tile servers require attribution, which you can set under Layer. 7 | /// 8 | public class TileLayer : GridLayer 9 | { 10 | public TileLayer(IJSObjectReference jsReference) 11 | { 12 | JsReference = jsReference; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/RasterLayers/TileLayers/TileLayerOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class TileLayerOptions : GridLayerOptions 4 | { 5 | 6 | /// 7 | /// The minimum zoom level down to which this layer will be displayed (inclusive). 8 | /// 9 | public float MinZoom { get; set; } 10 | 11 | /// 12 | /// The maximum zoom level up to which this layer will be displayed (inclusive). 13 | /// 14 | public float MaxZoom { get; set; } = 18; 15 | 16 | /// 17 | /// URL to the tile image to show in place of the tile that failed to load. 18 | /// 19 | public string ErrorTileUrl { get; set; } 20 | 21 | /// 22 | /// If set to true, the zoom number used in tile URLs will be reversed (maxZoom - zoom instead of zoom) 23 | /// 24 | public bool IsZoomReversed { get; set; } 25 | 26 | /// 27 | /// The zoom number used in tile URLs will be offset with this value. 28 | /// 29 | public double ZoomOffset { get; set; } 30 | 31 | /// 32 | /// If true and user is on a retina display, it will request four tiles of half the specified size and a bigger zoom level in place of one to utilize the high resolution. 33 | /// 34 | public bool DetectRetina { get; set; } 35 | 36 | public string AccessToken { get; set; } 37 | 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/RasterLayers/VideoOverlays/VideoOverlay.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | /// 7 | /// Used to load and display a video player over specific bounds of the map. Extends ImageOverlay. 8 | /// 9 | public class VideoOverlay : ImageOverlay 10 | { 11 | //TODO: add event Load 12 | 13 | public VideoOverlay(IJSObjectReference jsReference, IEventedJsInterop eventedJsInterop) : base(jsReference, eventedJsInterop) 14 | { 15 | } 16 | 17 | //TODO: getElement() 18 | 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/RasterLayers/VideoOverlays/VideoOverlayOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class VideoOverlayOptions : ImageOverlayOptions 4 | { 5 | /// 6 | /// Whether the video starts playing automatically when loaded. 7 | /// 8 | public bool Autoplay { get; set; } = true; 9 | 10 | /// 11 | /// Whether the video will loop back to the beginning when played. 12 | /// 13 | public bool Loop = true; 14 | 15 | /// 16 | /// Whether the video will save aspect ratio after the projection. Relevant for supported browsers. See browser compatibility 17 | /// 18 | public bool KeepAspectRatio = true; 19 | 20 | /// 21 | /// Whether the video starts on mute when loaded. 22 | /// 23 | public bool Muted { get; set; } = false; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/CircleMarkers/CircleMarker.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | /// 7 | /// A circle of a fixed size with radius specified in pixels. Extends Path. 8 | /// 9 | public class CircleMarker : Path 10 | { 11 | private const string _toGeoJSONJsFunction = "toGeoJSON"; 12 | private const string _setLatLngJsFunction = "setLatLng"; 13 | private const string _getLatLngJsFunction = "getLatLng"; 14 | private const string _setRadiusJsFunction = "setRadius"; 15 | private const string _getRadiusJsFunction = "getRadius"; 16 | 17 | public CircleMarker(IJSObjectReference jsReference, IEventedJsInterop eventedJsInterop) 18 | { 19 | JsReference = jsReference; 20 | EventedJsInterop = eventedJsInterop; 21 | } 22 | 23 | /// 24 | /// precision is the number of decimal places for coordinates. The default value is 6 places. Returns a GeoJSON representation of the circle marker (as a GeoJSON Point Feature). 25 | /// 26 | /// 27 | /// 28 | public async Task ToGeoJSON(int precision = 6) 29 | { 30 | return await this.JsReference.InvokeAsync(_toGeoJSONJsFunction, precision); 31 | } 32 | 33 | /// 34 | /// Sets the position of a circle marker to a new location. 35 | /// 36 | /// 37 | /// 38 | public async Task SetLatLng(LatLng latLng) 39 | { 40 | await this.JsReference.InvokeAsync(_setLatLngJsFunction, latLng); 41 | return this; 42 | } 43 | 44 | /// 45 | /// Returns the current geographical position of the circle marker 46 | /// 47 | /// 48 | public async Task GetLatLng() 49 | { 50 | return await this.JsReference.InvokeAsync(_getLatLngJsFunction); 51 | } 52 | 53 | /// 54 | /// Sets the radius of a circle marker. Units are in pixels. 55 | /// 56 | /// 57 | /// 58 | public async Task SetRadius(double radius) 59 | { 60 | await this.JsReference.InvokeAsync(_setRadiusJsFunction, radius); 61 | return this; 62 | } 63 | 64 | /// 65 | /// Returns the current radius of the circle 66 | /// 67 | /// 68 | public async Task GetRadius() 69 | { 70 | return await this.JsReference.InvokeAsync(_getRadiusJsFunction); 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/CircleMarkers/CircleMarkerOptions.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Text; 5 | using System.Threading.Tasks; 6 | 7 | namespace DPBlazorMapLibrary 8 | { 9 | public class CircleMarkerOptions : PathOptions 10 | { 11 | public double Radius { get; init; } = 10d; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Circles/Circle.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | /// 7 | /// A class for drawing circle overlays on a map. Extends CircleMarker. 8 | /// 9 | public class Circle : CircleMarker 10 | { 11 | public Circle(IJSObjectReference jsReference, IEventedJsInterop eventedJsInterop) 12 | : base(jsReference, eventedJsInterop) 13 | { 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Circles/CircleOptions.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Text; 5 | using System.Threading.Tasks; 6 | 7 | namespace DPBlazorMapLibrary 8 | { 9 | public class CircleOptions : CircleMarkerOptions 10 | { 11 | 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Paths/Path.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace DPBlazorMapLibrary 4 | { 5 | /// 6 | /// An abstract class that contains options and constants shared between vector overlays (Polygon, Polyline, Circle). Do not use it directly. 7 | /// 8 | public abstract class Path : InteractiveLayer 9 | { 10 | private const string _redrawJsFunction = "redraw"; 11 | private const string _setStyleJsFunction = "setStyle"; 12 | private const string _bringToFrontJsFunction = "bringToFront"; 13 | private const string _bringToBackJsFunction = "bringToBack"; 14 | private const string _getBoundsJsFunction = "getBounds"; 15 | 16 | /// 17 | /// Redraws the layer. Sometimes useful after you changed the coordinates that the path uses. 18 | /// 19 | /// this 20 | public async Task Redraw() 21 | { 22 | await JsReference.InvokeAsync(_redrawJsFunction); 23 | return this; 24 | } 25 | 26 | /// 27 | /// Changes the appearance of a Path based on the options in the Path options object. 28 | /// 29 | /// 30 | /// 31 | public async Task SetStyle(PathOptions options) 32 | { 33 | await JsReference.InvokeAsync(_setStyleJsFunction, options); 34 | return this; 35 | } 36 | 37 | /// 38 | /// Brings the layer to the top of all path layers. 39 | /// 40 | /// 41 | public async Task BringToFront() 42 | { 43 | await JsReference.InvokeAsync(_bringToFrontJsFunction); 44 | return this; 45 | } 46 | 47 | /// 48 | /// Brings the layer to the bottom of all path layers. 49 | /// 50 | /// 51 | public async Task BringToBack() 52 | { 53 | await JsReference.InvokeAsync(_bringToBackJsFunction); 54 | return this; 55 | } 56 | 57 | /// 58 | /// Leaflet getBounds() function returns 59 | /// {"_southWest":{"lat":-23.601783040147975,"lng":-46.537071217637845}, "_northEast":{"lat":-23.556816959852032,"lng":-46.48800878236214}}" 60 | /// 61 | /// LatLngBounds 62 | public virtual async Task GetBounds() 63 | { 64 | 65 | return await this.JsReference.InvokeAsync(_getBoundsJsFunction); 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Paths/PathOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class PathOptions : InteractiveLayerOptions 4 | { 5 | public PathOptions() 6 | { 7 | BubblingMouseEvents = true; 8 | } 9 | 10 | /// 11 | /// Whether to draw stroke along the path. Set it to false to disable borders on polygons or circles. 12 | /// 13 | public bool Stroke { get; init; } = true; 14 | 15 | /// 16 | /// Stroke color 17 | /// 18 | public string Color { get; init; } = "#3388ff"; 19 | 20 | /// 21 | /// Stroke width in pixels 22 | /// 23 | public int Weight { get; init; } = 3; 24 | 25 | /// 26 | /// Stroke opacity 27 | /// 28 | public double Opacity { get; init; } = 1d; 29 | 30 | /// 31 | /// A string that defines shape to be used at the end of the stroke. 32 | /// 33 | public string LineCap { get; init; } = "round"; 34 | 35 | /// 36 | /// A string that defines shape to be used at the corners of the stroke. 37 | /// 38 | public string LineJoin { get; init; } = "round"; 39 | 40 | /// 41 | /// A string that defines the stroke dash pattern. Doesn't work on Canvas-powered layers in some old browsers. 42 | /// 43 | public string DashArray { get; init; } = null; 44 | 45 | /// 46 | /// A string that defines the distance into the dash pattern to start the dash. Doesn't work on Canvas-powered layers in some old browsers. 47 | /// 48 | public string DashOffset { get; init; } 49 | 50 | /// 51 | /// Whether to fill the path with color. Set it to false to disable filling on polygons or circles. 52 | /// 53 | public bool Fill { get; init; } = false; 54 | 55 | /// 56 | /// Fill color. Defaults to the value of the color option 57 | /// 58 | public string FillColor { get; init; } = null; 59 | 60 | /// 61 | /// Fill opacity. 62 | /// 63 | public double FillOpacity { get; init; } = 0.2d; 64 | 65 | /// 66 | /// A string that defines how the inside of a shape is determined. 67 | /// 68 | public string FillRule { get; init; } = "evenodd"; 69 | 70 | 71 | /// 72 | /// Custom class name set on an element. Only for SVG renderer. 73 | /// 74 | public string ClassName { get; init; } = null; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Polygons/Polygon.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | /// 7 | /// A class for drawing polygon overlays on a map. Extends Polyline. 8 | /// 9 | /// Note that points you pass when creating a polygon shouldn't have an additional last point equal to the first one — it's better to filter out such points. 10 | /// 11 | public class Polygon : Polyline 12 | { 13 | public Polygon(IJSObjectReference jsReference, IEventedJsInterop eventedJsInterop) 14 | : base(jsReference, eventedJsInterop) 15 | { 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Polygons/PolygonOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class PolygonOptions : PolylineOptions 4 | { 5 | 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Polylines/Polyline.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | /// 7 | /// A class for drawing polyline overlays on a map. Extends Path. 8 | /// 9 | public class Polyline : Path 10 | { 11 | private const string _toGeoJSONJsFunction = "toGeoJSON"; 12 | private const string _getLatLngsJsFunction = "getLatLngs"; 13 | private const string _setLatLngsJsFunction = "setLatLngs"; 14 | private const string _isEmptyJsFunction = "isEmpty"; 15 | private const string _getCenterJsFunction = "getCenter"; 16 | private const string _addLatLngJsFunction = "addLatLng"; 17 | 18 | public Polyline(IJSObjectReference jsReference, IEventedJsInterop eventedJsInterop) 19 | { 20 | EventedJsInterop = eventedJsInterop; 21 | JsReference = jsReference; 22 | } 23 | 24 | /// 25 | /// Precision is the number of decimal places for coordinates. The default value is 6 places. Returns a GeoJSON representation of the polyline (as a GeoJSON LineString or MultiLineString Feature). 26 | /// 27 | /// 28 | public async Task ToGeoJSON(int precision = 6) 29 | { 30 | return await JsReference.InvokeAsync(_toGeoJSONJsFunction, precision); 31 | } 32 | 33 | /// 34 | /// Returns an array of the points in the path, or nested arrays of points in case of multi-polyline. 35 | /// 36 | /// 37 | public async Task GetLatLngs() 38 | { 39 | return await JsReference.InvokeAsync(_getLatLngsJsFunction); 40 | } 41 | 42 | /// 43 | /// Replaces all the points in the polyline with the given array of geographical points. 44 | /// 45 | /// 46 | /// 47 | public async Task SetLatLngs(IEnumerable latLngs) 48 | { 49 | await JsReference.InvokeAsync(_setLatLngsJsFunction, latLngs); 50 | return this; 51 | } 52 | 53 | /// 54 | /// Returns true if the Polyline has no LatLngs. 55 | /// 56 | /// true if the Polyline has no LatLngs 57 | public async Task IsEmpty() 58 | { 59 | return await JsReference.InvokeAsync(_isEmptyJsFunction); 60 | } 61 | 62 | //TODO: closestLayerPoint( p) 63 | 64 | /// 65 | /// Returns the center (centroid) of the polyline. 66 | /// 67 | /// lat lng 68 | public async Task GetCenter() 69 | { 70 | return await JsReference.InvokeAsync(_getCenterJsFunction); 71 | } 72 | 73 | /// 74 | /// Returns the LatLngBounds of the path. 75 | /// 76 | /// 77 | public override Task GetBounds() 78 | { 79 | return base.GetBounds(); 80 | } 81 | 82 | /// 83 | /// Adds a given point to the polyline. By default, adds to the first ring of the polyline in case of a multi-polyline, but can be overridden by passing a specific ring as a LatLng array (that you can earlier access with getLatLngs). 84 | /// 85 | /// 86 | /// 87 | public async Task AddLatLng(LatLng latLng) 88 | { 89 | await JsReference.InvokeAsync(_addLatLngJsFunction, latLng); 90 | return this; 91 | } 92 | 93 | /// 94 | /// Adds a given point to the polyline. By default, adds to the first ring of the polyline in case of a multi-polyline, but can be overridden by passing a specific ring as a LatLng array (that you can earlier access with getLatLngs). 95 | /// 96 | /// 97 | /// 98 | /// this 99 | public async Task AddLatLng(LatLng latLng, IEnumerable latLngs) 100 | { 101 | await JsReference.InvokeAsync(_addLatLngJsFunction, latLng, latLngs); 102 | return this; 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Polylines/PolylineOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class PolylineOptions : PathOptions 4 | { 5 | /// 6 | /// How much to simplify the polyline on each zoom level. 7 | /// More means better performance and smoother look, and less means more accurate representation. 8 | /// 9 | public double SmoothFactor { get; init; } = 1d; 10 | 11 | /// 12 | /// Disable polyline clipping. 13 | /// 14 | public bool NoClip { get; init; } = false; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Rectangles/Rectangle.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | /// 7 | /// A class for drawing rectangle overlays on a map. Extends Polygon. 8 | /// 9 | public class Rectangle : Polygon 10 | { 11 | public Rectangle(IJSObjectReference jsReference, IEventedJsInterop eventedJsInterop) 12 | : base(jsReference, eventedJsInterop) 13 | { 14 | } 15 | 16 | public override Task GetBounds() 17 | { 18 | return base.GetBounds(); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Layers/VectorLayers/Rectangles/RectangleOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class RectangleOptions : PolylineOptions 4 | { 5 | 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Maps/MapEvented.cs: -------------------------------------------------------------------------------- 1 | using DPBlazorMapLibrary.JsInterops.Events; 2 | using Microsoft.JSInterop; 3 | 4 | namespace DPBlazorMapLibrary 5 | { 6 | public class MapEvented : Evented 7 | { 8 | public MapEvented(IJSObjectReference jsReference, IEventedJsInterop eventedJsInterop) 9 | { 10 | JsReference = jsReference; 11 | EventedJsInterop = eventedJsInterop; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/Models/Maps/MapOptions.cs: -------------------------------------------------------------------------------- 1 | namespace DPBlazorMapLibrary 2 | { 3 | public class MapOptions 4 | { 5 | /// 6 | /// Whether Paths should be rendered on a Canvas renderer. By default, all Paths are rendered in a SVG renderer. 7 | /// 8 | public bool PreferCanvas { get; set; } = false; 9 | 10 | #region Control options 11 | 12 | /// 13 | /// Whether a attribution control is added to the map by default. 14 | /// 15 | public bool AttributionControl { get; set; } = true; 16 | 17 | /// 18 | /// Whether a zoom control is added to the map by default. 19 | /// 20 | public bool ZoomControl { get; set; } = true; 21 | 22 | #endregion 23 | 24 | #region Interaction Options 25 | 26 | /// 27 | /// Set it to false if you don't want popups to close when user clicks the map. 28 | /// 29 | public bool ClosePopupOnClick { get; set; } = true; 30 | 31 | /// 32 | /// Forces the map's zoom level to always be a multiple of this, particularly right after a fitBounds() or a pinch-zoom. By default, the zoom level snaps to the nearest integer; lower values (e.g. 0.5 or 0.1) allow for greater granularity. A value of 0 means the zoom level will not be snapped after fitBounds or a pinch-zoom. 33 | /// 34 | public int ZoomSnap { get; set; } = 1; 35 | 36 | /// 37 | /// Controls how much the map's zoom level will change after a zoomIn(), zoomOut(), pressing + or - on the keyboard, or using the zoom controls. Values smaller than 1 (e.g. 0.5) allow for greater granularity. 38 | /// 39 | public int ZoomDelta { get; set; } = 1; 40 | 41 | /// 42 | /// Whether the map automatically handles browser window resize to update itself. 43 | /// 44 | public bool TrackResize { get; set; } = true; 45 | 46 | /// 47 | /// Whether the map can be zoomed to a rectangular area specified by dragging the mouse while pressing the shift key. 48 | /// 49 | public bool BoxZoom { get; set; } = true; 50 | 51 | 52 | //TODO: doubleClickZoom 53 | 54 | /// 55 | /// Whether the map be draggable with mouse/touch or not. 56 | /// 57 | public bool Dragging { get; set; } = true; 58 | #endregion 59 | 60 | #region Map State Options 61 | 62 | 63 | //TODO: add CRS 64 | 65 | /// 66 | /// Initial geographic center of the map 67 | /// 68 | public LatLng Center { get; set; } = new LatLng(0, 0); 69 | 70 | /// 71 | /// Initial map zoom level 72 | /// 73 | public int Zoom { get; set; } = 15; 74 | 75 | /// 76 | /// Array of layers that will be added to the map initially 77 | /// 78 | public Layer[] Layers { get; set; } = Array.Empty(); 79 | 80 | #endregion 81 | 82 | //TODO: add Animation Options 83 | //TODO: add Panning Inertia Options 84 | //TODO: add Keyboard Navigation Options 85 | //TODO: add Mouse wheel options 86 | //TODO: add Touch interaction options 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /DPBlazorMapLibrary/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components.Web -------------------------------------------------------------------------------- /DPBlazorMapLibrary/wwwroot/evented.js: -------------------------------------------------------------------------------- 1 | export function onCallback(dotnetHelper, evented, eventType) { 2 | evented.on(eventType, (mouseEvent) => { 3 | dotnetHelper.invokeMethodAsync('OnCallback', eventType, { 4 | type: mouseEvent.type, 5 | latLng: mouseEvent.latlng, 6 | }); 7 | }); 8 | } -------------------------------------------------------------------------------- /DPBlazorMapLibrary/wwwroot/iconFactory.js: -------------------------------------------------------------------------------- 1 | export function createDefaultIcon() { 2 | return new L.Icon.Default(); 3 | } -------------------------------------------------------------------------------- /DPBlazorMapLibrary/wwwroot/map.js: -------------------------------------------------------------------------------- 1 | export function initialize(divId, options) { 2 | const newMap = L.map(divId, options).setView(options.center, options.zoom); 3 | return newMap; 4 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Denis Polagaev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DPBlazorMap. 2 | 3 | DP Blazor Map is a library for Blazor, which is a wrapper on top of the Leaflet js library. 4 | 5 | [![NuGet version (DPBlazorMapLibrary)](https://img.shields.io/nuget/v/DPBlazorMapLibrary)](https://www.nuget.org/packages/DPBlazorMapLibrary/) 6 | 7 | The project is being created and developed in order to become the basis for creating a geoportal on Blazer. 8 | 9 | ### Template Example 10 | 11 | https://github.com/DP-projects/DPBlazorMapExample 12 | 13 | ## Table of contents 14 | 15 | - [Start](start) 16 | - [Usage](usage) 17 | - [Todo](todo) 18 | 19 | ## Start 20 | 21 | 1. Add NuGet package to your project. 22 | 2. Add latest Leflet required [Leaflet download](https://leafletjs.com/download.html). 23 | 24 | ``` 25 | 26 | 29 | 30 | 31 | 34 | 35 | ``` 36 | 37 | 3. Add ```@using DPBlazorMapLibrary; ``` to your _Import.cshtml file. Or in the places used separately. 38 | 4. Add ```builder.Services.AddMapService();``` in your Program.cs file. 39 | 40 | ## Usage 41 | 42 | 1. Add component. 43 | 44 | ```c# 45 | 46 | 47 | 53 | ``` 54 | 55 | 2. In the code, ```[Inject] public LayerFactory LayerFactory { get; init; }``` 56 | 2.1. Optional: ```[Inject] public IIconFactory IconFactory{ get; init; }``` 57 | 58 | 3. Create an instance of the map settings and links to the map component 59 | 60 | ```c# 61 | private MapOptions _mapOptions; 62 | ``` 63 | ```c# 64 | private Map _map; 65 | ``` 66 | 67 | 4. Set the minimum map options required to render the component without errors 68 | 69 | ```c# 70 | protected override void OnInitialized() 71 | { 72 | base.OnInitialized(); 73 | _mapOptions = new MapOptions() 74 | { 75 | Zoom = 13, 76 | }; 77 | } 78 | ``` 79 | 80 | 5. Set the minimum tile layer to have a map rendered 81 | 82 | ```c# 83 | private async Task AfterMapRender() 84 | { 85 | //Create Tile Layer 86 | var tileLayerOptions = new TileLayerOptions() 87 | { 88 | Attribution = "© OpenStreetMap contributors" 89 | }; 90 | 91 | var mainTileLayer = await LayerFactory.CreateTileLayerAndAddToMap("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", _map, tileLayerOptions); 92 | ``` 93 | 94 | 6. Add any additional items; markers, geometry, properties, events, etc... 95 | 96 | ```c# 97 | private async Task AfterMapRender() 98 | { 99 | //Create Tile Layer 100 | var tileLayerOptions = new TileLayerOptions() 101 | { 102 | Attribution = "© OpenStreetMap contributors" 103 | }; 104 | 105 | var mainTileLayer = await LayerFactory.CreateTileLayerAndAddToMap("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", _map, tileLayerOptions); 106 | 107 | 108 | //Create marker 109 | var marker = await LayerFactory.CreateMarkerAndAddToMap(new LatLng(0, 0), _map, null); 110 | 111 | //Create dragable marker 112 | 113 | IconOptions iconOptions = new() 114 | { 115 | IconUrl = "http://leafletjs.com/examples/custom-icons/leaf-green.png", 116 | IconSize = new Point(38, 95), 117 | IconAnchor = new Point(22, 94), 118 | ShadowUrl = "http://leafletjs.com/examples/custom-icons/leaf-shadow.png", 119 | ShadowSize = new Point(50, 64), 120 | ShadowAnchor = new Point(4, 61), 121 | PopupAnchor = new Point(-3, -76), 122 | }; 123 | 124 | MarkerOptions markerOptions = new() 125 | { 126 | Opacity = 0.5, 127 | Draggable = true, 128 | IconRef = await this.IconFactory.Create(iconOptions), 129 | }; 130 | 131 | await this.LayerFactory.CreateMarkerAndAddToMap(new LatLng(0.001, -0.001), _map, markerOptions); 132 | 133 | 134 | //Create marker with events 135 | var coordinate = new LatLng(0, 1); 136 | var markerWithEvents = await LayerFactory.CreateMarkerAndAddToMap(coordinate, _map, null); 137 | await markerWithEvents.OnClick(async (MouseEvent mouseEvent) => 138 | { 139 | 140 | }); 141 | 142 | await markerWithEvents.OnDblClick(async (MouseEvent mouseEvent) => 143 | { 144 | 145 | }); 146 | 147 | await markerWithEvents.OnContextMenu(async (MouseEvent mouseEvent) => 148 | { 149 | 150 | }); 151 | 152 | 153 | //Create polyline 154 | var polylineOptions = new PolylineOptions(); 155 | var polyline = await LayerFactory.CreatePolylineAndAddToMap(new List() { new LatLng(0.1, 0.12), new LatLng(0.14, 0.12), new LatLng(0.12, 0.13) }, _map, polylineOptions); 156 | 157 | //Create polygon 158 | var polygonOptions = new PolygonOptions() { Fill = true, Color = "red" }; 159 | var polygon = await LayerFactory.CreatePolygonAndAddToMap(new List() { new LatLng(1.1, 0.12), new LatLng(1.14, 0.12), new LatLng(1.12, 0.13) }, _map, polygonOptions); 160 | 161 | //Create rectangle 162 | var rectangleOptions = new RectangleOptions() { Fill = true, Color = "black" }; 163 | var rectangle = await LayerFactory.CreateRectangleAndAddToMap(new LatLngBounds(new LatLng(1.1, 0.62), new LatLng(2.14, 1.62)), _map, rectangleOptions); 164 | 165 | //Create circle 166 | var circleOptions = new CircleOptions() { Radius = 1000 }; 167 | var circle = await LayerFactory.CreateCircleAndAddToMap(new LatLng(0, 0), _map, circleOptions); 168 | 169 | //Create circle marker 170 | var circleMarkerOptions = new CircleMarkerOptions() { Radius = 10 }; 171 | var circleMarker = await LayerFactory.CreateCircleMarkerAndAddToMap(new LatLng(0, 1), _map, circleMarkerOptions); 172 | 173 | //Create Video overlay 174 | var videoOverlayOptions = new VideoOverlayOptions(); 175 | videoOverlayOptions.Muted = true; 176 | 177 | var videoOverlay = await LayerFactory.CreateVideoOverlayAndAddToMap("https://www.mapbox.com/bites/00188/patricia_nasa.webm", _map, 178 | new LatLngBounds(new LatLng(32, -130), new LatLng(13, -100)), videoOverlayOptions); 179 | 180 | //Create image overlay 181 | var imageBounds = new LatLngBounds(new LatLng(40.712216, -74.22655), new LatLng(40.773941, -74.12544)); 182 | var imageOverlayOptions = new ImageOverlayOptions(); 183 | var imageOverlay = await LayerFactory.CreateImageOverlayAndAddToMap("http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", _map, 184 | imageBounds, 185 | imageOverlayOptions); 186 | 187 | await _map.FlyToBounds(imageBounds); 188 | 189 | //Create geoJSON layer 190 | var path = System.IO.Path.Combine(System.IO.Directory.GetCurrentDirectory(), "wwwroot", "omsk_vodoem.geojson"); 191 | var json = await File.ReadAllTextAsync(path); 192 | var geoJsonObject = GeoJSON.DeserealizeFromString(json); 193 | var geoJSONLayer = await LayerFactory.CreateGeoJSONLayerAndAddToMap(geoJsonObject, _map, null); 194 | } 195 | ``` 196 | 197 | ## TODO 198 | 199 | - [ ] Add events to layers 200 | 201 | - [ ] Add methods/events to Layer : RemoveFrom, onAdd, onRemove, getEvents, getAttribution, options, options, getPopup, getTooltip, 202 | - [ ] add methods/events to ImageOverlay : event load, event error, getBounds, getElement, 203 | - [ ] add methods/events to VideoOverlay: event load, event error, getElement, 204 | - [ ] add methods/events to Polyline: closestLayerPoint, 205 | - [ ] add methods/events to MapOptions: doubleClickZoom, CRS, Animation Options, Panning Inertia Options, Keyboard Navigation Options, Mouse wheel options, Touch interaction options 206 | --------------------------------------------------------------------------------