{"_id":"@deliverysolutions/agm-overlays","name":"@deliverysolutions/agm-overlays","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@deliverysolutions/agm-overlays","version":"1.0.0","description":"Custom marker overlay for the @agm/core package","main":"dist/index","repository":{"type":"git","url":"git+https://github.com/delivery-solutions/agm-overlays.git"},"keywords":["agm","overlay","custom","markers","google","maps"],"author":{"name":"Acker Apple"},"license":"MIT","bugs":{"url":"https://github.com/delivery-solutions/agm-overlays/issues"},"homepage":"https://github.com/delivery-solutions/agm-overlays#readme","module":"fesm2015/deliverysolutions-agm-overlays.mjs","es2020":"fesm2020/deliverysolutions-agm-overlays.mjs","esm2020":"esm2020/deliverysolutions-agm-overlays.mjs","fesm2020":"fesm2020/deliverysolutions-agm-overlays.mjs","fesm2015":"fesm2015/deliverysolutions-agm-overlays.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/deliverysolutions-agm-overlays.mjs","es2020":"./fesm2020/deliverysolutions-agm-overlays.mjs","es2015":"./fesm2015/deliverysolutions-agm-overlays.mjs","node":"./fesm2015/deliverysolutions-agm-overlays.mjs","default":"./fesm2020/deliverysolutions-agm-overlays.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"_id":"@deliverysolutions/agm-overlays@1.0.0","gitHead":"372e053b2d6bd747b8f21383d35ce2fcddaeeb3b","_nodeVersion":"18.18.2","_npmVersion":"10.2.2","dist":{"integrity":"sha512-31ptT+43CTIjRABbc6J0MV9qyxztRKlbm41xRb1HTGvwQ/u6qxfCGzfjgwGrplEfjuQm7jvRZmi29ybn+AXUYw==","shasum":"b965ddb656fb185c185fbb58d2ce4ab1c9e91a40","tarball":"https://registry.npmjs.org/@deliverysolutions/agm-overlays/-/agm-overlays-1.0.0.tgz","fileCount":14,"unpackedSize":93269,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+mTjEVlw6Z68O2UjtdeZF6xoN7+RBBbopFbgjPRSKAAIgZumAhRyGOSz7U0G6gXfMvnRO1CuMp2m1fvRqCYC6KaU="}]},"_npmUser":{"name":"ds-arb","email":"arb@deliverysolutions.co"},"directories":{},"maintainers":[{"name":"ds-arb","email":"arb@deliverysolutions.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/agm-overlays_1.0.0_1700435862790_0.7016854874945564"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-19T23:17:42.703Z","1.0.0":"2023-11-19T23:17:43.042Z","modified":"2023-11-19T23:17:43.352Z"},"maintainers":[{"name":"ds-arb","email":"arb@deliverysolutions.co"}],"description":"Custom marker overlay for the @agm/core package","homepage":"https://github.com/delivery-solutions/agm-overlays#readme","keywords":["agm","overlay","custom","markers","google","maps"],"repository":{"type":"git","url":"git+https://github.com/delivery-solutions/agm-overlays.git"},"author":{"name":"Acker Apple"},"bugs":{"url":"https://github.com/delivery-solutions/agm-overlays/issues"},"license":"MIT","readme":"# agm-overlays\nCustom marker overlay for the @agm/core package\n\n[demo page](https://ackerapple.github.io/agm-overlays/)\n\n[![hire me](https://ackerapple.github.io/resume/assets/images/hire-me-badge.svg)](https://ackerapple.github.io/resume/)\n[![npm version](https://badge.fury.io/js/agm-overlays.svg)](http://badge.fury.io/js/agm-overlays)\n[![npm downloads](https://img.shields.io/npm/dm/agm-overlays.svg)](https://npmjs.org/agm-overlays)\n[![Dependency Status](https://david-dm.org/ackerapple/agm-overlays.svg)](https://david-dm.org/ackerapple/agm-overlays)\n\n> Source Repository : [master branch here](https://github.com/AckerApple/agm-overlays/tree/master)\n\n<details>\n  <summary>Table of Contents</summary>\n\n- [Dependencies](#dependencies)\n- [Install](#install)\n- [Import](#import)\n- [Usage](#usage)\n  - [Zoom Sizing](#zoom-sizing)\n- [Clustering Demo](#clustering-demo)\n- [Resources](#resources)\n- [Credits and Collaborators](#credits-and-collaborators)\n- [Also Try](#also-try)\n\n</details>\n\n# Dependencies\n\nPlease be sure you have installed:\n- [@agm/core](https://www.npmjs.com/package/@agm/core)\n- [@angular/core](https://www.npmjs.com/package/@angular/core)\n- [@angular/platform-browser](https://www.npmjs.com/package/@angular/platform-browser)\n\n# Install\nOpen a command terminal and type the following\n```bash\nnpm install agm-overlays --save-dev\n```\n\n# Import\n```typescript\nimport { AgmOverlays } from \"agm-overlays\"\nimport { NgModule } from \"@angular/core\"\nimport { BrowserModule } from '@angular/platform-browser'\n\n@NgModule({\n  imports:[\n    BrowserModule,\n    AgmOverlays,\n    AgmCoreModule.forRoot({\n      apiKey: '...your-key-here...'\n    })\n  ]\n}) export class AppModule {}\n```\n\n# Usage\n**Multiple Custom Overlays**\n```html\n<agm-map style=\"height:300px;display:block;\">\n  <agm-overlay\n    *ngFor      = \"let item of latLngArray\"\n    [latitude]  = \"item.latitude\"\n    [longitude] = \"item.longitude\"\n  >\n    <!-- blue html square -->\n    <div style=\"width:15px;height:15px;background-color:blue;\"></div>\n  </agm-overlay>\n</agm-map>\n```\n> With multiple custom overlays, the zoom is auto set by the bounds calculated amongst all custom overlays\n\n**Single Custom Overlay**\n```html\n<agm-map\n  [zoom] = \"12\"\n  style  = \"height:300px;display:block;\"\n  [latitude]  = \"item.latitude\"\n  [longitude] = \"item.longitude\"\n>\n  <agm-overlay\n    [latitude]  = \"item.latitude\"\n    [longitude] = \"item.longitude\"\n  >\n    <!-- blue html square -->\n    <div style=\"width:15px;height:15px;background-color:blue;\"></div>\n  </agm-overlay>\n</agm-map>\n```\n\n### Zoom Sizing\nBy default, markers are always the same size regardless of zoom. Change that!\n\n> The following example expands the latitude(0.003) and the longitude(0.0052) in both directions\n\n```html\n<agm-map\n  [zoom] = \"12\"\n  style  = \"height:300px;display:block;\"\n  [latitude]  = \"item.latitude\"\n  [longitude] = \"item.longitude\"\n>\n  <agm-overlay\n    [latitude]  = \"item.latitude\"\n    [longitude] = \"item.longitude\"\n    [bounds] = \"{x:{latitude:-0.003,longitude:-0.0052},y:{latitude:0.003,longitude:0.0052}}\"\n  >\n    <!-- blue html square -->\n    <div style=\"width:15px;height:15px;background-color:blue;\"></div>\n  </agm-overlay>\n</agm-map>\n```\n\n\n# Clustering Demo\nClustering is NOT a responsibility of this package, however it can be done\n\n[demo page](https://ackerapple.github.io/agm-overlays/)\nThis demo uses [@agm/js-marker-clusterer](https://www.npmjs.com/package/@agm/js-marker-clusterer) to demonstrate how to do clustering\n\n```html\n<agm-map\n  [latitude]  = \"latLngArray[0].latitude\"\n  [longitude] = \"latLngArray[1].latitude\"\n>\n  <agm-marker-cluster imagePath=\"https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m\">\n    <agm-overlay\n      *ngFor      = \"let item of latLngArray;let i=index\"\n      [latitude]  = \"item.latitude\"\n      [longitude] = \"item.longitude\"\n    >\n      <!-- blue html square -->\n      <div class=\"block\">\n        <strong style=\"color:white;\">{{i}}</strong>\n      </div>\n    </agm-overlay>\n  </agm-marker-cluster>\n</agm-map>\n```\n\n\n# Resources\n- [@agm/core](https://www.npmjs.com/package/@agm/core) installed\n\n# Credits and Collaborators\n- [Acker Apple](https://github.com/AckerApple)\n- [Todd Greenberg](https://github.com/tsgreenberg1217)\n\n# Also Try\n- [ack-angular-webcam](https://www.npmjs.com/package/ack-angular-webcam)\n- [ack-angular-fx](https://www.npmjs.com/package/ack-angular-fx)\n- [angular-file](https://www.npmjs.com/package/angular-file)\n- [ack-angular](https://www.npmjs.com/package/ack-angular)\n","readmeFilename":"README.md"}