GitHub - teastman/Leaflet.pattern: Plugin for leaflet that allows for use of fill patterns in Paths. Skip to content Sign up Why GitHub? Features → Mobile → Actions → Codespaces → Packages → Security → Code review → Project management → Integrations → GitHub Sponsors → Customer stories → Security → Team Enterprise Explore Explore GitHub → Learn & contribute Topics → Collections → Trending → Learning Lab → Open source guides → Connect with others The ReadME Project → Events → Community forum → GitHub Education → GitHub Stars program → Marketplace Pricing Plans → Compare plans → Contact Sales → Nonprofit → Education → In this repository All GitHub ↵ Jump to ↵ No suggested jump to results In this repository All GitHub ↵ Jump to ↵ In this user All GitHub ↵ Jump to ↵ In this repository All GitHub ↵ Jump to ↵ Sign in Sign up {{ message }} teastman / Leaflet.pattern Watch 9 Star 90 Fork 50 Plugin for leaflet that allows for use of fill patterns in Paths. BSD-2-Clause License 90 stars 50 forks Star Watch Code Issues 15 Pull requests 1 Actions Projects 0 Security Insights More Code Issues Pull requests Actions Projects Security Insights master 2 branches 0 tags Go to file Code Clone HTTPS GitHub CLI Use Git or checkout with SVN using the web URL. Work fast with our official CLI. Learn more. Open with GitHub Desktop Download ZIP Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching Xcode If nothing happens, download Xcode and try again. Go back Launching Visual Studio If nothing happens, download the GitHub extension for Visual Studio and try again. Go back Latest commit teastman Merge pull request #23 from faistos18/mixin-deprecated … 5c8928f Feb 6, 2020 Merge pull request #23 from faistos18/mixin-deprecated removing warning on recent leaflet versions 5c8928f Git stats 19 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time build Added PatternRect as a PatternShape. Jan 31, 2015 dist Added code to support Leaflet 1.0 Jun 29, 2016 example Added a geojson example. Jun 29, 2016 spec Plugin for leaflet that allows for use of fill patterns. Jan 30, 2015 src removing warning on recent leaflet versions Jan 13, 2020 .gitignore updating gitignore Jul 23, 2015 .travis.yml Plugin for leaflet that allows for use of fill patterns. Jan 30, 2015 Jakefile.js Plugin for leaflet that allows for use of fill patterns. Jan 30, 2015 LICENCE.txt Plugin for leaflet that allows for use of fill patterns. Jan 30, 2015 README.md Added a geojson example. Jun 29, 2016 bower.json adding bower.json Jul 23, 2015 package.json Plugin for leaflet that allows for use of fill patterns. Jan 30, 2015 View code README.md Leaflet.pattern Provides the ability to use SVG patterns as backgrounds for Leaflet Paths. Requires Leaflet 0.7.0 or newer. Usage Examples Circle Pattern Rectangular Pattern Stripe Pattern Path Pattern GeoJson Pattern You can define a pattern in 2 ways. Using a pre-defined provided pattern. Creating a custom pattern. In either case the Pattern object needs to be initialized. This can be done as follows. var pattern = new L.Pattern({options}); Options All custom and pre-defined patterns can make use of the following options. patternUnits: {userSpaceOnUse | objectBoundingBox} (default: userSpaceOnUse) - Defines if the x, y, width, and height values are measured against the current user coordinate system, or are in the range of 0.0 - 1.0 as a percentage of the bounding box of their parent element. patternContentUnits: {userSpaceOnUse | objectBoundingBox} (default: userSpaceOnUse) - Similar to patternUnits but applies to the shapes within the pattern. x: {number} (default: 0) - The x offset of the pattern starting position. y: {number} (default: 0) - The y offset of the pattern starting position. width: {number} (default: 8) - The width of the pattern. height: {number} (default: 8) - The height of the pattern. patternTransform: {string} (default: null) - see http://www.w3.org/TR/SVG/coords.html#TransformAttribute. angle: {number} (default: null) - a quick way to add rotate(angle) to the patternTransform. Pre-Built Patterns Pre-Built patterns are just an easier way to use some common patterns. Pre-Built patterns typically have their own special options, but all can use the base options mentioned above. Stripes var stripes = new L.StripePattern({options}); stripes.addTo(map); Options weight: {number} (default: 4) - The width of the primary stripe. spaceWeight: {number} (default: 4) - The width of the secondaty stripe, typically an empty space. color: {color} (default: #000000) - The color of the primary stripe. spaceColor: {color} (default: #ffffff) - The color of the secondary stripe. opacity: {0.0 - 1.0} (default: 1.0) - The opacity of the primary stripe. spaceOpacity: {0.0 - 1.0} (default: 0.0) - The opacity of the secondary stripe. Usage Once the pre-built patterns are defined you can use them by adding them as the fill pattern property of any Path in leaflet. var circle = new L.Circle({LatLng}, {radius}, { fillPattern: stripes, fillOpacity: 1.0}); circle.addTo(_map); Custom Patterns To create custom patterns you must first create some shapes to define what the pattern looks like. Shapes Options All shapes have the following options. stroke: {boolean} (default: true) - Whether to draw along the path or not. color: {color} (default: 3388ff) - Color of the stroke. weight: {number} (default: 3) - Width of the stroke. opacity: {0.0 - 1.0} (default: 1.0) - Opacity of the stroke. lineCap: {butt | round | square | inherit} (default: round) - Defines how the stroke looks at its ends lineJoin: {butt | round | square | inherit} (default: round) - Defines how the stroke looks at its corners. dashArray: {dashArray} (default: null) - Defines the strokes dash pattern. ex: '5, 5' dashOffset: {number} (default: null) - fill: {boolean} (default: false) - Should the shape be filled. fillColor: {color} (default: same as color) - Color of the fill. fillOpacity: {0.0 - 1.0} (default: 0.2) - Opacity of the fill. fillRule: {nonzero | evenodd | inherit} (default: evenodd) - fillPattern: {L.Pattern} (default: null) - The pattern to fill the Shape with. Path var shape = new L.PatternPath({ d: 'M10 0 L7 20 L25 20 Z', fill: true }); Options d: {path} (default: null) - The SVG path definition. Circle var shape = new L.PatternCircle({ x: 12, y: 12, radius: 10, fill: true }); Options x: {number} (default: 0) - x offset of the circle. y: {number} (default: 0) - y offset of the circle. radius: {number} (default: 0) - radius of the circle. Rectangle var shape = new L.PatternRect({ x: 5, y: 5, width: 40, height: 40, rx: 10, ry: 10, fill: true }); Options x: {number} (default: 0) - x offset of the rectangle. y: {number} (default: 0) - y offset of the rectangle. width: {number} (default: 10) - width of the rectangle. height: {number} (default: 10) - height of the rectangle. rx: {number} (default: null) - x radius for rounded corners ry: {number} (default: null) - y radius for rounded corners Usage Once the paths are defined you can use them by adding them to a Pattern. var pattern = new L.Pattern({options}); pattern.addShape(shape); pattern.addTo(map); Finally you can now use the pattern in the fill pattern property of any Path in leaflet. var circle = new L.Circle({LatLng}, {radius}, { fillPattern: pattern, fillOpacity: 1.0}); circle.addTo(_map); About Plugin for leaflet that allows for use of fill patterns in Paths. Resources Readme License BSD-2-Clause License Releases No releases published Packages 0 No packages published Used by 23 + 15 Contributors 2 teastman Tyler Eastman SirenHound Ethan McCoy Languages JavaScript 96.2% HTML 3.8% © 2021 GitHub, Inc. Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.