add drawing demo

jcheng5 · Feb 3, 2014 · ee0c4d6 · ee0c4d6
1 parent 02af312
commit ee0c4d6
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -5,7 +5,10 @@ A tiny, simple and fast [Leaflet](http://leafletjs.com) heatmap plugin.
 Uses [simpleheat](https://github.com/mourner/simpleheat) under the hood,
 additionally clustering points into a grid for performance.
 
-[Demo (10,000 points) &rarr;](http://leaflet.github.io/Leaflet.heat/demo)
+## Demos
+
+- [10,000 points &rarr;](http://leaflet.github.io/Leaflet.heat/demo)
+- [Adding points dynamically &rarr;](http://leaflet.github.io/Leaflet.heat/demo/draw.html)
 
 ## Basic Usage
 

diff --git a/demo/draw.html b/demo/draw.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet.heat demo</title>
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
+    <style>
+        #map { width: 800px; height: 600px; }
+        body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
+        .ghbtns { position: relative; top: 4px; margin-left: 5px; }
+        a { color: #0077ff; }
+    </style>
+</head>
+<body>
+
+<p>
+    A dynamic demo of <a href="https://github.com/Leaflet/Leaflet.heat">Leaflet.heat</a>, a tiny and fast Leaflet heatmap plugin.
+    <iframe class="ghbtns" src="http://ghbtns.com/github-btn.html?user=Leaflet&amp;repo=Leaflet.heat&amp;type=watch&amp;count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
+</p>
+
+<div id="map"></div>
+
+<!-- <script src="../node_modules/simpleheat/simpleheat.js"></script>
+<script src="../src/HeatLayer.js"></script>
+ -->
+<script src="../dist/leaflet-heat.js"></script>
+
+<script src="http://leaflet.github.io/Leaflet.markercluster/example/realworld.388.js"></script>
+<script>
+
+var map = L.map('map').setView([-37.82109, 175.2193], 16);
+
+var tiles = L.tileLayer('http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
+    attribution: '<a href="https://www.mapbox.com/about/maps/">Terms and Feedback</a>',
+    id: 'examples.map-20v6611k'
+}).addTo(map);
+
+var heat = L.heatLayer(addressPoints).addTo(map);
+
+map.on('mousemove', function (e) {
+    heat.addLatLng(e.latlng);
+})
+
+</script>
+</body>
+</html>