Upload all code

pages/map/circles.json

@@ -0,0 +1,7 @@
+{"objects":[
+{"circle":{"coordinates":[54.0472, -2.8018]}},
+{"circle":{"coordinates":[-41.29,174.76]}},
+{"circle":{"coordinates":[-41.30,174.79]}},
+{"circle":{"coordinates":[-41.27,174.80]}},
+{"circle":{"coordinates":[-41.29,174.78]}}
+]}

pages/map/map.css

@@ -0,0 +1,3 @@
+#mapid { height: 180px; }    
+
+#map { width:600px; height: 600px }

pages/map/map.html

@@ -0,0 +1,15 @@
+<div id="map" style="width: 100%; height: 400px"></div>
+<br> 
+<div class="row">
+  <div class="col-lg-6">
+    <button class="btn btn-secondary btn-block" type="button">Track my spent</button>
+  </div>
+  <div class="col-lg-6">
+    <div class="input-group">
+      <input type="text" class="form-control" placeholder="Search for...">
+      <span class="input-group-btn">
+        <button class="btn btn-secondary" type="button">Go!</button>
+      </span>
+    </div>
+  </div>
+</div>

pages/map/mapCtrl.js

@@ -0,0 +1,61 @@
+app.controller('mapCtrl',function($scope,$http,uploadReceiptService) {
+
+
+  // data 
+  var traderGeoData = [
+    { Latitude:54.04,Longitude:2.80,trader:"sample_1" },
+    { Latitude:54.04,Longitude:2.80,trader:"sample_2" },
+    { Latitude:54.01,Longitude:2.78,trader:"sample_3" },
+  ];
+  
+  var map = L.map('map').setView([54.0472, -2.8018], 13);
+        mapLink = 
+            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
+        L.tileLayer(
+            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; ' + mapLink + ' Contributors',
+            maxZoom: 18,
+            }).addTo(map);
+
+var svgLayer = L.svg();
+svgLayer.addTo(map);
+
+var svg = d3.select("#map").select("svg");
+var g = d3.select("#map").select("svg").select('g');
+g.attr("class", "leaflet-zoom-hide");
+
+
+	/* We simply pick up the SVG from the map object */
+	var svg = d3.select("#map").select("svg"),
+	g = svg.append("g");
+	
+	d3.json("../pages/map/circles.json", function(collection) {
+		/* Add a LatLng object to each item in the dataset */
+		collection.objects.forEach(function(d) {
+			d.LatLng = new L.LatLng(d.circle.coordinates[0],
+									d.circle.coordinates[1])
+		})
+		
+		var feature = g.selectAll("circle")
+			.data(collection.objects)
+			.enter().append("circle")
+			.style("stroke", "black")  
+			.style("opacity", .6) 
+			.style("fill", "red")
+			.attr("r", 20);  
+		
+		map.on("viewreset", update);
+		update();
+
+		function update() {
+      console.log("update!");
+			feature.attr("transform", 
+			function(d) { 
+				return "translate("+ 
+					map.latLngToLayerPoint(d.LatLng).x +","+ 
+					map.latLngToLayerPoint(d.LatLng).y +")";
+				}
+			)
+		}
+	})			 
+})