map with moving circle

app/routes.py

@@ -5,4 +5,4 @@
 @app.route('/')
 @app.route('/index')
 def index():
-    return render_template('index.html')
+    return render_template('index.html')

app/static/css/style.css

@@ -1 +1 @@
-#leafletmap { height: 600px;}
+#map { height: 650px;}

app/static/js/amsterdam.js

@@ -1,44 +1,103 @@
-// function to draw the amsterdam map
-// function draw(geo_data) {
-//     "use strict";
-//     var margin = 75,
-//         width = 1400-margin,
-//         height = 600-margin;
-
-//     var svg = d3.select("#geoMap")
-//                 .append("svg")
-//                 .attr("width", width + margin)
-//                 .attr("height", height + margin)
-//                 .append("g")
-//                 .attr("class", "map");
-
-//     var projection = d3.geo.mercator()
-//                            .scale(150)
-//                            .translate( [width / 2, height / 1.5]);
-
-//     var path = d3.geo.path().projection(projection);
-
-//     var map = svg.selectAll('path')
-//                  .data(geo_data.features)
-//                  .enter()
-//                  .append('path')
-//                  .attr('d', path)
-//                  .style('fill', 'lightBlue')
-//                  .style('stroke', 'black')
-//                  .style('stroke-width', 0.5);
-// };
-
-// var adamMap = d3.json("../data/world_countries.json");
-
-// d3.json("../data/world_countries.json", draw);
+// LEAFLET.JS
+//set up map of amsterdam
+var map = L.map('map', {
+    scrollWheelZoom: false
 
-var adamMap = L.map('leafletMap').setView([52.3667, 4.8945], 13);
+}).setView([52.3667, 4.8945], 13);
 
+// put mapbox layer on 
 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
     maxZoom: 18,
     id: 'mapbox/streets-v11',
     tileSize: 512,
     zoomOffset: -1,
     accessToken: 'pk.eyJ1Ijoibmlsc2xlaCIsImEiOiJjazZ1bDN0OWEwNjUwM21vYTB6Nmk3a3ZpIn0.mCcdD-MMyecijCUrRJKNCg'
-}).addTo(adamMap);
+}).addTo(map);
+
+// //MAPBOX.JS
+// mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw'
+
+// //Setup mapbox-gl map
+// var map = new mapboxgl.Map({
+//     container: 'map', // container id
+//     style: 'mapbox://styles/enjalot/cihmvv7kg004v91kn22zjptsc',
+//     center: [52.3667, 4.8945],
+//     zoom: 13,
+
+// })
+// map.scrollZoom.disable()
+// map.addControl(new mapboxgl.Navigation());
+
+
+
+// add svg element to leaflet overlay pane
+var svg = d3.select(map.getPanes().overlayPane).append("svg");
+
+var g = svg.append("g").attr("class", "leaflet-zoom-hide");
+
+// attempt to put a layer on the map with amsterdam geo json file
+// // put geoJson of Amsterdam over it
+// d3.json("amsterdam.json", function(error, collection) {
+//     if (error) throw error;
+// })
+
+// // function to render d3 polygon to leaflet polygon
+// function projectPoint(x, y) {
+//     var point = map.latLngToLayerPoint(new L.LatLng(y, x));
+//     this.stream.point(point.x, point.y);
+// }
+
+// // convert geoJSON to svg
+// var transform = d3.geo.transform({point, projectPoint}),
+//     path = d3.geo.path().projection(transform);
+
+// var feature = g.selectAll("path")
+//     .data(collection.features)
+//     .enter().append("path");
+
+// feature.attr("d", path);
+
+// var bounds = path.bounds(collection),
+//     topLeft = bounds[0],
+//     bottomRight = bounds[1];
+
+// // set dimension of svg
+// svg.attr("width", bottomRight[0] - topLeft[0])
+//    .attr("height", bottomRight[1] - topLeft[1])
+//    .style("left", topLeft[0] + "px")
+//    .style("top", topLeft[1] + "px");
+
+// g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
+
+// create a fisheye distortion as magnifying glass
+var fisheye = d3.fisheye.circular()
+    .radius(100)
+    .distortion(5);
+
+var lens = svg.append('circle')
+    .attr('class', 'lens')
+    .attr('fill-opacity', 0.1)
+    .attr('r', fisheye.radius());
+
+// set bounds of svg
+svg .attr("width", 1300)
+    .attr("height", 650)
+    //.style("left", topLeft[0] + "px")
+    //.style("top", topLeft[1] + "px");
+
+g   .attr("transform", "translate(" + 650 + "," + 1108 + ")");
+
+
+
+// on mousemove move the fisheye over map
+svg.on('mousemove', function() {
+    fisheye.focus(d3.mouse(this));
+
+    const mouseX = d3.mouse(this)[0];
+    const mouseY = d3.mouse(this)[1];
+    const r = fisheye.radius();
+
+    lens.attr('cx', mouseX)
+        .attr('cy', mouseY)
+});

app/static/js/fisheye.js

@@ -0,0 +1,86 @@
+// Fisheye plugin
+(function() {
+    d3.fisheye = {
+      scale: function(scaleType) {
+        return d3_fisheye_scale(scaleType(), 3, 0);
+      },
+      circular: function() {
+        var radius = 200,
+            distortion = 2,
+            k0,
+            k1,
+            focus = [0, 0];
+
+        function fisheye(d) {
+          var dx = d.x - focus[0],
+              dy = d.y - focus[1],
+              dd = Math.sqrt(dx * dx + dy * dy);
+          if (!dd || dd >= radius) return {x: d.x, y: d.y, z: dd >= radius ? 1 : 10};
+          var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
+          return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};
+        }
+
+        function rescale() {
+          k0 = Math.exp(distortion);
+          k0 = k0 / (k0 - 1) * radius;
+          k1 = distortion / radius;
+          return fisheye;
+        }
+
+        fisheye.radius = function(_) {
+          if (!arguments.length) return radius;
+          radius = +_;
+          return rescale();
+        };
+
+        fisheye.distortion = function(_) {
+          if (!arguments.length) return distortion;
+          distortion = +_;
+          return rescale();
+        };
+
+        fisheye.focus = function(_) {
+          if (!arguments.length) return focus;
+          focus = _;
+          return fisheye;
+        };
+
+        return rescale();
+      }
+    };
+
+    function d3_fisheye_scale(scale, d, a) {
+
+      function fisheye(_) {
+        var x = scale(_),
+            left = x < a,
+            range = d3.extent(scale.range()),
+            min = range[0],
+            max = range[1],
+            m = left ? a - min : max - a;
+        if (m == 0) m = max - min;
+        return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a;
+      }
+
+      fisheye.distortion = function(_) {
+        if (!arguments.length) return d;
+        d = +_;
+        return fisheye;
+      };
+
+      fisheye.focus = function(_) {
+        if (!arguments.length) return a;
+        a = +_;
+        return fisheye;
+      };
+
+      fisheye.copy = function() {
+        return d3_fisheye_scale(scale.copy(), d, a);
+      };
+
+      fisheye.nice = scale.nice;
+      fisheye.ticks = scale.ticks;
+      fisheye.tickFormat = scale.tickFormat;
+      return d3.rebind(fisheye, scale, "domain", "range");
+    }
+  })();

app/templates/base.html

@@ -14,7 +14,14 @@
         <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
         integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
         crossorigin=""></script>
+
+        <!-- Mapbox JS-->
+        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
+        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />
 
+        <!-- Script for Fisheye -->
+        <script type='text/javascript' src='../static/js/fisheye.js'></script>
+
         <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>

app/templates/index.html

@@ -9,7 +9,10 @@ <h4>Navigation</h4>
 
   <div id="geoMap" class="row">
 
-    <div id='leafletMap'></div>
+    <div id='map'></div>
+    <script type="text/javascript">
+        // var amsterdamGeo = {{ data |safe}};  
+    </script>
     <script type="text/javascript" src="../static/js/amsterdam.js"></script>
 
   </div>