diff --git a/examples/tissot.html b/examples/tissot.html
index 2557eba84f..d49582e171 100644
--- a/examples/tissot.html
+++ b/examples/tissot.html
@@ -23,8 +23,13 @@
     <div class="container-fluid">
 
       <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
+        <div class="span6">
+          <h4>EPSG:4326</h4>
+          <div id="map4326" class="map"></div>
+        </div>
+        <div class="span6">
+          <h4>EPSG:3857</h4>
+          <div id="map3857" class="map"></div>
         </div>
       </div>
 
@@ -32,7 +37,7 @@
 
         <div class="span12">
           <h4 id="title">Tissot indicatrix example</h4>
-          <p id="shortdesc">Example of a <a href="http://en.wikipedia.org/wiki/Tissot's_indicatrix">Tissot indicatrix</a> map.</p>
+          <p id="shortdesc">Example of <a href="http://en.wikipedia.org/wiki/Tissot's_indicatrix">Tissot indicatrix</a> maps. The map on the left is an EPSG:4326 map. The one on the left is EPSG:3857.</p>
           <div id="docs">
             <p>See the <a href="tissot.js" target="_blank">tissot.js source</a> to see how this is done.</p>
           </div>
diff --git a/examples/tissot.js b/examples/tissot.js
index 13bcbaeb17..af92b5cb32 100644
--- a/examples/tissot.js
+++ b/examples/tissot.js
@@ -8,9 +8,15 @@ goog.require('ol.layer.Vector');
 goog.require('ol.source.TileWMS');
 goog.require('ol.source.Vector');
 
-var vectorSource = new ol.source.Vector();
+var vectorLayer4326 = new ol.layer.Vector({
+  source: new ol.source.Vector()
+});
 
-var map = new ol.Map({
+var vectorLayer3857 = new ol.layer.Vector({
+  source: new ol.source.Vector()
+});
+
+var map4326 = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.TileWMS({
@@ -20,12 +26,10 @@ var map = new ol.Map({
         }
       })
     }),
-    new ol.layer.Vector({
-      source: vectorSource
-    })
+    vectorLayer4326
   ],
   renderer: 'canvas',
-  target: 'map',
+  target: 'map4326',
   view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
@@ -33,12 +37,35 @@ var map = new ol.Map({
   })
 });
 
+var map3857 = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.TileWMS({
+        url: 'http://demo.opengeo.org/geoserver/wms',
+        params: {
+          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+        }
+      })
+    }),
+    vectorLayer3857
+  ],
+  renderer: 'canvas',
+  target: 'map3857',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
 var wgs84Sphere = new ol.Sphere(6378137);
 
 var radius = 800000;
-for (var x = -180; x < 180; x += 30) {
-  for (var y = -90; y < 90; y += 30) {
-    var circle = ol.geom.Polygon.circular(wgs84Sphere, [x, y], radius, 64);
-    vectorSource.addFeature(new ol.Feature(circle));
+var x, y;
+for (x = -180; x < 180; x += 30) {
+  for (y = -90; y < 90; y += 30) {
+    var circle4326 = ol.geom.Polygon.circular(wgs84Sphere, [x, y], radius, 64);
+    var circle3857 = circle4326.clone().transform('EPSG:4326', 'EPSG:3857');
+    vectorLayer4326.getSource().addFeature(new ol.Feature(circle4326));
+    vectorLayer3857.getSource().addFeature(new ol.Feature(circle3857));
   }
 }