{"_id":"@almamigratoria/leaflet-svgmarkers","_rev":"4-ec5a90dff4dcba8d783e287c911f3944","name":"@almamigratoria/leaflet-svgmarkers","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@almamigratoria/leaflet-svgmarkers","version":"1.0.0","keywords":["Leaflet","SVG","Marker"],"author":{"name":"Alma Migratoria"},"license":"MIT","_id":"@almamigratoria/leaflet-svgmarkers@1.0.0","maintainers":[{"name":"almamigratoria","email":"almamigratoria@gmail.com"}],"homepage":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers#readme","bugs":{"url":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers/issues"},"dist":{"shasum":"2552e622e81c28e87d44cbf0115a9d7dc863eba9","tarball":"https://registry.npmjs.org/@almamigratoria/leaflet-svgmarkers/-/leaflet-svgmarkers-1.0.0.tgz","fileCount":9,"integrity":"sha512-OOp9yc3fbmXRxslWJ5guzKIViBQ73BDCs3Htry5n0IqL8fxRA8k6VdIsXBOst15GIKVL8gneKktpivbHt8tKyw==","signatures":[{"sig":"MEYCIQC6CfqGQGEYHXe2R3tn2tdLAQCWQRHhi6FaFZFdsERprwIhAIqn4FbJ9436CYVtiKLaDta87STgho7W9C0l2m/IW0CK","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":860207},"main":"dist/SVGMarkers.min.mjs","type":"module","gitHead":"ff38c0b92487ab23a747933bdf176cf6e280d79f","scripts":{"lint":"eslint SVGMarkers.mjs","build":"npm-run-all lint minify","minify":"terser SVGMarkers.mjs --module -c -m --output dist/js/SVGMarkers.min.mjs"},"_npmUser":{"name":"almamigratoria","email":"almamigratoria@gmail.com"},"repository":{"url":"git+https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers.git","type":"git"},"_npmVersion":"11.6.2","description":"Leaflet v2 SVG Markers styled by CSS","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.38.0","terser":"^5.44.0","globals":"^16.4.0","@eslint/js":"^9.38.0","@eslint/css":"^0.13.0","npm-run-all":"^4.1.5"},"_npmOperationalInternal":{"tmp":"tmp/leaflet-svgmarkers_1.0.0_1761748349357_0.3785653242722058","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@almamigratoria/leaflet-svgmarkers","version":"1.0.1","keywords":["Leaflet","SVG","Marker"],"author":{"name":"Alma Migratoria"},"license":"MIT","_id":"@almamigratoria/leaflet-svgmarkers@1.0.1","maintainers":[{"name":"almamigratoria","email":"almamigratoria@gmail.com"}],"homepage":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers#readme","bugs":{"url":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers/issues"},"dist":{"shasum":"c3f32ce0462658bdcf5386f7e0e880046d3a9a15","tarball":"https://registry.npmjs.org/@almamigratoria/leaflet-svgmarkers/-/leaflet-svgmarkers-1.0.1.tgz","fileCount":4,"integrity":"sha512-4bsAWutro/gra0lE4+PcyOw5nUzStK5/7Nd3cxnnoeeBHsHqcB+jF8B0PZ5H4z+y55JEEPqf7wyYf/QqgBbX0Q==","signatures":[{"sig":"MEYCIQDF5rXWnu5RJb8dMdZ/Q1mtCCj/Ypd20iyXDaojeLISaQIhAKRRkP07mD/dCFIRHJOBEoTPhaO1e1iRJxQBNzcNENqq","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28686},"main":"dist/SVGMarkers.min.mjs","type":"module","gitHead":"ea8b9372291ecbe6437fcebdc589701c7ca0cf8b","scripts":{"lint":"eslint SVGMarkers.mjs","build":"npm-run-all lint minify","minify":"terser SVGMarkers.mjs --module -c -m --output dist/js/SVGMarkers.min.mjs"},"_npmUser":{"name":"almamigratoria","email":"almamigratoria@gmail.com"},"repository":{"url":"git+https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers.git","type":"git"},"_npmVersion":"11.6.2","description":"Leaflet v2 SVG Markers styled by CSS","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.38.0","terser":"^5.44.0","globals":"^16.4.0","@eslint/js":"^9.38.0","@eslint/css":"^0.13.0","npm-run-all":"^4.1.5"},"_npmOperationalInternal":{"tmp":"tmp/leaflet-svgmarkers_1.0.1_1761885455996_0.5479350845838846","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@almamigratoria/leaflet-svgmarkers","version":"1.0.2","keywords":["Leaflet","SVG","Marker"],"author":{"name":"Alma Migratoria"},"license":"MIT","_id":"@almamigratoria/leaflet-svgmarkers@1.0.2","maintainers":[{"name":"almamigratoria","email":"almamigratoria@gmail.com"}],"homepage":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers#readme","bugs":{"url":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers/issues"},"dist":{"shasum":"6ad76e529f40877385706f4cece849f7b34e7bb1","tarball":"https://registry.npmjs.org/@almamigratoria/leaflet-svgmarkers/-/leaflet-svgmarkers-1.0.2.tgz","fileCount":5,"integrity":"sha512-6jZs9Yr/pEt/50cyaa80dlNl5TLp77XYFb/0Em5gnEkPlxVFdikIj55bgfwqG/sD0SIS4tR0YZOVx1wLJCeXSQ==","signatures":[{"sig":"MEUCIQD7x/yRHICCP4UQhdtqEBQIC1pX3J/mwd62+M52KY7iUQIgXUnmALEH5SHinCJ+Qbn4TDjdIM6PlWjTD3iLWGnR6kI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":780253},"main":"dist/SVGMarkers.min.mjs","type":"module","gitHead":"da87f539d217185a767191737c7571eac74031ed","scripts":{"lint":"eslint SVGMarkers.mjs","build":"npm-run-all lint minify","minify":"terser SVGMarkers.mjs --module -c -m --output dist/js/SVGMarkers.min.mjs"},"_npmUser":{"name":"almamigratoria","email":"almamigratoria@gmail.com"},"repository":{"url":"git+https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers.git","type":"git"},"_npmVersion":"11.6.2","description":"Leaflet v2 SVG Markers styled by CSS","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.38.0","terser":"^5.44.0","globals":"^16.4.0","@eslint/js":"^9.38.0","@eslint/css":"^0.13.0","npm-run-all":"^4.1.5"},"_npmOperationalInternal":{"tmp":"tmp/leaflet-svgmarkers_1.0.2_1761894860661_0.44308263778348866","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@almamigratoria/leaflet-svgmarkers","version":"1.0.3","description":"Leaflet v2 SVG Markers styled by CSS","keywords":["Leaflet","SVG","Marker"],"homepage":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers#readme","bugs":{"url":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers/issues"},"repository":{"type":"git","url":"git+https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers.git"},"license":"MIT","author":{"name":"Alma Migratoria"},"type":"module","main":"dist/SVGMarkers.min.mjs","scripts":{"build":"npm-run-all lint minify","lint":"jshint SVGMarkers.mjs","minify":"terser SVGMarkers.mjs --module -c -m --output dist/js/SVGMarkers.min.mjs"},"devDependencies":{"jshint":"^2.13.6","npm-run-all":"^4.1.5","terser":"^5.44.0"},"jshintConfig":{"esversion":11},"gitHead":"880527eb81d20b3c80f390324f39578f8fe94366","_id":"@almamigratoria/leaflet-svgmarkers@1.0.3","_nodeVersion":"22.19.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-JE3e9J2KkOIvbn3Nj9BmyiKOrBu0m7LS+LU1HTwFsuJ4n83CGEFJch2Vfn/RYAtVCNlSRbu95rO+0z7N5nBeBA==","shasum":"70271fab5068d9923a93b128c830ed371e14533f","tarball":"https://registry.npmjs.org/@almamigratoria/leaflet-svgmarkers/-/leaflet-svgmarkers-1.0.3.tgz","fileCount":5,"unpackedSize":232059,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHrbaFnMKr+AlH7AM7d8jXwPK9pImtgivC8jCRjrm/fsAiA6gkPUGwNFQNJspi8dnt0FBMtub+W0Wjf0UoH6xbfp6Q=="}]},"_npmUser":{"name":"almamigratoria","email":"almamigratoria@gmail.com"},"directories":{},"maintainers":[{"name":"almamigratoria","email":"almamigratoria@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/leaflet-svgmarkers_1.0.3_1762896443324_0.07497615708223981"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-29T14:32:29.268Z","modified":"2025-11-11T21:27:23.709Z","1.0.0":"2025-10-29T14:32:29.564Z","1.0.1":"2025-10-31T04:37:36.195Z","1.0.2":"2025-10-31T07:14:20.950Z","1.0.3":"2025-11-11T21:27:23.527Z"},"bugs":{"url":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers/issues"},"author":{"name":"Alma Migratoria"},"license":"MIT","homepage":"https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers#readme","keywords":["Leaflet","SVG","Marker"],"repository":{"type":"git","url":"git+https://github.com/almamigratoria-netizen/Leaflet-SVGMarkers.git"},"description":"Leaflet v2 SVG Markers styled by CSS","maintainers":[{"name":"almamigratoria","email":"almamigratoria@gmail.com"}],"readme":"# Leaflet-SVGMarkers\r\n\r\nProvides pure SVG markers (no more DivIcons) for Leaflet v2 which you can style by CSS.  No dependencies (other than Leaflet v2).  Markers accept a modest range of options.  Surprisingly, on my laptop they render faster than standard markers, and are about 3 times as fast on my phone.  Your milage may vary.\r\n\r\nBasically I wanted colorable markers that would take glyphs and couldn't find\r\na suitable plugin for Leaflet v2, so whipped this up.  \r\n\r\nView the [demo](https://almamigratoria-netizen.github.io/Leaflet-SVGMarkers/examples/).   Click on individual markers to see what options were applied.\r\n\r\n![Screenshot](./Screenshot.png)\r\n\r\n## Usage\r\n```js\r\nimport {Map, TileLayer} from 'leaflet';\r\nimport {SVGMarker} from \"https://cdn.jsdelivr.net/npm/@almamigratoria/leaflet-svgmarkers/dist/js/SVGMarkers.min.mjs\";\r\n\r\nconst OSM = 'https://{s}.tile.osm.org/{x}/{y}/{z}.png';\r\nconst map = new Map(\"mapdiv\").setView([52.5,13.4], null, 13);\r\nnew TileLayer(`${OSM}`).addTo(map);\r\nnew SVGMarker([52.5, 13.395]).addTo(map);\r\n// bi-bank is from BootStrap Icons.\r\nconst newMarker = new SVGMarker([52.5, 13.405], {color: 'black', glyph: 'bi-bank'});\r\nnewMarker.addTo(map);\r\n```\r\n\r\n## Options\r\n* All normal [Marker options](https://leafletjs.com/reference.html#marker-icon) apply.\r\n* `shape:` 'square', 'penta', or 'pin'.  Defaults to the vanilla map marker.\r\n* `color:` sets the stroke and fill style attributes.\r\n* `stroke:` sets the stroke attribute\r\n* `fill:` sets the fill attribute \r\n* `dotColor:` sets the color of the dot in the marker\r\n* `dotRadius:` sets the radius of the dot in the marker (defaults to 5)\r\n* `style:` Embeds the passed string as a stylesheet in your SVGMarker \r\nicon.  You probably want to use this in conjunction with `class:`\r\n* `glyph:` name of a glyph from a font you have loaded (like font-awesome).\r\n* `glyphPrefix:` Defaults to the name of the glyph up to the first '-' \r\n* `glyphColor:` Defaults to `white`.\r\n* `number:` Puts a number (or other character) on the marker.  The `glyphColor` option can be used to color it. \r\n* `class:` add a whitespace separated list of classes to the SVG element.\r\n* `image:` SVG (string) or URL.  Adds a user supplied image to the SVG.\r\n* `imageOpts:` attributes for the image.  Typically you should supply width and height (both default to 15).  Supply x and y to center the image (although it will try to center with the information it has).  `image`s are created using the SVG `<image>` tag, so sttributes aren't exactly the same as for `Image()`.\r\n* Any option not understood will try to be applied to the \"style\" attributes, which may or may not be what you want.\r\n> [!NOTES]\r\n> glyphs tested with font-awesome 4.7, boxicons, bootstrap-icons 1.13.1<br/>\r\n> adding a glyph or number automatically reduces the dot radius to zero<br/>\r\n> Standard CSS specificity rules apply to SVG's, too.  Presentation attributes in SVG's have the lowest priority, element style attribes the highest.<br/>\r\n> URL's for images can be canonical, relative (i.e., './images/foo.png'), or dataURL's.  SVG's passed as strings will be converted to a dataURL.\r\n\r\n## The SVGMarkerUtil class\r\nYou can also import the SVGMarkerUtil class.  There are some potentially \r\nuseful utility functions declared static so you can use them without invoking\r\nan instance of the class.\r\n\r\n# Installation\r\nEither grab the package from [github](\r\nhttps://github.com/almamigratoria-netizen/Leaflet-SVGMarkers) or \r\n`npm i @almamigratoria/leaflet-svgmarkers` or load it from your favorite CDN in your importmap.<br/>\r\n`SVGMarkers: \"https://cdn.jsdelivr.net/npm/@almamigratoria/leaflet-svgmarkers/dist/js/SVGMarkers.min.mjs\"`\r\n\r\n## License\r\nDistributed under the terms of the [MIT](https://opensource.org/license/mit) license.\r\n\r\n","readmeFilename":"README.md"}