{"_id":"@duxor/agm-overlays","_rev":"1-cb8b1eb442283866f498da2a971c8f89","name":"@duxor/agm-overlays","dist-tags":{"latest":"18.0.0"},"versions":{"17.0.0":{"name":"@duxor/agm-overlays","version":"17.0.0","keywords":["agm","overlay","custom","markers","google","maps"],"author":{"name":"Acker Apple"},"license":"MIT","_id":"@duxor/agm-overlays@17.0.0","maintainers":[{"name":"duxor","email":"dullle@live.com"}],"homepage":"https://github.com/duxor/agm-overlays#readme","bugs":{"url":"https://github.com/duxor/agm-overlays/issues"},"dist":{"shasum":"bd20d54a0ab50bc07f32747bbfd738697ded3ab4","tarball":"https://registry.npmjs.org/@duxor/agm-overlays/-/agm-overlays-17.0.0.tgz","fileCount":12,"integrity":"sha512-jK1dXUXWYGfypvVTCyahtOXyWodss2BN5E18CzS1od8YzKTKQhqfBVzRM7K+EEZoC130IrVi1yQbFj3SQ87C5Q==","signatures":[{"sig":"MEYCIQCL9Sc71tIPU99wCByRVWMPwm46L9WhVIjF6x//YNzPngIhAKyUnn136vhxS46Bksp8ppWvsNjbToVcZS5pyqtNUx+a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66861},"main":"dist/index","module":"fesm2022/duxor-agm-overlays.mjs","exports":{".":{"esm":"./esm2022/duxor-agm-overlays.mjs","types":"./index.d.ts","default":"./fesm2022/duxor-agm-overlays.mjs","esm2022":"./esm2022/duxor-agm-overlays.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"76d6e70dd45f0ee415ef2d2344b010a568557335","typings":"index.d.ts","_npmUser":{"name":"duxor","email":"dullle@live.com"},"repository":{"url":"git+https://github.com/duxor/agm-overlays.git","type":"git"},"_npmVersion":"10.2.3","description":"Custom marker overlay for the @agm/core package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/agm-overlays_17.0.0_1710114138500_0.5534525749383685","host":"s3://npm-registry-packages"}},"18.0.0":{"name":"@duxor/agm-overlays","version":"18.0.0","description":"Custom marker overlay for the @agm/core package","main":"dist/index","repository":{"type":"git","url":"git+https://github.com/duxor/agm-overlays.git"},"keywords":["agm","overlay","custom","markers","google","maps"],"author":{"name":"Acker Apple"},"license":"MIT","bugs":{"url":"https://github.com/duxor/agm-overlays/issues"},"homepage":"https://github.com/duxor/agm-overlays#readme","module":"fesm2022/duxor-agm-overlays.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/duxor-agm-overlays.mjs","esm":"./esm2022/duxor-agm-overlays.mjs","default":"./fesm2022/duxor-agm-overlays.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"_id":"@duxor/agm-overlays@18.0.0","gitHead":"4b77fe21c7ff6a20647ebbd0d6938d36a796cb85","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-UO5Qig5RREPI1Y8zDnluz4sTWmKynAvNP0gGLP5iGna1JPAB+5K63YEw0y20aopIHrzTv2kKRvRRwlMroeJLGQ==","shasum":"6e5bcb0d99d448da275ec3b5498452cc7c389f7f","tarball":"https://registry.npmjs.org/@duxor/agm-overlays/-/agm-overlays-18.0.0.tgz","fileCount":12,"unpackedSize":66861,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2tcznRwcJVkLl2VWVj8Sx4NDz30zDFl+swEB+laZMdgIgPWDXwA7df+79JjDNKgG9PfE3E8Dt74bvEUeEfLPJ95o="}]},"_npmUser":{"name":"duxor","email":"dullle@live.com"},"directories":{},"maintainers":[{"name":"duxor","email":"dullle@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/agm-overlays_18.0.0_1725565166548_0.46898316534823814"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-10T23:42:18.377Z","modified":"2024-09-05T19:39:26.948Z","17.0.0":"2024-03-10T23:42:18.677Z","18.0.0":"2024-09-05T19:39:26.753Z"},"bugs":{"url":"https://github.com/duxor/agm-overlays/issues"},"author":{"name":"Acker Apple"},"license":"MIT","homepage":"https://github.com/duxor/agm-overlays#readme","keywords":["agm","overlay","custom","markers","google","maps"],"repository":{"type":"git","url":"git+https://github.com/duxor/agm-overlays.git"},"description":"Custom marker overlay for the @agm/core package","maintainers":[{"name":"duxor","email":"dullle@live.com"}],"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"}