{"id":21397415,"url":"https://github.com/rubenspgcavalcante/leaflet-ant-path","last_synced_at":"2025-05-16T01:07:31.332Z","repository":{"id":3541517,"uuid":"49971727","full_name":"rubenspgcavalcante/leaflet-ant-path","owner":"rubenspgcavalcante","description":"🌿🐜 Creates a leaflet polyline with a 'ant-path' animated flux","archived":false,"fork":false,"pushed_at":"2022-12-10T17:10:50.000Z","size":15633,"stargazers_count":474,"open_issues_count":54,"forks_count":80,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-04T12:02:02.490Z","etag":null,"topics":["leaflet","leaflet-animation","leaflet-ant-path","leaflet-plugins","umd"],"latest_commit_sha":null,"homepage":"http://rubenspgcavalcante.github.io/leaflet-ant-path","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rubenspgcavalcante.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-19T17:56:43.000Z","updated_at":"2025-04-04T03:31:06.000Z","dependencies_parsed_at":"2023-01-13T13:00:15.739Z","dependency_job_id":null,"html_url":"https://github.com/rubenspgcavalcante/leaflet-ant-path","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fleaflet-ant-path","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fleaflet-ant-path/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fleaflet-ant-path/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fleaflet-ant-path/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rubenspgcavalcante","download_url":"https://codeload.github.com/rubenspgcavalcante/leaflet-ant-path/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319718,"owners_count":22051072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leaflet","leaflet-animation","leaflet-ant-path","leaflet-plugins","umd"],"created_at":"2024-11-22T14:42:32.782Z","updated_at":"2025-05-16T01:07:26.302Z","avatar_url":"https://github.com/rubenspgcavalcante.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Leaflet Ant Path\n![leaflet-ant-path logo](/assets/ant-path.png)  \n[![Build Status](https://travis-ci.org/rubenspgcavalcante/leaflet-ant-path.svg?branch=master)](https://travis-ci.org/rubenspgcavalcante/leaflet-ant-path)\n[![NPM Downloads](https://img.shields.io/npm/dt/leaflet-ant-path.svg)](https://www.npmjs.com/package/leaflet-ant-path)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/ca1062428b51428b8204e9044d4fdc3b)](https://www.codacy.com/app/rubenspgcavalcante/leaflet-ant-path?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=rubenspgcavalcante/leaflet-ant-path\u0026amp;utm_campaign=Badge_Grade)\n[![npm version](https://badge.fury.io/js/leaflet-ant-path.svg)](https://badge.fury.io/js/leaflet-ant-path)\n[![Bower version](https://badge.fury.io/bo/leaflet-ant-path.svg)](https://badge.fury.io/bo/leaflet-ant-path)\n[![Greenkeeper badge](https://badges.greenkeeper.io/rubenspgcavalcante/leaflet-ant-path.svg)](https://greenkeeper.io/)\n\n## *Creates a leaflet polyline with a 'ant-path' animated flux*\n[Live demo here](http://rubenspgcavalcante.github.io/leaflet-ant-path)  \n[![example of the animation](assets/ant-path-demo.gif)](http://rubenspgcavalcante.github.io/leaflet-ant-path)\n\n## Installing\nVia NPM:\n```\n npm install --save leaflet-ant-path \n```\n\nVia Yarn:\n```\n yarn add leaflet-ant-path\n```\n\nVia Bower:\n```\n bower install leaflet-ant-path\n```\n\nOr just [download](https://github.com/rubenspgcavalcante/leaflet-ant-path-bower/archive/master.zip) this source code\n\n\n## Requirements\n  - Leaflet \u003e= 1\n    \n## Browsers support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eiOS Safari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png\" alt=\"Samsung\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSamsung | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| ------------------- | ---- | ---- | ---- | ---- | ---- | ----- |\n| IE10-11, Edge =\u003e 12 | \u003e= 3 | \u003e= 8 | \u003e= 6 | \u003e= 6 | \u003e= 4 | \u003e= 10 |\n\n*\u003csmall\u003eThis list is based on the feature [SVG filter](https://caniuse.com/#feat=svg-filters)\u003c/small\u003e\n\n## UMD compatible\nCan be used with asynchronous module loaders and CommonJS packers\n    \n## Using the plugin\nIt's just like a polyline:  \n\n```javascript\n    // Using the constructor...\n    let antPolyline = new L.Polyline.AntPath(latlngs, options);\n    \n    // ... or use the factory\n    antPolyline = L.polyline.antPath(latlngs, options);\n    \n    antPolyline.addTo(map);\n```\n\n### Update: Using more Vectors\nOn this version you now can use diferent vector other than polyline, passing the **factory** to the **option.use**.\nCurrently tested support:\n - [L.curve](https://github.com/elfalem/Leaflet.curve)\n - [L.polygon](https://leafletjs.com/reference-1.3.4.html#polygon)\n - [L.rectangle](https://leafletjs.com/reference-1.3.4.html#rectangle)\n - [L.circle](https://leafletjs.com/reference-1.3.4.html#circle)\n\n```javascript\n// Using a polygon\nconst antPolygon = antPath([\n  [51.509, -0.08],\n  [51.503, -0.06],\n  [51.51, -0.047]\n], { use: L.polygon, fillColor: \"red\" });\n\n// Using a circle\nconst antCircle = antPath(\n  [51.508, -0.11],\n  {\n    use: L.circle\n    color: 'red',\n    fillColor: '#f03',\n    fillOpacity: 0.5,\n    radius: 500\n  }\n);\n\n// Using a curve (Leaflet.curve plugin)\nconst antCurve = antPath([\n  \"M\",\n  [50.54136296522163, 28.520507812500004],\n  \n  \"C\",\n  [52.214338608258224, 28.564453125000004],\n  [48.45835188280866, 33.57421875000001],\n  [50.680797145321655, 33.83789062500001],\n  \n  \"V\",\n  [48.40003249610685],\n  \n  \"L\",\n  [47.45839225859763, 31.201171875],\n  [48.40003249610685, 28.564453125000004],\n  \n  \"Z\"\n  ],\n  {use: L.curve, color: \"red\", fill: true })\n```\n\n### Importing\nUsing with ES6 imports\n```javascript\n    import { AntPath, antPath } from 'leaflet-ant-path';\n    \n    // Usethe constructor...\n    let antPolyline = new AntPath(latlngs, options);\n    \n    // ... or use the factory\n    antPolyline = antPath(latlngs, options);   \n    \n    antPolyline.addTo(map);\n```\n\nUsing with AMD:  \n```javascript\nrequire(['leaflet-ant-path'], function(AntPathModule) {\n    // Use the constructor ...\n    let antPolyline = new AntPathModule.AntPath(latlngs, options);\n    \n    // ... or use the factory\n    antPolyline = AntPathModule.antPath(latlngs, options);\n    \n    antPolyline.addTo(map);\n});\n```\n\nUsing with browserify:\n```javascript\n    const { AntPath, antPath } = require('leaflet-ant-path');\n```\n\n### Parameters\nThe AntPath extends from the [FeatureGroup](http://leafletjs.com/reference.html#featuregroup) and implements the [Path](http://leafletjs.com/reference.html#path) interface.\nInitialise with the same options of a common [Polyline]((http://leafletjs.com/reference.html#polyline)), with some extra options, like the flux color.  \n\n| name                        | type                                      | example                               | description                                                                                                                                              |\n| --------------------------- | ----------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| latlngs                     | L.LatLng[] **or** Array\\[number, number\\] | \\[ \\[0, 10\\], \\[-20, 0\\], ... \\]      | A path (depends on vector used, default as in [polyline constructor](http://leafletjs.com/reference.html#polyline) )                                     |\n| options                     | Object                                    | {color: 'red', weight: 5, ...}        | Same as the vector choosen (default to [polyline](http://leafletjs.com/reference.html#polyline-options) ) plus the **extra** options bellow              |\n| options.use                 | Vector Layer factory                      | Vector to use (default to L.polyline) | The vector to enhance with the ant-path animation ([check the compatibilty](#update-using-more-vectors))                                                 |\n| options.paused              | boolean                                   | true/false                            | Starts with the animation paused (default: false)                                                                                                        |\n| options.reverse             | boolean                                   | true/false                            | Defines if the flow follows or not the path order                                                                                                        |\n| options.hardwareAccelerated | boolean                                   | true/false                            | Makes the animation run with hardware acceleration (default: false)                                                                                      |\n| options.pulseColor          | string                                    | #FF00FF                               | Adds a color to the dashed flux (default: 'white')                                                                                                       |\n| options.delay               | string                                    | 120                                   | Add a delay to the animation flux (default: 400)                                                                                                         |\n| options.dashArray           | [number, number] **or** string            | [15, 30]                              | The size of the animated dashes (default: \"10, 20\"). See also [the pattern](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) |\n\n---\n\n### Methods\n| name          | returns                       | description                 |\n| ------------- | ----------------------------- | --------------------------- |\n| pause()       | boolean                       | Stops the animation         |\n| resume()      | booelan                       | Resume the animation        |\n| reverse()     | **this** instance             | Reverses the animation flow |\n| map(callback) | new AntPath or extended class | Iterates over the latlngs   |\n\nAlso have the same as the L.Polyline API and with the same behaviour. [See it here.](http://leafletjs.com/reference.html#polyline)\n\n---\n\n## Extras!\n### ES6/ES2015 features\nThinking in the new features of JavaScript, and its new way of programing,\nAntPath has some nicely features to work with ES6.\n\n#### spreadable\nWhen spread the path, you will receive it lat/lngs array;\n```javascript\n    //...\n    const antPathLayer = new AntPath(path, options);\n    const anotherAntPath = new AntPath(path2, options);\n    \n    const latLngs = [...antPathLayer, ...anotherAntPath];\n```\n\n#### iterable\nUse a **for ... of ...** to iterate over the path coordinates\n```javascript\nfor(let latLng of antPath) {\n    // do something with it latLngs ...\n}\n```\n\n#### extensible\nYou can create you custom 'class' based on the AntPath:\n```javascript\nclass CustomAntPath extends AntPath {\n    //...\n}\n```\n\n#### map method\nAntPath has a map method as the Array, returning a new instance of AntPath\n *(or the child class which extends it, because of its Functor property)*:\n```javascript\n//New path with translated path\nconst newAnthPath = myAntPath.map(pos =\u003e latLng(pos.lat + 1, pos.lng + 1));\n```\n\n### With or without polyfills\nThe module provide two bundles, the full one, with some es6 polyfills (loaded by default when importing) and the lighter\none without the polyfills. If you're already uses the following polyfills in your project:\n- core-js/es6/symbol\n- core-js/es6/reflect\n\nJust use the lighter version (leaflet-ant-path.es6.js). If not, just use the full bundle.\n\n## Contributing\nFind any bug? Open a [issue](https://github.com/rubenspgcavalcante/leaflet-ant-path/issues) or make a PR!  \nAlso, see the guide on [how to contribute](https://github.com/rubenspgcavalcante/leaflet-ant-path/wiki/How-To-Contribute).\n\n## License\nThis project is under the [MIT LICENSE](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubenspgcavalcante%2Fleaflet-ant-path","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubenspgcavalcante%2Fleaflet-ant-path","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubenspgcavalcante%2Fleaflet-ant-path/lists"}