From 576e7f0ac5be52b1aacc864a6c849f7e6d78e90f Mon Sep 17 00:00:00 2001 From: ynunokawa Date: Wed, 8 Jun 2016 10:59:07 +0900 Subject: [PATCH] Add support --- L.VectorIcon.js | 21 +++++++-- README.md | 27 ++++++++++++ demo.html | 30 ++++++++++--- test.html | 112 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 182 insertions(+), 8 deletions(-) create mode 100644 test.html diff --git a/L.VectorIcon.js b/L.VectorIcon.js index a1765ff..2a27514 100644 --- a/L.VectorIcon.js +++ b/L.VectorIcon.js @@ -19,7 +19,8 @@ L.VectorIcon = L.Icon.extend({ fill: '#333', stroke: '#000', strokeWidth: 1 - } + }, + text: '' }, createIcon: function (oldIcon) { @@ -55,13 +56,27 @@ L.VectorIcon = L.Icon.extend({ figure.setAttributeNS(null, 'width', options.shape.width); figure.setAttributeNS(null, 'height', options.shape.height); } + else if(options.type === 'text') { + figure = document.createElementNS('http://www.w3.org/2000/svg', 'text'); + figure.setAttributeNS(null, 'x', options.shape.x); + figure.setAttributeNS(null, 'y', options.shape.y); + figure.setAttributeNS(null, 'font-family', options.style.fontFamily || 'Arial'); + figure.setAttributeNS(null, 'font-style', options.style.fontStyle || 'normal'); + figure.setAttributeNS(null, 'font-variant', options.style.fontVariant || 'normal'); + figure.setAttributeNS(null, 'font-weight', options.style.fontWeight || 'normal'); + figure.setAttributeNS(null, 'font-size', options.style.fontSize || '12'); + figure.setAttributeNS(null, 'text-anchor', options.style.textAnchor || 'middle'); + figure.setAttributeNS(null, 'text-decoration', options.style.textDecoration || 'none'); + figure.setAttributeNS(null, 'text-rendering', options.style.textRendering || 'auto'); + figure.innerHTML = options.text; + } else { console.log('Error: defined type of svg shape is invalid.'); } - figure.setAttributeNS(null, 'stroke', options.style.stroke); + figure.setAttributeNS(null, 'stroke', options.style.stroke || 'none'); figure.setAttributeNS(null, 'stroke-width', options.style.strokeWidth); - figure.setAttributeNS(null, 'fill', options.style.fill); + figure.setAttributeNS(null, 'fill', options.style.fill || 'none'); g.appendChild(figure); svg.appendChild(g); diff --git a/README.md b/README.md index 9a6dae3..cd7b357 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ Load the script. * `` * `` * `` +* `` W3C page ([Basic Shapes](https://www.w3.org/TR/SVG/shapes.html)) for more information on svg shapes. @@ -93,6 +94,32 @@ var rectIcon = L.vectorIcon({ var rectMarker = L.marker([36, 141], { icon: rectIcon }).addTo(map); ``` +### Text + +```js +var textIcon = L.vectorIcon({ + className: 'my-vector-icon', + svgHeight: 32, + svgWidth: 50, + type: 'text', // path | circle | rect | text + shape: { + x: '25', + y: '24' + }, + style: { + fill: '#ddd', + //stroke: '#fff', + strokeWidth: 2, + fontFamily: 'Helvetica', + fontSize: '16', + fontWeight: '100' + }, + text: 'Hello!' +}); + +var textMarker = L.marker([36, 141], { icon: textIcon }).addTo(map); +``` + ## License Copyright 2016 MUX Lab. diff --git a/demo.html b/demo.html index 0f7c4c5..fd32981 100644 --- a/demo.html +++ b/demo.html @@ -1,7 +1,7 @@ - Leaflet debug page + Leaflet Vector Icon + + + + + + + + +
+ + + +