Created
December 21, 2019 03:46
-
-
Save RikdeBoer/3165b243c8418e6c1512794b07f1db8e to your computer and use it in GitHub Desktop.
Leaflet inline-SVG marker
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Leaflet - Inline SVG marker</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script> | |
| <style> | |
| .mymarker svg path { fill: limegreen; } | |
| .leaflet-popup { | |
| margin-bottom: 60px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map-placeholder" style="height:400px"></div> | |
| <script> | |
| const size = 50; | |
| const iconOptions = { | |
| iconSize : [size, size], | |
| iconAnchor: [size/2, size - 7], | |
| className : 'mymarker', | |
| html : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 10.53125 4.875 L 10.15625 5.46875 C 10.15625 5.46875 8.894531 7.410156 7.28125 9.625 C 5.667969 11.839844 3.632813 14.347656 2.4375 15.1875 L 1.9375 15.53125 L 2 16.125 L 3 25.125 L 3.09375 26 L 4 26 C 5.484375 26 7.214844 26.078125 8.9375 26.1875 L 10 26.25 L 10 18 L 12 18 L 12 26.40625 L 12.90625 26.5 C 15.734375 26.75 17.875 27 17.875 27 L 18.03125 27 L 28.96875 24.8125 L 29 24.03125 C 29 24.03125 29.089844 22.363281 29.25 20.40625 C 29.410156 18.449219 29.671875 16.148438 29.9375 15.3125 L 30.15625 14.625 L 29.625 14.21875 C 26.175781 11.546875 22.875 5.53125 22.875 5.53125 L 22.5625 4.90625 L 21.84375 5 C 21.84375 5 15.417969 5.886719 11.1875 5.03125 Z M 21.46875 7.0625 C 21.878906 7.824219 23.902344 11.441406 26.8125 14.3125 L 19.28125 15.5 C 16.816406 13.132813 14.304688 9.390625 12.9375 7.21875 C 16.808594 7.617188 20.628906 7.175781 21.46875 7.0625 Z M 10.9375 7.875 C 12.25 9.988281 15.003906 14.136719 17.90625 16.90625 C 17.25 19.582031 17.050781 23.148438 17 24.90625 C 16.332031 24.835938 15.527344 24.738281 14 24.59375 L 14 16 L 8 16 L 8 24.15625 C 6.933594 24.097656 5.898438 24.046875 4.90625 24.03125 L 4.0625 16.34375 C 5.675781 15.03125 7.402344 12.875 8.90625 10.8125 C 9.882813 9.46875 10.492188 8.550781 10.9375 7.875 Z M 27.78125 16.21875 C 27.546875 17.410156 27.367188 18.816406 27.25 20.21875 C 27.121094 21.800781 27.089844 22.667969 27.0625 23.1875 L 19.03125 24.8125 C 19.082031 23.050781 19.265625 19.71875 19.78125 17.46875 Z"/></svg>' | |
| } | |
| const markerOptions = { | |
| draggable: true, | |
| icon: L.divIcon(iconOptions) | |
| } | |
| const center = [-37.8178, 144.968] | |
| const myMap = L.map('map-placeholder').setView(center, 17) | |
| const myMarker = L.marker(center, markerOptions).addTo(myMap) | |
| myMarker | |
| .bindPopup('I am an inline SVG marker.<br/><br/>You can drag me too.') | |
| .openPopup() | |
| myMap.addLayer(L.tileLayer( | |
| 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', | |
| { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contr.' } | |
| )) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment