issue #1

README.md

@@ -8,24 +8,32 @@ See index.html for a demo.
 
 Two files are required: _leaflet-constrol-credits.js_ and _leaflet-constrol-credits.css_
 
-    <script type="text/javascript" src="dist/leaflet-control-credits.js"></script>
-    <link rel="stylesheet" href="dist/leaflet-control-credits.css" />
+```
+<script type="text/javascript" src="dist/leaflet-control-credits.js"></script>
+<link rel="stylesheet" href="dist/leaflet-control-credits.css" />
+```
 
-Then add the control:
+Then add the control. In this example we keep a reference to the control, so we can call methods on it later.
 
-    L.controlCredits({
-        image: "./greeninfo.png",
-        link: "http://www.greeninfo.org/",
-        text: "Interactive mapping<br/>by GreenInfo Network"
-    }).addTo(map);
+```
+var credctrl = L.controlCredits({
+    image: "./greeninfo.png",
+    link: "http://www.greeninfo.org/",
+    text: "Interactive mapping<br/>by GreenInfo Network"
+}).addTo(map);
+```
 
 #Options
 
 * *image* - REQUIRED. An URL of the image to put into the right-hand side. May be any size you like, but to look good should be appropriate to the _text_ content. I like 35x35 to 40x40 for two lines.
 * *text* - REQUIRED. When the image is clicked, this HTML will be shown. Up to you, but should be fairly brief and have a height that looks good for your image. I like two lines for a 35x35 image.
 * *link* - REQUIRED. The left-hand text is a hyperlink, and this is the target URL. It will open in a new window/tab.
-* *width* - Optional; the width of the control. Should match that if your image. Defaults to 39px.
-* *height* - Optional; the height of the control. Should match that if your image. Defaults to 39px.
+* *width* - Optional; the width of the control. Should match that of your image. Defaults to 39px.
+* *height* - Optional; the height of the control. Should match that of your image. Defaults to 39px.
+
+#Methods
+
+* *setText(html)* - Replace the *text* content with new HTML.
 
 #Credits
 Thanks to my employer, GreenInfo Network http://www.greeninfo.org/ for the time to make this control.

dist/leaflet-control-credits-src.js

@@ -49,6 +49,15 @@ L.CreditsControl = L.Control.extend({
             }
         });
 
+        // afterthought keep a reference to our container and to the link,
+        // in case we need to change their content later via setText() et al
+        this._container = container;
+        this._link      = link;
+
+        // all done
         return container;
+    },
+    setText: function (html) {
+        this._link.innerHTML = html;
     }
 });

index.html

@@ -32,11 +32,17 @@
 	}).addTo(map);
         map.setView([37.7833,-122.4167], 12);
 
-        L.controlCredits({
+        var credctrl = L.controlCredits({
         	image: "./greeninfo.png",
         	link: "http://www.greeninfo.org/",
-        	text: "Interactive mapping<br/>by GreenInfo Network"
+        	text: "Credits<br/>Control"
         }).addTo(map);
+
+	// demo: setText()
+	// wait 5 seconds then change the credits content
+	setTimeout(function () {
+	    credctrl.setText("Interactive mapping<br/>by GreenInfo Network");
+	}, 5000);
     }
     </script>
 </head>