{"_id":"@apchh/angular-azure-atlas","_rev":"3-c63b966d7e680887d5e924f5c99613c0","name":"@apchh/angular-azure-atlas","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.1":{"name":"@apchh/angular-azure-atlas","version":"0.1.1","description":"Azure Atlas Map implementation for Angular Projects","keywords":["Azure","Map","Angular","Library"],"types":"src/atlas.d.ts","peerDependencies":{"@angular/common":"^7.1.0","@angular/core":"^7.1.0"},"author":{"name":"Xavid Ramirez"},"license":"MIT","main":"bundles/apchh-angular-azure-atlas.umd.js","module":"fesm5/apchh-angular-azure-atlas.js","es2015":"fesm2015/apchh-angular-azure-atlas.js","esm5":"esm5/apchh-angular-azure-atlas.js","esm2015":"esm2015/apchh-angular-azure-atlas.js","fesm5":"fesm5/apchh-angular-azure-atlas.js","fesm2015":"fesm2015/apchh-angular-azure-atlas.js","typings":"apchh-angular-azure-atlas.d.ts","metadata":"apchh-angular-azure-atlas.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"@apchh/angular-azure-atlas@0.1.1","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"xavidram","email":"xavidram@gmail.com"},"dist":{"integrity":"sha512-BjVcdtqBpEcJyCe9loLrBSVafSzfUQGEEetr2tY81U+igs34fgLmbr/d96F+YHZdkXiuqdG2TqlFhSOjvyijNA==","shasum":"115d8531f7cd19a5ea8c6a0824459d278cd6a2c5","tarball":"https://registry.npmjs.org/@apchh/angular-azure-atlas/-/angular-azure-atlas-0.1.1.tgz","fileCount":39,"unpackedSize":232774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcKk/XCRA9TVsSAnZWagAAt6UP/iZHYmxKkxOwP6FN8z8L\nT7G9+/i+XfEbIY8hWP9p0UOndSD/ha++PNfqHWuZu1YUebnd2dMJe5pVyF8f\nj+yXw1CjMtA8frKiFO9UuixRcFp1cwjanIb1aZsbuPxyhyeDuO6u4wODAo1/\nxkBnxL1LSlkiP5jT0v9xStogrJP1V3G7cD8K2kNtTY3qu52djziItqF1NSpQ\ndzZYbpZ1oAsvbQjgQ3YQJXgMMVi94q6in8Z3MZAE5WTlH0z8hw9YQLzWRBzL\nasUbcCKvjM9UBOLB6YEHKMk84J18sfnzptJU/LDcwTTNTtocSfI3y0klhDaj\nstp9zlvQQnSjuyLgeWXcDG0yTIBlvDFgXSod2+MFjrJ3tnHiHaB05Ee5ia53\nR3tQSdbb9XiDwYQSTcA4PNFEpmNqlrnNmeVvrzD5POYN1b9utrT4BpCygjG7\nrFfMykHp4ZqpnU2sgdT6VQS5OhLJsFag6PDFSch1GyyND9Vb8mEq3opgsT/h\nbLMde5DTiqTkxSKbqagj/adb3sRFqIYC79dWwjxL8W5D4BKVoNIfv35KXycg\neIfnii3MJjcMT+ug86pw6cbI3BbYuEdCHuBH2xh7cDB+7wIV99KRuTI0v2Zb\nxVrJPXalT//dumwWhP1+7vfJd1KQBORSVBNQaDQEYe/S/k9XLuFsGIJoal6R\n9sF8\r\n=BvYY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6Re9EKiAHZiqXH/teW1Bg4NuU8ZZ3IpyEumw0hQSUyAiEAnHQMDwkId/GLYtB5tvxpj4XYtCTgr6XLWLctZnm6bl4="}]},"maintainers":[{"name":"xavidram","email":"xavidram@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-azure-atlas_0.1.1_1546276823022_0.36333598461522554"},"_hasShrinkwrap":false},"0.1.2":{"name":"@apchh/angular-azure-atlas","version":"0.1.2","description":"Azure Atlas Map implementation for Angular Projects","keywords":["Azure","Map","Angular","Library"],"types":"src/atlas.d.ts","peerDependencies":{"@angular/common":"^7.1.0","@angular/core":"^7.1.0"},"author":{"name":"Xavid Ramirez"},"license":"MIT","main":"bundles/apchh-angular-azure-atlas.umd.js","module":"fesm5/apchh-angular-azure-atlas.js","es2015":"fesm2015/apchh-angular-azure-atlas.js","esm5":"esm5/apchh-angular-azure-atlas.js","esm2015":"esm2015/apchh-angular-azure-atlas.js","fesm5":"fesm5/apchh-angular-azure-atlas.js","fesm2015":"fesm2015/apchh-angular-azure-atlas.js","typings":"apchh-angular-azure-atlas.d.ts","metadata":"apchh-angular-azure-atlas.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"@apchh/angular-azure-atlas@0.1.2","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"xavidram","email":"xavidram@gmail.com"},"dist":{"integrity":"sha512-ZVnZUqUo/prvecwx8843gjMEl9PrqIZZR5zWGaLOxCSKATLXuzUS8LkYO9gFakYT9VIqUZvktRuFcTFQD+5BDQ==","shasum":"9dbbb295c48c16b079d8eb9fbd72387e80021c04","tarball":"https://registry.npmjs.org/@apchh/angular-azure-atlas/-/angular-azure-atlas-0.1.2.tgz","fileCount":39,"unpackedSize":207672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLMj2CRA9TVsSAnZWagAAnx8P/RJV1+RVP5NAcwTvLExo\nsHUABHM/pPiWTaHHvGP03MxRw+VZDP2GYirpQVcZ+8QOAGHRC7+oF6XPMOwE\nktifJnHPnuYJcveRe2lHaMVq7chG/EPyabiPt4qOfPbjKOqFJZhCf/OY2a2F\n5ZhwJ+a0cuGmhU8dPkYcirwwGy5hC9e3YhQbBkCkr+pnNUnHYBVsdAHdV0gr\nG9Ab20JLCGZdMzU7yBHmVnHy6+JXTTlogv3fVwxtAaIfmIGQjutfa1A83nE6\nXOTNJQoPw3ODKT95B3avHyyv38Le82OgBOnuSR01ye6R9z5keLP5hbZ3W5xx\nIs3DB1Djv/dAi+/ofI1ixLeyG7DTKspJf33fAkaWSKUThGhbbfv2CRLUsHpQ\n/BYCjzHAZOUn3kWkCV/v9X08t0tMst0BsLfbCVRbhju9P33YJ0cffIEgofvI\n7eTaYluUevUXp75UA24Qad6f9sw0U6IRytR/17wZUAZbrMhWJLoEeC0dmuS4\ndUp/18u+i6JA5hFKkCc4/Zz8afr2WviqP+8BfNfzaqHIGQtOaFKma1OPUvnX\ndHHPaXkxdZcwy7F94Y0dg4RxjLErUXDGTmFiZ2eH9b84CXwJtt695iEeUvWO\nm8vPz7tYmzPviDDiom7noqdaNkKiMW8HcVAIlWxNL0imEwG2Vrvbxs/5GVHY\n4GDu\r\n=G51S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQgw2EIJ2p6jdAOt5FaFhzUFTC8pShnw4y+66qVt2BqAIhAIvXjbm2wpzZobXcWaA9JE/AuwMaL1l/hymOReggJ6dO"}]},"maintainers":[{"name":"xavidram","email":"xavidram@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-azure-atlas_0.1.2_1546438901756_0.103434739222525"},"_hasShrinkwrap":false},"0.2.0":{"name":"@apchh/angular-azure-atlas","version":"0.2.0","description":"Azure Atlas Map implementation for Angular Projects","keywords":["Azure","Map","Angular","Library"],"types":"src/atlas.d.ts","peerDependencies":{"@angular/common":"^7.1.0","@angular/core":"^7.1.0"},"author":{"name":"Xavid Ramirez"},"license":"MIT","main":"bundles/apchh-angular-azure-atlas.umd.js","module":"fesm5/apchh-angular-azure-atlas.js","es2015":"fesm2015/apchh-angular-azure-atlas.js","esm5":"esm5/apchh-angular-azure-atlas.js","esm2015":"esm2015/apchh-angular-azure-atlas.js","fesm5":"fesm5/apchh-angular-azure-atlas.js","fesm2015":"fesm2015/apchh-angular-azure-atlas.js","typings":"apchh-angular-azure-atlas.d.ts","metadata":"apchh-angular-azure-atlas.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"@apchh/angular-azure-atlas@0.2.0","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"xavidram","email":"xavidram@gmail.com"},"dist":{"integrity":"sha512-16IapUajys5jz2T3VNsSLiN3Ory7UA1DJC5cAaV7osOtyEPhE2Sa0cjXLc3sXqMEw25GTSdFCspWwRLBNDCsQQ==","shasum":"c4b89db1578b3b7183260531dab7ba98588daa84","tarball":"https://registry.npmjs.org/@apchh/angular-azure-atlas/-/angular-azure-atlas-0.2.0.tgz","fileCount":45,"unpackedSize":230618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNPzTCRA9TVsSAnZWagAAeFIP/R8654XplgDh+Oj1BHkE\n4oam0B/zzqXnbHDzf1yU24jZHxDh0BwuP611p2mbRG8ndk58i0xmM1u3ssHX\neWtUWv6qKu+kUMImZxctcSkPiXfxlzDHIHCgStpi+VHhJ4CiGnx+tz6Gky0D\nsFQB73S18iV9w2zBueLQy3/fjPWPNdou5v9SevUNIpilYD3q9K+PBamor4iu\nuee+gynXSV7Sgmk5V7XXkS/uavT4a7JswWPdi8RZ6yv4JS/yNrYfZKnsMX5G\nFVk+nmQWIpK4yPtjkLQ8pxvHSXfY8039BC3UQbvlsOP9W40+rzryGM2rjozl\nYojid2L5w6eyOpVczzRjadRCJ7gXdzjVmjb4oSv+S8fuwrXgEHk9ev7XRtxD\nh11HAXvQpFhgtNWeoF1MEMl8M+gql/+uz1EPkJZt1esMfmqiD5SVfUROI2gY\nG7GkgkwGSHsRmQb03ZW7G/dcvzXvVrUlI/ZAgpcf7TO3NS4ECEtdTY3N1EDz\nhAh8zne6YvSFsb+5xr3yvSTnPnJu3FCySRnbRrgySd6xwPtdIG/Q9y+BgWa3\n/pYznZWoJXGthzilRpo+/HpdWrI5rDsb/oWKPXmDISRLC6X7CEqXilRXrBHu\nIMbRzywdwhdBe7rfpOaFc3a20ptgdQ1PETUuZWxFwARSWZwzyfKnbkrnntxw\noa0L\r\n=fPfO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSmwLU8EjOnxXThzHBa0owaq9cGsn10SgE6RcQPps7zAIhAMAMP5ziFVkS32yvTgI0kaljYuFA5buiQxHhZKGxva6o"}]},"maintainers":[{"name":"xavidram","email":"xavidram@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-azure-atlas_0.2.0_1546976466172_0.30583866002139093"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-31T17:20:22.846Z","0.1.1":"2018-12-31T17:20:23.209Z","modified":"2022-04-04T14:32:37.826Z","0.1.2":"2019-01-02T14:21:41.954Z","0.2.0":"2019-01-08T19:41:06.322Z"},"maintainers":[{"name":"xavidram","email":"xavidram@gmail.com"}],"description":"Azure Atlas Map implementation for Angular Projects","keywords":["Azure","Map","Angular","Library"],"author":{"name":"Xavid Ramirez"},"license":"MIT","readme":"# Angular Azure Atlas\r\n\r\nAngular 2+ wrapper for Microsoft's Azure Atlas Map\r\n\r\n### Pre-requisits\r\n`Key` - An Azure Atlas key that can be obtained from your Azure Account portal.\r\n\r\n### Installation\r\n\r\nStart by installing the repo using either NPM\r\n\r\n```sh\r\nnpm install @acphh/angular-azure-atlas --save\r\n```\r\nor YARN\r\n```sh\r\nyarn add @apchh/angular-azure-atlas\r\n```\r\n\r\n##### Add the package to the app.module.ts file\r\nAlso make sure to import the map loader service into the providers under the app.module.ts file.\r\n```sh\r\n@NgModule({\r\n    imports: [AngularAzureAtlasModule],\r\n    providers: [MapLoaderService]\r\n})\r\n```\r\n\r\n##### Add the MSDN Script/Style\r\nAdd the following two lines to the index.html file of your angular project between the <head> tag.\r\n```sh\r\n<link rel=\"stylesheet\" href=\"https://atlas.microsoft.com/sdk/css/atlas.min.css?api-version=1\" type=\"text/css\" />\r\n<script src=\"https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=1\"></script>\r\n```\r\n\r\n##### Lazy Load the Map\r\nIn the component you will want to use the map in, lazy load the map using the MapLoaderService as follows:\r\n\r\n```sh\r\nkey: string = '<Your Azure Atlas Key>'\r\n\r\nconstructor(public: mapService: LoadMapService) {}\r\n\r\nngOnInit(): void {\r\n    this.mapService.load().toPromise().then(() => {\r\n       atlas.setSubscriptionKey(this.key); \r\n    });\r\n}\r\n```\r\n\r\n##### Adding the Map to your component HTML DOM:\r\nYou will need to add both a `ViewChild` as well as the following HTML to ensure the MapLoader can find the map div.\r\nIn your Component.ts file add:\r\n```sh\r\n@ViewChild('atlas') AtlasMap: AtlasMapComponent;\r\n```\r\nIn your component HTML add:\r\n```sh\r\n<azure-atlas-map [_id]=\"'<an-id>'\" [_config]=\"config\" #atlas *ngIf=\"mapService.isLoaded\"></azure-atlas-map>\r\n```\r\n`[_id]` - The Id for this map on the DOMElements. This Id is nessesary for the module to find the map.\r\n`[_config]` - Initial Configuration for the map. You can find details of the config entries [here](https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.map?view=azure-iot-typescript-latest#map-string--serviceoptions---cameraoptions---styleoptions---userinteractionoptions-).\r\n\r\nBelow is an example of a Map Config:\r\n```sh\r\nconfig = {\r\n    zoom: 5,\r\n    center: [27, 22],\r\n    interactive: true,\r\n    style: 'road'\r\n};\r\n```\r\n\r\n##### Manipulating the Map after it is loaded:\r\nWhen the map loads, an load event is emitted which you can monitor to manipulate the Map onces it has completley loaded.\r\n```sh\r\n<azure-atlas-map (loaded)=\"mapLoaded()\"></azure-atlas-map>\r\n```\r\nIn your component file, define the function that will be called and double check the Map is defined and loaded.\r\n```sh\r\nmapLoaded() {\r\n    // Double check the map is loaded\r\n    if(this.AtlasMap && this.mapService.isLoaded) {\r\n        /// the map should be loaded at this point, so manipulate it as you would like.\r\n    } else {\r\n        // Otherwise, set a timeout and call the function again.\r\n        setTimeout(() => this.mapLoaded(), 400);\r\n    }\r\n}\r\n```\r\n\r\n### Preparing your data for the Map\r\nThe map has two classes that can be used to model your data:\r\n`MapPoint` - Used to define a Single Point on the map and its options. It consists of a Atlas Feature, which is simply an Atlas Point with all the data inside of it. A Tempalte Reference for a Popup Definition, and the layer name that this point belongs to. \r\n```sh\r\nexport class MapPoint {\r\n  point: atlas.data.Feature<atlas.data.Geometry, any>;\r\n  popup?: TemplateRef<any>;\r\n  layerName: string;\r\n}\r\n```\r\n`MapPointGroup` - Used to group points that should go together in one layer, or simply group a bunch of points in order to prevent unesseasry number of layers on the map and reduce map load. Each MapPointGroup can have their own Pin/Text options applied.\r\n```sh \r\nexport interface MapPointGroup {\r\n  points: MapPoint[];\r\n  layerOpts?: atlas.SymbolLayerOptions | atlas.BubbleLayerOptions;\r\n  sourceOpts?: atlas.DataSourceOptions;\r\n  groupName: string;\r\n}\r\n```\r\n\r\n##### Creating a single MapPoint\r\nYou can define this model as such with your own custom data:\r\n`Your data should at least have a latitude and longitude component`\r\n```sh\r\naddPoint(data: any) {\r\n    const point: MapPoint = {\r\n        point: new atlas.data.Feature(\r\n            new atlas.data.Point(\r\n                new atlas.data.Position(parseFloat(data.lon), parseFloat(data.lat))\r\n            )\r\n        ),\r\n        data, // the point data you want to save possibly to be used in a popup. \r\n        layerName:  'samplePoint'\r\n    };\r\n}\r\n```\r\n\r\n##### Grouping points\r\nThe Map point creator function takes a MapPointGroup and then processes them into pins and onto the map. If you have points that should go on different layers due to specific restrictions, you can generate multiple MapPointGroup's and assign them to their specific MapPointGroup, and then call the `createPoints` function and pass in the MapPointGroup.\r\n\r\nExample: Points should be fieltered by their branch category:\r\n```sh\r\nlet WGroup = new MapPointGroup({ points: [], groupName: 'washington'});\r\nlet TGroup = new MapPointGroup({ points: [], groupName: 'texas'});\r\ndata.forEach(point => {\r\n    if(point.branch === \"washington\") {\r\n        // Add to the Washington MapPointGroup\r\n        WGroup.points.push( <instantiate a new MaPoint> )\r\n    } else if (point.branch === \"texas\") {\r\n        // Add to the Texas MapPointGroup\r\n        TGroup.points.push( <instantiate a new MapPoint> )\r\n    }\r\n});\r\n```\r\nThen simply pass the MapPointGroup(s) to the map `creatPoints()` function and let it process them.\r\n```sh\r\nthis.AtlasMap.createPoints(WGroup);\r\nthis.AtlasMap.createPoints(TGroup);\r\n```\r\n\r\n### Todos\r\n\r\n - Implement custom cluster icon definition.\r\n - Implement a user layer legend to toggle layer views onto the map.\r\n - Fix Map resize issue to fit full container rather than direct parent.\r\n\r\nLicense\r\n----\r\nMIT","readmeFilename":"README.md"}