Add support <text>

muxlab · Jun 8, 2016 · 576e7f0 · 576e7f0 · ynunokawa · Jun 8, 2016
1 parent 3de3f8e
commit 576e7f0
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 8 deletions.
diff --git 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
@@ -21,6 +21,7 @@ Load the script.
 * `<path>`
 * `<circle>`
 * `<rect>`
+* `<text>`
 
 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
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Leaflet debug page</title>
+	<title>Leaflet Vector Icon</title>
 
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
 	<style>
@@ -32,7 +32,7 @@
         });
       }
     });
-		var map = L.map('map').setView([36, 139], 5);
+		var map = L.map('map').setView([36, 140], 5);
 		L.tileLayer('//cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png', {
 		attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
 		}).addTo(map);
@@ -41,7 +41,7 @@
 		  className: 'my-vector-icon',
 			svgHeight: 32,
 		  svgWidth: 32,
-			type: 'path',
+			type: 'path', // path | circle | rect | text
 			shape: {
 				d: 'M23.963,20.834L17.5,9.64c-0.825-1.429-2.175-1.429-3,0L8.037,20.834c-0.825,1.429-0.15,2.598,1.5,2.598h12.926C24.113,23.432,24.788,22.263,23.963,20.834z'
 			},
@@ -55,7 +55,7 @@
 		  className: 'my-vector-icon',
 			svgHeight: 32,
 		  svgWidth: 32,
-			type: 'circle', // path | circle | rect
+			type: 'circle', // path | circle | rect | text
 		  shape: {
 		    r: '15',
 		    cx: '16',
@@ -71,7 +71,7 @@
 		  className: 'my-vector-icon',
 			svgHeight: 32,
 		  svgWidth: 32,
-			type: 'rect', // path | circle | rect
+			type: 'rect', // path | circle | rect | text
 		  shape: {
 		    x: '1',
 		    y: '1',
@@ -84,9 +84,29 @@
 				strokeWidth: 2
 			}
 		});
+		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 pathMarker = L.marker([36, 137], { icon: pathIcon }).addTo(map).bindPopup('Path');
 		var circleMarker = L.marker([36, 139], { icon: circleIcon }).addTo(map).bindPopup('Circle');
 		var rectMarker = L.marker([36, 141], { icon: rectIcon }).addTo(map).bindPopup('Rect');
+		var textMarker = L.marker([36, 143], { icon: textIcon }).addTo(map).bindPopup('Text');
 	</script>
 </body>
 </html>
diff --git a/test.html b/test.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet Vector Icon</title>
+
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
+	<style>
+    html, body, #map {
+      height: 100%;
+      font-family: "Avenir LT W01 35 Light", "Century Gothic", Helvetica, Arial, sans-serif;
+    }
+	</style>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
+	<script src="L.VectorIcon.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script type="text/javascript">
+		console.log('%c⚛ Leaflet.VectorIcon: Hello geohacker! ⚛', 'font-family:monospace;font-size:16px;color:darkblue;');
+
+		L.Map = L.Map.extend({
+      openPopup: function(popup) {
+        // this.closePopup();  // just comment this
+        this._popup = popup;
+        return this.addLayer(popup).fire('popupopen', {
+          popup: this._popup
+        });
+      }
+    });
+		var map = L.map('map').setView([36, 140], 5);
+		L.tileLayer('//cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png', {
+		attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+		}).addTo(map);
+
+		var pathIcon = L.vectorIcon({
+		  className: 'my-vector-icon',
+			svgHeight: 32,
+		  svgWidth: 32,
+			type: 'path', // path | circle | rect | text
+			shape: {
+				d: 'M23.963,20.834L17.5,9.64c-0.825-1.429-2.175-1.429-3,0L8.037,20.834c-0.825,1.429-0.15,2.598,1.5,2.598h12.926C24.113,23.432,24.788,22.263,23.963,20.834z'
+			},
+			style: {
+				fill: '#ddd',
+				stroke: '#fff',
+				strokeWidth: 2
+			}
+		});
+		var circleIcon = L.vectorIcon({
+		  className: 'my-vector-icon',
+			svgHeight: 32,
+		  svgWidth: 32,
+			type: 'circle', // path | circle | rect | text
+		  shape: {
+		    r: '15',
+		    cx: '16',
+		    cy: '16'
+		  },
+			style: {
+				fill: '#ddd',
+				stroke: '#fff',
+				strokeWidth: 2
+			}
+		});
+		var rectIcon = L.vectorIcon({
+		  className: 'my-vector-icon',
+			svgHeight: 32,
+		  svgWidth: 32,
+			type: 'rect', // path | circle | rect | text
+		  shape: {
+		    x: '1',
+		    y: '1',
+		    width: '30',
+		    height: '30'
+		  },
+			style: {
+				fill: '#ddd',
+				stroke: '#fff',
+				strokeWidth: 2
+			}
+		});
+		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 pathMarker = L.marker([36, 137], { icon: pathIcon }).addTo(map).bindPopup('Path');
+		var circleMarker = L.marker([36, 139], { icon: circleIcon }).addTo(map).bindPopup('Circle');
+		var rectMarker = L.marker([36, 141], { icon: rectIcon }).addTo(map).bindPopup('Rect');
+		var textMarker = L.marker([36, 143], { icon: textIcon }).addTo(map).bindPopup('Text');
+	</script>
+</body>
+</html>