diff --git a/404.html b/404.html index 9f2ed9f4..85ab0c7d 100644 --- a/404.html +++ b/404.html @@ -9,7 +9,7 @@ - + diff --git a/assets/images/CameraAnimation-fa32c0855303f845987917f85572b3ce.png b/assets/images/CameraAnimation-5592217ea9628298d58bd7df23c0d712.png similarity index 99% rename from assets/images/CameraAnimation-fa32c0855303f845987917f85572b3ce.png rename to assets/images/CameraAnimation-5592217ea9628298d58bd7df23c0d712.png index c0be15a6..9acca63f 100644 Binary files a/assets/images/CameraAnimation-fa32c0855303f845987917f85572b3ce.png and b/assets/images/CameraAnimation-5592217ea9628298d58bd7df23c0d712.png differ diff --git a/assets/images/ChangeLayerColor-d4183619292940d27c42c993ba5cacc8.png b/assets/images/ChangeLayerColor-5a72ff0cba08c713c83a296279f1894a.png similarity index 99% rename from assets/images/ChangeLayerColor-d4183619292940d27c42c993ba5cacc8.png rename to assets/images/ChangeLayerColor-5a72ff0cba08c713c83a296279f1894a.png index 008eda13..dc437f85 100644 Binary files a/assets/images/ChangeLayerColor-d4183619292940d27c42c993ba5cacc8.png and b/assets/images/ChangeLayerColor-5a72ff0cba08c713c83a296279f1894a.png differ diff --git a/assets/images/ChoroplethLayerByZoomLevel-2a3cee7a776e7afa3f062c971552f0d1.png b/assets/images/ChoroplethLayerByZoomLevel-6ed182f5523dbdcde7bef18626412032.png similarity index 99% rename from assets/images/ChoroplethLayerByZoomLevel-2a3cee7a776e7afa3f062c971552f0d1.png rename to assets/images/ChoroplethLayerByZoomLevel-6ed182f5523dbdcde7bef18626412032.png index 4b8f1b7b..195ecb23 100644 Binary files a/assets/images/ChoroplethLayerByZoomLevel-2a3cee7a776e7afa3f062c971552f0d1.png and b/assets/images/ChoroplethLayerByZoomLevel-6ed182f5523dbdcde7bef18626412032.png differ diff --git a/assets/images/CreateOfflineRegion-0296578d01765f81078b15738d56655f.png b/assets/images/CreateOfflineRegion-711eb3c8ef85fcccf90720fce731bb74.png similarity index 99% rename from assets/images/CreateOfflineRegion-0296578d01765f81078b15738d56655f.png rename to assets/images/CreateOfflineRegion-711eb3c8ef85fcccf90720fce731bb74.png index aae567b8..1e84b33f 100644 Binary files a/assets/images/CreateOfflineRegion-0296578d01765f81078b15738d56655f.png and b/assets/images/CreateOfflineRegion-711eb3c8ef85fcccf90720fce731bb74.png differ diff --git a/assets/images/CustomCallout-59966c8db5822c4b59ecc9ae4b67d8cd.png b/assets/images/CustomCallout-0885ae5ac8b09c5cacb5b7cbbdf3ce31.png similarity index 99% rename from assets/images/CustomCallout-59966c8db5822c4b59ecc9ae4b67d8cd.png rename to assets/images/CustomCallout-0885ae5ac8b09c5cacb5b7cbbdf3ce31.png index 1fe2e661..2eddfcdc 100644 Binary files a/assets/images/CustomCallout-59966c8db5822c4b59ecc9ae4b67d8cd.png and b/assets/images/CustomCallout-0885ae5ac8b09c5cacb5b7cbbdf3ce31.png differ diff --git a/assets/images/CustomIcon-2e6554b46077bfbed472d72ceee6870c.png b/assets/images/CustomIcon-86f656ba88c649304948c2b2decc2aeb.png similarity index 99% rename from assets/images/CustomIcon-2e6554b46077bfbed472d72ceee6870c.png rename to assets/images/CustomIcon-86f656ba88c649304948c2b2decc2aeb.png index fe2db5b7..8f258ccf 100644 Binary files a/assets/images/CustomIcon-2e6554b46077bfbed472d72ceee6870c.png and b/assets/images/CustomIcon-86f656ba88c649304948c2b2decc2aeb.png differ diff --git a/assets/images/CustomIconNativeAsset-f4861138fd9374123b2eff0c28bde10a.png b/assets/images/CustomIconNativeAsset-5f4d474ffcc0bc209f960fa21366a957.png similarity index 99% rename from assets/images/CustomIconNativeAsset-f4861138fd9374123b2eff0c28bde10a.png rename to assets/images/CustomIconNativeAsset-5f4d474ffcc0bc209f960fa21366a957.png index 610198f0..12ef9052 100644 Binary files a/assets/images/CustomIconNativeAsset-f4861138fd9374123b2eff0c28bde10a.png and b/assets/images/CustomIconNativeAsset-5f4d474ffcc0bc209f960fa21366a957.png differ diff --git a/assets/images/CustomNativeUserLocation-38337c947a1d602fae1b6c3aecaa8b4f.png b/assets/images/CustomNativeUserLocation-561310e7161fd488c42ff2dcf0d75d91.png similarity index 99% rename from assets/images/CustomNativeUserLocation-38337c947a1d602fae1b6c3aecaa8b4f.png rename to assets/images/CustomNativeUserLocation-561310e7161fd488c42ff2dcf0d75d91.png index a200dc42..01145b98 100644 Binary files a/assets/images/CustomNativeUserLocation-38337c947a1d602fae1b6c3aecaa8b4f.png and b/assets/images/CustomNativeUserLocation-561310e7161fd488c42ff2dcf0d75d91.png differ diff --git a/assets/images/CustomVectorSource-2052381920dee26df9789ed3196d4e79.png b/assets/images/CustomVectorSource-4f7d04038defb6ec930d41adde10a67f.png similarity index 99% rename from assets/images/CustomVectorSource-2052381920dee26df9789ed3196d4e79.png rename to assets/images/CustomVectorSource-4f7d04038defb6ec930d41adde10a67f.png index dbf36ac3..628831c1 100644 Binary files a/assets/images/CustomVectorSource-2052381920dee26df9789ed3196d4e79.png and b/assets/images/CustomVectorSource-4f7d04038defb6ec930d41adde10a67f.png differ diff --git a/assets/images/DataDrivenCircleColors-573ac20b562f3a2cb22c51455cd4cfb3.png b/assets/images/DataDrivenCircleColors-a51a9b8dd553e5c73b93651ca9159425.png similarity index 99% rename from assets/images/DataDrivenCircleColors-573ac20b562f3a2cb22c51455cd4cfb3.png rename to assets/images/DataDrivenCircleColors-a51a9b8dd553e5c73b93651ca9159425.png index 3ce60c19..274fe741 100644 Binary files a/assets/images/DataDrivenCircleColors-573ac20b562f3a2cb22c51455cd4cfb3.png and b/assets/images/DataDrivenCircleColors-a51a9b8dd553e5c73b93651ca9159425.png differ diff --git a/assets/images/DynamicUrl-b3bffdbe4efaddc8964a1fb1c9654fb8.png b/assets/images/DynamicUrl-a7f5ab91b36d9b829a7db28fe41ca6b9.png similarity index 99% rename from assets/images/DynamicUrl-b3bffdbe4efaddc8964a1fb1c9654fb8.png rename to assets/images/DynamicUrl-a7f5ab91b36d9b829a7db28fe41ca6b9.png index 8eecf2ab..fa02e2f4 100644 Binary files a/assets/images/DynamicUrl-b3bffdbe4efaddc8964a1fb1c9654fb8.png and b/assets/images/DynamicUrl-a7f5ab91b36d9b829a7db28fe41ca6b9.png differ diff --git a/assets/images/Earthquakes-68b7643b390a23afb5dc106aeeda5612.png b/assets/images/Earthquakes-2f5537ae187458f471cc84c5a8fd63fb.png similarity index 98% rename from assets/images/Earthquakes-68b7643b390a23afb5dc106aeeda5612.png rename to assets/images/Earthquakes-2f5537ae187458f471cc84c5a8fd63fb.png index 4c629231..bc9c25b6 100644 Binary files a/assets/images/Earthquakes-68b7643b390a23afb5dc106aeeda5612.png and b/assets/images/Earthquakes-2f5537ae187458f471cc84c5a8fd63fb.png differ diff --git a/assets/images/GeoJSONSource-2d4fedf3d9059ea2a45e2fe9e1da2614.png b/assets/images/GeoJSONSource-7f64c1dfe06f63bdae43d256e85d4e2f.png similarity index 99% rename from assets/images/GeoJSONSource-2d4fedf3d9059ea2a45e2fe9e1da2614.png rename to assets/images/GeoJSONSource-7f64c1dfe06f63bdae43d256e85d4e2f.png index e1a5b7d1..d88e4848 100644 Binary files a/assets/images/GeoJSONSource-2d4fedf3d9059ea2a45e2fe9e1da2614.png and b/assets/images/GeoJSONSource-7f64c1dfe06f63bdae43d256e85d4e2f.png differ diff --git a/assets/images/Markers-738fdaa430d9ef59b39b629f070ea125.png b/assets/images/GlobeProjection-5592217ea9628298d58bd7df23c0d712.png similarity index 99% rename from assets/images/Markers-738fdaa430d9ef59b39b629f070ea125.png rename to assets/images/GlobeProjection-5592217ea9628298d58bd7df23c0d712.png index 6c757904..9acca63f 100644 Binary files a/assets/images/Markers-738fdaa430d9ef59b39b629f070ea125.png and b/assets/images/GlobeProjection-5592217ea9628298d58bd7df23c0d712.png differ diff --git a/assets/images/Heatmap-de4b4ac540b0222090487cc58f585f90.png b/assets/images/Heatmap-9390e5e61e053fdc3596571f99e18822.png similarity index 99% rename from assets/images/Heatmap-de4b4ac540b0222090487cc58f585f90.png rename to assets/images/Heatmap-9390e5e61e053fdc3596571f99e18822.png index 8650f983..6c066f6f 100644 Binary files a/assets/images/Heatmap-de4b4ac540b0222090487cc58f585f90.png and b/assets/images/Heatmap-9390e5e61e053fdc3596571f99e18822.png differ diff --git a/assets/images/ImageOverlay-0e71f7eede38a230c24aeee6fd861cbe.png b/assets/images/ImageOverlay-0843c73731f35a37c2d3126ba3196a1b.png similarity index 99% rename from assets/images/ImageOverlay-0e71f7eede38a230c24aeee6fd861cbe.png rename to assets/images/ImageOverlay-0843c73731f35a37c2d3126ba3196a1b.png index 74041b6e..0ca56a36 100644 Binary files a/assets/images/ImageOverlay-0e71f7eede38a230c24aeee6fd861cbe.png and b/assets/images/ImageOverlay-0843c73731f35a37c2d3126ba3196a1b.png differ diff --git a/assets/images/IndoorBuilding-29f2dbf01fb53842d60efe3880e008dd.png b/assets/images/IndoorBuilding-644614a5673941b3b6a83bfc7577df79.png similarity index 99% rename from assets/images/IndoorBuilding-29f2dbf01fb53842d60efe3880e008dd.png rename to assets/images/IndoorBuilding-644614a5673941b3b6a83bfc7577df79.png index 7185efef..7d3b37fb 100644 Binary files a/assets/images/IndoorBuilding-29f2dbf01fb53842d60efe3880e008dd.png and b/assets/images/IndoorBuilding-644614a5673941b3b6a83bfc7577df79.png differ diff --git a/assets/images/LocalizeLabels-51883db18d2642925671ed19626facec.png b/assets/images/LocalizeLabels-57a89be278debf517edb525412ac1fa1.png similarity index 99% rename from assets/images/LocalizeLabels-51883db18d2642925671ed19626facec.png rename to assets/images/LocalizeLabels-57a89be278debf517edb525412ac1fa1.png index 7bb8dc9a..d64bc05c 100644 Binary files a/assets/images/LocalizeLabels-51883db18d2642925671ed19626facec.png and b/assets/images/LocalizeLabels-57a89be278debf517edb525412ac1fa1.png differ diff --git a/assets/images/MapAndRNNavigation-213c1fcd3445fcad3acdd3a77224d31a.png b/assets/images/MapAndRNNavigation-5cdd09b97b470df853a1db3916c10b71.png similarity index 97% rename from assets/images/MapAndRNNavigation-213c1fcd3445fcad3acdd3a77224d31a.png rename to assets/images/MapAndRNNavigation-5cdd09b97b470df853a1db3916c10b71.png index 2798ea81..a69e33df 100644 Binary files a/assets/images/MapAndRNNavigation-213c1fcd3445fcad3acdd3a77224d31a.png and b/assets/images/MapAndRNNavigation-5cdd09b97b470df853a1db3916c10b71.png differ diff --git a/assets/images/MapHandlers-ab143930c90d76bc1195d7fa0184dddf.png b/assets/images/MapHandlers-559659ea3ce7063ecfafcba9aef5e47c.png similarity index 99% rename from assets/images/MapHandlers-ab143930c90d76bc1195d7fa0184dddf.png rename to assets/images/MapHandlers-559659ea3ce7063ecfafcba9aef5e47c.png index 07e47980..94e9b41a 100644 Binary files a/assets/images/MapHandlers-ab143930c90d76bc1195d7fa0184dddf.png and b/assets/images/MapHandlers-559659ea3ce7063ecfafcba9aef5e47c.png differ diff --git a/assets/images/MarkerView-86458f0690c4b61f14a7d6ad65b81fc5.png b/assets/images/MarkerView-0db87a93b6e219b1e7c50320f79cbd27.png similarity index 99% rename from assets/images/MarkerView-86458f0690c4b61f14a7d6ad65b81fc5.png rename to assets/images/MarkerView-0db87a93b6e219b1e7c50320f79cbd27.png index 2f026de4..c183c429 100644 Binary files a/assets/images/MarkerView-86458f0690c4b61f14a7d6ad65b81fc5.png and b/assets/images/MarkerView-0db87a93b6e219b1e7c50320f79cbd27.png differ diff --git a/assets/images/GlobeProjection-fa32c0855303f845987917f85572b3ce.png b/assets/images/Markers-5592217ea9628298d58bd7df23c0d712.png similarity index 99% rename from assets/images/GlobeProjection-fa32c0855303f845987917f85572b3ce.png rename to assets/images/Markers-5592217ea9628298d58bd7df23c0d712.png index c0be15a6..9acca63f 100644 Binary files a/assets/images/GlobeProjection-fa32c0855303f845987917f85572b3ce.png and b/assets/images/Markers-5592217ea9628298d58bd7df23c0d712.png differ diff --git a/assets/images/OfflineExample-1baad383522223c3833b2752a8c38f2f.png b/assets/images/OfflineExample-e141d5747d366dc9089fc66886f1b865.png similarity index 99% rename from assets/images/OfflineExample-1baad383522223c3833b2752a8c38f2f.png rename to assets/images/OfflineExample-e141d5747d366dc9089fc66886f1b865.png index 121b8693..ccefd25d 100644 Binary files a/assets/images/OfflineExample-1baad383522223c3833b2752a8c38f2f.png and b/assets/images/OfflineExample-e141d5747d366dc9089fc66886f1b865.png differ diff --git a/assets/images/Ornaments-330699c93cc9980dc1baf310e0845b60.png b/assets/images/Ornaments-b6d5cb57c67164ffa167ed5a22c9a324.png similarity index 99% rename from assets/images/Ornaments-330699c93cc9980dc1baf310e0845b60.png rename to assets/images/Ornaments-b6d5cb57c67164ffa167ed5a22c9a324.png index c49a89a0..cf9018ee 100644 Binary files a/assets/images/Ornaments-330699c93cc9980dc1baf310e0845b60.png and b/assets/images/Ornaments-b6d5cb57c67164ffa167ed5a22c9a324.png differ diff --git a/assets/images/PointAnnotationAnchors-4747138428537f601b075844c329de06.png b/assets/images/PointAnnotationAnchors-aeecdfe8f8c56c4cc18ed80a81ffd05b.png similarity index 99% rename from assets/images/PointAnnotationAnchors-4747138428537f601b075844c329de06.png rename to assets/images/PointAnnotationAnchors-aeecdfe8f8c56c4cc18ed80a81ffd05b.png index 717f591c..97ae1eba 100644 Binary files a/assets/images/PointAnnotationAnchors-4747138428537f601b075844c329de06.png and b/assets/images/PointAnnotationAnchors-aeecdfe8f8c56c4cc18ed80a81ffd05b.png differ diff --git a/assets/images/PointInMapView-ca477f94ab14c7f8882ee0481f1b898f.png b/assets/images/PointInMapView-c520e3ad278d9fc1955c582ded483017.png similarity index 99% rename from assets/images/PointInMapView-ca477f94ab14c7f8882ee0481f1b898f.png rename to assets/images/PointInMapView-c520e3ad278d9fc1955c582ded483017.png index 99046efe..27f6c529 100644 Binary files a/assets/images/PointInMapView-ca477f94ab14c7f8882ee0481f1b898f.png and b/assets/images/PointInMapView-c520e3ad278d9fc1955c582ded483017.png differ diff --git a/assets/images/QueryAtPoint-4615bc5e15d426ffd13c45ab2fa44729.png b/assets/images/QueryAtPoint-57b40bcb85cd67a51040b1a2595c80e7.png similarity index 99% rename from assets/images/QueryAtPoint-4615bc5e15d426ffd13c45ab2fa44729.png rename to assets/images/QueryAtPoint-57b40bcb85cd67a51040b1a2595c80e7.png index 76cdaa1b..3f4f09aa 100644 Binary files a/assets/images/QueryAtPoint-4615bc5e15d426ffd13c45ab2fa44729.png and b/assets/images/QueryAtPoint-57b40bcb85cd67a51040b1a2595c80e7.png differ diff --git a/assets/images/QuerySourceFeatures-5cc699bacafbd1f181ddfc2f5db10b34.png b/assets/images/QuerySourceFeatures-92f96bb93b95c815b50e5e4d8a025f8f.png similarity index 98% rename from assets/images/QuerySourceFeatures-5cc699bacafbd1f181ddfc2f5db10b34.png rename to assets/images/QuerySourceFeatures-92f96bb93b95c815b50e5e4d8a025f8f.png index ef574cbb..657ded74 100644 Binary files a/assets/images/QuerySourceFeatures-5cc699bacafbd1f181ddfc2f5db10b34.png and b/assets/images/QuerySourceFeatures-92f96bb93b95c815b50e5e4d8a025f8f.png differ diff --git a/assets/images/QueryTerrainElevation-8c499014399769c70eeb1b48436a70fa.png b/assets/images/QueryTerrainElevation-ac8cf2d6cfa3e69f451e249355fe0e8d.png similarity index 99% rename from assets/images/QueryTerrainElevation-8c499014399769c70eeb1b48436a70fa.png rename to assets/images/QueryTerrainElevation-ac8cf2d6cfa3e69f451e249355fe0e8d.png index cce92a07..a4ded8d4 100644 Binary files a/assets/images/QueryTerrainElevation-8c499014399769c70eeb1b48436a70fa.png and b/assets/images/QueryTerrainElevation-ac8cf2d6cfa3e69f451e249355fe0e8d.png differ diff --git a/assets/images/QueryWithRect-4adcb6c95e95e7f2f4432a77b3c30bc0.png b/assets/images/QueryWithRect-c40c37baa4123d925decee02683db8f2.png similarity index 99% rename from assets/images/QueryWithRect-4adcb6c95e95e7f2f4432a77b3c30bc0.png rename to assets/images/QueryWithRect-c40c37baa4123d925decee02683db8f2.png index 887fa382..d7935b74 100644 Binary files a/assets/images/QueryWithRect-4adcb6c95e95e7f2f4432a77b3c30bc0.png and b/assets/images/QueryWithRect-c40c37baa4123d925decee02683db8f2.png differ diff --git a/assets/images/RasterSource-0cad8081fe3c2f924951d4e99a7f44bc.png b/assets/images/RasterSource-a563de9b84514426c795eed26ca6db92.png similarity index 99% rename from assets/images/RasterSource-0cad8081fe3c2f924951d4e99a7f44bc.png rename to assets/images/RasterSource-a563de9b84514426c795eed26ca6db92.png index 3b046d76..b15bee42 100644 Binary files a/assets/images/RasterSource-0cad8081fe3c2f924951d4e99a7f44bc.png and b/assets/images/RasterSource-a563de9b84514426c795eed26ca6db92.png differ diff --git a/assets/images/ScalableImages-a2ec1a8f91e52609e42d0c23cc4da9ab.png b/assets/images/ScalableImages-b0bb1ca6eaa283beff9e1f3399ec0a21.png similarity index 98% rename from assets/images/ScalableImages-a2ec1a8f91e52609e42d0c23cc4da9ab.png rename to assets/images/ScalableImages-b0bb1ca6eaa283beff9e1f3399ec0a21.png index 31ac325e..25c45aa3 100644 Binary files a/assets/images/ScalableImages-a2ec1a8f91e52609e42d0c23cc4da9ab.png and b/assets/images/ScalableImages-b0bb1ca6eaa283beff9e1f3399ec0a21.png differ diff --git a/assets/images/SetDisplacement-4267953a60329020cbdeda23ebcda2f5.png b/assets/images/SetDisplacement-e2092af95cad0753f132542693536055.png similarity index 99% rename from assets/images/SetDisplacement-4267953a60329020cbdeda23ebcda2f5.png rename to assets/images/SetDisplacement-e2092af95cad0753f132542693536055.png index 30ea49ac..1cead09f 100644 Binary files a/assets/images/SetDisplacement-4267953a60329020cbdeda23ebcda2f5.png and b/assets/images/SetDisplacement-e2092af95cad0753f132542693536055.png differ diff --git a/assets/images/SetTintColor-7dfdefe8e186c7e310ac7763bb0af8f5.png b/assets/images/SetTintColor-08a1f4fbf5871a641b093ef5f45d7042.png similarity index 99% rename from assets/images/SetTintColor-7dfdefe8e186c7e310ac7763bb0af8f5.png rename to assets/images/SetTintColor-08a1f4fbf5871a641b093ef5f45d7042.png index 8557b945..c3b688e1 100644 Binary files a/assets/images/SetTintColor-7dfdefe8e186c7e310ac7763bb0af8f5.png and b/assets/images/SetTintColor-08a1f4fbf5871a641b093ef5f45d7042.png differ diff --git a/assets/images/ShapeSourceIcon-80996c858c16119b0cc36718b0ad87bf.png b/assets/images/ShapeSourceIcon-c969c5e310fdc7feac74a12fba84b7ac.png similarity index 98% rename from assets/images/ShapeSourceIcon-80996c858c16119b0cc36718b0ad87bf.png rename to assets/images/ShapeSourceIcon-c969c5e310fdc7feac74a12fba84b7ac.png index 147e6712..50a99f0f 100644 Binary files a/assets/images/ShapeSourceIcon-80996c858c16119b0cc36718b0ad87bf.png and b/assets/images/ShapeSourceIcon-c969c5e310fdc7feac74a12fba84b7ac.png differ diff --git a/assets/images/ShowAndHideLayer-a234de294e2cf1e5f40612db3abb0076.png b/assets/images/ShowAndHideLayer-b80407678040036862d4a0989c269d0a.png similarity index 99% rename from assets/images/ShowAndHideLayer-a234de294e2cf1e5f40612db3abb0076.png rename to assets/images/ShowAndHideLayer-b80407678040036862d4a0989c269d0a.png index 7ceaacd5..9c83ac63 100644 Binary files a/assets/images/ShowAndHideLayer-a234de294e2cf1e5f40612db3abb0076.png and b/assets/images/ShowAndHideLayer-b80407678040036862d4a0989c269d0a.png differ diff --git a/assets/images/ShowClick-502607fb8ab6b2a4d75f394473df743f.png b/assets/images/ShowClick-8ef8ff4fa50c6a443e49c288bd35ee26.png similarity index 99% rename from assets/images/ShowClick-502607fb8ab6b2a4d75f394473df743f.png rename to assets/images/ShowClick-8ef8ff4fa50c6a443e49c288bd35ee26.png index 66c3b04c..25cf9742 100644 Binary files a/assets/images/ShowClick-502607fb8ab6b2a4d75f394473df743f.png and b/assets/images/ShowClick-8ef8ff4fa50c6a443e49c288bd35ee26.png differ diff --git a/assets/images/ShowMap-7557ec1bb6a2757be502ae384f808548.png b/assets/images/ShowMap-5779ca1b0f88c8eea8c76fbd20457556.png similarity index 99% rename from assets/images/ShowMap-7557ec1bb6a2757be502ae384f808548.png rename to assets/images/ShowMap-5779ca1b0f88c8eea8c76fbd20457556.png index 2bbe8bcf..c093d1ba 100644 Binary files a/assets/images/ShowMap-7557ec1bb6a2757be502ae384f808548.png and b/assets/images/ShowMap-5779ca1b0f88c8eea8c76fbd20457556.png differ diff --git a/assets/images/ShowMapLocalStyle-60c0f4007a90780b3e6865c6424beb4f.png b/assets/images/ShowMapLocalStyle-a16e78102b4a0a2e79993f67899a3cc3.png similarity index 98% rename from assets/images/ShowMapLocalStyle-60c0f4007a90780b3e6865c6424beb4f.png rename to assets/images/ShowMapLocalStyle-a16e78102b4a0a2e79993f67899a3cc3.png index c14bc923..ad6c2df0 100644 Binary files a/assets/images/ShowMapLocalStyle-60c0f4007a90780b3e6865c6424beb4f.png and b/assets/images/ShowMapLocalStyle-a16e78102b4a0a2e79993f67899a3cc3.png differ diff --git a/assets/images/ShowPointAnnotation-b78b59740cd58d77d46f0411554775c6.png b/assets/images/ShowPointAnnotation-e838fbcff4d2b1f46c661e0745a6e5db.png similarity index 99% rename from assets/images/ShowPointAnnotation-b78b59740cd58d77d46f0411554775c6.png rename to assets/images/ShowPointAnnotation-e838fbcff4d2b1f46c661e0745a6e5db.png index 213a49ce..455c0664 100644 Binary files a/assets/images/ShowPointAnnotation-b78b59740cd58d77d46f0411554775c6.png and b/assets/images/ShowPointAnnotation-e838fbcff4d2b1f46c661e0745a6e5db.png differ diff --git a/assets/images/ShowRegionDidChange-38d36d073b2d247d2158d300949f52b2.png b/assets/images/ShowRegionDidChange-d14e83bf57b4f8bddbbfde4e4809dbdd.png similarity index 99% rename from assets/images/ShowRegionDidChange-38d36d073b2d247d2158d300949f52b2.png rename to assets/images/ShowRegionDidChange-d14e83bf57b4f8bddbbfde4e4809dbdd.png index 5c8eef3a..f395b54d 100644 Binary files a/assets/images/ShowRegionDidChange-38d36d073b2d247d2158d300949f52b2.png and b/assets/images/ShowRegionDidChange-d14e83bf57b4f8bddbbfde4e4809dbdd.png differ diff --git a/assets/images/SourceLayerVisibility-80f26d462bf8c7440b16e210d8b1cc6c.png b/assets/images/SourceLayerVisibility-f6d2e002cdfe1a062f140db564883aec.png similarity index 99% rename from assets/images/SourceLayerVisibility-80f26d462bf8c7440b16e210d8b1cc6c.png rename to assets/images/SourceLayerVisibility-f6d2e002cdfe1a062f140db564883aec.png index 202d1d29..8e1c1a20 100644 Binary files a/assets/images/SourceLayerVisibility-80f26d462bf8c7440b16e210d8b1cc6c.png and b/assets/images/SourceLayerVisibility-f6d2e002cdfe1a062f140db564883aec.png differ diff --git a/assets/images/StyleJson-e869428e4395a0b15f386294d5cb318d.png b/assets/images/StyleJson-fbd5562bfa5b0dce0b77c121ff99c307.png similarity index 99% rename from assets/images/StyleJson-e869428e4395a0b15f386294d5cb318d.png rename to assets/images/StyleJson-fbd5562bfa5b0dce0b77c121ff99c307.png index 0734ba54..f7668e99 100644 Binary files a/assets/images/StyleJson-e869428e4395a0b15f386294d5cb318d.png and b/assets/images/StyleJson-fbd5562bfa5b0dce0b77c121ff99c307.png differ diff --git a/assets/images/TerrainSkyAtmosphere-53b2c21d03ff156b5f95e2aa3697dfdc.png b/assets/images/TerrainSkyAtmosphere-12d002430e88213ebb70af9646e7c3c2.png similarity index 99% rename from assets/images/TerrainSkyAtmosphere-53b2c21d03ff156b5f95e2aa3697dfdc.png rename to assets/images/TerrainSkyAtmosphere-12d002430e88213ebb70af9646e7c3c2.png index 2698483a..875e1dff 100644 Binary files a/assets/images/TerrainSkyAtmosphere-53b2c21d03ff156b5f95e2aa3697dfdc.png and b/assets/images/TerrainSkyAtmosphere-12d002430e88213ebb70af9646e7c3c2.png differ diff --git a/assets/images/TwoByTwo-e71452f3e43eaf26ba06f51d84301581.png b/assets/images/TwoByTwo-4c727b7a1bef6048697d676351007ae8.png similarity index 99% rename from assets/images/TwoByTwo-e71452f3e43eaf26ba06f51d84301581.png rename to assets/images/TwoByTwo-4c727b7a1bef6048697d676351007ae8.png index 9d093a68..4ff4c8db 100644 Binary files a/assets/images/TwoByTwo-e71452f3e43eaf26ba06f51d84301581.png and b/assets/images/TwoByTwo-4c727b7a1bef6048697d676351007ae8.png differ diff --git a/assets/images/UserLocationPadding-d43e231f58fb8e78baac3fc9807b7c44.png b/assets/images/UserLocationPadding-deac6cbfebb97cc9100f343a3f4ecc25.png similarity index 99% rename from assets/images/UserLocationPadding-d43e231f58fb8e78baac3fc9807b7c44.png rename to assets/images/UserLocationPadding-deac6cbfebb97cc9100f343a3f4ecc25.png index ede46791..cc490ce2 100644 Binary files a/assets/images/UserLocationPadding-d43e231f58fb8e78baac3fc9807b7c44.png and b/assets/images/UserLocationPadding-deac6cbfebb97cc9100f343a3f4ecc25.png differ diff --git a/assets/images/UserLocationRenderMode-9ea69cb0a373df12fa345f6cf55307c9.png b/assets/images/UserLocationRenderMode-bc8939c2428ed9d753e83c8b3566a4a7.png similarity index 98% rename from assets/images/UserLocationRenderMode-9ea69cb0a373df12fa345f6cf55307c9.png rename to assets/images/UserLocationRenderMode-bc8939c2428ed9d753e83c8b3566a4a7.png index 307f03f0..a5881d52 100644 Binary files a/assets/images/UserLocationRenderMode-9ea69cb0a373df12fa345f6cf55307c9.png and b/assets/images/UserLocationRenderMode-bc8939c2428ed9d753e83c8b3566a4a7.png differ diff --git a/assets/images/UserLocationUpdates-edbb01afa3e44c3175e7f000c6f50474.png b/assets/images/UserLocationUpdates-c8be7fb6b56973a1120c633485cf7ae2.png similarity index 99% rename from assets/images/UserLocationUpdates-edbb01afa3e44c3175e7f000c6f50474.png rename to assets/images/UserLocationUpdates-c8be7fb6b56973a1120c633485cf7ae2.png index ca3f8fe4..7c385b45 100644 Binary files a/assets/images/UserLocationUpdates-edbb01afa3e44c3175e7f000c6f50474.png and b/assets/images/UserLocationUpdates-c8be7fb6b56973a1120c633485cf7ae2.png differ diff --git a/assets/images/WatercolorRasterTiles-8420a3ed0bd107c10ce21e73f0250688.png b/assets/images/WatercolorRasterTiles-59ac95c6871b0aa0e149933bb805f202.png similarity index 99% rename from assets/images/WatercolorRasterTiles-8420a3ed0bd107c10ce21e73f0250688.png rename to assets/images/WatercolorRasterTiles-59ac95c6871b0aa0e149933bb805f202.png index 8d2120f7..7468e7a9 100644 Binary files a/assets/images/WatercolorRasterTiles-8420a3ed0bd107c10ce21e73f0250688.png and b/assets/images/WatercolorRasterTiles-59ac95c6871b0aa0e149933bb805f202.png differ diff --git a/assets/js/00f847ac.85f5d7c1.js b/assets/js/00f847ac.1c259112.js similarity index 98% rename from assets/js/00f847ac.85f5d7c1.js rename to assets/js/00f847ac.1c259112.js index 13dd085d..88b915f1 100644 --- a/assets/js/00f847ac.85f5d7c1.js +++ b/assets/js/00f847ac.1c259112.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[5364],{8498:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>p,contentTitle:()=>l,default:()=>c,frontMatter:()=>a,metadata:()=>s,toc:()=>i});var n=t(5893),r=t(1151);const a={title:"Choropleth Layer By Zoom Level",tags:["VectorSource"],custom_props:{example_rel_path:"FillRasterLayer/ChoroplethLayerByZoomLevel.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js"},l=void 0,s={id:"examples/FillRasterLayer/ChoroplethLayerByZoomLevel",title:"Choropleth Layer By Zoom Level",description:"ChoroplethLayerByZoomLevel.png}",source:"@site/docs/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/ChoroplethLayerByZoomLevel",permalink:"/docs/examples/FillRasterLayer/ChoroplethLayerByZoomLevel",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js",tags:[{inline:!0,label:"VectorSource",permalink:"/docs/tags/vector-source"}],version:"current",frontMatter:{title:"Choropleth Layer By Zoom Level",tags:["VectorSource"],custom_props:{example_rel_path:"FillRasterLayer/ChoroplethLayerByZoomLevel.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js"},sidebar:"examplesSidebar",previous:{title:"GetZoom",permalink:"/docs/examples/Camera/GetZoom"},next:{title:"Custom Vector Source",permalink:"/docs/examples/FillRasterLayer/CustomVectorSource"}},p={},i=[];function m(e){const o={code:"code",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-jsx",children:"import React from 'react';\nimport Mapbox from '@rnmapbox/maps';\n\nimport sheet from '../../styles/sheet';\n\nconst styles = {\n statePopulation: {\n fillColor: [\n 'interpolate',\n ['linear'],\n ['get', 'population'],\n 0,\n '#F2F12D',\n 500000,\n '#EED322',\n 750000,\n '#E6B71E',\n 1000000,\n '#DA9C20',\n 2500000,\n '#CA8323',\n 5000000,\n '#B86B25',\n 7500000,\n '#A25626',\n 10000000,\n '#8B4225',\n 25000000,\n '#723122',\n ],\n\n fillOpacity: 0.75,\n },\n\n countyPopulation: {\n fillColor: [\n 'interpolate',\n ['linear'],\n ['get', 'population'],\n 0,\n '#F2F12D',\n 100,\n '#EED322',\n 1000,\n '#E6B71E',\n 5000,\n '#DA9C20',\n 10000,\n '#CA8323',\n 50000,\n '#B86B25',\n 100000,\n '#A25626',\n 500000,\n '#8B4225',\n 1000000,\n '#723122',\n ],\n\n fillOpacity: 0.75,\n },\n};\n\nclass ChoroplethLayerByZoomLevel extends React.PureComponent {\n render() {\n return (\n \n \n\n \n \n\n \n \n \n );\n }\n}\n\nexport default ChoroplethLayerByZoomLevel;\n\n\n"})}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.img,{alt:"ChoroplethLayerByZoomLevel.png",src:t(6272).Z+"",width:"295",height:"640"}),"}"]})]})}function c(e={}){const{wrapper:o}={...(0,r.a)(),...e.components};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}},6272:(e,o,t)=>{t.d(o,{Z:()=>n});const n=t.p+"assets/images/ChoroplethLayerByZoomLevel-2a3cee7a776e7afa3f062c971552f0d1.png"},1151:(e,o,t)=>{t.d(o,{a:()=>l});var n=t(7294);const r={},a=n.createContext(r);function l(e){const o=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[5364],{8498:(e,o,t)=>{t.r(o),t.d(o,{assets:()=>p,contentTitle:()=>l,default:()=>c,frontMatter:()=>a,metadata:()=>s,toc:()=>i});var n=t(5893),r=t(1151);const a={title:"Choropleth Layer By Zoom Level",tags:["VectorSource"],custom_props:{example_rel_path:"FillRasterLayer/ChoroplethLayerByZoomLevel.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js"},l=void 0,s={id:"examples/FillRasterLayer/ChoroplethLayerByZoomLevel",title:"Choropleth Layer By Zoom Level",description:"ChoroplethLayerByZoomLevel.png}",source:"@site/docs/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/ChoroplethLayerByZoomLevel",permalink:"/docs/examples/FillRasterLayer/ChoroplethLayerByZoomLevel",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js",tags:[{inline:!0,label:"VectorSource",permalink:"/docs/tags/vector-source"}],version:"current",frontMatter:{title:"Choropleth Layer By Zoom Level",tags:["VectorSource"],custom_props:{example_rel_path:"FillRasterLayer/ChoroplethLayerByZoomLevel.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js"},sidebar:"examplesSidebar",previous:{title:"GetZoom",permalink:"/docs/examples/Camera/GetZoom"},next:{title:"Custom Vector Source",permalink:"/docs/examples/FillRasterLayer/CustomVectorSource"}},p={},i=[];function m(e){const o={code:"code",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-jsx",children:"import React from 'react';\nimport Mapbox from '@rnmapbox/maps';\n\nimport sheet from '../../styles/sheet';\n\nconst styles = {\n statePopulation: {\n fillColor: [\n 'interpolate',\n ['linear'],\n ['get', 'population'],\n 0,\n '#F2F12D',\n 500000,\n '#EED322',\n 750000,\n '#E6B71E',\n 1000000,\n '#DA9C20',\n 2500000,\n '#CA8323',\n 5000000,\n '#B86B25',\n 7500000,\n '#A25626',\n 10000000,\n '#8B4225',\n 25000000,\n '#723122',\n ],\n\n fillOpacity: 0.75,\n },\n\n countyPopulation: {\n fillColor: [\n 'interpolate',\n ['linear'],\n ['get', 'population'],\n 0,\n '#F2F12D',\n 100,\n '#EED322',\n 1000,\n '#E6B71E',\n 5000,\n '#DA9C20',\n 10000,\n '#CA8323',\n 50000,\n '#B86B25',\n 100000,\n '#A25626',\n 500000,\n '#8B4225',\n 1000000,\n '#723122',\n ],\n\n fillOpacity: 0.75,\n },\n};\n\nclass ChoroplethLayerByZoomLevel extends React.PureComponent {\n render() {\n return (\n \n \n\n \n \n\n \n \n \n );\n }\n}\n\nexport default ChoroplethLayerByZoomLevel;\n\n\n"})}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.img,{alt:"ChoroplethLayerByZoomLevel.png",src:t(6272).Z+"",width:"295",height:"640"}),"}"]})]})}function c(e={}){const{wrapper:o}={...(0,r.a)(),...e.components};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}},6272:(e,o,t)=>{t.d(o,{Z:()=>n});const n=t.p+"assets/images/ChoroplethLayerByZoomLevel-6ed182f5523dbdcde7bef18626412032.png"},1151:(e,o,t)=>{t.d(o,{a:()=>l});var n=t(7294);const r={},a=n.createContext(r);function l(e){const o=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}}}]); \ No newline at end of file diff --git a/assets/js/04ea8698.fc6a1610.js b/assets/js/04ea8698.cffb2359.js similarity index 91% rename from assets/js/04ea8698.fc6a1610.js rename to assets/js/04ea8698.cffb2359.js index d9245e22..bd4bcde6 100644 --- a/assets/js/04ea8698.fc6a1610.js +++ b/assets/js/04ea8698.cffb2359.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[1605],{290:(e,r,a)=>{a.r(r),a.d(r,{assets:()=>p,contentTitle:()=>n,default:()=>m,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var t=a(5893),o=a(1151);const s={title:"GeoJSON Source",tags:[],custom_props:{example_rel_path:"FillRasterLayer/GeoJSONSource.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/GeoJSONSource.js"},n=void 0,l={id:"examples/FillRasterLayer/GeoJSONSource",title:"GeoJSON Source",description:"GeoJSONSource.png}",source:"@site/docs/examples/FillRasterLayer/GeoJSONSource.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/GeoJSONSource",permalink:"/docs/examples/FillRasterLayer/GeoJSONSource",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/GeoJSONSource.js",tags:[],version:"current",frontMatter:{title:"GeoJSON Source",tags:[],custom_props:{example_rel_path:"FillRasterLayer/GeoJSONSource.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/GeoJSONSource.js"},sidebar:"examplesSidebar",previous:{title:"Custom Vector Source",permalink:"/docs/examples/FillRasterLayer/CustomVectorSource"},next:{title:"Image Overlay",permalink:"/docs/examples/FillRasterLayer/ImageOverlay"}},p={},c=[];function i(e){const r={code:"code",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-jsx",children:"import React from 'react';\nimport MapboxGL from '@rnmapbox/maps';\n\nimport sheet from '../../styles/sheet';\nimport gridPattern from '../../assets/grid_pattern.png';\nimport smileyFaceGeoJSON from '../../assets/smiley_face.json';\nimport BaseExamplePropTypes from '../common/BaseExamplePropTypes';\nimport Page from '../common/Page';\n\nconst layerStyles = {\n background: {\n backgroundPattern: gridPattern,\n },\n smileyFace: {\n fillAntialias: true,\n fillColor: 'white',\n fillOutlineColor: 'rgba(255, 255, 255, 0.84)',\n },\n};\n\nclass GeoJSONSource extends React.Component {\n static propTypes = {\n ...BaseExamplePropTypes,\n };\n\n render() {\n return (\n \n (this.map = ref)}\n style={sheet.matchParent}\n styleURL={MapboxGL.StyleURL.Dark}\n >\n \n\n \n \n \n\n \n \n \n \n \n );\n }\n}\n\nexport default GeoJSONSource;\n\n\n"})}),"\n",(0,t.jsxs)(r.p,{children:[(0,t.jsx)(r.img,{alt:"GeoJSONSource.png",src:a(5869).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:r}={...(0,o.a)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(i,{...e})}):i(e)}},5869:(e,r,a)=>{a.d(r,{Z:()=>t});const t=a.p+"assets/images/GeoJSONSource-2d4fedf3d9059ea2a45e2fe9e1da2614.png"},1151:(e,r,a)=>{a.d(r,{a:()=>n});var t=a(7294);const o={},s=t.createContext(o);function n(e){const r=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[1605],{290:(e,r,a)=>{a.r(r),a.d(r,{assets:()=>c,contentTitle:()=>n,default:()=>m,frontMatter:()=>s,metadata:()=>l,toc:()=>p});var t=a(5893),o=a(1151);const s={title:"GeoJSON Source",tags:[],custom_props:{example_rel_path:"FillRasterLayer/GeoJSONSource.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/GeoJSONSource.js"},n=void 0,l={id:"examples/FillRasterLayer/GeoJSONSource",title:"GeoJSON Source",description:"GeoJSONSource.png}",source:"@site/docs/examples/FillRasterLayer/GeoJSONSource.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/GeoJSONSource",permalink:"/docs/examples/FillRasterLayer/GeoJSONSource",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/GeoJSONSource.js",tags:[],version:"current",frontMatter:{title:"GeoJSON Source",tags:[],custom_props:{example_rel_path:"FillRasterLayer/GeoJSONSource.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/GeoJSONSource.js"},sidebar:"examplesSidebar",previous:{title:"Custom Vector Source",permalink:"/docs/examples/FillRasterLayer/CustomVectorSource"},next:{title:"Image Overlay",permalink:"/docs/examples/FillRasterLayer/ImageOverlay"}},c={},p=[];function i(e){const r={code:"code",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-jsx",children:"import React from 'react';\nimport MapboxGL from '@rnmapbox/maps';\n\nimport sheet from '../../styles/sheet';\nimport gridPattern from '../../assets/grid_pattern.png';\nimport smileyFaceGeoJSON from '../../assets/smiley_face.json';\nimport BaseExamplePropTypes from '../common/BaseExamplePropTypes';\nimport Page from '../common/Page';\n\nconst layerStyles = {\n background: {\n backgroundPattern: gridPattern,\n },\n smileyFace: {\n fillAntialias: true,\n fillColor: 'white',\n fillOutlineColor: 'rgba(255, 255, 255, 0.84)',\n },\n};\n\nclass GeoJSONSource extends React.Component {\n static propTypes = {\n ...BaseExamplePropTypes,\n };\n\n render() {\n return (\n \n (this.map = ref)}\n style={sheet.matchParent}\n styleURL={MapboxGL.StyleURL.Dark}\n >\n \n\n \n \n \n\n \n \n \n \n \n );\n }\n}\n\nexport default GeoJSONSource;\n\n\n"})}),"\n",(0,t.jsxs)(r.p,{children:[(0,t.jsx)(r.img,{alt:"GeoJSONSource.png",src:a(5869).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:r}={...(0,o.a)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(i,{...e})}):i(e)}},5869:(e,r,a)=>{a.d(r,{Z:()=>t});const t=a.p+"assets/images/GeoJSONSource-7f64c1dfe06f63bdae43d256e85d4e2f.png"},1151:(e,r,a)=>{a.d(r,{a:()=>n});var t=a(7294);const o={},s=t.createContext(o);function n(e){const r=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}}}]); \ No newline at end of file diff --git a/assets/js/07badaf3.638eded3.js b/assets/js/07badaf3.2e98becc.js similarity index 98% rename from assets/js/07badaf3.638eded3.js rename to assets/js/07badaf3.2e98becc.js index 9f4530a7..6e1bcc87 100644 --- a/assets/js/07badaf3.638eded3.js +++ b/assets/js/07badaf3.2e98becc.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[6832],{672:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>m,frontMatter:()=>n,metadata:()=>c,toc:()=>u});var o=r(5893),s=r(1151);const n={title:"Custom Vector Source",tags:["VectorSource","VectorSource#features"],custom_props:{example_rel_path:"FillRasterLayer/CustomVectorSource.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/CustomVectorSource.js"},a=void 0,c={id:"examples/FillRasterLayer/CustomVectorSource",title:"Custom Vector Source",description:"CustomVectorSource.png}",source:"@site/docs/examples/FillRasterLayer/CustomVectorSource.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/CustomVectorSource",permalink:"/docs/examples/FillRasterLayer/CustomVectorSource",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/CustomVectorSource.js",tags:[{inline:!0,label:"VectorSource",permalink:"/docs/tags/vector-source"},{inline:!0,label:"VectorSource#features",permalink:"/docs/tags/vector-source-features"}],version:"current",frontMatter:{title:"Custom Vector Source",tags:["VectorSource","VectorSource#features"],custom_props:{example_rel_path:"FillRasterLayer/CustomVectorSource.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/CustomVectorSource.js"},sidebar:"examplesSidebar",previous:{title:"Choropleth Layer By Zoom Level",permalink:"/docs/examples/FillRasterLayer/ChoroplethLayerByZoomLevel"},next:{title:"GeoJSON Source",permalink:"/docs/examples/FillRasterLayer/GeoJSONSource"}},l={},u=[];function i(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import React from 'react';\nimport { MapView, Camera, VectorSource, FillLayer } from '@rnmapbox/maps';\n\nconst styles = {\n boxFill: {\n fillColor: [\n 'interpolate',\n ['linear'],\n ['get', 'box'],\n 0,\n 'green',\n 1,\n 'blue',\n ],\n\n fillAntialias: true,\n },\n matchParent: {\n flex: 1,\n },\n};\n\nconst VECTOR_SOURCE_URL =\n 'mapbox://nickitaliano.cj94go8xl18fl2qp92v8bdivv-4kgl9';\n\nclass CustomVectorSource extends React.PureComponent {\n state = {\n featuresCount: null,\n };\n\n queryFeatures = async () => {\n const features = await this._vectorSource.features([\n 'react-native-example',\n ]);\n this.setState({ featuresCount: features.features.length });\n };\n\n render() {\n return (\n \n \n\n {\n this._vectorSource = source;\n }}\n onPress={(e) => {\n console.log(`VectorSource onPress: ${e.features}`, e.features);\n }}\n >\n \n \n \n );\n }\n}\n\nexport default CustomVectorSource;\n\n\n"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"CustomVectorSource.png",src:r(2577).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(i,{...e})}):i(e)}},2577:(e,t,r)=>{r.d(t,{Z:()=>o});const o=r.p+"assets/images/CustomVectorSource-2052381920dee26df9789ed3196d4e79.png"},1151:(e,t,r)=>{r.d(t,{a:()=>a});var o=r(7294);const s={},n=o.createContext(s);function a(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[6832],{672:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>m,frontMatter:()=>n,metadata:()=>c,toc:()=>u});var o=r(5893),s=r(1151);const n={title:"Custom Vector Source",tags:["VectorSource","VectorSource#features"],custom_props:{example_rel_path:"FillRasterLayer/CustomVectorSource.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/CustomVectorSource.js"},a=void 0,c={id:"examples/FillRasterLayer/CustomVectorSource",title:"Custom Vector Source",description:"CustomVectorSource.png}",source:"@site/docs/examples/FillRasterLayer/CustomVectorSource.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/CustomVectorSource",permalink:"/docs/examples/FillRasterLayer/CustomVectorSource",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/CustomVectorSource.js",tags:[{inline:!0,label:"VectorSource",permalink:"/docs/tags/vector-source"},{inline:!0,label:"VectorSource#features",permalink:"/docs/tags/vector-source-features"}],version:"current",frontMatter:{title:"Custom Vector Source",tags:["VectorSource","VectorSource#features"],custom_props:{example_rel_path:"FillRasterLayer/CustomVectorSource.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/CustomVectorSource.js"},sidebar:"examplesSidebar",previous:{title:"Choropleth Layer By Zoom Level",permalink:"/docs/examples/FillRasterLayer/ChoroplethLayerByZoomLevel"},next:{title:"GeoJSON Source",permalink:"/docs/examples/FillRasterLayer/GeoJSONSource"}},l={},u=[];function i(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import React from 'react';\nimport { MapView, Camera, VectorSource, FillLayer } from '@rnmapbox/maps';\n\nconst styles = {\n boxFill: {\n fillColor: [\n 'interpolate',\n ['linear'],\n ['get', 'box'],\n 0,\n 'green',\n 1,\n 'blue',\n ],\n\n fillAntialias: true,\n },\n matchParent: {\n flex: 1,\n },\n};\n\nconst VECTOR_SOURCE_URL =\n 'mapbox://nickitaliano.cj94go8xl18fl2qp92v8bdivv-4kgl9';\n\nclass CustomVectorSource extends React.PureComponent {\n state = {\n featuresCount: null,\n };\n\n queryFeatures = async () => {\n const features = await this._vectorSource.features([\n 'react-native-example',\n ]);\n this.setState({ featuresCount: features.features.length });\n };\n\n render() {\n return (\n \n \n\n {\n this._vectorSource = source;\n }}\n onPress={(e) => {\n console.log(`VectorSource onPress: ${e.features}`, e.features);\n }}\n >\n \n \n \n );\n }\n}\n\nexport default CustomVectorSource;\n\n\n"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"CustomVectorSource.png",src:r(2577).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(i,{...e})}):i(e)}},2577:(e,t,r)=>{r.d(t,{Z:()=>o});const o=r.p+"assets/images/CustomVectorSource-4f7d04038defb6ec930d41adde10a67f.png"},1151:(e,t,r)=>{r.d(t,{a:()=>a});var o=r(7294);const s={},n=o.createContext(s);function a(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file diff --git a/assets/js/13369b41.bc712b17.js b/assets/js/13369b41.e74dff1c.js similarity index 96% rename from assets/js/13369b41.bc712b17.js rename to assets/js/13369b41.e74dff1c.js index cd6c4fc6..a65720d6 100644 --- a/assets/js/13369b41.bc712b17.js +++ b/assets/js/13369b41.e74dff1c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[6826],{6607:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>l,frontMatter:()=>o,metadata:()=>r,toc:()=>m});var s=n(5893),a=n(1151);const o={title:"Set Displacement",tags:["UserLocation","UserLocation#minDisplacement"],custom_props:{example_rel_path:"UserLocation/SetDisplacement.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/UserLocation/SetDisplacement.js"},i=void 0,r={id:"examples/UserLocation/SetDisplacement",title:"Set Displacement",description:"Change the minimum displacement required to update the user location.",source:"@site/docs/examples/UserLocation/SetDisplacement.md",sourceDirName:"examples/UserLocation",slug:"/examples/UserLocation/SetDisplacement",permalink:"/docs/examples/UserLocation/SetDisplacement",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/UserLocation/SetDisplacement.js",tags:[{inline:!0,label:"UserLocation",permalink:"/docs/tags/user-location"},{inline:!0,label:"UserLocation#minDisplacement",permalink:"/docs/tags/user-location-min-displacement"}],version:"current",frontMatter:{title:"Set Displacement",tags:["UserLocation","UserLocation#minDisplacement"],custom_props:{example_rel_path:"UserLocation/SetDisplacement.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/UserLocation/SetDisplacement.js"},sidebar:"examplesSidebar",previous:{title:"Custom Native UserLocation",permalink:"/docs/examples/UserLocation/CustomNativeUserLocation"},next:{title:"Set Tint Color",permalink:"/docs/examples/UserLocation/SetTintColor"}},c={},m=[];function p(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:"Change the minimum displacement required to update the user location."}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx",children:"import React from 'react';\nimport Mapbox, { MapView, UserLocation, Camera } from '@rnmapbox/maps';\nimport { SafeAreaView } from 'react-native';\nimport { ButtonGroup } from '@rneui/base';\n\nconst DISPLACEMENT = [0, 5, 10];\n\nconst styles = { matchParent: { flex: 1 } };\n\nclass SetDisplacement extends React.Component {\n state = { minDisplacement: DISPLACEMENT[0] };\n\n componentDidMount() {\n Mapbox.locationManager.start();\n }\n\n componentWillUnmount() {\n Mapbox.locationManager.stop();\n }\n\n onDisplacementChange = (index) => {\n this.setState({ minDisplacement: DISPLACEMENT[index] });\n };\n\n render() {\n return (\n \n \n \n\n \n \n `${i} meters`)}\n selectedIndex={DISPLACEMENT.indexOf(this.state.minDisplacement)}\n onPress={this.onDisplacementChange}\n />\n \n );\n }\n}\n\nexport default SetDisplacement;\n\n\n"})}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.img,{alt:"SetDisplacement.png",src:n(2252).Z+"",width:"295",height:"640"}),"}"]})]})}function l(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},2252:(e,t,n)=>{n.d(t,{Z:()=>s});const s=n.p+"assets/images/SetDisplacement-4267953a60329020cbdeda23ebcda2f5.png"},1151:(e,t,n)=>{n.d(t,{a:()=>i});var s=n(7294);const a={},o=s.createContext(a);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[6826],{6607:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>l,frontMatter:()=>o,metadata:()=>r,toc:()=>m});var s=n(5893),a=n(1151);const o={title:"Set Displacement",tags:["UserLocation","UserLocation#minDisplacement"],custom_props:{example_rel_path:"UserLocation/SetDisplacement.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/UserLocation/SetDisplacement.js"},i=void 0,r={id:"examples/UserLocation/SetDisplacement",title:"Set Displacement",description:"Change the minimum displacement required to update the user location.",source:"@site/docs/examples/UserLocation/SetDisplacement.md",sourceDirName:"examples/UserLocation",slug:"/examples/UserLocation/SetDisplacement",permalink:"/docs/examples/UserLocation/SetDisplacement",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/UserLocation/SetDisplacement.js",tags:[{inline:!0,label:"UserLocation",permalink:"/docs/tags/user-location"},{inline:!0,label:"UserLocation#minDisplacement",permalink:"/docs/tags/user-location-min-displacement"}],version:"current",frontMatter:{title:"Set Displacement",tags:["UserLocation","UserLocation#minDisplacement"],custom_props:{example_rel_path:"UserLocation/SetDisplacement.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/UserLocation/SetDisplacement.js"},sidebar:"examplesSidebar",previous:{title:"Custom Native UserLocation",permalink:"/docs/examples/UserLocation/CustomNativeUserLocation"},next:{title:"Set Tint Color",permalink:"/docs/examples/UserLocation/SetTintColor"}},c={},m=[];function p(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:"Change the minimum displacement required to update the user location."}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx",children:"import React from 'react';\nimport Mapbox, { MapView, UserLocation, Camera } from '@rnmapbox/maps';\nimport { SafeAreaView } from 'react-native';\nimport { ButtonGroup } from '@rneui/base';\n\nconst DISPLACEMENT = [0, 5, 10];\n\nconst styles = { matchParent: { flex: 1 } };\n\nclass SetDisplacement extends React.Component {\n state = { minDisplacement: DISPLACEMENT[0] };\n\n componentDidMount() {\n Mapbox.locationManager.start();\n }\n\n componentWillUnmount() {\n Mapbox.locationManager.stop();\n }\n\n onDisplacementChange = (index) => {\n this.setState({ minDisplacement: DISPLACEMENT[index] });\n };\n\n render() {\n return (\n \n \n \n\n \n \n `${i} meters`)}\n selectedIndex={DISPLACEMENT.indexOf(this.state.minDisplacement)}\n onPress={this.onDisplacementChange}\n />\n \n );\n }\n}\n\nexport default SetDisplacement;\n\n\n"})}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.img,{alt:"SetDisplacement.png",src:n(2252).Z+"",width:"295",height:"640"}),"}"]})]})}function l(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},2252:(e,t,n)=>{n.d(t,{Z:()=>s});const s=n.p+"assets/images/SetDisplacement-e2092af95cad0753f132542693536055.png"},1151:(e,t,n)=>{n.d(t,{a:()=>i});var s=n(7294);const a={},o=s.createContext(a);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file diff --git a/assets/js/163132fa.99ae7276.js b/assets/js/163132fa.bdc2d44a.js similarity index 98% rename from assets/js/163132fa.99ae7276.js rename to assets/js/163132fa.bdc2d44a.js index f10f7583..be2f4b4f 100644 --- a/assets/js/163132fa.99ae7276.js +++ b/assets/js/163132fa.bdc2d44a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[1003],{6654:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>p,contentTitle:()=>s,default:()=>m,frontMatter:()=>a,metadata:()=>i,toc:()=>c});var t=o(5893),r=o(1151);const a={title:"Globe Projection",tags:["MapView#projection"],custom_props:{example_rel_path:"V10/GlobeProjection.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/GlobeProjection.tsx"},s=void 0,i={id:"examples/V10/GlobeProjection",title:"Globe Projection",description:"Shows map with globe projection",source:"@site/docs/examples/V10/GlobeProjection.md",sourceDirName:"examples/V10",slug:"/examples/V10/GlobeProjection",permalink:"/docs/examples/V10/GlobeProjection",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/GlobeProjection.tsx",tags:[{inline:!0,label:"MapView#projection",permalink:"/docs/tags/map-view-projection"}],version:"current",frontMatter:{title:"Globe Projection",tags:["MapView#projection"],custom_props:{example_rel_path:"V10/GlobeProjection.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/GlobeProjection.tsx"},sidebar:"examplesSidebar",previous:{title:"Camera Animation",permalink:"/docs/examples/V10/CameraAnimation"},next:{title:"Map Handlers",permalink:"/docs/examples/V10/MapHandlers"}},p={},c=[];function l(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Shows map with globe projection"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:"import React, { useState } from 'react';\nimport { Button } from 'react-native';\nimport {\n MapView,\n SkyLayer,\n Logger,\n Terrain,\n RasterDemSource,\n Atmosphere,\n Camera,\n} from '@rnmapbox/maps';\n\nimport { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc\n\nLogger.setLogLevel('verbose');\n\nconst GlobeProjection = () => {\n const [projection, setProjection] = useState<'globe' | 'mercator'>('globe');\n\n return (\n <>\n \n setProjection(projection === 'globe' ? 'mercator' : 'globe')\n }\n />\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default GlobeProjection;\n\n\n"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.img,{alt:"GlobeProjection.png",src:o(5847).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},5847:(e,n,o)=>{o.d(n,{Z:()=>t});const t=o.p+"assets/images/GlobeProjection-fa32c0855303f845987917f85572b3ce.png"},1151:(e,n,o)=>{o.d(n,{a:()=>s});var t=o(7294);const r={},a=t.createContext(r);function s(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[1003],{6654:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>p,contentTitle:()=>s,default:()=>m,frontMatter:()=>a,metadata:()=>i,toc:()=>c});var t=o(5893),r=o(1151);const a={title:"Globe Projection",tags:["MapView#projection"],custom_props:{example_rel_path:"V10/GlobeProjection.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/GlobeProjection.tsx"},s=void 0,i={id:"examples/V10/GlobeProjection",title:"Globe Projection",description:"Shows map with globe projection",source:"@site/docs/examples/V10/GlobeProjection.md",sourceDirName:"examples/V10",slug:"/examples/V10/GlobeProjection",permalink:"/docs/examples/V10/GlobeProjection",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/GlobeProjection.tsx",tags:[{inline:!0,label:"MapView#projection",permalink:"/docs/tags/map-view-projection"}],version:"current",frontMatter:{title:"Globe Projection",tags:["MapView#projection"],custom_props:{example_rel_path:"V10/GlobeProjection.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/GlobeProjection.tsx"},sidebar:"examplesSidebar",previous:{title:"Camera Animation",permalink:"/docs/examples/V10/CameraAnimation"},next:{title:"Map Handlers",permalink:"/docs/examples/V10/MapHandlers"}},p={},c=[];function l(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Shows map with globe projection"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:"import React, { useState } from 'react';\nimport { Button } from 'react-native';\nimport {\n MapView,\n SkyLayer,\n Logger,\n Terrain,\n RasterDemSource,\n Atmosphere,\n Camera,\n} from '@rnmapbox/maps';\n\nimport { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc\n\nLogger.setLogLevel('verbose');\n\nconst GlobeProjection = () => {\n const [projection, setProjection] = useState<'globe' | 'mercator'>('globe');\n\n return (\n <>\n \n setProjection(projection === 'globe' ? 'mercator' : 'globe')\n }\n />\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default GlobeProjection;\n\n\n"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.img,{alt:"GlobeProjection.png",src:o(5847).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},5847:(e,n,o)=>{o.d(n,{Z:()=>t});const t=o.p+"assets/images/GlobeProjection-5592217ea9628298d58bd7df23c0d712.png"},1151:(e,n,o)=>{o.d(n,{a:()=>s});var t=o(7294);const r={},a=t.createContext(r);function s(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file diff --git a/assets/js/18b78d02.14535420.js b/assets/js/18b78d02.d0c2043c.js similarity index 95% rename from assets/js/18b78d02.14535420.js rename to assets/js/18b78d02.d0c2043c.js index 0199e3f4..2af47646 100644 --- a/assets/js/18b78d02.14535420.js +++ b/assets/js/18b78d02.d0c2043c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[8770],{8440:(e,a,s)=>{s.r(a),s.d(a,{assets:()=>n,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>i,toc:()=>p});var t=s(5893),l=s(1151);const o={title:"Localize Labels",tags:["MapView#localizeLabels"],custom_props:{example_rel_path:"Map/LocalizeLabels.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/LocalizeLabels.tsx"},c=void 0,i={id:"examples/Map/LocalizeLabels",title:"Localize Labels",description:"Localize labels to a specific locale(es).",source:"@site/docs/examples/Map/LocalizeLabels.md",sourceDirName:"examples/Map",slug:"/examples/Map/LocalizeLabels",permalink:"/docs/examples/Map/LocalizeLabels",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/LocalizeLabels.tsx",tags:[{inline:!0,label:"MapView#localizeLabels",permalink:"/docs/tags/map-view-localize-labels"}],version:"current",frontMatter:{title:"Localize Labels",tags:["MapView#localizeLabels"],custom_props:{example_rel_path:"Map/LocalizeLabels.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/LocalizeLabels.tsx"},sidebar:"examplesSidebar",previous:{title:"Dynamic URL",permalink:"/docs/examples/Map/DynamicUrl"},next:{title:"Map and React Navigation",permalink:"/docs/examples/Map/MapAndRNNavigation"}},n={},p=[];function r(e){const a={code:"code",img:"img",p:"p",pre:"pre",...(0,l.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.p,{children:"Localize labels to a specific locale(es)."}),"\n",(0,t.jsx)(a.pre,{children:(0,t.jsx)(a.code,{className:"language-jsx",children:"import React from 'react';\nimport { Camera, MapView } from '@rnmapbox/maps';\n\nconst CENTER_COORD = [-74.00597, 40.71427];\n\nimport { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc\n\nconst LocalizeLabels = () => {\n return (\n \n \n \n );\n};\n\nexport default LocalizeLabels;\n\n\n"})}),"\n",(0,t.jsxs)(a.p,{children:[(0,t.jsx)(a.img,{alt:"LocalizeLabels.png",src:s(4065).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:a}={...(0,l.a)(),...e.components};return a?(0,t.jsx)(a,{...e,children:(0,t.jsx)(r,{...e})}):r(e)}},4065:(e,a,s)=>{s.d(a,{Z:()=>t});const t=s.p+"assets/images/LocalizeLabels-51883db18d2642925671ed19626facec.png"},1151:(e,a,s)=>{s.d(a,{a:()=>c});var t=s(7294);const l={},o=t.createContext(l);function c(e){const a=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[8770],{8440:(e,a,s)=>{s.r(a),s.d(a,{assets:()=>n,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>i,toc:()=>p});var t=s(5893),l=s(1151);const o={title:"Localize Labels",tags:["MapView#localizeLabels"],custom_props:{example_rel_path:"Map/LocalizeLabels.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/LocalizeLabels.tsx"},c=void 0,i={id:"examples/Map/LocalizeLabels",title:"Localize Labels",description:"Localize labels to a specific locale(es).",source:"@site/docs/examples/Map/LocalizeLabels.md",sourceDirName:"examples/Map",slug:"/examples/Map/LocalizeLabels",permalink:"/docs/examples/Map/LocalizeLabels",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/LocalizeLabels.tsx",tags:[{inline:!0,label:"MapView#localizeLabels",permalink:"/docs/tags/map-view-localize-labels"}],version:"current",frontMatter:{title:"Localize Labels",tags:["MapView#localizeLabels"],custom_props:{example_rel_path:"Map/LocalizeLabels.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/LocalizeLabels.tsx"},sidebar:"examplesSidebar",previous:{title:"Dynamic URL",permalink:"/docs/examples/Map/DynamicUrl"},next:{title:"Map and React Navigation",permalink:"/docs/examples/Map/MapAndRNNavigation"}},n={},p=[];function r(e){const a={code:"code",img:"img",p:"p",pre:"pre",...(0,l.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.p,{children:"Localize labels to a specific locale(es)."}),"\n",(0,t.jsx)(a.pre,{children:(0,t.jsx)(a.code,{className:"language-jsx",children:"import React from 'react';\nimport { Camera, MapView } from '@rnmapbox/maps';\n\nconst CENTER_COORD = [-74.00597, 40.71427];\n\nimport { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc\n\nconst LocalizeLabels = () => {\n return (\n \n \n \n );\n};\n\nexport default LocalizeLabels;\n\n\n"})}),"\n",(0,t.jsxs)(a.p,{children:[(0,t.jsx)(a.img,{alt:"LocalizeLabels.png",src:s(4065).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:a}={...(0,l.a)(),...e.components};return a?(0,t.jsx)(a,{...e,children:(0,t.jsx)(r,{...e})}):r(e)}},4065:(e,a,s)=>{s.d(a,{Z:()=>t});const t=s.p+"assets/images/LocalizeLabels-57a89be278debf517edb525412ac1fa1.png"},1151:(e,a,s)=>{s.d(a,{a:()=>c});var t=s(7294);const l={},o=t.createContext(l);function c(e){const a=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}}}]); \ No newline at end of file diff --git a/assets/js/1c473699.b53c6075.js b/assets/js/1c473699.f0aacafb.js similarity index 98% rename from assets/js/1c473699.b53c6075.js rename to assets/js/1c473699.f0aacafb.js index c27a96df..d4251224 100644 --- a/assets/js/1c473699.b53c6075.js +++ b/assets/js/1c473699.f0aacafb.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[169],{9049:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>g,contentTitle:()=>s,default:()=>l,frontMatter:()=>a,metadata:()=>r,toc:()=>p});var i=t(5893),o=t(1151);const a={title:"Show Region Did Change",tags:["MapView#onRegionWillChange","MapView#onRegionIsChanging","MapView#onRegionDidChange"],custom_props:{example_rel_path:"Map/ShowRegionDidChange.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowRegionDidChange.js"},s=void 0,r={id:"examples/Map/ShowRegionDidChange",title:"Show Region Did Change",description:"Demonstates MapView region change events.",source:"@site/docs/examples/Map/ShowRegionDidChange.md",sourceDirName:"examples/Map",slug:"/examples/Map/ShowRegionDidChange",permalink:"/docs/examples/Map/ShowRegionDidChange",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowRegionDidChange.js",tags:[{inline:!0,label:"MapView#onRegionWillChange",permalink:"/docs/tags/map-view-on-region-will-change"},{inline:!0,label:"MapView#onRegionIsChanging",permalink:"/docs/tags/map-view-on-region-is-changing"},{inline:!0,label:"MapView#onRegionDidChange",permalink:"/docs/tags/map-view-on-region-did-change"}],version:"current",frontMatter:{title:"Show Region Did Change",tags:["MapView#onRegionWillChange","MapView#onRegionIsChanging","MapView#onRegionDidChange"],custom_props:{example_rel_path:"Map/ShowRegionDidChange.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowRegionDidChange.js"},sidebar:"examplesSidebar",previous:{title:"Show Map Local Style",permalink:"/docs/examples/Map/ShowMapLocalStyle"},next:{title:"Source Layer Visibility",permalink:"/docs/examples/Map/SourceLayerVisibility"}},g={},p=[];function h(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"Demonstates MapView region change events."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport { Text } from 'react-native';\nimport { MapView, Camera } from '@rnmapbox/maps';\nimport { ButtonGroup } from '@rneui/base';\n\nimport sheet from '../../styles/sheet';\nimport { DEFAULT_CENTER_COORDINATE, SF_OFFICE_COORDINATE } from '../../utils';\nimport Bubble from '../common/Bubble';\n\nconst styles = {\n bubble: { marginBottom: 100 },\n};\n\nconst isValidCoordinate = (geometry) => {\n if (!geometry) {\n return false;\n }\n return geometry.coordinates[0] !== 0 && geometry.coordinates[1] !== 0;\n};\n\nclass ShowRegionDidChange extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n reason: '',\n cameraConfig: {\n centerCoordinate: DEFAULT_CENTER_COORDINATE,\n zoomLevel: 12,\n },\n regionFeature: undefined,\n selectedIndex: 0,\n };\n\n this._tabOptions = [\n { label: 'Fly To', data: SF_OFFICE_COORDINATE },\n {\n label: 'Fit Bounds',\n data: { ne: [-74.12641, 40.797968], sw: [-74.143727, 40.772177] },\n },\n { label: 'Zoom To', data: 16 },\n ];\n\n this.onRegionDidChange = this.onRegionDidChange.bind(this);\n this.onRegionWillChange = this.onRegionWillChange.bind(this);\n this.onRegionIsChanging = this.onRegionIsChanging.bind(this);\n this.onOptionPress = this.onOptionPress.bind(this);\n }\n\n async onOptionPress(optionIndex, optionData) {\n if (optionIndex === 0) {\n this.setState({\n cameraConfig: {\n triggerKey: Date.now(),\n centerCoordinate: optionData,\n animationMode: Camera.Mode.Flight,\n animationDuration: 2000,\n },\n });\n } else if (optionIndex === 1) {\n this.setState({\n cameraConfig: {\n triggerKey: Date.now(),\n bounds: optionData,\n },\n });\n } else if (optionIndex === 2) {\n this.setState({\n cameraConfig: {\n triggerKey: Date.now(),\n zoomLevel: optionData,\n },\n });\n }\n }\n\n onRegionWillChange(regionFeature) {\n this.setState({ reason: 'will change', regionFeature });\n }\n\n onRegionDidChange(regionFeature) {\n this.setState({ reason: 'did change', regionFeature });\n }\n\n onRegionIsChanging(regionFeature) {\n this.setState({ reason: 'is changing', regionFeature });\n }\n\n renderRegionChange() {\n if (\n !this.state.regionFeature ||\n !isValidCoordinate(this.state.regionFeature.geometry)\n ) {\n return (\n \n Move the map!\n \n );\n }\n\n const { geometry, properties } = this.state.regionFeature;\n\n const neCoord = properties.visibleBounds[0]\n .map((n) => n.toPrecision(6))\n .join(', ');\n const swCoord = properties.visibleBounds[1]\n .map((n) => n.toPrecision(6))\n .join(', ');\n\n return (\n \n {this.state.reason}\n Latitude: {geometry.coordinates[1]}\n Longitude: {geometry.coordinates[0]}\n Visible Bounds NE: {neCoord}\n Visible Bounds SW: {swCoord}\n Zoom Level: {properties.zoomLevel}\n Heading: {properties.heading}\n Pitch: {properties.pitch}\n \n Is User Interaction: {properties.isUserInteraction ? 'true' : 'false'}\n \n Animated: {properties.animated ? 'true' : 'false'}\n \n );\n }\n\n render() {\n return (\n <>\n i.label)}\n selectedIndex={this.state.selectedIndex}\n onPress={(index) => {\n this.setState({ selectedIndex: index });\n this.onOptionPress(index, this._tabOptions[index].data);\n }}\n />\n (this.map = c)}\n style={sheet.matchParent}\n onRegionWillChange={this.onRegionWillChange}\n onRegionIsChanging={this.onRegionIsChanging}\n onRegionDidChange={this.onRegionDidChange}\n >\n \n \n {this.renderRegionChange()}\n \n );\n }\n}\n\nexport default ShowRegionDidChange;\n\n\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.img,{alt:"ShowRegionDidChange.png",src:t(9418).Z+"",width:"295",height:"640"}),"}"]})]})}function l(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},9418:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/ShowRegionDidChange-38d36d073b2d247d2158d300949f52b2.png"},1151:(e,n,t)=>{t.d(n,{a:()=>s});var i=t(7294);const o={},a=i.createContext(o);function s(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[169],{9049:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>g,contentTitle:()=>s,default:()=>l,frontMatter:()=>a,metadata:()=>r,toc:()=>p});var i=t(5893),o=t(1151);const a={title:"Show Region Did Change",tags:["MapView#onRegionWillChange","MapView#onRegionIsChanging","MapView#onRegionDidChange"],custom_props:{example_rel_path:"Map/ShowRegionDidChange.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowRegionDidChange.js"},s=void 0,r={id:"examples/Map/ShowRegionDidChange",title:"Show Region Did Change",description:"Demonstates MapView region change events.",source:"@site/docs/examples/Map/ShowRegionDidChange.md",sourceDirName:"examples/Map",slug:"/examples/Map/ShowRegionDidChange",permalink:"/docs/examples/Map/ShowRegionDidChange",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowRegionDidChange.js",tags:[{inline:!0,label:"MapView#onRegionWillChange",permalink:"/docs/tags/map-view-on-region-will-change"},{inline:!0,label:"MapView#onRegionIsChanging",permalink:"/docs/tags/map-view-on-region-is-changing"},{inline:!0,label:"MapView#onRegionDidChange",permalink:"/docs/tags/map-view-on-region-did-change"}],version:"current",frontMatter:{title:"Show Region Did Change",tags:["MapView#onRegionWillChange","MapView#onRegionIsChanging","MapView#onRegionDidChange"],custom_props:{example_rel_path:"Map/ShowRegionDidChange.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowRegionDidChange.js"},sidebar:"examplesSidebar",previous:{title:"Show Map Local Style",permalink:"/docs/examples/Map/ShowMapLocalStyle"},next:{title:"Source Layer Visibility",permalink:"/docs/examples/Map/SourceLayerVisibility"}},g={},p=[];function h(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"Demonstates MapView region change events."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport { Text } from 'react-native';\nimport { MapView, Camera } from '@rnmapbox/maps';\nimport { ButtonGroup } from '@rneui/base';\n\nimport sheet from '../../styles/sheet';\nimport { DEFAULT_CENTER_COORDINATE, SF_OFFICE_COORDINATE } from '../../utils';\nimport Bubble from '../common/Bubble';\n\nconst styles = {\n bubble: { marginBottom: 100 },\n};\n\nconst isValidCoordinate = (geometry) => {\n if (!geometry) {\n return false;\n }\n return geometry.coordinates[0] !== 0 && geometry.coordinates[1] !== 0;\n};\n\nclass ShowRegionDidChange extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n reason: '',\n cameraConfig: {\n centerCoordinate: DEFAULT_CENTER_COORDINATE,\n zoomLevel: 12,\n },\n regionFeature: undefined,\n selectedIndex: 0,\n };\n\n this._tabOptions = [\n { label: 'Fly To', data: SF_OFFICE_COORDINATE },\n {\n label: 'Fit Bounds',\n data: { ne: [-74.12641, 40.797968], sw: [-74.143727, 40.772177] },\n },\n { label: 'Zoom To', data: 16 },\n ];\n\n this.onRegionDidChange = this.onRegionDidChange.bind(this);\n this.onRegionWillChange = this.onRegionWillChange.bind(this);\n this.onRegionIsChanging = this.onRegionIsChanging.bind(this);\n this.onOptionPress = this.onOptionPress.bind(this);\n }\n\n async onOptionPress(optionIndex, optionData) {\n if (optionIndex === 0) {\n this.setState({\n cameraConfig: {\n triggerKey: Date.now(),\n centerCoordinate: optionData,\n animationMode: Camera.Mode.Flight,\n animationDuration: 2000,\n },\n });\n } else if (optionIndex === 1) {\n this.setState({\n cameraConfig: {\n triggerKey: Date.now(),\n bounds: optionData,\n },\n });\n } else if (optionIndex === 2) {\n this.setState({\n cameraConfig: {\n triggerKey: Date.now(),\n zoomLevel: optionData,\n },\n });\n }\n }\n\n onRegionWillChange(regionFeature) {\n this.setState({ reason: 'will change', regionFeature });\n }\n\n onRegionDidChange(regionFeature) {\n this.setState({ reason: 'did change', regionFeature });\n }\n\n onRegionIsChanging(regionFeature) {\n this.setState({ reason: 'is changing', regionFeature });\n }\n\n renderRegionChange() {\n if (\n !this.state.regionFeature ||\n !isValidCoordinate(this.state.regionFeature.geometry)\n ) {\n return (\n \n Move the map!\n \n );\n }\n\n const { geometry, properties } = this.state.regionFeature;\n\n const neCoord = properties.visibleBounds[0]\n .map((n) => n.toPrecision(6))\n .join(', ');\n const swCoord = properties.visibleBounds[1]\n .map((n) => n.toPrecision(6))\n .join(', ');\n\n return (\n \n {this.state.reason}\n Latitude: {geometry.coordinates[1]}\n Longitude: {geometry.coordinates[0]}\n Visible Bounds NE: {neCoord}\n Visible Bounds SW: {swCoord}\n Zoom Level: {properties.zoomLevel}\n Heading: {properties.heading}\n Pitch: {properties.pitch}\n \n Is User Interaction: {properties.isUserInteraction ? 'true' : 'false'}\n \n Animated: {properties.animated ? 'true' : 'false'}\n \n );\n }\n\n render() {\n return (\n <>\n i.label)}\n selectedIndex={this.state.selectedIndex}\n onPress={(index) => {\n this.setState({ selectedIndex: index });\n this.onOptionPress(index, this._tabOptions[index].data);\n }}\n />\n (this.map = c)}\n style={sheet.matchParent}\n onRegionWillChange={this.onRegionWillChange}\n onRegionIsChanging={this.onRegionIsChanging}\n onRegionDidChange={this.onRegionDidChange}\n >\n \n \n {this.renderRegionChange()}\n \n );\n }\n}\n\nexport default ShowRegionDidChange;\n\n\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.img,{alt:"ShowRegionDidChange.png",src:t(9418).Z+"",width:"295",height:"640"}),"}"]})]})}function l(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},9418:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/ShowRegionDidChange-d14e83bf57b4f8bddbbfde4e4809dbdd.png"},1151:(e,n,t)=>{t.d(n,{a:()=>s});var i=t(7294);const o={},a=i.createContext(o);function s(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file diff --git a/assets/js/31c1c968.7f634b7e.js b/assets/js/31c1c968.7a0c6a5f.js similarity index 99% rename from assets/js/31c1c968.7f634b7e.js rename to assets/js/31c1c968.7a0c6a5f.js index b4df94f6..c9b18f0e 100644 --- a/assets/js/31c1c968.7f634b7e.js +++ b/assets/js/31c1c968.7a0c6a5f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[7786],{5859:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>s,metadata:()=>o,toc:()=>i});var a=n(5893),r=n(1151);const s={title:"Earthquakes",tags:["ShapeSource","SymbolLayer","ShapeSource#getClusterLeaves","CircleLayer","CircleLayer#clusterProperties","expressions"],custom_props:{example_rel_path:"SymbolCircleLayer/Earthquakes.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/Earthquakes.tsx"},l=void 0,o={id:"examples/SymbolCircleLayer/Earthquakes",title:"Earthquakes",description:"Renders earthqueke with clustering.",source:"@site/docs/examples/SymbolCircleLayer/Earthquakes.md",sourceDirName:"examples/SymbolCircleLayer",slug:"/examples/SymbolCircleLayer/Earthquakes",permalink:"/docs/examples/SymbolCircleLayer/Earthquakes",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/Earthquakes.tsx",tags:[{inline:!0,label:"ShapeSource",permalink:"/docs/tags/shape-source"},{inline:!0,label:"SymbolLayer",permalink:"/docs/tags/symbol-layer"},{inline:!0,label:"ShapeSource#getClusterLeaves",permalink:"/docs/tags/shape-source-get-cluster-leaves"},{inline:!0,label:"CircleLayer",permalink:"/docs/tags/circle-layer"},{inline:!0,label:"CircleLayer#clusterProperties",permalink:"/docs/tags/circle-layer-cluster-properties"},{inline:!0,label:"expressions",permalink:"/docs/tags/expressions"}],version:"current",frontMatter:{title:"Earthquakes",tags:["ShapeSource","SymbolLayer","ShapeSource#getClusterLeaves","CircleLayer","CircleLayer#clusterProperties","expressions"],custom_props:{example_rel_path:"SymbolCircleLayer/Earthquakes.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/Earthquakes.tsx"},sidebar:"examplesSidebar",previous:{title:"Data driven circle colors",permalink:"/docs/examples/SymbolCircleLayer/DataDrivenCircleColors"},next:{title:"Scaleable images",permalink:"/docs/examples/SymbolCircleLayer/ScalableImages"}},c={},i=[];function m(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.p,{children:"Renders earthqueke with clustering."}),"\n",(0,a.jsxs)(t.p,{children:["Click a cluster to show list of contents in the cluster ",(0,a.jsx)(t.code,{children:"getClusterLeaves"}),"."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-jsx",children:"import { FAB, Icon, ListItem, Overlay } from '@rneui/base';\nimport MapboxGL, {\n Camera,\n CircleLayer,\n CircleLayerStyle,\n MapView,\n ShapeSource,\n SymbolLayer,\n SymbolLayerStyle,\n} from '@rnmapbox/maps';\nimport { FeatureCollection } from 'geojson';\nimport moment from 'moment';\nimport React, { useRef, useState } from 'react';\nimport { FlatList, SafeAreaView } from 'react-native';\n\nimport earthQuakesJSON from '../../assets/earthquakes.json';\nimport { SF_OFFICE_COORDINATE } from '../../utils';\nimport { ExampleWithMetadata } from '../common/ExampleMetadata';\n\nconst layerStyles: {\n singlePoint: CircleLayerStyle;\n clusteredPoints: CircleLayerStyle;\n clusterCount: SymbolLayerStyle;\n} = {\n singlePoint: {\n circleColor: 'green',\n circleOpacity: 0.84,\n circleStrokeWidth: 2,\n circleStrokeColor: 'white',\n circleRadius: 5,\n circlePitchAlignment: 'map',\n },\n\n clusteredPoints: {\n circlePitchAlignment: 'map',\n\n circleColor: [\n 'step',\n ['get', 'point_count'],\n '#51bbd6',\n 100,\n '#f1f075',\n 750,\n '#f28cb1',\n ],\n\n circleRadius: ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],\n\n circleOpacity: 0.84,\n circleStrokeWidth: 2,\n circleStrokeColor: 'white',\n },\n\n clusterCount: {\n textField: [\n 'format',\n ['concat', ['get', 'point_count'], '\\n'],\n {},\n [\n 'concat',\n '>1: ',\n [\n '+',\n ['get', 'mag2'],\n ['get', 'mag3'],\n ['get', 'mag4'],\n ['get', 'mag5'],\n ],\n ],\n { 'font-scale': 0.8 },\n ],\n textSize: 12,\n textPitchAlignment: 'map',\n },\n};\n\nconst styles = {\n fab: {\n position: 'absolute',\n top: 10,\n right: 10,\n elevation: 9999,\n zIndex: 9999,\n },\n matchParent: {\n flex: 1,\n },\n} as const;\n\nconst mag1 = ['<', ['get', 'mag'], 2];\nconst mag2 = ['all', ['>=', ['get', 'mag'], 2], ['<', ['get', 'mag'], 3]];\nconst mag3 = ['all', ['>=', ['get', 'mag'], 3], ['<', ['get', 'mag'], 4]];\nconst mag4 = ['all', ['>=', ['get', 'mag'], 4], ['<', ['get', 'mag'], 5]];\nconst mag5 = ['>=', ['get', 'mag'], 5];\n\nconst Earthquakes = () => {\n const shapeSource = useRef(null);\n const [selectedCluster, setSelectedCluster] = useState();\n\n return (\n <>\n \n \n {\n setSelectedCluster(undefined);\n }}\n icon={}\n size=\"large\"\n style={styles.fab}\n />\n {selectedCluster && (\n {\n return earthquakeInfo?.code;\n }}\n data={selectedCluster.features}\n renderItem={({ item: { properties: earthquakeInfo } }) => {\n const magnitude = `Magnitude: ${earthquakeInfo?.mag}`;\n const place = `Place: ${earthquakeInfo?.place}`;\n const code = `Code: ${earthquakeInfo?.code}`;\n const time = `Time: ${moment(earthquakeInfo?.time).format(\n 'MMMM Do YYYY, h:mm:ss a',\n )}`;\n\n return (\n \n \n {earthquakeInfo?.title}\n {magnitude}\n {place}\n {code}\n {time}\n \n \n );\n }}\n />\n )}\n \n \n \n \n\n {\n if (shapeSource.current) {\n try {\n const [cluster] = pressedShape.features;\n\n const collection = await shapeSource.current.getClusterLeaves(\n cluster,\n 999,\n 0,\n );\n\n setSelectedCluster(collection);\n } catch {\n if (!pressedShape.features[0].properties?.cluster) {\n setSelectedCluster({\n type: 'FeatureCollection',\n features: [pressedShape.features[0]],\n });\n }\n }\n }\n }}\n ref={shapeSource}\n cluster\n clusterRadius={50}\n clusterMaxZoomLevel={14}\n clusterProperties={{\n mag1: [\n ['+', ['accumulated'], ['get', 'mag1']],\n ['case', mag1, 1, 0],\n ],\n mag2: [\n ['+', ['accumulated'], ['get', 'mag2']],\n ['case', mag2, 1, 0],\n ],\n mag3: [\n ['+', ['accumulated'], ['get', 'mag3']],\n ['case', mag3, 1, 0],\n ],\n mag4: [\n ['+', ['accumulated'], ['get', 'mag4']],\n ['case', mag4, 1, 0],\n ],\n mag5: [\n ['+', ['accumulated'], ['get', 'mag5']],\n ['case', mag5, 1, 0],\n ],\n }}\n shape={earthQuakesJSON as unknown as FeatureCollection}\n >\n \n\n \n\n \n \n \n \n );\n};\n\nexport default Earthquakes;\n\n\n"})}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.img,{alt:"Earthquakes.png",src:n(7729).Z+"",width:"295",height:"640"}),"}"]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},7729:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/Earthquakes-68b7643b390a23afb5dc106aeeda5612.png"},1151:(e,t,n)=>{n.d(t,{a:()=>l});var a=n(7294);const r={},s=a.createContext(r);function l(e){const t=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[7786],{5859:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>s,metadata:()=>o,toc:()=>i});var a=n(5893),r=n(1151);const s={title:"Earthquakes",tags:["ShapeSource","SymbolLayer","ShapeSource#getClusterLeaves","CircleLayer","CircleLayer#clusterProperties","expressions"],custom_props:{example_rel_path:"SymbolCircleLayer/Earthquakes.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/Earthquakes.tsx"},l=void 0,o={id:"examples/SymbolCircleLayer/Earthquakes",title:"Earthquakes",description:"Renders earthqueke with clustering.",source:"@site/docs/examples/SymbolCircleLayer/Earthquakes.md",sourceDirName:"examples/SymbolCircleLayer",slug:"/examples/SymbolCircleLayer/Earthquakes",permalink:"/docs/examples/SymbolCircleLayer/Earthquakes",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/Earthquakes.tsx",tags:[{inline:!0,label:"ShapeSource",permalink:"/docs/tags/shape-source"},{inline:!0,label:"SymbolLayer",permalink:"/docs/tags/symbol-layer"},{inline:!0,label:"ShapeSource#getClusterLeaves",permalink:"/docs/tags/shape-source-get-cluster-leaves"},{inline:!0,label:"CircleLayer",permalink:"/docs/tags/circle-layer"},{inline:!0,label:"CircleLayer#clusterProperties",permalink:"/docs/tags/circle-layer-cluster-properties"},{inline:!0,label:"expressions",permalink:"/docs/tags/expressions"}],version:"current",frontMatter:{title:"Earthquakes",tags:["ShapeSource","SymbolLayer","ShapeSource#getClusterLeaves","CircleLayer","CircleLayer#clusterProperties","expressions"],custom_props:{example_rel_path:"SymbolCircleLayer/Earthquakes.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/Earthquakes.tsx"},sidebar:"examplesSidebar",previous:{title:"Data driven circle colors",permalink:"/docs/examples/SymbolCircleLayer/DataDrivenCircleColors"},next:{title:"Scaleable images",permalink:"/docs/examples/SymbolCircleLayer/ScalableImages"}},c={},i=[];function m(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.p,{children:"Renders earthqueke with clustering."}),"\n",(0,a.jsxs)(t.p,{children:["Click a cluster to show list of contents in the cluster ",(0,a.jsx)(t.code,{children:"getClusterLeaves"}),"."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-jsx",children:"import { FAB, Icon, ListItem, Overlay } from '@rneui/base';\nimport MapboxGL, {\n Camera,\n CircleLayer,\n CircleLayerStyle,\n MapView,\n ShapeSource,\n SymbolLayer,\n SymbolLayerStyle,\n} from '@rnmapbox/maps';\nimport { FeatureCollection } from 'geojson';\nimport moment from 'moment';\nimport React, { useRef, useState } from 'react';\nimport { FlatList, SafeAreaView } from 'react-native';\n\nimport earthQuakesJSON from '../../assets/earthquakes.json';\nimport { SF_OFFICE_COORDINATE } from '../../utils';\nimport { ExampleWithMetadata } from '../common/ExampleMetadata';\n\nconst layerStyles: {\n singlePoint: CircleLayerStyle;\n clusteredPoints: CircleLayerStyle;\n clusterCount: SymbolLayerStyle;\n} = {\n singlePoint: {\n circleColor: 'green',\n circleOpacity: 0.84,\n circleStrokeWidth: 2,\n circleStrokeColor: 'white',\n circleRadius: 5,\n circlePitchAlignment: 'map',\n },\n\n clusteredPoints: {\n circlePitchAlignment: 'map',\n\n circleColor: [\n 'step',\n ['get', 'point_count'],\n '#51bbd6',\n 100,\n '#f1f075',\n 750,\n '#f28cb1',\n ],\n\n circleRadius: ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],\n\n circleOpacity: 0.84,\n circleStrokeWidth: 2,\n circleStrokeColor: 'white',\n },\n\n clusterCount: {\n textField: [\n 'format',\n ['concat', ['get', 'point_count'], '\\n'],\n {},\n [\n 'concat',\n '>1: ',\n [\n '+',\n ['get', 'mag2'],\n ['get', 'mag3'],\n ['get', 'mag4'],\n ['get', 'mag5'],\n ],\n ],\n { 'font-scale': 0.8 },\n ],\n textSize: 12,\n textPitchAlignment: 'map',\n },\n};\n\nconst styles = {\n fab: {\n position: 'absolute',\n top: 10,\n right: 10,\n elevation: 9999,\n zIndex: 9999,\n },\n matchParent: {\n flex: 1,\n },\n} as const;\n\nconst mag1 = ['<', ['get', 'mag'], 2];\nconst mag2 = ['all', ['>=', ['get', 'mag'], 2], ['<', ['get', 'mag'], 3]];\nconst mag3 = ['all', ['>=', ['get', 'mag'], 3], ['<', ['get', 'mag'], 4]];\nconst mag4 = ['all', ['>=', ['get', 'mag'], 4], ['<', ['get', 'mag'], 5]];\nconst mag5 = ['>=', ['get', 'mag'], 5];\n\nconst Earthquakes = () => {\n const shapeSource = useRef(null);\n const [selectedCluster, setSelectedCluster] = useState();\n\n return (\n <>\n \n \n {\n setSelectedCluster(undefined);\n }}\n icon={}\n size=\"large\"\n style={styles.fab}\n />\n {selectedCluster && (\n {\n return earthquakeInfo?.code;\n }}\n data={selectedCluster.features}\n renderItem={({ item: { properties: earthquakeInfo } }) => {\n const magnitude = `Magnitude: ${earthquakeInfo?.mag}`;\n const place = `Place: ${earthquakeInfo?.place}`;\n const code = `Code: ${earthquakeInfo?.code}`;\n const time = `Time: ${moment(earthquakeInfo?.time).format(\n 'MMMM Do YYYY, h:mm:ss a',\n )}`;\n\n return (\n \n \n {earthquakeInfo?.title}\n {magnitude}\n {place}\n {code}\n {time}\n \n \n );\n }}\n />\n )}\n \n \n \n \n\n {\n if (shapeSource.current) {\n try {\n const [cluster] = pressedShape.features;\n\n const collection = await shapeSource.current.getClusterLeaves(\n cluster,\n 999,\n 0,\n );\n\n setSelectedCluster(collection);\n } catch {\n if (!pressedShape.features[0].properties?.cluster) {\n setSelectedCluster({\n type: 'FeatureCollection',\n features: [pressedShape.features[0]],\n });\n }\n }\n }\n }}\n ref={shapeSource}\n cluster\n clusterRadius={50}\n clusterMaxZoomLevel={14}\n clusterProperties={{\n mag1: [\n ['+', ['accumulated'], ['get', 'mag1']],\n ['case', mag1, 1, 0],\n ],\n mag2: [\n ['+', ['accumulated'], ['get', 'mag2']],\n ['case', mag2, 1, 0],\n ],\n mag3: [\n ['+', ['accumulated'], ['get', 'mag3']],\n ['case', mag3, 1, 0],\n ],\n mag4: [\n ['+', ['accumulated'], ['get', 'mag4']],\n ['case', mag4, 1, 0],\n ],\n mag5: [\n ['+', ['accumulated'], ['get', 'mag5']],\n ['case', mag5, 1, 0],\n ],\n }}\n shape={earthQuakesJSON as unknown as FeatureCollection}\n >\n \n\n \n\n \n \n \n \n );\n};\n\nexport default Earthquakes;\n\n\n"})}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.img,{alt:"Earthquakes.png",src:n(7729).Z+"",width:"295",height:"640"}),"}"]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},7729:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/Earthquakes-2f5537ae187458f471cc84c5a8fd63fb.png"},1151:(e,t,n)=>{n.d(t,{a:()=>l});var a=n(7294);const r={},s=a.createContext(r);function l(e){const t=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file diff --git a/assets/js/3364bf3a.7afa93aa.js b/assets/js/3364bf3a.64099094.js similarity index 98% rename from assets/js/3364bf3a.7afa93aa.js rename to assets/js/3364bf3a.64099094.js index 1c4ec922..a8f96f6d 100644 --- a/assets/js/3364bf3a.7afa93aa.js +++ b/assets/js/3364bf3a.64099094.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[2852],{3569:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>p,frontMatter:()=>s,metadata:()=>i,toc:()=>c});var o=n(5893),a=n(1151);const s={title:"Custom Icon Native Asset",tags:["ShapeSource","ShapeSource#onPress","SymbolLayer","Images","SymbolLayer#iconImage"],custom_props:{example_rel_path:"SymbolCircleLayer/CustomIconNativeAsset.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx"},r=void 0,i={id:"examples/SymbolCircleLayer/CustomIconNativeAsset",title:"Custom Icon Native Asset",description:"Renders a symbol layer with custom icon (native asset) defined using the Images component. Clicking a location on a map add a new icon.",source:"@site/docs/examples/SymbolCircleLayer/CustomIconNativeAsset.md",sourceDirName:"examples/SymbolCircleLayer",slug:"/examples/SymbolCircleLayer/CustomIconNativeAsset",permalink:"/docs/examples/SymbolCircleLayer/CustomIconNativeAsset",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx",tags:[{inline:!0,label:"ShapeSource",permalink:"/docs/tags/shape-source"},{inline:!0,label:"ShapeSource#onPress",permalink:"/docs/tags/shape-source-on-press"},{inline:!0,label:"SymbolLayer",permalink:"/docs/tags/symbol-layer"},{inline:!0,label:"Images",permalink:"/docs/tags/images"},{inline:!0,label:"SymbolLayer#iconImage",permalink:"/docs/tags/symbol-layer-icon-image"}],version:"current",frontMatter:{title:"Custom Icon Native Asset",tags:["ShapeSource","ShapeSource#onPress","SymbolLayer","Images","SymbolLayer#iconImage"],custom_props:{example_rel_path:"SymbolCircleLayer/CustomIconNativeAsset.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx"},sidebar:"examplesSidebar",previous:{title:"Custom Icon",permalink:"/docs/examples/SymbolCircleLayer/CustomIcon"},next:{title:"Data driven circle colors",permalink:"/docs/examples/SymbolCircleLayer/DataDrivenCircleColors"}},l={},c=[];function m(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Renders a symbol layer with custom icon (native asset) defined using the Images component. Clicking a location on a map add a new icon."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import React, { useRef, memo, useState } from 'react';\nimport { Text } from 'react-native';\nimport MapboxGL, {\n MapView,\n Camera,\n ShapeSource,\n SymbolLayer,\n Images,\n} from '@rnmapbox/maps';\nimport { featureCollection, feature, point } from '@turf/helpers';\n\nimport Bubble from '../common/Bubble';\nimport type { ExampleWithMetadata } from '../common/ExampleMetadata';\n\nconst styles = {\n icon: {\n iconImage: 'pin',\n iconAllowOverlap: true,\n },\n};\n\nconst CustomIconNativeAsset = memo(() => {\n const cameraRef = useRef(null);\n const [stateFeatureCollection, setStateFeatureCollection] =\n useState(\n featureCollection([point([-73.970895, 40.723279])]),\n );\n\n const onPress = (e: GeoJSON.Feature) => {\n const aFeature = feature(e.geometry);\n aFeature.id = `${Date.now()}`;\n\n setStateFeatureCollection(\n featureCollection([...stateFeatureCollection.features, aFeature]),\n );\n };\n\n const onSourceLayerPress = (e: any) => {\n console.log(\n 'You pressed a layer here are your features:',\n e.features,\n e.coordinates,\n e.point,\n );\n };\n\n return (\n <>\n \n \n onSourceLayerPress(e)}\n shape={stateFeatureCollection}\n >\n \n \n \n \n \n Tap on Map to add an icon\n \n \n );\n});\n\nexport default CustomIconNativeAsset;\n\n"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"CustomIconNativeAsset.png",src:n(4364).Z+"",width:"295",height:"640"}),"}"]})]})}function p(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},4364:(e,t,n)=>{n.d(t,{Z:()=>o});const o=n.p+"assets/images/CustomIconNativeAsset-f4861138fd9374123b2eff0c28bde10a.png"},1151:(e,t,n)=>{n.d(t,{a:()=>r});var o=n(7294);const a={},s=o.createContext(a);function r(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[2852],{3569:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>p,frontMatter:()=>s,metadata:()=>i,toc:()=>c});var o=n(5893),a=n(1151);const s={title:"Custom Icon Native Asset",tags:["ShapeSource","ShapeSource#onPress","SymbolLayer","Images","SymbolLayer#iconImage"],custom_props:{example_rel_path:"SymbolCircleLayer/CustomIconNativeAsset.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx"},r=void 0,i={id:"examples/SymbolCircleLayer/CustomIconNativeAsset",title:"Custom Icon Native Asset",description:"Renders a symbol layer with custom icon (native asset) defined using the Images component. Clicking a location on a map add a new icon.",source:"@site/docs/examples/SymbolCircleLayer/CustomIconNativeAsset.md",sourceDirName:"examples/SymbolCircleLayer",slug:"/examples/SymbolCircleLayer/CustomIconNativeAsset",permalink:"/docs/examples/SymbolCircleLayer/CustomIconNativeAsset",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx",tags:[{inline:!0,label:"ShapeSource",permalink:"/docs/tags/shape-source"},{inline:!0,label:"ShapeSource#onPress",permalink:"/docs/tags/shape-source-on-press"},{inline:!0,label:"SymbolLayer",permalink:"/docs/tags/symbol-layer"},{inline:!0,label:"Images",permalink:"/docs/tags/images"},{inline:!0,label:"SymbolLayer#iconImage",permalink:"/docs/tags/symbol-layer-icon-image"}],version:"current",frontMatter:{title:"Custom Icon Native Asset",tags:["ShapeSource","ShapeSource#onPress","SymbolLayer","Images","SymbolLayer#iconImage"],custom_props:{example_rel_path:"SymbolCircleLayer/CustomIconNativeAsset.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx"},sidebar:"examplesSidebar",previous:{title:"Custom Icon",permalink:"/docs/examples/SymbolCircleLayer/CustomIcon"},next:{title:"Data driven circle colors",permalink:"/docs/examples/SymbolCircleLayer/DataDrivenCircleColors"}},l={},c=[];function m(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Renders a symbol layer with custom icon (native asset) defined using the Images component. Clicking a location on a map add a new icon."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import React, { useRef, memo, useState } from 'react';\nimport { Text } from 'react-native';\nimport MapboxGL, {\n MapView,\n Camera,\n ShapeSource,\n SymbolLayer,\n Images,\n} from '@rnmapbox/maps';\nimport { featureCollection, feature, point } from '@turf/helpers';\n\nimport Bubble from '../common/Bubble';\nimport type { ExampleWithMetadata } from '../common/ExampleMetadata';\n\nconst styles = {\n icon: {\n iconImage: 'pin',\n iconAllowOverlap: true,\n },\n};\n\nconst CustomIconNativeAsset = memo(() => {\n const cameraRef = useRef(null);\n const [stateFeatureCollection, setStateFeatureCollection] =\n useState(\n featureCollection([point([-73.970895, 40.723279])]),\n );\n\n const onPress = (e: GeoJSON.Feature) => {\n const aFeature = feature(e.geometry);\n aFeature.id = `${Date.now()}`;\n\n setStateFeatureCollection(\n featureCollection([...stateFeatureCollection.features, aFeature]),\n );\n };\n\n const onSourceLayerPress = (e: any) => {\n console.log(\n 'You pressed a layer here are your features:',\n e.features,\n e.coordinates,\n e.point,\n );\n };\n\n return (\n <>\n \n \n onSourceLayerPress(e)}\n shape={stateFeatureCollection}\n >\n \n \n \n \n \n Tap on Map to add an icon\n \n \n );\n});\n\nexport default CustomIconNativeAsset;\n\n"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"CustomIconNativeAsset.png",src:n(4364).Z+"",width:"295",height:"640"}),"}"]})]})}function p(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},4364:(e,t,n)=>{n.d(t,{Z:()=>o});const o=n.p+"assets/images/CustomIconNativeAsset-5f4d474ffcc0bc209f960fa21366a957.png"},1151:(e,t,n)=>{n.d(t,{a:()=>r});var o=n(7294);const a={},s=o.createContext(a);function r(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file diff --git a/assets/js/38286337.a934140e.js b/assets/js/38286337.2687f5ac.js similarity index 99% rename from assets/js/38286337.a934140e.js rename to assets/js/38286337.2687f5ac.js index a72ef1be..909586f7 100644 --- a/assets/js/38286337.a934140e.js +++ b/assets/js/38286337.2687f5ac.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[7891],{9925:(e,n,a)=>{a.r(n),a.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>r,toc:()=>m});var t=a(5893),s=a(1151);const o={title:"Shape Source Icons",tags:["ShapeSource","SymbolLayer","Images","Images#nativeAssetImages","Images#onImageMissing"],custom_props:{example_rel_path:"SymbolCircleLayer/ShapeSourceIcon.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/ShapeSourceIcon.js"},i=void 0,r={id:"examples/SymbolCircleLayer/ShapeSourceIcon",title:"Shape Source Icons",description:"Render icons with various methods.",source:"@site/docs/examples/SymbolCircleLayer/ShapeSourceIcon.md",sourceDirName:"examples/SymbolCircleLayer",slug:"/examples/SymbolCircleLayer/ShapeSourceIcon",permalink:"/docs/examples/SymbolCircleLayer/ShapeSourceIcon",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/ShapeSourceIcon.js",tags:[{inline:!0,label:"ShapeSource",permalink:"/docs/tags/shape-source"},{inline:!0,label:"SymbolLayer",permalink:"/docs/tags/symbol-layer"},{inline:!0,label:"Images",permalink:"/docs/tags/images"},{inline:!0,label:"Images#nativeAssetImages",permalink:"/docs/tags/images-native-asset-images"},{inline:!0,label:"Images#onImageMissing",permalink:"/docs/tags/images-on-image-missing"}],version:"current",frontMatter:{title:"Shape Source Icons",tags:["ShapeSource","SymbolLayer","Images","Images#nativeAssetImages","Images#onImageMissing"],custom_props:{example_rel_path:"SymbolCircleLayer/ShapeSourceIcon.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/ShapeSourceIcon.js"},sidebar:"examplesSidebar",previous:{title:"Scaleable images",permalink:"/docs/examples/SymbolCircleLayer/ScalableImages"},next:{title:"Custom Native UserLocation",permalink:"/docs/examples/UserLocation/CustomNativeUserLocation"}},c={},m=[];function l(e){const n={code:"code",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Render icons with various methods."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"pin-rn: Rendered with a React Native View"}),"\n",(0,t.jsx)(n.li,{children:"pin: Rendered with a native asset image"}),"\n",(0,t.jsx)(n.li,{children:"pin3: Resolved as a result of onImageMissing"}),"\n",(0,t.jsx)(n.li,{children:"example: Rendered with a js asset image (require)"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport {\n MapView,\n Images,\n Camera,\n Image,\n SymbolLayer,\n ShapeSource,\n} from '@rnmapbox/maps';\nimport { Text, View } from 'react-native';\n\nimport exampleIcon from '../../assets/example.png';\nimport pinIcon from '../../assets/pin.png';\n\nconst styles = {\n icon: {\n iconImage: ['get', 'icon'],\n\n iconSize: [\n 'match',\n ['get', 'icon'],\n 'example',\n 1.2,\n 'airport-15',\n 1.2,\n /* default */ 1,\n ],\n iconAllowOverlap: true,\n },\n matchParent: { flex: 1 },\n};\n\nconst featureCollection = {\n type: 'FeatureCollection',\n features: [\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4552',\n properties: {\n icon: 'example',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.20611157485, 52.180961084261],\n },\n },\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4552',\n properties: {\n icon: 'airport-15',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.205908, 52.180843],\n },\n },\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4552',\n properties: {\n icon: 'pin',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.206562, 52.180797],\n },\n },\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4553',\n properties: {\n icon: 'pin3',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.206862, 52.180897],\n },\n },\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4555',\n properties: {\n icon: 'pin-rn',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.205862, 52.180697],\n },\n },\n ],\n};\n\nclass ShapeSourceIcon extends React.Component {\n state = {\n images: {\n example: exampleIcon,\n },\n };\n\n render() {\n const { images } = this.state;\n\n return (\n \n \n {\n if (imageKey != 'pin-rn') {\n this.setState({\n images: { ...this.state.images, [imageKey]: pinIcon },\n });\n }\n }}\n >\n \n \n \n \n RN Pin 3\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default ShapeSourceIcon;\n\n\n"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.img,{alt:"ShapeSourceIcon.png",src:a(4373).Z+"",width:"295",height:"640"}),"}"]})]})}function p(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},4373:(e,n,a)=>{a.d(n,{Z:()=>t});const t=a.p+"assets/images/ShapeSourceIcon-80996c858c16119b0cc36718b0ad87bf.png"},1151:(e,n,a)=>{a.d(n,{a:()=>i});var t=a(7294);const s={},o=t.createContext(s);function i(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[7891],{9925:(e,n,a)=>{a.r(n),a.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>r,toc:()=>m});var t=a(5893),s=a(1151);const o={title:"Shape Source Icons",tags:["ShapeSource","SymbolLayer","Images","Images#nativeAssetImages","Images#onImageMissing"],custom_props:{example_rel_path:"SymbolCircleLayer/ShapeSourceIcon.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/ShapeSourceIcon.js"},i=void 0,r={id:"examples/SymbolCircleLayer/ShapeSourceIcon",title:"Shape Source Icons",description:"Render icons with various methods.",source:"@site/docs/examples/SymbolCircleLayer/ShapeSourceIcon.md",sourceDirName:"examples/SymbolCircleLayer",slug:"/examples/SymbolCircleLayer/ShapeSourceIcon",permalink:"/docs/examples/SymbolCircleLayer/ShapeSourceIcon",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/ShapeSourceIcon.js",tags:[{inline:!0,label:"ShapeSource",permalink:"/docs/tags/shape-source"},{inline:!0,label:"SymbolLayer",permalink:"/docs/tags/symbol-layer"},{inline:!0,label:"Images",permalink:"/docs/tags/images"},{inline:!0,label:"Images#nativeAssetImages",permalink:"/docs/tags/images-native-asset-images"},{inline:!0,label:"Images#onImageMissing",permalink:"/docs/tags/images-on-image-missing"}],version:"current",frontMatter:{title:"Shape Source Icons",tags:["ShapeSource","SymbolLayer","Images","Images#nativeAssetImages","Images#onImageMissing"],custom_props:{example_rel_path:"SymbolCircleLayer/ShapeSourceIcon.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/SymbolCircleLayer/ShapeSourceIcon.js"},sidebar:"examplesSidebar",previous:{title:"Scaleable images",permalink:"/docs/examples/SymbolCircleLayer/ScalableImages"},next:{title:"Custom Native UserLocation",permalink:"/docs/examples/UserLocation/CustomNativeUserLocation"}},c={},m=[];function l(e){const n={code:"code",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Render icons with various methods."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"pin-rn: Rendered with a React Native View"}),"\n",(0,t.jsx)(n.li,{children:"pin: Rendered with a native asset image"}),"\n",(0,t.jsx)(n.li,{children:"pin3: Resolved as a result of onImageMissing"}),"\n",(0,t.jsx)(n.li,{children:"example: Rendered with a js asset image (require)"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport {\n MapView,\n Images,\n Camera,\n Image,\n SymbolLayer,\n ShapeSource,\n} from '@rnmapbox/maps';\nimport { Text, View } from 'react-native';\n\nimport exampleIcon from '../../assets/example.png';\nimport pinIcon from '../../assets/pin.png';\n\nconst styles = {\n icon: {\n iconImage: ['get', 'icon'],\n\n iconSize: [\n 'match',\n ['get', 'icon'],\n 'example',\n 1.2,\n 'airport-15',\n 1.2,\n /* default */ 1,\n ],\n iconAllowOverlap: true,\n },\n matchParent: { flex: 1 },\n};\n\nconst featureCollection = {\n type: 'FeatureCollection',\n features: [\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4552',\n properties: {\n icon: 'example',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.20611157485, 52.180961084261],\n },\n },\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4552',\n properties: {\n icon: 'airport-15',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.205908, 52.180843],\n },\n },\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4552',\n properties: {\n icon: 'pin',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.206562, 52.180797],\n },\n },\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4553',\n properties: {\n icon: 'pin3',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.206862, 52.180897],\n },\n },\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4555',\n properties: {\n icon: 'pin-rn',\n },\n geometry: {\n type: 'Point',\n coordinates: [-117.205862, 52.180697],\n },\n },\n ],\n};\n\nclass ShapeSourceIcon extends React.Component {\n state = {\n images: {\n example: exampleIcon,\n },\n };\n\n render() {\n const { images } = this.state;\n\n return (\n \n \n {\n if (imageKey != 'pin-rn') {\n this.setState({\n images: { ...this.state.images, [imageKey]: pinIcon },\n });\n }\n }}\n >\n \n \n \n \n RN Pin 3\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default ShapeSourceIcon;\n\n\n"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.img,{alt:"ShapeSourceIcon.png",src:a(4373).Z+"",width:"295",height:"640"}),"}"]})]})}function p(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},4373:(e,n,a)=>{a.d(n,{Z:()=>t});const t=a.p+"assets/images/ShapeSourceIcon-c969c5e310fdc7feac74a12fba84b7ac.png"},1151:(e,n,a)=>{a.d(n,{a:()=>i});var t=a(7294);const s={},o=t.createContext(s);function i(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file diff --git a/assets/js/3a4d34a4.4ec9a8cb.js b/assets/js/3a4d34a4.8cc83b23.js similarity index 98% rename from assets/js/3a4d34a4.4ec9a8cb.js rename to assets/js/3a4d34a4.8cc83b23.js index ddd49a6b..e97f84bc 100644 --- a/assets/js/3a4d34a4.4ec9a8cb.js +++ b/assets/js/3a4d34a4.8cc83b23.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[100],{312:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>c,frontMatter:()=>r,metadata:()=>i,toc:()=>p});var s=t(5893),a=t(1151);const r={title:"Map Handlers",tags:["MapView#onMapIdle"],custom_props:{example_rel_path:"V10/MapHandlers.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/MapHandlers.tsx"},o=void 0,i={id:"examples/V10/MapHandlers",title:"Map Handlers",description:"Map Handlers",source:"@site/docs/examples/V10/MapHandlers.md",sourceDirName:"examples/V10",slug:"/examples/V10/MapHandlers",permalink:"/docs/examples/V10/MapHandlers",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/MapHandlers.tsx",tags:[{inline:!0,label:"MapView#onMapIdle",permalink:"/docs/tags/map-view-on-map-idle"}],version:"current",frontMatter:{title:"Map Handlers",tags:["MapView#onMapIdle"],custom_props:{example_rel_path:"V10/MapHandlers.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/MapHandlers.tsx"},sidebar:"examplesSidebar",previous:{title:"Globe Projection",permalink:"/docs/examples/V10/GlobeProjection"},next:{title:"Markers",permalink:"/docs/examples/V10/Markers"}},l={},p=[];function d(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"Map Handlers"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import { Divider, Text } from '@rneui/base';\nimport {\n Camera,\n CircleLayer,\n Logger,\n MapState,\n MapView,\n ShapeSource,\n} from '@rnmapbox/maps';\nimport {\n Feature,\n GeoJsonProperties,\n Geometry,\n Point,\n Polygon,\n Position,\n} from 'geojson';\nimport React, { useState } from 'react';\nimport { SafeAreaView, View } from 'react-native';\n\nimport colors from '../../styles/colors';\nimport { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc\n\nLogger.setLogLevel('verbose');\n\nconst styles = {\n map: {\n flex: 1,\n },\n info: {\n flex: 0,\n padding: 10,\n },\n divider: {\n marginVertical: 6,\n },\n fadedText: {\n color: 'gray',\n },\n};\n\nconst MapHandlers = () => {\n const [lastCallback, setLastCallback] = useState('');\n const [mapState, setMapState] = useState({\n properties: {\n center: [0, 0],\n bounds: {\n ne: [0, 0],\n sw: [0, 0],\n },\n zoom: 0,\n heading: 0,\n pitch: 0,\n },\n gestures: {\n isGestureActive: false,\n },\n });\n const [features, setFeatures] = useState[]>([]);\n\n const properties = mapState?.properties;\n const center = properties?.center;\n const bounds = properties?.bounds;\n const heading = properties?.heading;\n const gestures = mapState?.gestures;\n\n const buildShape = (feature: Feature): Geometry => {\n return {\n type: 'Point',\n coordinates: (feature as Feature).geometry.coordinates,\n };\n };\n\n const addFeature = (feature: Feature, kind: string) => {\n const _feature: Feature = { ...feature };\n if (_feature.properties) {\n _feature.properties.kind = kind;\n }\n setFeatures((prev) => [...prev, _feature]);\n };\n\n const displayCoord = (position: Position) => {\n if (!position) {\n return '';\n }\n return `${position[1].toFixed(3)}, ${position[0].toFixed(3)}`;\n };\n\n return (\n <>\n ) => {\n addFeature(_feature, 'press');\n }}\n onLongPress={(_feature: Feature) => {\n addFeature(_feature, 'longPress');\n }}\n onCameraChanged={(_state) => {\n setLastCallback('onCameraChanged');\n setMapState(_state);\n }}\n onMapIdle={(_state) => {\n setLastCallback('onMapIdle');\n setMapState(_state);\n }}\n >\n \n {features.map((f, i) => {\n const id = JSON.stringify(\n (f as Feature).geometry.coordinates,\n );\n const circleStyle =\n f.properties?.kind === 'press'\n ? {\n circleColor: colors.primary.blue,\n circleRadius: 6,\n }\n : {\n circleColor: colors.primary.pink,\n circleRadius: 12,\n };\n return (\n \n \n \n );\n })}\n \n\n \n \n \n Tap or long-press to create a marker.\n \n\n \n\n center\n {displayCoord(center)}\n\n \n\n bounds\n NE: {displayCoord(bounds?.ne)}\n SW: {displayCoord(bounds?.sw)}\n\n \n\n heading\n {heading?.toFixed(2)}\n\n \n\n lastCallback\n {lastCallback}\n\n \n\n \n \n isGestureActive\n {gestures?.isGestureActive ? 'Yes' : 'No'}\n \n \n \n \n \n );\n};\n\nexport default MapHandlers;\n\n\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.img,{alt:"MapHandlers.png",src:t(5802).Z+"",width:"295",height:"640"}),"}"]})]})}function c(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},5802:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/MapHandlers-ab143930c90d76bc1195d7fa0184dddf.png"},1151:(e,n,t)=>{t.d(n,{a:()=>o});var s=t(7294);const a={},r=s.createContext(a);function o(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[100],{312:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>c,frontMatter:()=>r,metadata:()=>i,toc:()=>p});var s=t(5893),a=t(1151);const r={title:"Map Handlers",tags:["MapView#onMapIdle"],custom_props:{example_rel_path:"V10/MapHandlers.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/MapHandlers.tsx"},o=void 0,i={id:"examples/V10/MapHandlers",title:"Map Handlers",description:"Map Handlers",source:"@site/docs/examples/V10/MapHandlers.md",sourceDirName:"examples/V10",slug:"/examples/V10/MapHandlers",permalink:"/docs/examples/V10/MapHandlers",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/MapHandlers.tsx",tags:[{inline:!0,label:"MapView#onMapIdle",permalink:"/docs/tags/map-view-on-map-idle"}],version:"current",frontMatter:{title:"Map Handlers",tags:["MapView#onMapIdle"],custom_props:{example_rel_path:"V10/MapHandlers.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/MapHandlers.tsx"},sidebar:"examplesSidebar",previous:{title:"Globe Projection",permalink:"/docs/examples/V10/GlobeProjection"},next:{title:"Markers",permalink:"/docs/examples/V10/Markers"}},l={},p=[];function d(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"Map Handlers"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import { Divider, Text } from '@rneui/base';\nimport {\n Camera,\n CircleLayer,\n Logger,\n MapState,\n MapView,\n ShapeSource,\n} from '@rnmapbox/maps';\nimport {\n Feature,\n GeoJsonProperties,\n Geometry,\n Point,\n Polygon,\n Position,\n} from 'geojson';\nimport React, { useState } from 'react';\nimport { SafeAreaView, View } from 'react-native';\n\nimport colors from '../../styles/colors';\nimport { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc\n\nLogger.setLogLevel('verbose');\n\nconst styles = {\n map: {\n flex: 1,\n },\n info: {\n flex: 0,\n padding: 10,\n },\n divider: {\n marginVertical: 6,\n },\n fadedText: {\n color: 'gray',\n },\n};\n\nconst MapHandlers = () => {\n const [lastCallback, setLastCallback] = useState('');\n const [mapState, setMapState] = useState({\n properties: {\n center: [0, 0],\n bounds: {\n ne: [0, 0],\n sw: [0, 0],\n },\n zoom: 0,\n heading: 0,\n pitch: 0,\n },\n gestures: {\n isGestureActive: false,\n },\n });\n const [features, setFeatures] = useState[]>([]);\n\n const properties = mapState?.properties;\n const center = properties?.center;\n const bounds = properties?.bounds;\n const heading = properties?.heading;\n const gestures = mapState?.gestures;\n\n const buildShape = (feature: Feature): Geometry => {\n return {\n type: 'Point',\n coordinates: (feature as Feature).geometry.coordinates,\n };\n };\n\n const addFeature = (feature: Feature, kind: string) => {\n const _feature: Feature = { ...feature };\n if (_feature.properties) {\n _feature.properties.kind = kind;\n }\n setFeatures((prev) => [...prev, _feature]);\n };\n\n const displayCoord = (position: Position) => {\n if (!position) {\n return '';\n }\n return `${position[1].toFixed(3)}, ${position[0].toFixed(3)}`;\n };\n\n return (\n <>\n ) => {\n addFeature(_feature, 'press');\n }}\n onLongPress={(_feature: Feature) => {\n addFeature(_feature, 'longPress');\n }}\n onCameraChanged={(_state) => {\n setLastCallback('onCameraChanged');\n setMapState(_state);\n }}\n onMapIdle={(_state) => {\n setLastCallback('onMapIdle');\n setMapState(_state);\n }}\n >\n \n {features.map((f, i) => {\n const id = JSON.stringify(\n (f as Feature).geometry.coordinates,\n );\n const circleStyle =\n f.properties?.kind === 'press'\n ? {\n circleColor: colors.primary.blue,\n circleRadius: 6,\n }\n : {\n circleColor: colors.primary.pink,\n circleRadius: 12,\n };\n return (\n \n \n \n );\n })}\n \n\n \n \n \n Tap or long-press to create a marker.\n \n\n \n\n center\n {displayCoord(center)}\n\n \n\n bounds\n NE: {displayCoord(bounds?.ne)}\n SW: {displayCoord(bounds?.sw)}\n\n \n\n heading\n {heading?.toFixed(2)}\n\n \n\n lastCallback\n {lastCallback}\n\n \n\n \n \n isGestureActive\n {gestures?.isGestureActive ? 'Yes' : 'No'}\n \n \n \n \n \n );\n};\n\nexport default MapHandlers;\n\n\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.img,{alt:"MapHandlers.png",src:t(5802).Z+"",width:"295",height:"640"}),"}"]})]})}function c(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},5802:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/MapHandlers-559659ea3ce7063ecfafcba9aef5e47c.png"},1151:(e,n,t)=>{t.d(n,{a:()=>o});var s=t(7294);const a={},r=s.createContext(a);function o(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file diff --git a/assets/js/3e686edc.6209abbe.js b/assets/js/3e686edc.a19b84c2.js similarity index 98% rename from assets/js/3e686edc.6209abbe.js rename to assets/js/3e686edc.a19b84c2.js index 88d26616..feacba75 100644 --- a/assets/js/3e686edc.6209abbe.js +++ b/assets/js/3e686edc.a19b84c2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[6216],{3834:(n,t,e)=>{e.r(t),e.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>m,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var o=e(5893),a=e(1151);const i={title:"Marker View",tags:["PointAnnotation","MarkerView"],custom_props:{example_rel_path:"Annotations/MarkerView.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/MarkerView.tsx"},r=void 0,s={id:"examples/Annotations/MarkerView",title:"Marker View",description:"Shows marker view and poitn annotations",source:"@site/docs/examples/Annotations/MarkerView.md",sourceDirName:"examples/Annotations",slug:"/examples/Annotations/MarkerView",permalink:"/docs/examples/Annotations/MarkerView",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/MarkerView.tsx",tags:[{inline:!0,label:"PointAnnotation",permalink:"/docs/tags/point-annotation"},{inline:!0,label:"MarkerView",permalink:"/docs/tags/marker-view"}],version:"current",frontMatter:{title:"Marker View",tags:["PointAnnotation","MarkerView"],custom_props:{example_rel_path:"Annotations/MarkerView.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/MarkerView.tsx"},sidebar:"examplesSidebar",previous:{title:"Heatmap",permalink:"/docs/examples/Annotations/Heatmap"},next:{title:"Point Annotation Anchors",permalink:"/docs/examples/Annotations/PointAnnotationAnchors"}},l={},p=[];function c(n){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Shows marker view and poitn annotations"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import React from 'react';\nimport { Button, StyleSheet, View, Text, TouchableOpacity } from 'react-native';\nimport Mapbox from '@rnmapbox/maps';\n\nimport Bubble from '../common/Bubble';\n\nconst styles = StyleSheet.create({\n touchableContainer: { borderColor: 'black', borderWidth: 1.0, width: 60 },\n touchable: {\n backgroundColor: 'blue',\n width: 40,\n height: 40,\n borderRadius: 20,\n alignItems: 'center',\n justifyContent: 'center',\n },\n touchableText: {\n color: 'white',\n fontWeight: 'bold',\n },\n matchParent: { flex: 1 },\n});\n\nconst AnnotationContent = ({ title }: { title: string }) => (\n \n {title}\n \n Btn\n \n \n);\nconst INITIAL_COORDINATES: [number, number][] = [\n [-73.99155, 40.73581],\n [-73.99155, 40.73681],\n];\n\nconst ShowMarkerView = () => {\n const [pointList, setPointList] =\n React.useState(INITIAL_COORDINATES);\n const [allowOverlapWithPuck, setAllowOverlapWithPuck] =\n React.useState(false);\n\n const onPressMap = (e: GeoJSON.Feature) => {\n const geometry = e.geometry as GeoJSON.Point;\n setPointList((pl) => [...pl, geometry.coordinates]);\n };\n\n return (\n <>\n setAllowOverlapWithPuck((prev) => !prev)}\n />\n \n \n\n \n \n \n\n \n \n \n\n {pointList.slice(2).map((coordinate, index) => (\n \n \n \n ))}\n\n \n \n\n \n Tap on map to add a point annotation\n \n \n );\n};\n\nexport default ShowMarkerView;\n\n\n"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"MarkerView.png",src:e(7971).Z+"",width:"295",height:"640"}),"}"]})]})}function m(n={}){const{wrapper:t}={...(0,a.a)(),...n.components};return t?(0,o.jsx)(t,{...n,children:(0,o.jsx)(c,{...n})}):c(n)}},7971:(n,t,e)=>{e.d(t,{Z:()=>o});const o=e.p+"assets/images/MarkerView-86458f0690c4b61f14a7d6ad65b81fc5.png"},1151:(n,t,e)=>{e.d(t,{a:()=>r});var o=e(7294);const a={},i=o.createContext(a);function r(n){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof n?n(t):{...t,...n}}),[t,n])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[6216],{3834:(n,t,e)=>{e.r(t),e.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>m,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var o=e(5893),a=e(1151);const i={title:"Marker View",tags:["PointAnnotation","MarkerView"],custom_props:{example_rel_path:"Annotations/MarkerView.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/MarkerView.tsx"},r=void 0,s={id:"examples/Annotations/MarkerView",title:"Marker View",description:"Shows marker view and poitn annotations",source:"@site/docs/examples/Annotations/MarkerView.md",sourceDirName:"examples/Annotations",slug:"/examples/Annotations/MarkerView",permalink:"/docs/examples/Annotations/MarkerView",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/MarkerView.tsx",tags:[{inline:!0,label:"PointAnnotation",permalink:"/docs/tags/point-annotation"},{inline:!0,label:"MarkerView",permalink:"/docs/tags/marker-view"}],version:"current",frontMatter:{title:"Marker View",tags:["PointAnnotation","MarkerView"],custom_props:{example_rel_path:"Annotations/MarkerView.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/MarkerView.tsx"},sidebar:"examplesSidebar",previous:{title:"Heatmap",permalink:"/docs/examples/Annotations/Heatmap"},next:{title:"Point Annotation Anchors",permalink:"/docs/examples/Annotations/PointAnnotationAnchors"}},l={},p=[];function c(n){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Shows marker view and poitn annotations"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import React from 'react';\nimport { Button, StyleSheet, View, Text, TouchableOpacity } from 'react-native';\nimport Mapbox from '@rnmapbox/maps';\n\nimport Bubble from '../common/Bubble';\n\nconst styles = StyleSheet.create({\n touchableContainer: { borderColor: 'black', borderWidth: 1.0, width: 60 },\n touchable: {\n backgroundColor: 'blue',\n width: 40,\n height: 40,\n borderRadius: 20,\n alignItems: 'center',\n justifyContent: 'center',\n },\n touchableText: {\n color: 'white',\n fontWeight: 'bold',\n },\n matchParent: { flex: 1 },\n});\n\nconst AnnotationContent = ({ title }: { title: string }) => (\n \n {title}\n \n Btn\n \n \n);\nconst INITIAL_COORDINATES: [number, number][] = [\n [-73.99155, 40.73581],\n [-73.99155, 40.73681],\n];\n\nconst ShowMarkerView = () => {\n const [pointList, setPointList] =\n React.useState(INITIAL_COORDINATES);\n const [allowOverlapWithPuck, setAllowOverlapWithPuck] =\n React.useState(false);\n\n const onPressMap = (e: GeoJSON.Feature) => {\n const geometry = e.geometry as GeoJSON.Point;\n setPointList((pl) => [...pl, geometry.coordinates]);\n };\n\n return (\n <>\n setAllowOverlapWithPuck((prev) => !prev)}\n />\n \n \n\n \n \n \n\n \n \n \n\n {pointList.slice(2).map((coordinate, index) => (\n \n \n \n ))}\n\n \n \n\n \n Tap on map to add a point annotation\n \n \n );\n};\n\nexport default ShowMarkerView;\n\n\n"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"MarkerView.png",src:e(7971).Z+"",width:"295",height:"640"}),"}"]})]})}function m(n={}){const{wrapper:t}={...(0,a.a)(),...n.components};return t?(0,o.jsx)(t,{...n,children:(0,o.jsx)(c,{...n})}):c(n)}},7971:(n,t,e)=>{e.d(t,{Z:()=>o});const o=e.p+"assets/images/MarkerView-0db87a93b6e219b1e7c50320f79cbd27.png"},1151:(n,t,e)=>{e.d(t,{a:()=>r});var o=e(7294);const a={},i=o.createContext(a);function r(n){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof n?n(t):{...t,...n}}),[t,n])}}}]); \ No newline at end of file diff --git a/assets/js/496ac0ab.2ef8d523.js b/assets/js/496ac0ab.96e4f1ed.js similarity index 96% rename from assets/js/496ac0ab.2ef8d523.js rename to assets/js/496ac0ab.96e4f1ed.js index 4ce0bd10..4a0aa64f 100644 --- a/assets/js/496ac0ab.2ef8d523.js +++ b/assets/js/496ac0ab.96e4f1ed.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[7774],{6007:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var s=n(5893),o=n(1151);const a={title:"Show Click",tags:["MapView#onPress"],custom_props:{example_rel_path:"Map/ShowClick.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowClick.js"},i=void 0,r={id:"examples/Map/ShowClick",title:"Show Click",description:"Demonstates onPress event and how to get the screen point of the click.",source:"@site/docs/examples/Map/ShowClick.md",sourceDirName:"examples/Map",slug:"/examples/Map/ShowClick",permalink:"/docs/examples/Map/ShowClick",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowClick.js",tags:[{inline:!0,label:"MapView#onPress",permalink:"/docs/tags/map-view-on-press"}],version:"current",frontMatter:{title:"Show Click",tags:["MapView#onPress"],custom_props:{example_rel_path:"Map/ShowClick.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowClick.js"},sidebar:"examplesSidebar",previous:{title:"Show and hide layer",permalink:"/docs/examples/Map/ShowAndHideLayer"},next:{title:"Show Map",permalink:"/docs/examples/Map/ShowMap"}},c={},l=[];function p(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:"Demonstates onPress event and how to get the screen point of the click."}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx",children:"import React from 'react';\nimport { Text } from 'react-native';\nimport { MapView, Camera } from '@rnmapbox/maps';\n\nimport Bubble from '../common/Bubble';\n\nconst styles = { matchParent: { flex: 1 } };\n\nclass ShowClick extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n latitude: undefined,\n longitude: undefined,\n screenPointX: undefined,\n screenPointY: undefined,\n };\n\n this.onPress = this.onPress.bind(this);\n }\n\n get hasValidLastClick() {\n return (\n typeof this.state.latitude === 'number' &&\n typeof this.state.longitude === 'number'\n );\n }\n\n onPress(event) {\n const { geometry, properties } = event;\n\n this.setState({\n latitude: geometry.coordinates[1],\n longitude: geometry.coordinates[0],\n screenPointX: properties.screenPointX,\n screenPointY: properties.screenPointY,\n });\n }\n\n renderLastClicked() {\n if (!this.hasValidLastClick) {\n return (\n \n Click the map!\n \n );\n }\n\n return (\n \n \n Latitude: {this.state.latitude}\n \n \n Longitude: {this.state.longitude}\n \n Screen Point X: {this.state.screenPointX}\n Screen Point Y: {this.state.screenPointY}\n \n );\n }\n\n render() {\n return (\n <>\n \n \n \n {this.renderLastClicked()}\n \n );\n }\n}\n\nexport default ShowClick;\n\n\n"})}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.img,{alt:"ShowClick.png",src:n(7820).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},7820:(e,t,n)=>{n.d(t,{Z:()=>s});const s=n.p+"assets/images/ShowClick-502607fb8ab6b2a4d75f394473df743f.png"},1151:(e,t,n)=>{n.d(t,{a:()=>i});var s=n(7294);const o={},a=s.createContext(o);function i(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[7774],{6007:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var s=n(5893),o=n(1151);const a={title:"Show Click",tags:["MapView#onPress"],custom_props:{example_rel_path:"Map/ShowClick.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowClick.js"},i=void 0,r={id:"examples/Map/ShowClick",title:"Show Click",description:"Demonstates onPress event and how to get the screen point of the click.",source:"@site/docs/examples/Map/ShowClick.md",sourceDirName:"examples/Map",slug:"/examples/Map/ShowClick",permalink:"/docs/examples/Map/ShowClick",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowClick.js",tags:[{inline:!0,label:"MapView#onPress",permalink:"/docs/tags/map-view-on-press"}],version:"current",frontMatter:{title:"Show Click",tags:["MapView#onPress"],custom_props:{example_rel_path:"Map/ShowClick.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/ShowClick.js"},sidebar:"examplesSidebar",previous:{title:"Show and hide layer",permalink:"/docs/examples/Map/ShowAndHideLayer"},next:{title:"Show Map",permalink:"/docs/examples/Map/ShowMap"}},c={},l=[];function p(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:"Demonstates onPress event and how to get the screen point of the click."}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx",children:"import React from 'react';\nimport { Text } from 'react-native';\nimport { MapView, Camera } from '@rnmapbox/maps';\n\nimport Bubble from '../common/Bubble';\n\nconst styles = { matchParent: { flex: 1 } };\n\nclass ShowClick extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n latitude: undefined,\n longitude: undefined,\n screenPointX: undefined,\n screenPointY: undefined,\n };\n\n this.onPress = this.onPress.bind(this);\n }\n\n get hasValidLastClick() {\n return (\n typeof this.state.latitude === 'number' &&\n typeof this.state.longitude === 'number'\n );\n }\n\n onPress(event) {\n const { geometry, properties } = event;\n\n this.setState({\n latitude: geometry.coordinates[1],\n longitude: geometry.coordinates[0],\n screenPointX: properties.screenPointX,\n screenPointY: properties.screenPointY,\n });\n }\n\n renderLastClicked() {\n if (!this.hasValidLastClick) {\n return (\n \n Click the map!\n \n );\n }\n\n return (\n \n \n Latitude: {this.state.latitude}\n \n \n Longitude: {this.state.longitude}\n \n Screen Point X: {this.state.screenPointX}\n Screen Point Y: {this.state.screenPointY}\n \n );\n }\n\n render() {\n return (\n <>\n \n \n \n {this.renderLastClicked()}\n \n );\n }\n}\n\nexport default ShowClick;\n\n\n"})}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.img,{alt:"ShowClick.png",src:n(7820).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},7820:(e,t,n)=>{n.d(t,{Z:()=>s});const s=n.p+"assets/images/ShowClick-8ef8ff4fa50c6a443e49c288bd35ee26.png"},1151:(e,t,n)=>{n.d(t,{a:()=>i});var s=n(7294);const o={},a=s.createContext(o);function i(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file diff --git a/assets/js/4ce86281.9c5629b5.js b/assets/js/4ce86281.625a3c1a.js similarity index 98% rename from assets/js/4ce86281.9c5629b5.js rename to assets/js/4ce86281.625a3c1a.js index 929aa9bd..6bbedaaa 100644 --- a/assets/js/4ce86281.9c5629b5.js +++ b/assets/js/4ce86281.625a3c1a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[3316],{3009:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>m,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var s=t(5893),r=t(1151);const o={title:"Query Features Bounding Box",tags:[],custom_props:{example_rel_path:"FillRasterLayer/QueryWithRect.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/QueryWithRect.js"},a=void 0,i={id:"examples/FillRasterLayer/QueryWithRect",title:"Query Features Bounding Box",description:"QueryWithRect.png}",source:"@site/docs/examples/FillRasterLayer/QueryWithRect.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/QueryWithRect",permalink:"/docs/examples/FillRasterLayer/QueryWithRect",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/QueryWithRect.js",tags:[],version:"current",frontMatter:{title:"Query Features Bounding Box",tags:[],custom_props:{example_rel_path:"FillRasterLayer/QueryWithRect.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/QueryWithRect.js"},sidebar:"examplesSidebar",previous:{title:"Query Source Features",permalink:"/docs/examples/FillRasterLayer/QuerySourceFeatures"},next:{title:"Raster Source",permalink:"/docs/examples/FillRasterLayer/RasterSource"}},l={},c=[];function p(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport { Text } from 'react-native';\nimport MapboxGL from '@rnmapbox/maps';\n\nimport sheet from '../../styles/sheet';\nimport nycJSON from '../../assets/nyc_geojson.json';\nimport BaseExamplePropTypes from '../common/BaseExamplePropTypes';\nimport Page from '../common/Page';\nimport Bubble from '../common/Bubble';\n\nconst styles = {\n neighborhoods: {\n fillAntialias: true,\n fillColor: 'blue',\n fillOutlineColor: 'black',\n fillOpacity: 0.84,\n },\n selectedNeighborhoods: {\n fillAntialias: true,\n fillColor: 'green',\n fillOpacity: 0.84,\n },\n bubbleText: { textAlign: 'center' },\n};\n\nclass QueryWithRect extends React.Component {\n static propTypes = {\n ...BaseExamplePropTypes,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n screenCoords: [],\n selectedGeoJSON: null,\n };\n\n this.onPress = this.onPress.bind(this);\n }\n\n async onPress(e) {\n const { screenPointX, screenPointY } = e.properties;\n\n const screenCoords = Object.assign([], this.state.screenCoords);\n screenCoords.push([screenPointX, screenPointY]);\n\n if (screenCoords.length === 2) {\n const featureCollection = await this._map.queryRenderedFeaturesInRect(\n this.getBoundingBox(screenCoords),\n null,\n ['nycFill'],\n );\n\n this.setState({\n screenCoords: [],\n selectedGeoJSON: featureCollection.features.length\n ? featureCollection\n : null,\n });\n } else {\n this.setState({ screenCoords });\n }\n }\n\n getBoundingBox(screenCoords) {\n const maxX = Math.max(screenCoords[0][0], screenCoords[1][0]);\n const minX = Math.min(screenCoords[0][0], screenCoords[1][0]);\n const maxY = Math.max(screenCoords[0][1], screenCoords[1][1]);\n const minY = Math.min(screenCoords[0][1], screenCoords[1][1]);\n // Rect -> [top, right, bottom, left]\n return [minY, maxX, maxY, minX];\n }\n\n get message() {\n if (this.state.screenCoords.length === 1) {\n return 'Press in one more location to close the rect';\n }\n return 'Press in two different locations to form a rect to query with';\n }\n\n render() {\n return (\n \n (this._map = c)}\n onPress={this.onPress}\n style={sheet.matchParent}\n styleURL={MapboxGL.StyleURL.Light}\n >\n \n\n \n \n \n\n {this.state.selectedGeoJSON ? (\n \n \n \n ) : null}\n \n\n \n {this.message}\n \n \n );\n }\n}\n\nexport default QueryWithRect;\n\n\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.img,{alt:"QueryWithRect.png",src:t(4706).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},4706:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/QueryWithRect-4adcb6c95e95e7f2f4432a77b3c30bc0.png"},1151:(e,n,t)=>{t.d(n,{a:()=>a});var s=t(7294);const r={},o=s.createContext(r);function a(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[3316],{3009:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>m,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var s=t(5893),r=t(1151);const o={title:"Query Features Bounding Box",tags:[],custom_props:{example_rel_path:"FillRasterLayer/QueryWithRect.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/QueryWithRect.js"},a=void 0,i={id:"examples/FillRasterLayer/QueryWithRect",title:"Query Features Bounding Box",description:"QueryWithRect.png}",source:"@site/docs/examples/FillRasterLayer/QueryWithRect.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/QueryWithRect",permalink:"/docs/examples/FillRasterLayer/QueryWithRect",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/QueryWithRect.js",tags:[],version:"current",frontMatter:{title:"Query Features Bounding Box",tags:[],custom_props:{example_rel_path:"FillRasterLayer/QueryWithRect.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/QueryWithRect.js"},sidebar:"examplesSidebar",previous:{title:"Query Source Features",permalink:"/docs/examples/FillRasterLayer/QuerySourceFeatures"},next:{title:"Raster Source",permalink:"/docs/examples/FillRasterLayer/RasterSource"}},l={},c=[];function p(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport { Text } from 'react-native';\nimport MapboxGL from '@rnmapbox/maps';\n\nimport sheet from '../../styles/sheet';\nimport nycJSON from '../../assets/nyc_geojson.json';\nimport BaseExamplePropTypes from '../common/BaseExamplePropTypes';\nimport Page from '../common/Page';\nimport Bubble from '../common/Bubble';\n\nconst styles = {\n neighborhoods: {\n fillAntialias: true,\n fillColor: 'blue',\n fillOutlineColor: 'black',\n fillOpacity: 0.84,\n },\n selectedNeighborhoods: {\n fillAntialias: true,\n fillColor: 'green',\n fillOpacity: 0.84,\n },\n bubbleText: { textAlign: 'center' },\n};\n\nclass QueryWithRect extends React.Component {\n static propTypes = {\n ...BaseExamplePropTypes,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n screenCoords: [],\n selectedGeoJSON: null,\n };\n\n this.onPress = this.onPress.bind(this);\n }\n\n async onPress(e) {\n const { screenPointX, screenPointY } = e.properties;\n\n const screenCoords = Object.assign([], this.state.screenCoords);\n screenCoords.push([screenPointX, screenPointY]);\n\n if (screenCoords.length === 2) {\n const featureCollection = await this._map.queryRenderedFeaturesInRect(\n this.getBoundingBox(screenCoords),\n null,\n ['nycFill'],\n );\n\n this.setState({\n screenCoords: [],\n selectedGeoJSON: featureCollection.features.length\n ? featureCollection\n : null,\n });\n } else {\n this.setState({ screenCoords });\n }\n }\n\n getBoundingBox(screenCoords) {\n const maxX = Math.max(screenCoords[0][0], screenCoords[1][0]);\n const minX = Math.min(screenCoords[0][0], screenCoords[1][0]);\n const maxY = Math.max(screenCoords[0][1], screenCoords[1][1]);\n const minY = Math.min(screenCoords[0][1], screenCoords[1][1]);\n // Rect -> [top, right, bottom, left]\n return [minY, maxX, maxY, minX];\n }\n\n get message() {\n if (this.state.screenCoords.length === 1) {\n return 'Press in one more location to close the rect';\n }\n return 'Press in two different locations to form a rect to query with';\n }\n\n render() {\n return (\n \n (this._map = c)}\n onPress={this.onPress}\n style={sheet.matchParent}\n styleURL={MapboxGL.StyleURL.Light}\n >\n \n\n \n \n \n\n {this.state.selectedGeoJSON ? (\n \n \n \n ) : null}\n \n\n \n {this.message}\n \n \n );\n }\n}\n\nexport default QueryWithRect;\n\n\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.img,{alt:"QueryWithRect.png",src:t(4706).Z+"",width:"295",height:"640"}),"}"]})]})}function m(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},4706:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/QueryWithRect-c40c37baa4123d925decee02683db8f2.png"},1151:(e,n,t)=>{t.d(n,{a:()=>a});var s=t(7294);const r={},o=s.createContext(r);function a(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file diff --git a/assets/js/4f8af149.897018c3.js b/assets/js/4f8af149.f7bbc2e3.js similarity index 98% rename from assets/js/4f8af149.897018c3.js rename to assets/js/4f8af149.f7bbc2e3.js index 74b6b17d..215543be 100644 --- a/assets/js/4f8af149.897018c3.js +++ b/assets/js/4f8af149.f7bbc2e3.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[4885],{8480:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>l,contentTitle:()=>o,default:()=>p,frontMatter:()=>s,metadata:()=>m,toc:()=>i});var r=t(5893),n=t(1151);const s={title:"Image Overlay",tags:["RasterLayer","ImageSource"],custom_props:{example_rel_path:"FillRasterLayer/ImageOverlay.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ImageOverlay.js"},o=void 0,m={id:"examples/FillRasterLayer/ImageOverlay",title:"Image Overlay",description:"ImageOverlay.png}",source:"@site/docs/examples/FillRasterLayer/ImageOverlay.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/ImageOverlay",permalink:"/docs/examples/FillRasterLayer/ImageOverlay",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ImageOverlay.js",tags:[{inline:!0,label:"RasterLayer",permalink:"/docs/tags/raster-layer"},{inline:!0,label:"ImageSource",permalink:"/docs/tags/image-source"}],version:"current",frontMatter:{title:"Image Overlay",tags:["RasterLayer","ImageSource"],custom_props:{example_rel_path:"FillRasterLayer/ImageOverlay.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ImageOverlay.js"},sidebar:"examplesSidebar",previous:{title:"GeoJSON Source",permalink:"/docs/examples/FillRasterLayer/GeoJSONSource"},next:{title:"Indoor Building Map",permalink:"/docs/examples/FillRasterLayer/IndoorBuilding"}},l={},i=[];function c(e){const a={code:"code",img:"img",p:"p",pre:"pre",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-jsx",children:"import React from 'react';\nimport Mapbox from '@rnmapbox/maps';\nimport { Text } from 'react-native';\n\nimport Bubble from '../common/Bubble';\nimport sheet from '../../styles/sheet';\nimport radar0 from '../../assets/radar.png';\nimport radar1 from '../../assets/radar1.png';\nimport radar2 from '../../assets/radar2.png';\n\nconst styles = {\n rasterLayer: { rasterOpacity: 0.6 },\n bubble: { bottom: 100 },\n};\n\nconst frames = [radar0, radar1, radar2];\nconst coordQuads = [\n [\n [-80.425, 46.437], // top left\n [-71.516, 46.437], // top right\n [-71.516, 37.936], // bottom right\n [-80.425, 37.936], // bottom left\n ],\n [\n [-85.425, 45.437], // top left\n [-75.516, 45.437], // top right\n [-75.516, 36.936], // bottom right\n [-85.425, 36.936], // bottom left\n ],\n];\n\nclass ImageOverlay extends React.Component {\n state = {\n radarFrameIndex: 0,\n coords: coordQuads[0],\n dynamic: false,\n };\n\n _timeout = null;\n\n componentDidMount() {\n this.heartbeat();\n }\n\n heartbeat() {\n this._timeout = setTimeout(() => {\n requestAnimationFrame(() => {\n let nextFrame = this.state.radarFrameIndex + 1;\n if (nextFrame > 1) {\n nextFrame = 0;\n }\n\n if (this.state.dynamic) {\n this.setState({\n radarFrameIndex: nextFrame,\n coords: coordQuads[nextFrame],\n });\n } else {\n this.setState({ radarFrameIndex: nextFrame });\n }\n this.heartbeat();\n });\n }, 1000);\n }\n\n componentWillUnmount() {\n if (this._timeout) {\n clearTimeout(this._timeout);\n }\n }\n\n render() {\n const bubbleText = this.state.dynamic\n ? 'Static coordinates'\n : 'Dynamic coordinates';\n return (\n <>\n (this.map = ref)}\n style={sheet.matchParent}\n styleURL={Mapbox.StyleURL.Satellite}\n >\n \n\n \n \n \n \n {\n this.setState({ dynamic: !this.state.dynamic });\n }}\n style={styles.bubble}\n >\n {bubbleText}\n \n \n );\n }\n}\n\nexport default ImageOverlay;\n\n\n"})}),"\n",(0,r.jsxs)(a.p,{children:[(0,r.jsx)(a.img,{alt:"ImageOverlay.png",src:t(2629).Z+"",width:"295",height:"640"}),"}"]})]})}function p(e={}){const{wrapper:a}={...(0,n.a)(),...e.components};return a?(0,r.jsx)(a,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},2629:(e,a,t)=>{t.d(a,{Z:()=>r});const r=t.p+"assets/images/ImageOverlay-0e71f7eede38a230c24aeee6fd861cbe.png"},1151:(e,a,t)=>{t.d(a,{a:()=>o});var r=t(7294);const n={},s=r.createContext(n);function o(e){const a=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[4885],{8480:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>l,contentTitle:()=>o,default:()=>p,frontMatter:()=>s,metadata:()=>m,toc:()=>i});var r=t(5893),n=t(1151);const s={title:"Image Overlay",tags:["RasterLayer","ImageSource"],custom_props:{example_rel_path:"FillRasterLayer/ImageOverlay.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ImageOverlay.js"},o=void 0,m={id:"examples/FillRasterLayer/ImageOverlay",title:"Image Overlay",description:"ImageOverlay.png}",source:"@site/docs/examples/FillRasterLayer/ImageOverlay.md",sourceDirName:"examples/FillRasterLayer",slug:"/examples/FillRasterLayer/ImageOverlay",permalink:"/docs/examples/FillRasterLayer/ImageOverlay",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ImageOverlay.js",tags:[{inline:!0,label:"RasterLayer",permalink:"/docs/tags/raster-layer"},{inline:!0,label:"ImageSource",permalink:"/docs/tags/image-source"}],version:"current",frontMatter:{title:"Image Overlay",tags:["RasterLayer","ImageSource"],custom_props:{example_rel_path:"FillRasterLayer/ImageOverlay.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/FillRasterLayer/ImageOverlay.js"},sidebar:"examplesSidebar",previous:{title:"GeoJSON Source",permalink:"/docs/examples/FillRasterLayer/GeoJSONSource"},next:{title:"Indoor Building Map",permalink:"/docs/examples/FillRasterLayer/IndoorBuilding"}},l={},i=[];function c(e){const a={code:"code",img:"img",p:"p",pre:"pre",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-jsx",children:"import React from 'react';\nimport Mapbox from '@rnmapbox/maps';\nimport { Text } from 'react-native';\n\nimport Bubble from '../common/Bubble';\nimport sheet from '../../styles/sheet';\nimport radar0 from '../../assets/radar.png';\nimport radar1 from '../../assets/radar1.png';\nimport radar2 from '../../assets/radar2.png';\n\nconst styles = {\n rasterLayer: { rasterOpacity: 0.6 },\n bubble: { bottom: 100 },\n};\n\nconst frames = [radar0, radar1, radar2];\nconst coordQuads = [\n [\n [-80.425, 46.437], // top left\n [-71.516, 46.437], // top right\n [-71.516, 37.936], // bottom right\n [-80.425, 37.936], // bottom left\n ],\n [\n [-85.425, 45.437], // top left\n [-75.516, 45.437], // top right\n [-75.516, 36.936], // bottom right\n [-85.425, 36.936], // bottom left\n ],\n];\n\nclass ImageOverlay extends React.Component {\n state = {\n radarFrameIndex: 0,\n coords: coordQuads[0],\n dynamic: false,\n };\n\n _timeout = null;\n\n componentDidMount() {\n this.heartbeat();\n }\n\n heartbeat() {\n this._timeout = setTimeout(() => {\n requestAnimationFrame(() => {\n let nextFrame = this.state.radarFrameIndex + 1;\n if (nextFrame > 1) {\n nextFrame = 0;\n }\n\n if (this.state.dynamic) {\n this.setState({\n radarFrameIndex: nextFrame,\n coords: coordQuads[nextFrame],\n });\n } else {\n this.setState({ radarFrameIndex: nextFrame });\n }\n this.heartbeat();\n });\n }, 1000);\n }\n\n componentWillUnmount() {\n if (this._timeout) {\n clearTimeout(this._timeout);\n }\n }\n\n render() {\n const bubbleText = this.state.dynamic\n ? 'Static coordinates'\n : 'Dynamic coordinates';\n return (\n <>\n (this.map = ref)}\n style={sheet.matchParent}\n styleURL={Mapbox.StyleURL.Satellite}\n >\n \n\n \n \n \n \n {\n this.setState({ dynamic: !this.state.dynamic });\n }}\n style={styles.bubble}\n >\n {bubbleText}\n \n \n );\n }\n}\n\nexport default ImageOverlay;\n\n\n"})}),"\n",(0,r.jsxs)(a.p,{children:[(0,r.jsx)(a.img,{alt:"ImageOverlay.png",src:t(2629).Z+"",width:"295",height:"640"}),"}"]})]})}function p(e={}){const{wrapper:a}={...(0,n.a)(),...e.components};return a?(0,r.jsx)(a,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},2629:(e,a,t)=>{t.d(a,{Z:()=>r});const r=t.p+"assets/images/ImageOverlay-0843c73731f35a37c2d3126ba3196a1b.png"},1151:(e,a,t)=>{t.d(a,{a:()=>o});var r=t(7294);const n={},s=r.createContext(n);function o(e){const a=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}}}]); \ No newline at end of file diff --git a/assets/js/51768be3.9f3ed184.js b/assets/js/51768be3.9fd6d12d.js similarity index 98% rename from assets/js/51768be3.9f3ed184.js rename to assets/js/51768be3.9fd6d12d.js index 81d86f4d..7b74f940 100644 --- a/assets/js/51768be3.9f3ed184.js +++ b/assets/js/51768be3.9fd6d12d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[2520],{4613:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>m});var a=t(5893),r=t(1151);const i={title:"Query Terrain Elevation",tags:["MapView#queryTerrainElevation","AnimatedShape","AnimatedRouteCoordinatesArray","AnimatedExtractCoordinateFromArray"],custom_props:{example_rel_path:"V10/QueryTerrainElevation.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/QueryTerrainElevation.js"},o=void 0,s={id:"examples/V10/QueryTerrainElevation",title:"Query Terrain Elevation",description:"This is a fairly complex example demonstraing the use of AnimatedShape, Camera animation, queryTerrainElevation and AnimatedMarkerView",source:"@site/docs/examples/V10/QueryTerrainElevation.md",sourceDirName:"examples/V10",slug:"/examples/V10/QueryTerrainElevation",permalink:"/docs/examples/V10/QueryTerrainElevation",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/QueryTerrainElevation.js",tags:[{inline:!0,label:"MapView#queryTerrainElevation",permalink:"/docs/tags/map-view-query-terrain-elevation"},{inline:!0,label:"AnimatedShape",permalink:"/docs/tags/animated-shape"},{inline:!0,label:"AnimatedRouteCoordinatesArray",permalink:"/docs/tags/animated-route-coordinates-array"},{inline:!0,label:"AnimatedExtractCoordinateFromArray",permalink:"/docs/tags/animated-extract-coordinate-from-array"}],version:"current",frontMatter:{title:"Query Terrain Elevation",tags:["MapView#queryTerrainElevation","AnimatedShape","AnimatedRouteCoordinatesArray","AnimatedExtractCoordinateFromArray"],custom_props:{example_rel_path:"V10/QueryTerrainElevation.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/QueryTerrainElevation.js"},sidebar:"examplesSidebar",previous:{title:"Markers",permalink:"/docs/examples/V10/Markers"},next:{title:"Simple Model Layer",permalink:"/docs/examples/V10/SimpleModelLayer"}},l={},m=[];function d(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"This is a fairly complex example demonstraing the use of AnimatedShape, Camera animation, queryTerrainElevation and AnimatedMarkerView"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import React, { useState, useEffect, useRef } from 'react';\nimport { Easing, Button, View, Text } from 'react-native';\nimport length from '@turf/length';\nimport { lineString } from '@turf/helpers';\nimport { Animated as RNAnimated } from 'react-native';\nimport {\n MapView,\n SkyLayer,\n Camera,\n Logger,\n Terrain,\n RasterDemSource,\n Animated,\n AnimatedShape,\n AnimatedRouteCoordinatesArray,\n AnimatedExtractCoordinateFromArray,\n MarkerView,\n Atmosphere,\n} from '@rnmapbox/maps';\n\nLogger.setLogLevel('verbose');\n\nconst AnimatedMarkerView = RNAnimated.createAnimatedComponent(MarkerView);\n\nconst styles = {\n mapView: { flex: 1 },\n triangleStyle: (size, color) => ({\n width: 0,\n height: 0,\n backgroundColor: 'transparent',\n borderStyle: 'solid',\n borderLeftWidth: size,\n borderRightWidth: size,\n borderTopWidth: size * 1.3,\n borderLeftColor: 'transparent',\n borderRightColor: 'transparent',\n borderTopColor: color,\n }),\n};\n\nconst QueryTerrainElevation = () => {\n let [animatedRoute, setAnimatedRoute] = useState(null);\n let [actPoint, setActPoint] = useState(null);\n let camera = useRef();\n let [altitude, setAltitude] = useState(null);\n let updateAltitudeInterval = useRef();\n let map = useRef();\n useEffect(() => {\n return () => {\n clearInterval(updateAltitudeInterval.current);\n updateAltitudeInterval.current = null;\n };\n }, []);\n\n function startAnimation(animatedRoute) {\n const ts = lineString(animatedRoute.__getValue());\n const total = length(ts, { units: 'meters' });\n const points = animatedRoute.__getValue();\n const endPoint = points[points.length - 1];\n\n animatedRoute\n .timing({\n toValue: { end: { point: endPoint, from: total } },\n duration: 20000,\n easing: Easing.linear,\n })\n .start(() => {\n clearInterval(updateAltitudeInterval.current);\n updateAltitudeInterval.current = null;\n });\n\n camera.current.setCamera({\n heading: 60,\n zoomLevel: 13.5,\n animationDuration: 20000,\n });\n\n updateAltitudeInterval.current = setInterval(async () => {\n setAltitude(\n Math.floor(\n await map.current.queryTerrainElevation(actPoint.__getValue()),\n ),\n );\n }, 2000);\n }\n\n useEffect(() => {\n (async () => {\n let response = await fetch(\n 'https://docs.mapbox.com/mapbox-gl-js/assets/route-pin.geojson',\n );\n let featureCollection = await response.json();\n\n let pinRoute = featureCollection.features[0].geometry.coordinates;\n\n let animatedRoute = new AnimatedRouteCoordinatesArray(pinRoute, {\n end: {\n from: length(lineString(pinRoute)),\n },\n });\n setAnimatedRoute(animatedRoute);\n setActPoint(new AnimatedExtractCoordinateFromArray(animatedRoute, -1));\n })();\n }, []);\n return (\n <>\n \n \n \n );\n};\n\nexport default ShowPointAnnotation;\n\n\n"})}),"\n",(0,e.jsxs)(t.p,{children:[(0,e.jsx)(t.img,{alt:"ShowPointAnnotation.png",src:o(1901).Z+"",width:"295",height:"640"}),"}"]})]})}function m(n={}){const{wrapper:t}={...(0,a.a)(),...n.components};return t?(0,e.jsx)(t,{...n,children:(0,e.jsx)(d,{...n})}):d(n)}},1901:(n,t,o)=>{o.d(t,{Z:()=>e});const e=o.p+"assets/images/ShowPointAnnotation-b78b59740cd58d77d46f0411554775c6.png"},1151:(n,t,o)=>{o.d(t,{a:()=>r});var e=o(7294);const a={},i=e.createContext(a);function r(n){const t=e.useContext(i);return e.useMemo((function(){return"function"==typeof n?n(t):{...t,...n}}),[t,n])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[2175],{2720:(n,t,e)=>{e.r(t),e.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>m,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var o=e(5893),a=e(1151);const i={title:"Show Point Annotations",tags:["PointAnnotation","MapView#deselectAnnotationOnTap","PointAnnotation#refresh","getAnnotationsLayerID"],custom_props:{example_rel_path:"Annotations/ShowPointAnnotation.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/ShowPointAnnotation.tsx"},r=void 0,s={id:"examples/Annotations/ShowPointAnnotation",title:"Show Point Annotations",description:"Shows Point annotation with images",source:"@site/docs/examples/Annotations/ShowPointAnnotation.md",sourceDirName:"examples/Annotations",slug:"/examples/Annotations/ShowPointAnnotation",permalink:"/docs/examples/Annotations/ShowPointAnnotation",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/ShowPointAnnotation.tsx",tags:[{inline:!0,label:"PointAnnotation",permalink:"/docs/tags/point-annotation"},{inline:!0,label:"MapView#deselectAnnotationOnTap",permalink:"/docs/tags/map-view-deselect-annotation-on-tap"},{inline:!0,label:"PointAnnotation#refresh",permalink:"/docs/tags/point-annotation-refresh"},{inline:!0,label:"getAnnotationsLayerID",permalink:"/docs/tags/get-annotations-layer-id"}],version:"current",frontMatter:{title:"Show Point Annotations",tags:["PointAnnotation","MapView#deselectAnnotationOnTap","PointAnnotation#refresh","getAnnotationsLayerID"],custom_props:{example_rel_path:"Annotations/ShowPointAnnotation.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/ShowPointAnnotation.tsx"},sidebar:"examplesSidebar",previous:{title:"Point Annotation Anchors",permalink:"/docs/examples/Annotations/PointAnnotationAnchors"},next:{title:"Fit",permalink:"/docs/examples/Camera/Fit"}},l={},c=[];function d(n){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Shows Point annotation with images"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import React, { useRef, useState } from 'react';\nimport { View, Text, StyleSheet, Image } from 'react-native';\nimport {\n Callout,\n Camera,\n FillLayer,\n MapView,\n PointAnnotation,\n ShapeSource,\n getAnnotationsLayerID,\n} from '@rnmapbox/maps';\nimport { Point, Position } from 'geojson';\nimport { Button } from '@rneui/base';\n\nimport Bubble from '../common/Bubble';\nimport { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc\n\nconst ANNOTATION_SIZE = 40;\n\nconst styles = {\n annotationContainer: {\n alignItems: 'center',\n backgroundColor: 'white',\n borderColor: 'rgba(0, 0, 0, 0.45)',\n borderRadius: ANNOTATION_SIZE / 2,\n borderWidth: StyleSheet.hairlineWidth,\n height: ANNOTATION_SIZE,\n justifyContent: 'center',\n overflow: 'hidden',\n width: ANNOTATION_SIZE,\n },\n matchParent: {\n flex: 1,\n },\n} as const;\n\ntype AnnotationWithRemoteImageProps = {\n id: string;\n title: string;\n coordinate: Position;\n};\n\nconst AnnotationWithRemoteImage = ({\n id,\n coordinate,\n title,\n}: AnnotationWithRemoteImageProps) => {\n const pointAnnotation = useRef(null);\n\n return (\n \n console.log('onSelected:', feature.id, feature.geometry.coordinates)\n }\n onDrag={(feature) =>\n console.log('onDrag:', feature.id, feature.geometry.coordinates)\n }\n onDragStart={(feature) =>\n console.log('onDragStart:', feature.id, feature.geometry.coordinates)\n }\n onDragEnd={(feature) =>\n console.log('onDragEnd:', feature.id, feature.geometry.coordinates)\n }\n ref={pointAnnotation}\n >\n \n pointAnnotation.current?.refresh()}\n // Prevent rendering bitmap at unknown animation state\n fadeDuration={0}\n />\n \n \n \n );\n};\n\nconst ShowPointAnnotation = () => {\n const [coordinates, setCoordinates] = useState([\n [-73.99155, 40.73581],\n [-73.99155, 40.73681],\n ]);\n const [layerRendering, setLayerRendering] = useState<'below' | 'above'>(\n 'below',\n );\n\n const renderAnnotations = () => {\n const items = [];\n\n for (let i = 0; i < coordinates.length; i++) {\n const coordinate = coordinates[i];\n\n const title = `Lon: ${coordinate[0]} Lat: ${coordinate[1]}`;\n const id = `pointAnnotation${i}`;\n\n if (i % 2 === 1) {\n items.push(\n null,\n ,\n );\n } else {\n items.push(\n null,\n \n \n \n ,\n );\n }\n }\n\n return items;\n };\n\n return (\n <>\n {\n setCoordinates((prevState) => [\n ...prevState,\n (feature.geometry as Point).coordinates,\n ]);\n }}\n style={styles.matchParent}\n deselectAnnotationOnTap={true}\n >\n \n\n {renderAnnotations()}\n\n \n \n \n \n\n \n \n Click to add a point annotation\n \n \n setLayerRendering(\n (prevState) =>\n (({ above: 'below', below: 'above' } as const)[prevState]),\n )\n }\n >\n Render Polygon {{ above: 'below', below: 'above' }[layerRendering]}\n \n \n \n );\n};\n\nexport default ShowPointAnnotation;\n\n\n"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"ShowPointAnnotation.png",src:e(1901).Z+"",width:"295",height:"640"}),"}"]})]})}function m(n={}){const{wrapper:t}={...(0,a.a)(),...n.components};return t?(0,o.jsx)(t,{...n,children:(0,o.jsx)(d,{...n})}):d(n)}},1901:(n,t,e)=>{e.d(t,{Z:()=>o});const o=e.p+"assets/images/ShowPointAnnotation-e838fbcff4d2b1f46c661e0745a6e5db.png"},1151:(n,t,e)=>{e.d(t,{a:()=>r});var o=e(7294);const a={},i=o.createContext(a);function r(n){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof n?n(t):{...t,...n}}),[t,n])}}}]); \ No newline at end of file diff --git a/assets/js/efc0eea7.58e05fd7.js b/assets/js/efc0eea7.fed691cd.js similarity index 98% rename from assets/js/efc0eea7.58e05fd7.js rename to assets/js/efc0eea7.fed691cd.js index f70710ca..b0328d47 100644 --- a/assets/js/efc0eea7.58e05fd7.js +++ b/assets/js/efc0eea7.fed691cd.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[6698],{1446:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>p,contentTitle:()=>o,default:()=>c,frontMatter:()=>s,metadata:()=>m,toc:()=>i});var t=n(5893),a=n(1151);const s={title:"Terrain, Sky, & Atmosphere",tags:["RasterDemSource","Terrain","Atmosphere","SkyLayer"],custom_props:{example_rel_path:"V10/TerrainSkyAtmosphere.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/TerrainSkyAtmosphere.tsx"},o=void 0,m={id:"examples/V10/TerrainSkyAtmosphere",title:"Terrain, Sky, & Atmosphere",description:"Demostrates use of Terran, Atmosphere and SkyLayer.",source:"@site/docs/examples/V10/TerrainSkyAtmosphere.md",sourceDirName:"examples/V10",slug:"/examples/V10/TerrainSkyAtmosphere",permalink:"/docs/examples/V10/TerrainSkyAtmosphere",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/TerrainSkyAtmosphere.tsx",tags:[{inline:!0,label:"RasterDemSource",permalink:"/docs/tags/raster-dem-source"},{inline:!0,label:"Terrain",permalink:"/docs/tags/terrain"},{inline:!0,label:"Atmosphere",permalink:"/docs/tags/atmosphere"},{inline:!0,label:"SkyLayer",permalink:"/docs/tags/sky-layer"}],version:"current",frontMatter:{title:"Terrain, Sky, & Atmosphere",tags:["RasterDemSource","Terrain","Atmosphere","SkyLayer"],custom_props:{example_rel_path:"V10/TerrainSkyAtmosphere.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/TerrainSkyAtmosphere.tsx"},sidebar:"examplesSidebar",previous:{title:"Simple Model Layer",permalink:"/docs/examples/V10/SimpleModelLayer"},next:{title:"Style Import Config",permalink:"/docs/examples/V11/StyleImportConfig"}},p={},i=[];function l(e){const r={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.p,{children:"Demostrates use of Terran, Atmosphere and SkyLayer."}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-jsx",children:"import React, { useRef } from 'react';\nimport { Button } from 'react-native';\nimport {\n MapView,\n SkyLayer,\n Logger,\n Terrain,\n RasterDemSource,\n Atmosphere,\n Camera,\n} from '@rnmapbox/maps';\n\nLogger.setLogLevel('verbose');\n\nconst TerrainSkyAtmosphere = () => {\n const cameraRef = useRef(null);\n\n return (\n <>\n \n cameraRef.current?.setCamera({\n heading: 60,\n zoomLevel: 13.5,\n animationDuration: 20000,\n })\n }\n />\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default TerrainSkyAtmosphere;\n\n\n"})}),"\n",(0,t.jsxs)(r.p,{children:[(0,t.jsx)(r.img,{alt:"TerrainSkyAtmosphere.png",src:n(7566).Z+"",width:"295",height:"640"}),"}"]})]})}function c(e={}){const{wrapper:r}={...(0,a.a)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},7566:(e,r,n)=>{n.d(r,{Z:()=>t});const t=n.p+"assets/images/TerrainSkyAtmosphere-53b2c21d03ff156b5f95e2aa3697dfdc.png"},1151:(e,r,n)=>{n.d(r,{a:()=>o});var t=n(7294);const a={},s=t.createContext(a);function o(e){const r=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[6698],{1446:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>p,contentTitle:()=>o,default:()=>c,frontMatter:()=>s,metadata:()=>m,toc:()=>i});var t=n(5893),a=n(1151);const s={title:"Terrain, Sky, & Atmosphere",tags:["RasterDemSource","Terrain","Atmosphere","SkyLayer"],custom_props:{example_rel_path:"V10/TerrainSkyAtmosphere.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/TerrainSkyAtmosphere.tsx"},o=void 0,m={id:"examples/V10/TerrainSkyAtmosphere",title:"Terrain, Sky, & Atmosphere",description:"Demostrates use of Terran, Atmosphere and SkyLayer.",source:"@site/docs/examples/V10/TerrainSkyAtmosphere.md",sourceDirName:"examples/V10",slug:"/examples/V10/TerrainSkyAtmosphere",permalink:"/docs/examples/V10/TerrainSkyAtmosphere",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/TerrainSkyAtmosphere.tsx",tags:[{inline:!0,label:"RasterDemSource",permalink:"/docs/tags/raster-dem-source"},{inline:!0,label:"Terrain",permalink:"/docs/tags/terrain"},{inline:!0,label:"Atmosphere",permalink:"/docs/tags/atmosphere"},{inline:!0,label:"SkyLayer",permalink:"/docs/tags/sky-layer"}],version:"current",frontMatter:{title:"Terrain, Sky, & Atmosphere",tags:["RasterDemSource","Terrain","Atmosphere","SkyLayer"],custom_props:{example_rel_path:"V10/TerrainSkyAtmosphere.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/V10/TerrainSkyAtmosphere.tsx"},sidebar:"examplesSidebar",previous:{title:"Simple Model Layer",permalink:"/docs/examples/V10/SimpleModelLayer"},next:{title:"Style Import Config",permalink:"/docs/examples/V11/StyleImportConfig"}},p={},i=[];function l(e){const r={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.p,{children:"Demostrates use of Terran, Atmosphere and SkyLayer."}),"\n",(0,t.jsx)(r.pre,{children:(0,t.jsx)(r.code,{className:"language-jsx",children:"import React, { useRef } from 'react';\nimport { Button } from 'react-native';\nimport {\n MapView,\n SkyLayer,\n Logger,\n Terrain,\n RasterDemSource,\n Atmosphere,\n Camera,\n} from '@rnmapbox/maps';\n\nLogger.setLogLevel('verbose');\n\nconst TerrainSkyAtmosphere = () => {\n const cameraRef = useRef(null);\n\n return (\n <>\n \n cameraRef.current?.setCamera({\n heading: 60,\n zoomLevel: 13.5,\n animationDuration: 20000,\n })\n }\n />\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default TerrainSkyAtmosphere;\n\n\n"})}),"\n",(0,t.jsxs)(r.p,{children:[(0,t.jsx)(r.img,{alt:"TerrainSkyAtmosphere.png",src:n(7566).Z+"",width:"295",height:"640"}),"}"]})]})}function c(e={}){const{wrapper:r}={...(0,a.a)(),...e.components};return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},7566:(e,r,n)=>{n.d(r,{Z:()=>t});const t=n.p+"assets/images/TerrainSkyAtmosphere-12d002430e88213ebb70af9646e7c3c2.png"},1151:(e,r,n)=>{n.d(r,{a:()=>o});var t=n(7294);const a={},s=t.createContext(a);function o(e){const r=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}}}]); \ No newline at end of file diff --git a/assets/js/f7bfd607.94be251e.js b/assets/js/f7bfd607.09631168.js similarity index 98% rename from assets/js/f7bfd607.94be251e.js rename to assets/js/f7bfd607.09631168.js index 092e3060..52b6fe0a 100644 --- a/assets/js/f7bfd607.94be251e.js +++ b/assets/js/f7bfd607.09631168.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[8254],{5246:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>l,frontMatter:()=>s,metadata:()=>p,toc:()=>m});var i=t(5893),a=t(1151);const s={title:"Point in Map View",tags:["MapView#pointInMapView"],custom_props:{example_rel_path:"Map/PointInMapView.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/PointInMapView.js"},o=void 0,p={id:"examples/Map/PointInMapView",title:"Point in Map View",description:"Converts a coordinate to a point in the current view.",source:"@site/docs/examples/Map/PointInMapView.md",sourceDirName:"examples/Map",slug:"/examples/Map/PointInMapView",permalink:"/docs/examples/Map/PointInMapView",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/PointInMapView.js",tags:[{inline:!0,label:"MapView#pointInMapView",permalink:"/docs/tags/map-view-point-in-map-view"}],version:"current",frontMatter:{title:"Point in Map View",tags:["MapView#pointInMapView"],custom_props:{example_rel_path:"Map/PointInMapView.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/PointInMapView.js"},sidebar:"examplesSidebar",previous:{title:"Ornaments",permalink:"/docs/examples/Map/Ornaments"},next:{title:"Show and hide layer",permalink:"/docs/examples/Map/ShowAndHideLayer"}},r={},m=[];function c(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"Converts a coordinate to a point in the current view."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport { Text } from 'react-native';\nimport { MapView, Camera } from '@rnmapbox/maps';\n\nimport Bubble from '../common/Bubble';\n\nconst styles = {\n mapView: { flex: 1 },\n};\n\nclass PointInMapView extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n pointInView: null,\n };\n\n this.onPress = this.onPress.bind(this);\n }\n\n async onPress(e) {\n const pointInView = await this._map.getPointInView(e.geometry.coordinates);\n this.setState({ pointInView });\n }\n\n renderPointInView() {\n if (!this.state.pointInView) {\n return Touch map to see xy pixel location;\n }\n\n return [\n x: {this.state.pointInView[0]},\n y: {this.state.pointInView[1]},\n ];\n }\n\n render() {\n return (\n <>\n (this._map = c)}\n onPress={this.onPress}\n style={styles.mapView}\n >\n \n \n\n {this.renderPointInView()}\n \n );\n }\n}\n\nexport default PointInMapView;\n\n\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.img,{alt:"PointInMapView.png",src:t(9731).Z+"",width:"295",height:"640"}),"}"]})]})}function l(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},9731:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/PointInMapView-ca477f94ab14c7f8882ee0481f1b898f.png"},1151:(e,n,t)=>{t.d(n,{a:()=>o});var i=t(7294);const a={},s=i.createContext(a);function o(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[8254],{5246:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>l,frontMatter:()=>s,metadata:()=>p,toc:()=>m});var i=t(5893),a=t(1151);const s={title:"Point in Map View",tags:["MapView#pointInMapView"],custom_props:{example_rel_path:"Map/PointInMapView.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/PointInMapView.js"},o=void 0,p={id:"examples/Map/PointInMapView",title:"Point in Map View",description:"Converts a coordinate to a point in the current view.",source:"@site/docs/examples/Map/PointInMapView.md",sourceDirName:"examples/Map",slug:"/examples/Map/PointInMapView",permalink:"/docs/examples/Map/PointInMapView",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/PointInMapView.js",tags:[{inline:!0,label:"MapView#pointInMapView",permalink:"/docs/tags/map-view-point-in-map-view"}],version:"current",frontMatter:{title:"Point in Map View",tags:["MapView#pointInMapView"],custom_props:{example_rel_path:"Map/PointInMapView.js"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Map/PointInMapView.js"},sidebar:"examplesSidebar",previous:{title:"Ornaments",permalink:"/docs/examples/Map/Ornaments"},next:{title:"Show and hide layer",permalink:"/docs/examples/Map/ShowAndHideLayer"}},r={},m=[];function c(e){const n={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"Converts a coordinate to a point in the current view."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport { Text } from 'react-native';\nimport { MapView, Camera } from '@rnmapbox/maps';\n\nimport Bubble from '../common/Bubble';\n\nconst styles = {\n mapView: { flex: 1 },\n};\n\nclass PointInMapView extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n pointInView: null,\n };\n\n this.onPress = this.onPress.bind(this);\n }\n\n async onPress(e) {\n const pointInView = await this._map.getPointInView(e.geometry.coordinates);\n this.setState({ pointInView });\n }\n\n renderPointInView() {\n if (!this.state.pointInView) {\n return Touch map to see xy pixel location;\n }\n\n return [\n x: {this.state.pointInView[0]},\n y: {this.state.pointInView[1]},\n ];\n }\n\n render() {\n return (\n <>\n (this._map = c)}\n onPress={this.onPress}\n style={styles.mapView}\n >\n \n \n\n {this.renderPointInView()}\n \n );\n }\n}\n\nexport default PointInMapView;\n\n\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.img,{alt:"PointInMapView.png",src:t(9731).Z+"",width:"295",height:"640"}),"}"]})]})}function l(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},9731:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/PointInMapView-c520e3ad278d9fc1955c582ded483017.png"},1151:(e,n,t)=>{t.d(n,{a:()=>o});var i=t(7294);const a={},s=i.createContext(a);function o(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}}}]); \ No newline at end of file diff --git a/assets/js/fad28139.1469282d.js b/assets/js/fad28139.f80e5181.js similarity index 97% rename from assets/js/fad28139.1469282d.js rename to assets/js/fad28139.f80e5181.js index 5c95fcd7..d6bc05b1 100644 --- a/assets/js/fad28139.1469282d.js +++ b/assets/js/fad28139.f80e5181.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[690],{2078:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>r,default:()=>c,frontMatter:()=>s,metadata:()=>l,toc:()=>m});var o=n(5893),a=n(1151);const s={title:"Custom Callout",tags:["MarkerView"],custom_props:{example_rel_path:"Annotations/CustomCallout.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/CustomCallout.tsx"},r=void 0,l={id:"examples/Annotations/CustomCallout",title:"Custom Callout",description:"Use MarkerView to create a custom callout.",source:"@site/docs/examples/Annotations/CustomCallout.md",sourceDirName:"examples/Annotations",slug:"/examples/Annotations/CustomCallout",permalink:"/docs/examples/Annotations/CustomCallout",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/CustomCallout.tsx",tags:[{inline:!0,label:"MarkerView",permalink:"/docs/tags/marker-view"}],version:"current",frontMatter:{title:"Custom Callout",tags:["MarkerView"],custom_props:{example_rel_path:"Annotations/CustomCallout.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/CustomCallout.tsx"},sidebar:"examplesSidebar",previous:{title:"Introduction",permalink:"/docs/examples/"},next:{title:"Heatmap",permalink:"/docs/examples/Annotations/Heatmap"}},i={},m=[];function u(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Use MarkerView to create a custom callout."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import Mapbox, { type SymbolLayerStyle } from '@rnmapbox/maps';\nimport { Feature } from '@turf/helpers';\nimport React, { useState } from 'react';\nimport { StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';\n\nimport exampleIcon from '../../assets/pin.png';\nimport sheet from '../../styles/sheet';\nimport { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc\n\nconst defaultCamera = {\n centerCoordinate: [12.338, 45.4385],\n zoomLevel: 17.4,\n};\n\nconst featureCollection: GeoJSON.FeatureCollection = {\n type: 'FeatureCollection',\n features: [\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4552',\n properties: {\n icon: 'example',\n message: 'Hello!',\n },\n geometry: {\n type: 'Point',\n coordinates: [12.338, 45.4385],\n },\n },\n ],\n};\n\ntype CustomCalloutViewProps = {\n message: string;\n};\n\nconst CustomCalloutView = ({ message }: CustomCalloutViewProps) => {\n return (\n \n {message}\n \n );\n};\n\nconst CustomCallout = () => {\n const [selectedFeature, setSelectedFeature] =\n useState>();\n\n const onPinPress = (e: { features: Array }): void => {\n if (selectedFeature) {\n setSelectedFeature(undefined);\n return;\n }\n\n const feature = e?.features[0] as Feature;\n setSelectedFeature(feature);\n };\n\n return (\n \n \n \n \n \n \n {selectedFeature && (\n \n \n \n )}\n \n );\n};\n\nconst styles: {\n matchParent: StyleProp;\n mapPinLayer: SymbolLayerStyle;\n customCalloutText: StyleProp;\n calloutContainerStyle: StyleProp;\n} = {\n matchParent: {\n flex: 1,\n },\n mapPinLayer: {\n iconAllowOverlap: true,\n iconAnchor: 'bottom',\n iconSize: 1.0,\n iconImage: 'exampleIcon',\n },\n customCalloutText: {\n color: 'black',\n fontSize: 16,\n },\n calloutContainerStyle: {\n backgroundColor: 'white',\n width: 60,\n height: 40,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n};\n\nexport default CustomCallout;\n\n\n"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"CustomCallout.png",src:n(8993).Z+"",width:"295",height:"640"}),"}"]})]})}function c(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},8993:(e,t,n)=>{n.d(t,{Z:()=>o});const o=n.p+"assets/images/CustomCallout-59966c8db5822c4b59ecc9ae4b67d8cd.png"},1151:(e,t,n)=>{n.d(t,{a:()=>r});var o=n(7294);const a={},s=o.createContext(a);function r(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmap_docs=self.webpackChunkmap_docs||[]).push([[690],{2078:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>r,default:()=>c,frontMatter:()=>s,metadata:()=>l,toc:()=>m});var o=n(5893),a=n(1151);const s={title:"Custom Callout",tags:["MarkerView"],custom_props:{example_rel_path:"Annotations/CustomCallout.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/CustomCallout.tsx"},r=void 0,l={id:"examples/Annotations/CustomCallout",title:"Custom Callout",description:"Use MarkerView to create a custom callout.",source:"@site/docs/examples/Annotations/CustomCallout.md",sourceDirName:"examples/Annotations",slug:"/examples/Annotations/CustomCallout",permalink:"/docs/examples/Annotations/CustomCallout",draft:!1,unlisted:!1,editUrl:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/CustomCallout.tsx",tags:[{inline:!0,label:"MarkerView",permalink:"/docs/tags/marker-view"}],version:"current",frontMatter:{title:"Custom Callout",tags:["MarkerView"],custom_props:{example_rel_path:"Annotations/CustomCallout.tsx"},custom_edit_url:"https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/CustomCallout.tsx"},sidebar:"examplesSidebar",previous:{title:"Introduction",permalink:"/docs/examples/"},next:{title:"Heatmap",permalink:"/docs/examples/Annotations/Heatmap"}},i={},m=[];function u(e){const t={code:"code",img:"img",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Use MarkerView to create a custom callout."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"import Mapbox, { type SymbolLayerStyle } from '@rnmapbox/maps';\nimport { Feature } from '@turf/helpers';\nimport React, { useState } from 'react';\nimport { StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';\n\nimport exampleIcon from '../../assets/pin.png';\nimport sheet from '../../styles/sheet';\nimport { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc\n\nconst defaultCamera = {\n centerCoordinate: [12.338, 45.4385],\n zoomLevel: 17.4,\n};\n\nconst featureCollection: GeoJSON.FeatureCollection = {\n type: 'FeatureCollection',\n features: [\n {\n type: 'Feature',\n id: '9d10456e-bdda-4aa9-9269-04c1667d4552',\n properties: {\n icon: 'example',\n message: 'Hello!',\n },\n geometry: {\n type: 'Point',\n coordinates: [12.338, 45.4385],\n },\n },\n ],\n};\n\ntype CustomCalloutViewProps = {\n message: string;\n};\n\nconst CustomCalloutView = ({ message }: CustomCalloutViewProps) => {\n return (\n \n {message}\n \n );\n};\n\nconst CustomCallout = () => {\n const [selectedFeature, setSelectedFeature] =\n useState>();\n\n const onPinPress = (e: { features: Array }): void => {\n if (selectedFeature) {\n setSelectedFeature(undefined);\n return;\n }\n\n const feature = e?.features[0] as Feature;\n setSelectedFeature(feature);\n };\n\n return (\n \n \n \n \n \n \n {selectedFeature && (\n \n \n \n )}\n \n );\n};\n\nconst styles: {\n matchParent: StyleProp;\n mapPinLayer: SymbolLayerStyle;\n customCalloutText: StyleProp;\n calloutContainerStyle: StyleProp;\n} = {\n matchParent: {\n flex: 1,\n },\n mapPinLayer: {\n iconAllowOverlap: true,\n iconAnchor: 'bottom',\n iconSize: 1.0,\n iconImage: 'exampleIcon',\n },\n customCalloutText: {\n color: 'black',\n fontSize: 16,\n },\n calloutContainerStyle: {\n backgroundColor: 'white',\n width: 60,\n height: 40,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n};\n\nexport default CustomCallout;\n\n\n"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"CustomCallout.png",src:n(8993).Z+"",width:"295",height:"640"}),"}"]})]})}function c(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},8993:(e,t,n)=>{n.d(t,{Z:()=>o});const o=n.p+"assets/images/CustomCallout-0885ae5ac8b09c5cacb5b7cbbdf3ce31.png"},1151:(e,t,n)=>{n.d(t,{a:()=>r});var o=n(7294);const a={},s=o.createContext(a);function r(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.51e88eb1.js b/assets/js/runtime~main.756c79be.js similarity index 87% rename from assets/js/runtime~main.51e88eb1.js rename to assets/js/runtime~main.756c79be.js index a1219e62..b8f66ab4 100644 --- a/assets/js/runtime~main.51e88eb1.js +++ b/assets/js/runtime~main.756c79be.js @@ -1 +1 @@ -(()=>{"use strict";var e,c,a,f,d,b={},t={};function r(e){var c=t[e];if(void 0!==c)return c.exports;var a=t[e]={exports:{}};return b[e].call(a.exports,a,a.exports,r),a.exports}r.m=b,e=[],r.O=(c,a,f,d)=>{if(!a){var b=1/0;for(i=0;i=d)&&Object.keys(r.O).every((e=>r.O[e](a[o])))?a.splice(o--,1):(t=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[a,f,d]},r.n=e=>{var c=e&&e.__esModule?()=>e.default:()=>e;return r.d(c,{a:c}),c},a=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var b={};c=c||[null,a({}),a([]),a(a)];for(var t=2&f&&e;"object"==typeof t&&!~c.indexOf(t);t=a(t))Object.getOwnPropertyNames(t).forEach((c=>b[c]=()=>e[c]));return b.default=()=>e,r.d(d,b),d},r.d=(e,c)=>{for(var a in c)r.o(c,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:c[a]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((c,a)=>(r.f[a](e,c),c)),[])),r.u=e=>"assets/js/"+({35:"46e07f22",68:"86a9e106",100:"3a4d34a4",169:"1c473699",197:"452ca03d",204:"e47e0d66",316:"5ba21c60",422:"989f8913",478:"d4b91e16",646:"e5aefb32",669:"291eecb5",690:"fad28139",700:"5c554389",795:"c579c9d5",814:"46a34776",822:"5cbdb68b",827:"80672435",890:"4f423213",906:"5942b011",948:"8717b14a",955:"d979248c",956:"8d690f83",961:"46a10cb0",973:"f5cb1005",993:"b56693a5",995:"f4aed320",1003:"163132fa",1004:"c141421f",1159:"77883ee0",1181:"0f33b5a0",1184:"b0231ac1",1218:"6b2d7eab",1282:"5f7bbd13",1326:"f578f36f",1476:"a33d13d7",1496:"fef1c6ce",1532:"774fa26e",1537:"a77c5620",1605:"04ea8698",1775:"3c27faaf",1914:"d9f32620",2001:"38379c4e",2162:"cb7ffda8",2175:"ef4ba5ad",2267:"59362658",2272:"5ee29e23",2298:"d8902fcc",2349:"a1ed6f1c",2362:"e273c56f",2380:"8dac1041",2432:"6d5a3e93",2503:"d42da95e",2520:"51768be3",2535:"814f3328",2594:"7cca1b9d",2613:"330dc111",2619:"46a9a46c",2736:"5775363c",2768:"288e25b0",2795:"cef5cc3c",2823:"c9588a75",2852:"3364bf3a",2893:"8420653b",2897:"c5d94311",2914:"966495f6",2931:"03a30274",3015:"6e967b28",3027:"3229c66e",3085:"1f391b9e",3089:"a6aa9e1f",3095:"31cfe636",3250:"0e384b89",3292:"5b3ec575",3316:"4ce86281",3336:"427de7f9",3402:"a76282a6",3424:"ddffc12b",3427:"eac6da66",3507:"3f3f3e04",3514:"73664a40",3535:"96c2f7d6",3608:"9e4087bc",3629:"aba21aa0",3651:"01729fb2",3668:"4df25f71",3676:"6d0d9e3a",3710:"38535e97",3723:"c115105f",3751:"3720c009",3763:"17993280",3943:"547cb5d0",3954:"898514b1",3963:"12b6bc25",4013:"01a85c17",4031:"f81c1134",4038:"f3399ff4",4055:"9b93ab06",4060:"daaaf687",4061:"815f8246",4082:"8b117445",4088:"0058b4c6",4128:"a343d9b7",4131:"b7edfec4",4171:"464677f0",4195:"c4f5d8e4",4200:"93db065f",4220:"8c4a08c1",4232:"1c14c0d8",4290:"862952af",4331:"7b816787",4363:"ec7aad68",4368:"a94703ab",4449:"09e16a24",4481:"2994c633",4530:"4285872d",4578:"dcbd927b",4666:"11e9027a",4672:"bde0464f",4681:"1e806f68",4692:"738b06b1",4847:"04f93229",4850:"659f2bcf",4852:"c031a935",4878:"c04ce839",4885:"4f8af149",4893:"69fe9340",5011:"8cbdf981",5182:"8ac80767",5244:"5c15c9b7",5254:"e346864f",5265:"3217192f",5276:"bb3642ad",5280:"c6a4560a",5302:"b1f4e2a5",5352:"41ab0200",5356:"6ab2e55f",5364:"00f847ac",5392:"d6a1e0e9",5413:"906ea606",5484:"86ec3cfb",5490:"b4fc381c",5543:"cf215d16",5650:"5d2acf3c",5662:"f0b67563",5684:"7a3342d3",5809:"9b18272e",5818:"c6dfe076",5869:"ce49394d",5980:"a7456010",6023:"9c50fbe7",6038:"4f2c9e02",6103:"ccc49370",6105:"780afde6",6152:"f027a196",6156:"fa93c8bd",6200:"81e7cf41",6205:"b95799e0",6216:"3e686edc",6229:"f5c99320",6390:"b311c601",6427:"8d3d6164",6433:"4c314a12",6470:"34e9dd98",6633:"69ade99f",6642:"c15d9823",6677:"87052ec2",6698:"efc0eea7",6826:"13369b41",6832:"07badaf3",6939:"3b1950e6",6978:"d152cda6",7133:"e4a7c5ab",7156:"b6df69e7",7327:"8b1f332b",7375:"c18a971d",7393:"acecf23e",7398:"7c8bb838",7414:"393be207",7450:"6e5ef60f",7536:"6339ac36",7662:"ba18253d",7698:"95259ea0",7774:"496ac0ab",7779:"b6300ee2",7786:"31c1c968",7886:"e2508be1",7891:"38286337",7918:"17896441",7920:"1a4e3797",7924:"85e5b3f1",7927:"67501116",7943:"c4de80f8",7998:"25550387",8028:"22edd90a",8068:"84421286",8254:"f7bfd607",8263:"53223ecf",8273:"5a16d0cc",8348:"bb16fc39",8380:"e2c4e012",8398:"c6a0e813",8470:"66cd880a",8508:"87e99b5e",8518:"a7bd4aaa",8521:"e32388c0",8551:"58bb7da0",8554:"5e90a9b3",8610:"6875c492",8626:"f82cd581",8628:"4199ce38",8636:"f4f34a3a",8765:"dfd0626d",8770:"18b78d02",8833:"19a83d05",8882:"cd23a23e",8914:"a307de4a",9003:"925b3f96",9107:"6d1ce1ea",9208:"36994c47",9257:"4188a2b0",9320:"245ce2cf",9361:"3a2db09e",9367:"9c155e26",9469:"b94991c3",9642:"7661071f",9658:"8f5e5656",9661:"5e95c892",9781:"92ce638f",9852:"63747f2c",9868:"3f966df8",9892:"ef09af6b",9898:"9f37591a",9924:"df203c0f",9960:"64d316a4"}[e]||e)+"."+{35:"43bff63e",68:"445c2c92",100:"4ec9a8cb",169:"b53c6075",197:"253ffae0",204:"f384e2e5",316:"55d9f02e",422:"e8149d4a",478:"9101f218",646:"ef8eed1a",669:"79fd8d24",690:"1469282d",700:"39734948",795:"5ecbe18b",814:"32ecb163",822:"71f9accc",827:"f6b1adb5",890:"db57dd5b",906:"91c0c845",948:"8e436efa",955:"6a18b803",956:"5deda499",961:"f86199b1",973:"56cd2d34",993:"e07f5cdc",995:"cf204cef",1003:"99ae7276",1004:"777c33c8",1159:"7bd59f76",1181:"5c53748e",1184:"f06eb791",1218:"8d74cd11",1282:"95fd0c20",1326:"c9c7315d",1426:"704928ad",1476:"010f8847",1496:"6e65c791",1532:"60322868",1537:"381459ba",1605:"fc6a1610",1772:"7fb5deef",1775:"2a1e5cf6",1914:"eb958a60",2001:"781a3114",2162:"f8d667ad",2175:"9f03f7bd",2267:"72480c00",2272:"c24fc136",2298:"ff83f988",2349:"2642f5cb",2362:"d842ea52",2380:"b6d9a594",2432:"b712effb",2503:"10eb2ec1",2520:"9f3ed184",2535:"76666e0c",2594:"8d0f299c",2613:"34a4696f",2619:"2b43f790",2736:"056e3cf5",2768:"2f01b3ee",2795:"d3b7032d",2823:"b2656dc6",2852:"7afa93aa",2893:"2d406dba",2897:"0a433a0c",2914:"8ed3b0db",2931:"30a314e7",3015:"f5791b1e",3027:"f8881c0c",3085:"18e977c9",3089:"af7cc727",3095:"abf2d38b",3250:"be88762e",3292:"8e026ae2",3316:"9c5629b5",3336:"43f0b582",3402:"442d85ce",3424:"4e5d9bcf",3427:"daac5de6",3507:"aa68bffa",3514:"8eae44f3",3535:"70feb36c",3608:"33ed8f0e",3629:"a6dfebcf",3651:"fbdca51b",3668:"019eeadf",3676:"1d338d6a",3710:"5eaa99dd",3723:"f2367100",3751:"16e24e14",3763:"f40535ab",3943:"b917b2ae",3954:"3e8cf9e8",3963:"c1978a5c",4013:"81758779",4031:"1a3e5295",4038:"cc6a82fc",4055:"57505bbf",4060:"a51b2e6b",4061:"2f608c3e",4082:"45522924",4088:"4281ae9b",4128:"27765b0b",4131:"8e338ac9",4171:"58cd87be",4195:"63b58109",4200:"2740f49d",4220:"7a264482",4232:"28a12665",4290:"da26127e",4331:"de4f57b1",4363:"a06c3087",4368:"3a6bae8a",4449:"82dd259b",4481:"9830eaff",4530:"2ca656ca",4578:"e7796dbc",4666:"067cf3d6",4672:"68500a8b",4681:"31fe181c",4692:"e68a718f",4847:"e51207f3",4850:"04ca1324",4852:"f569bc55",4878:"55ea762e",4885:"897018c3",4893:"3ed00f27",5011:"bb71c8ba",5182:"2bf4e3ce",5244:"fc2aaf46",5254:"eb0f982f",5265:"f83aecd2",5276:"58971696",5280:"7b328fb4",5302:"96e625b2",5352:"97e73bf4",5356:"1d70f9b7",5364:"85f5d7c1",5392:"cf782aea",5413:"f5424218",5484:"3c848e8d",5490:"ee31fd4d",5543:"63d161f2",5650:"04bf0ffe",5662:"44c76985",5684:"3e6e42f9",5809:"2af73984",5818:"94797225",5869:"3a56e85c",5980:"5fa17229",6023:"b216ec8e",6038:"7550e73e",6103:"031188f7",6105:"30a667f9",6152:"77ccf203",6156:"3ffee4f4",6200:"1f01f814",6205:"4eb2a80b",6216:"6209abbe",6229:"d335c83e",6390:"0c78607b",6427:"12af3365",6433:"b8909b9e",6470:"4e2c7510",6633:"7f9c9d07",6642:"510a5101",6677:"e1df89c0",6698:"58e05fd7",6826:"bc712b17",6832:"638eded3",6939:"5bf13ced",6945:"b11d0f48",6978:"cee1c223",7133:"78202a7b",7156:"89dbc8d5",7327:"1956bee7",7375:"05101504",7393:"f13d9bf9",7398:"76792324",7414:"fb0a7bfd",7450:"d8d35c1b",7534:"c7abb920",7536:"5680277f",7662:"820c44f4",7698:"00f31e65",7774:"2ef8d523",7779:"421df376",7786:"7f634b7e",7886:"a7228fbd",7891:"a934140e",7918:"0e9f1d01",7920:"bc15e035",7924:"26763780",7927:"c95cbbe1",7943:"666964f6",7998:"84068bad",8028:"53a1a56c",8068:"53e27537",8254:"94be251e",8263:"d4dbe061",8273:"7fca1a35",8348:"8aca1a9e",8380:"24b7bd33",8398:"738e506b",8470:"88387022",8508:"bd13ffb6",8518:"619c3e0e",8521:"70e6748d",8551:"e3a8595a",8554:"89e32186",8610:"970c8203",8626:"756eb391",8628:"5e411302",8636:"d303a54f",8765:"5be36087",8770:"14535420",8833:"cf4f80d9",8882:"b593de7f",8894:"f9c3f983",8914:"683f5056",9003:"59109393",9107:"6ad9fd5b",9208:"64e529a3",9257:"4fed9540",9320:"e4f1fd7d",9361:"f35232c7",9367:"c65bb11a",9469:"bcb4e0b8",9642:"5438d496",9658:"d5e54b5b",9661:"8dbfd1cb",9781:"3c58a501",9850:"5db75e30",9852:"1b44be4e",9868:"bec6c150",9892:"de53cd14",9898:"2f75c0de",9924:"90c9d38a",9960:"8a8b87f8"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,c)=>Object.prototype.hasOwnProperty.call(e,c),f={},d="map-docs:",r.l=(e,c,a,b)=>{if(f[e])f[e].push(c);else{var t,o;if(void 0!==a)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var d=f[e];if(delete f[e],t.parentNode&&t.parentNode.removeChild(t),d&&d.forEach((e=>e(a))),c)return c(a)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"7918",17993280:"3763",25550387:"7998",38286337:"7891",59362658:"2267",67501116:"7927",80672435:"827",84421286:"8068","46e07f22":"35","86a9e106":"68","3a4d34a4":"100","1c473699":"169","452ca03d":"197",e47e0d66:"204","5ba21c60":"316","989f8913":"422",d4b91e16:"478",e5aefb32:"646","291eecb5":"669",fad28139:"690","5c554389":"700",c579c9d5:"795","46a34776":"814","5cbdb68b":"822","4f423213":"890","5942b011":"906","8717b14a":"948",d979248c:"955","8d690f83":"956","46a10cb0":"961",f5cb1005:"973",b56693a5:"993",f4aed320:"995","163132fa":"1003",c141421f:"1004","77883ee0":"1159","0f33b5a0":"1181",b0231ac1:"1184","6b2d7eab":"1218","5f7bbd13":"1282",f578f36f:"1326",a33d13d7:"1476",fef1c6ce:"1496","774fa26e":"1532",a77c5620:"1537","04ea8698":"1605","3c27faaf":"1775",d9f32620:"1914","38379c4e":"2001",cb7ffda8:"2162",ef4ba5ad:"2175","5ee29e23":"2272",d8902fcc:"2298",a1ed6f1c:"2349",e273c56f:"2362","8dac1041":"2380","6d5a3e93":"2432",d42da95e:"2503","51768be3":"2520","814f3328":"2535","7cca1b9d":"2594","330dc111":"2613","46a9a46c":"2619","5775363c":"2736","288e25b0":"2768",cef5cc3c:"2795",c9588a75:"2823","3364bf3a":"2852","8420653b":"2893",c5d94311:"2897","966495f6":"2914","03a30274":"2931","6e967b28":"3015","3229c66e":"3027","1f391b9e":"3085",a6aa9e1f:"3089","31cfe636":"3095","0e384b89":"3250","5b3ec575":"3292","4ce86281":"3316","427de7f9":"3336",a76282a6:"3402",ddffc12b:"3424",eac6da66:"3427","3f3f3e04":"3507","73664a40":"3514","96c2f7d6":"3535","9e4087bc":"3608",aba21aa0:"3629","01729fb2":"3651","4df25f71":"3668","6d0d9e3a":"3676","38535e97":"3710",c115105f:"3723","3720c009":"3751","547cb5d0":"3943","898514b1":"3954","12b6bc25":"3963","01a85c17":"4013",f81c1134:"4031",f3399ff4:"4038","9b93ab06":"4055",daaaf687:"4060","815f8246":"4061","8b117445":"4082","0058b4c6":"4088",a343d9b7:"4128",b7edfec4:"4131","464677f0":"4171",c4f5d8e4:"4195","93db065f":"4200","8c4a08c1":"4220","1c14c0d8":"4232","862952af":"4290","7b816787":"4331",ec7aad68:"4363",a94703ab:"4368","09e16a24":"4449","2994c633":"4481","4285872d":"4530",dcbd927b:"4578","11e9027a":"4666",bde0464f:"4672","1e806f68":"4681","738b06b1":"4692","04f93229":"4847","659f2bcf":"4850",c031a935:"4852",c04ce839:"4878","4f8af149":"4885","69fe9340":"4893","8cbdf981":"5011","8ac80767":"5182","5c15c9b7":"5244",e346864f:"5254","3217192f":"5265",bb3642ad:"5276",c6a4560a:"5280",b1f4e2a5:"5302","41ab0200":"5352","6ab2e55f":"5356","00f847ac":"5364",d6a1e0e9:"5392","906ea606":"5413","86ec3cfb":"5484",b4fc381c:"5490",cf215d16:"5543","5d2acf3c":"5650",f0b67563:"5662","7a3342d3":"5684","9b18272e":"5809",c6dfe076:"5818",ce49394d:"5869",a7456010:"5980","9c50fbe7":"6023","4f2c9e02":"6038",ccc49370:"6103","780afde6":"6105",f027a196:"6152",fa93c8bd:"6156","81e7cf41":"6200",b95799e0:"6205","3e686edc":"6216",f5c99320:"6229",b311c601:"6390","8d3d6164":"6427","4c314a12":"6433","34e9dd98":"6470","69ade99f":"6633",c15d9823:"6642","87052ec2":"6677",efc0eea7:"6698","13369b41":"6826","07badaf3":"6832","3b1950e6":"6939",d152cda6:"6978",e4a7c5ab:"7133",b6df69e7:"7156","8b1f332b":"7327",c18a971d:"7375",acecf23e:"7393","7c8bb838":"7398","393be207":"7414","6e5ef60f":"7450","6339ac36":"7536",ba18253d:"7662","95259ea0":"7698","496ac0ab":"7774",b6300ee2:"7779","31c1c968":"7786",e2508be1:"7886","1a4e3797":"7920","85e5b3f1":"7924",c4de80f8:"7943","22edd90a":"8028",f7bfd607:"8254","53223ecf":"8263","5a16d0cc":"8273",bb16fc39:"8348",e2c4e012:"8380",c6a0e813:"8398","66cd880a":"8470","87e99b5e":"8508",a7bd4aaa:"8518",e32388c0:"8521","58bb7da0":"8551","5e90a9b3":"8554","6875c492":"8610",f82cd581:"8626","4199ce38":"8628",f4f34a3a:"8636",dfd0626d:"8765","18b78d02":"8770","19a83d05":"8833",cd23a23e:"8882",a307de4a:"8914","925b3f96":"9003","6d1ce1ea":"9107","36994c47":"9208","4188a2b0":"9257","245ce2cf":"9320","3a2db09e":"9361","9c155e26":"9367",b94991c3:"9469","7661071f":"9642","8f5e5656":"9658","5e95c892":"9661","92ce638f":"9781","63747f2c":"9852","3f966df8":"9868",ef09af6b:"9892","9f37591a":"9898",df203c0f:"9924","64d316a4":"9960"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(c,a)=>{var f=r.o(e,c)?e[c]:void 0;if(0!==f)if(f)a.push(f[2]);else if(/^(1303|532)$/.test(c))e[c]=0;else{var d=new Promise(((a,d)=>f=e[c]=[a,d]));a.push(f[2]=d);var b=r.p+r.u(c),t=new Error;r.l(b,(a=>{if(r.o(e,c)&&(0!==(f=e[c])&&(e[c]=void 0),f)){var d=a&&("load"===a.type?"missing":a.type),b=a&&a.target&&a.target.src;t.message="Loading chunk "+c+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,f[1](t)}}),"chunk-"+c,c)}},r.O.j=c=>0===e[c];var c=(c,a)=>{var f,d,b=a[0],t=a[1],o=a[2],n=0;if(b.some((c=>0!==e[c]))){for(f in t)r.o(t,f)&&(r.m[f]=t[f]);if(o)var i=o(r)}for(c&&c(a);n{"use strict";var e,c,a,f,d,b={},t={};function r(e){var c=t[e];if(void 0!==c)return c.exports;var a=t[e]={exports:{}};return b[e].call(a.exports,a,a.exports,r),a.exports}r.m=b,e=[],r.O=(c,a,f,d)=>{if(!a){var b=1/0;for(i=0;i=d)&&Object.keys(r.O).every((e=>r.O[e](a[o])))?a.splice(o--,1):(t=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[a,f,d]},r.n=e=>{var c=e&&e.__esModule?()=>e.default:()=>e;return r.d(c,{a:c}),c},a=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var b={};c=c||[null,a({}),a([]),a(a)];for(var t=2&f&&e;"object"==typeof t&&!~c.indexOf(t);t=a(t))Object.getOwnPropertyNames(t).forEach((c=>b[c]=()=>e[c]));return b.default=()=>e,r.d(d,b),d},r.d=(e,c)=>{for(var a in c)r.o(c,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:c[a]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((c,a)=>(r.f[a](e,c),c)),[])),r.u=e=>"assets/js/"+({35:"46e07f22",68:"86a9e106",100:"3a4d34a4",169:"1c473699",197:"452ca03d",204:"e47e0d66",316:"5ba21c60",422:"989f8913",478:"d4b91e16",646:"e5aefb32",669:"291eecb5",690:"fad28139",700:"5c554389",795:"c579c9d5",814:"46a34776",822:"5cbdb68b",827:"80672435",890:"4f423213",906:"5942b011",948:"8717b14a",955:"d979248c",956:"8d690f83",961:"46a10cb0",973:"f5cb1005",993:"b56693a5",995:"f4aed320",1003:"163132fa",1004:"c141421f",1159:"77883ee0",1181:"0f33b5a0",1184:"b0231ac1",1218:"6b2d7eab",1282:"5f7bbd13",1326:"f578f36f",1476:"a33d13d7",1496:"fef1c6ce",1532:"774fa26e",1537:"a77c5620",1605:"04ea8698",1775:"3c27faaf",1914:"d9f32620",2001:"38379c4e",2162:"cb7ffda8",2175:"ef4ba5ad",2267:"59362658",2272:"5ee29e23",2298:"d8902fcc",2349:"a1ed6f1c",2362:"e273c56f",2380:"8dac1041",2432:"6d5a3e93",2503:"d42da95e",2520:"51768be3",2535:"814f3328",2594:"7cca1b9d",2613:"330dc111",2619:"46a9a46c",2736:"5775363c",2768:"288e25b0",2795:"cef5cc3c",2823:"c9588a75",2852:"3364bf3a",2893:"8420653b",2897:"c5d94311",2914:"966495f6",2931:"03a30274",3015:"6e967b28",3027:"3229c66e",3085:"1f391b9e",3089:"a6aa9e1f",3095:"31cfe636",3250:"0e384b89",3292:"5b3ec575",3316:"4ce86281",3336:"427de7f9",3402:"a76282a6",3424:"ddffc12b",3427:"eac6da66",3507:"3f3f3e04",3514:"73664a40",3535:"96c2f7d6",3608:"9e4087bc",3629:"aba21aa0",3651:"01729fb2",3668:"4df25f71",3676:"6d0d9e3a",3710:"38535e97",3723:"c115105f",3751:"3720c009",3763:"17993280",3943:"547cb5d0",3954:"898514b1",3963:"12b6bc25",4013:"01a85c17",4031:"f81c1134",4038:"f3399ff4",4055:"9b93ab06",4060:"daaaf687",4061:"815f8246",4082:"8b117445",4088:"0058b4c6",4128:"a343d9b7",4131:"b7edfec4",4171:"464677f0",4195:"c4f5d8e4",4200:"93db065f",4220:"8c4a08c1",4232:"1c14c0d8",4290:"862952af",4331:"7b816787",4363:"ec7aad68",4368:"a94703ab",4449:"09e16a24",4481:"2994c633",4530:"4285872d",4578:"dcbd927b",4666:"11e9027a",4672:"bde0464f",4681:"1e806f68",4692:"738b06b1",4847:"04f93229",4850:"659f2bcf",4852:"c031a935",4878:"c04ce839",4885:"4f8af149",4893:"69fe9340",5011:"8cbdf981",5182:"8ac80767",5244:"5c15c9b7",5254:"e346864f",5265:"3217192f",5276:"bb3642ad",5280:"c6a4560a",5302:"b1f4e2a5",5352:"41ab0200",5356:"6ab2e55f",5364:"00f847ac",5392:"d6a1e0e9",5413:"906ea606",5484:"86ec3cfb",5490:"b4fc381c",5543:"cf215d16",5650:"5d2acf3c",5662:"f0b67563",5684:"7a3342d3",5809:"9b18272e",5818:"c6dfe076",5869:"ce49394d",5980:"a7456010",6023:"9c50fbe7",6038:"4f2c9e02",6103:"ccc49370",6105:"780afde6",6152:"f027a196",6156:"fa93c8bd",6200:"81e7cf41",6205:"b95799e0",6216:"3e686edc",6229:"f5c99320",6390:"b311c601",6427:"8d3d6164",6433:"4c314a12",6470:"34e9dd98",6633:"69ade99f",6642:"c15d9823",6677:"87052ec2",6698:"efc0eea7",6826:"13369b41",6832:"07badaf3",6939:"3b1950e6",6978:"d152cda6",7133:"e4a7c5ab",7156:"b6df69e7",7327:"8b1f332b",7375:"c18a971d",7393:"acecf23e",7398:"7c8bb838",7414:"393be207",7450:"6e5ef60f",7536:"6339ac36",7662:"ba18253d",7698:"95259ea0",7774:"496ac0ab",7779:"b6300ee2",7786:"31c1c968",7886:"e2508be1",7891:"38286337",7918:"17896441",7920:"1a4e3797",7924:"85e5b3f1",7927:"67501116",7943:"c4de80f8",7998:"25550387",8028:"22edd90a",8068:"84421286",8254:"f7bfd607",8263:"53223ecf",8273:"5a16d0cc",8348:"bb16fc39",8380:"e2c4e012",8398:"c6a0e813",8470:"66cd880a",8508:"87e99b5e",8518:"a7bd4aaa",8521:"e32388c0",8551:"58bb7da0",8554:"5e90a9b3",8610:"6875c492",8626:"f82cd581",8628:"4199ce38",8636:"f4f34a3a",8765:"dfd0626d",8770:"18b78d02",8833:"19a83d05",8882:"cd23a23e",8914:"a307de4a",9003:"925b3f96",9107:"6d1ce1ea",9208:"36994c47",9257:"4188a2b0",9320:"245ce2cf",9361:"3a2db09e",9367:"9c155e26",9469:"b94991c3",9642:"7661071f",9658:"8f5e5656",9661:"5e95c892",9781:"92ce638f",9852:"63747f2c",9868:"3f966df8",9892:"ef09af6b",9898:"9f37591a",9924:"df203c0f",9960:"64d316a4"}[e]||e)+"."+{35:"43bff63e",68:"a909b5f2",100:"8cc83b23",169:"f0aacafb",197:"253ffae0",204:"f384e2e5",316:"55d9f02e",422:"e8149d4a",478:"9101f218",646:"ef8eed1a",669:"79fd8d24",690:"f80e5181",700:"39734948",795:"5ecbe18b",814:"32ecb163",822:"71f9accc",827:"f6b1adb5",890:"db57dd5b",906:"ce19a2bc",948:"8e436efa",955:"6a18b803",956:"5deda499",961:"f86199b1",973:"56cd2d34",993:"e07f5cdc",995:"cf204cef",1003:"bdc2d44a",1004:"777c33c8",1159:"7bd59f76",1181:"5c53748e",1184:"f06eb791",1218:"8d74cd11",1282:"95fd0c20",1326:"c9c7315d",1426:"704928ad",1476:"010f8847",1496:"6e65c791",1532:"60322868",1537:"381459ba",1605:"cffb2359",1772:"7fb5deef",1775:"2a1e5cf6",1914:"eb958a60",2001:"781a3114",2162:"f8d667ad",2175:"f8d7fae7",2267:"72480c00",2272:"c24fc136",2298:"ff83f988",2349:"2642f5cb",2362:"d842ea52",2380:"b6d9a594",2432:"b712effb",2503:"360e9424",2520:"9fd6d12d",2535:"76666e0c",2594:"8d0f299c",2613:"34a4696f",2619:"2b43f790",2736:"056e3cf5",2768:"2f01b3ee",2795:"d3b7032d",2823:"b2656dc6",2852:"64099094",2893:"2d406dba",2897:"0a433a0c",2914:"8ed3b0db",2931:"30a314e7",3015:"f5791b1e",3027:"f8881c0c",3085:"18e977c9",3089:"af7cc727",3095:"abf2d38b",3250:"be88762e",3292:"8e026ae2",3316:"625a3c1a",3336:"43f0b582",3402:"6e0949a9",3424:"4e5d9bcf",3427:"daac5de6",3507:"aa68bffa",3514:"8eae44f3",3535:"70feb36c",3608:"33ed8f0e",3629:"a6dfebcf",3651:"fbdca51b",3668:"019eeadf",3676:"0a7e2b48",3710:"5eaa99dd",3723:"86f74f56",3751:"16e24e14",3763:"f40535ab",3943:"6871043d",3954:"3e8cf9e8",3963:"c1978a5c",4013:"81758779",4031:"1a3e5295",4038:"cc6a82fc",4055:"57505bbf",4060:"a51b2e6b",4061:"2f608c3e",4082:"ef0a85ea",4088:"4281ae9b",4128:"8600a11b",4131:"8e338ac9",4171:"58cd87be",4195:"63b58109",4200:"2740f49d",4220:"7a264482",4232:"28a12665",4290:"bc063b11",4331:"de4f57b1",4363:"a06c3087",4368:"3a6bae8a",4449:"82dd259b",4481:"9830eaff",4530:"2ca656ca",4578:"e7796dbc",4666:"067cf3d6",4672:"68500a8b",4681:"31fe181c",4692:"ba92611c",4847:"e51207f3",4850:"a2a80f07",4852:"aca64430",4878:"55ea762e",4885:"f7bbc2e3",4893:"3ed00f27",5011:"bb71c8ba",5182:"2bf4e3ce",5244:"fc2aaf46",5254:"9f47a05a",5265:"f83aecd2",5276:"58971696",5280:"c00bbe49",5302:"15d81d86",5352:"97e73bf4",5356:"1d70f9b7",5364:"1c259112",5392:"cf782aea",5413:"f5424218",5484:"3c848e8d",5490:"ee31fd4d",5543:"37a38bf8",5650:"04bf0ffe",5662:"44c76985",5684:"3e6e42f9",5809:"2af73984",5818:"94797225",5869:"3a56e85c",5980:"5fa17229",6023:"b216ec8e",6038:"7550e73e",6103:"031188f7",6105:"30a667f9",6152:"77ccf203",6156:"3ffee4f4",6200:"1f01f814",6205:"4eb2a80b",6216:"a19b84c2",6229:"d335c83e",6390:"0c78607b",6427:"12af3365",6433:"b8909b9e",6470:"4e2c7510",6633:"7f9c9d07",6642:"510a5101",6677:"151dd240",6698:"fed691cd",6826:"e74dff1c",6832:"2e98becc",6939:"5bf13ced",6945:"b11d0f48",6978:"1ecff9a6",7133:"78202a7b",7156:"89dbc8d5",7327:"1956bee7",7375:"05101504",7393:"f13d9bf9",7398:"76792324",7414:"fb0a7bfd",7450:"d8d35c1b",7534:"c7abb920",7536:"52bb106f",7662:"ae9564c0",7698:"00f31e65",7774:"96e4f1ed",7779:"fa38e23d",7786:"7a0c6a5f",7886:"a7228fbd",7891:"2687f5ac",7918:"0e9f1d01",7920:"bc15e035",7924:"26763780",7927:"c95cbbe1",7943:"666964f6",7998:"84068bad",8028:"53a1a56c",8068:"9d434ec6",8254:"09631168",8263:"d4dbe061",8273:"75284179",8348:"12c0b25e",8380:"e71e6d56",8398:"738e506b",8470:"88387022",8508:"3bbbcc35",8518:"619c3e0e",8521:"70e6748d",8551:"e3a8595a",8554:"89e32186",8610:"970c8203",8626:"756eb391",8628:"5e411302",8636:"d303a54f",8765:"6573ab27",8770:"d0c2043c",8833:"cf4f80d9",8882:"b593de7f",8894:"f9c3f983",8914:"683f5056",9003:"59109393",9107:"6ad9fd5b",9208:"64e529a3",9257:"4fed9540",9320:"e4f1fd7d",9361:"f35232c7",9367:"c65bb11a",9469:"bcb4e0b8",9642:"5438d496",9658:"d5e54b5b",9661:"8dbfd1cb",9781:"3c58a501",9850:"5db75e30",9852:"1b44be4e",9868:"bec6c150",9892:"de53cd14",9898:"2f75c0de",9924:"90c9d38a",9960:"4bb51bdd"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,c)=>Object.prototype.hasOwnProperty.call(e,c),f={},d="map-docs:",r.l=(e,c,a,b)=>{if(f[e])f[e].push(c);else{var t,o;if(void 0!==a)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var d=f[e];if(delete f[e],t.parentNode&&t.parentNode.removeChild(t),d&&d.forEach((e=>e(a))),c)return c(a)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"7918",17993280:"3763",25550387:"7998",38286337:"7891",59362658:"2267",67501116:"7927",80672435:"827",84421286:"8068","46e07f22":"35","86a9e106":"68","3a4d34a4":"100","1c473699":"169","452ca03d":"197",e47e0d66:"204","5ba21c60":"316","989f8913":"422",d4b91e16:"478",e5aefb32:"646","291eecb5":"669",fad28139:"690","5c554389":"700",c579c9d5:"795","46a34776":"814","5cbdb68b":"822","4f423213":"890","5942b011":"906","8717b14a":"948",d979248c:"955","8d690f83":"956","46a10cb0":"961",f5cb1005:"973",b56693a5:"993",f4aed320:"995","163132fa":"1003",c141421f:"1004","77883ee0":"1159","0f33b5a0":"1181",b0231ac1:"1184","6b2d7eab":"1218","5f7bbd13":"1282",f578f36f:"1326",a33d13d7:"1476",fef1c6ce:"1496","774fa26e":"1532",a77c5620:"1537","04ea8698":"1605","3c27faaf":"1775",d9f32620:"1914","38379c4e":"2001",cb7ffda8:"2162",ef4ba5ad:"2175","5ee29e23":"2272",d8902fcc:"2298",a1ed6f1c:"2349",e273c56f:"2362","8dac1041":"2380","6d5a3e93":"2432",d42da95e:"2503","51768be3":"2520","814f3328":"2535","7cca1b9d":"2594","330dc111":"2613","46a9a46c":"2619","5775363c":"2736","288e25b0":"2768",cef5cc3c:"2795",c9588a75:"2823","3364bf3a":"2852","8420653b":"2893",c5d94311:"2897","966495f6":"2914","03a30274":"2931","6e967b28":"3015","3229c66e":"3027","1f391b9e":"3085",a6aa9e1f:"3089","31cfe636":"3095","0e384b89":"3250","5b3ec575":"3292","4ce86281":"3316","427de7f9":"3336",a76282a6:"3402",ddffc12b:"3424",eac6da66:"3427","3f3f3e04":"3507","73664a40":"3514","96c2f7d6":"3535","9e4087bc":"3608",aba21aa0:"3629","01729fb2":"3651","4df25f71":"3668","6d0d9e3a":"3676","38535e97":"3710",c115105f:"3723","3720c009":"3751","547cb5d0":"3943","898514b1":"3954","12b6bc25":"3963","01a85c17":"4013",f81c1134:"4031",f3399ff4:"4038","9b93ab06":"4055",daaaf687:"4060","815f8246":"4061","8b117445":"4082","0058b4c6":"4088",a343d9b7:"4128",b7edfec4:"4131","464677f0":"4171",c4f5d8e4:"4195","93db065f":"4200","8c4a08c1":"4220","1c14c0d8":"4232","862952af":"4290","7b816787":"4331",ec7aad68:"4363",a94703ab:"4368","09e16a24":"4449","2994c633":"4481","4285872d":"4530",dcbd927b:"4578","11e9027a":"4666",bde0464f:"4672","1e806f68":"4681","738b06b1":"4692","04f93229":"4847","659f2bcf":"4850",c031a935:"4852",c04ce839:"4878","4f8af149":"4885","69fe9340":"4893","8cbdf981":"5011","8ac80767":"5182","5c15c9b7":"5244",e346864f:"5254","3217192f":"5265",bb3642ad:"5276",c6a4560a:"5280",b1f4e2a5:"5302","41ab0200":"5352","6ab2e55f":"5356","00f847ac":"5364",d6a1e0e9:"5392","906ea606":"5413","86ec3cfb":"5484",b4fc381c:"5490",cf215d16:"5543","5d2acf3c":"5650",f0b67563:"5662","7a3342d3":"5684","9b18272e":"5809",c6dfe076:"5818",ce49394d:"5869",a7456010:"5980","9c50fbe7":"6023","4f2c9e02":"6038",ccc49370:"6103","780afde6":"6105",f027a196:"6152",fa93c8bd:"6156","81e7cf41":"6200",b95799e0:"6205","3e686edc":"6216",f5c99320:"6229",b311c601:"6390","8d3d6164":"6427","4c314a12":"6433","34e9dd98":"6470","69ade99f":"6633",c15d9823:"6642","87052ec2":"6677",efc0eea7:"6698","13369b41":"6826","07badaf3":"6832","3b1950e6":"6939",d152cda6:"6978",e4a7c5ab:"7133",b6df69e7:"7156","8b1f332b":"7327",c18a971d:"7375",acecf23e:"7393","7c8bb838":"7398","393be207":"7414","6e5ef60f":"7450","6339ac36":"7536",ba18253d:"7662","95259ea0":"7698","496ac0ab":"7774",b6300ee2:"7779","31c1c968":"7786",e2508be1:"7886","1a4e3797":"7920","85e5b3f1":"7924",c4de80f8:"7943","22edd90a":"8028",f7bfd607:"8254","53223ecf":"8263","5a16d0cc":"8273",bb16fc39:"8348",e2c4e012:"8380",c6a0e813:"8398","66cd880a":"8470","87e99b5e":"8508",a7bd4aaa:"8518",e32388c0:"8521","58bb7da0":"8551","5e90a9b3":"8554","6875c492":"8610",f82cd581:"8626","4199ce38":"8628",f4f34a3a:"8636",dfd0626d:"8765","18b78d02":"8770","19a83d05":"8833",cd23a23e:"8882",a307de4a:"8914","925b3f96":"9003","6d1ce1ea":"9107","36994c47":"9208","4188a2b0":"9257","245ce2cf":"9320","3a2db09e":"9361","9c155e26":"9367",b94991c3:"9469","7661071f":"9642","8f5e5656":"9658","5e95c892":"9661","92ce638f":"9781","63747f2c":"9852","3f966df8":"9868",ef09af6b:"9892","9f37591a":"9898",df203c0f:"9924","64d316a4":"9960"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(c,a)=>{var f=r.o(e,c)?e[c]:void 0;if(0!==f)if(f)a.push(f[2]);else if(/^(1303|532)$/.test(c))e[c]=0;else{var d=new Promise(((a,d)=>f=e[c]=[a,d]));a.push(f[2]=d);var b=r.p+r.u(c),t=new Error;r.l(b,(a=>{if(r.o(e,c)&&(0!==(f=e[c])&&(e[c]=void 0),f)){var d=a&&("load"===a.type?"missing":a.type),b=a&&a.target&&a.target.src;t.message="Loading chunk "+c+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,f[1](t)}}),"chunk-"+c,c)}},r.O.j=c=>0===e[c];var c=(c,a)=>{var f,d,b=a[0],t=a[1],o=a[2],n=0;if(b.some((c=>0!==e[c]))){for(f in t)r.o(t,f)&&(r.m[f]=t[f]);if(o)var i=o(r)}for(c&&c(a);n