1

I am trying to use Leaflet.Sync. I want to show in the first map, a heatmap created by projecting an array of points (by using Leaflet-Heat). And at the second map, I want to visualize the same array of points as circles.

To do so, I simply copied and edited the code from jieter. And added a couple of lines to show heatmap and points. But apperently I am making a logical mistake since nothing is projected on my map.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet Sync & HeatMap Test</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet-src.js" crossorigin=""></script>

    <style type="text/css">
        html, body { width: 100%; height: 100%; margin: 0; }
        #map1, #map2 { width: 49.5%; height: 100%; }
        #map1 { float: left; }
        #map2 { float: right; }
    </style>
</head>

<body>
    <div id="map1"></div>
    <div id="map2"></div>
    <script src="L.Map.Sync.js"></script>

<script src="dist/leaflet-heat.js"></script>

<script src="example.js"></script>

    <script type="text/javascript">
        var center = [52.37329359852117, 4.899129867553711];

        var layer1 = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
            maxZoom: 17,
            attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
        });

        var layer2 = L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        });

        var map1 = L.map('map1', {
            layers: [layer1],
            center: center,
            zoom: 14
        });

        map1.attributionControl.setPrefix('');

        var map2 = L.map('map2', {
            layers: [layer2],
            center: center,
            zoom: 14,
            zoomControl: false
        });

        map1.sync(map2);
        map2.sync(map1);


//how I try to map???

Points = Points.map1(function (p) { return [p[0], p[1]]; });
var heat = L.heatLayer(Points).addTo(map1);

var circles = L.circle(Points).addTo(map2);




    </script>
</body>
</html>

And this is the example.js I call: this is the example.js I used:

var Points = [
[52.36357871883421, 4.901500940322876, "1"],
[52.37224229353706, 4.896622002124786, "2"],
[52.37261565705108, 4.8971208930015555, "2"],
[52.37062434850485, 4.894942939281463, "3"],
[52.373103644955755, 4.905285537242889, "3"],
[52.373519576698754, 4.905977547168732, "4"],
[52.373513026622916, 4.906012415885925, "2"],
[52.37262548236409, 4.906870722770691, "1"],
[52.37385690429086, 4.905717372894287, "2107"],
[52.37359981504885, 4.905996322631836, "2298"],
[52.372389674248595, 4.892746210098267, "571"],
[52.372309433699975, 4.892732799053192, "572"],
[52.37387000433956, 4.894344806671143, "240"],
[52.372972642020834, 4.894317984580994, "475"],
[52.37383889171757, 4.8955196142196655, "1756"],
[52.365288640174, 4.890434145927429, "2038"],
[52.37624923624196, 4.8832350969314575, "1078"],
[52.36962374757598, 4.877988696098328, "1047"],
[52.379754808237486, 4.893186092376709, "690"]
[52.384764624206305, 4.883208274841309, "1567"]
];

Is there anyone to point out my mistake?

  • Any errors in the debugger console or network? – TomazicM Jan 28 at 14:27
  • I didn't @TomazicM – gamze Jan 28 at 14:30
  • Well, errors popped up in my debugger when I copy-pasted this code to a plunkr. There should be the syntax error on the missing array comma, and some p._latlng is undefined stuff due to wrong parameters on L.circle constructor. – IvanSanchez Jan 28 at 14:40
1

There are a couple of simple mistakes here and there.

First, you're missing a comma in the data array, at the next-to-last line:

[52.36962374757598, 4.877988696098328, "1047"],
[52.379754808237486, 4.893186092376709, "690"]   // ← Missing comma here
[52.384764624206305, 4.883208274841309, "1567"]
];

Second, you're making a call to Array.prototype.map1 but that fails, and it seems you wanted to call Array.prototype.map instead, i.e.:

Points = Points.map1(function (p) { return [p[0], p[1]]; });  // wrong       
Points = Points.map(function (p) { return [p[0], p[1]]; });  // works

Keep in mind that by mapping the data array you're removing the data for the heatmap weight of each point, and this is not what you might want to do.

Third, you're passing an array of points to the L.circle factory method, but the factory method (and the class constructor) expect one point only. The approach here would be to iterate through the data array and create each circle individually, e.g.:

var circles = L.layerGroup().addTo(map2);

Points.forEach(function (point){
  circles.addLayer(L.circleMarker(point));
})

Keep in mind that there is more than one way to iterate through all elements of an array (e.g. for(var i=0; i<arr.length; i++) loops, for (var i in arr) loops and for (var i of arr) loops, to name a few).

With those three mistakes fixed, the code works (as seen in a working example).

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.