CODEWITHSUNDEEP
jsond3.jsleaflet
user5323957
user5323957

Reputation: 552

Getting Uncaught TypeError: Cannot read property 'length' of undefined on leafletjs

I Created World Map Using leafletjs And Which Displays Data From https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json My Output When Radius & Colors Are Constant Looks Like enter image description here

However When I tried To Add Scale For Radius And Color Getting Error Which Says Uncaught TypeError: Cannot read property 'length' of undefined enter image description here

I Think Its Because Of The Way I Implemented It But Not Sure What Is The Correct Way My Codes Are 

// load and display the World
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json", function (error, data) {
    var color = d3.scale.category20c();
    var map = L.map('map', {
        center: [20.0, 5.0],
        minZoom: 2,
        zoom: 2
    });
    L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
        subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
    }).addTo(map);
    data.features.forEach(function (data2) {
        var radiusScale = d3.scale.linear()
					.domain(d3.extent(data2.features, function (d) {
					    return +d.properties.mass;
					}))
					.range([2, 100]);
        var coordinates = ([+data2.properties.reclat, +data2.properties.reclong]);
        console.log(coordinates);
        var circle = L.circle([coordinates[0], coordinates[1]], radiusScale(+d.properties.mass), {
            color: function (d, i) {
                return color(i);
            },
            fillColor: '#f03',
            fillOpacity: 0.5
        }).addTo(map);
    });
});
<!DOCTYPE html>
<html>
<head>
    <title>Forced Layout</title>
    <meta charset="utf-8" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/d3/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
    <script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2'></script>
    <link href="demo.css" rel="stylesheet" />
</head>
<body>
    <!--
       <div class="mainContainer text-center">
        <div id="chart"></div>
    </div>
      -->

    <div id="map"></div>
    <script src="../Scripts/jquery-2.2.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="demo.js"></script>
</body>
</html>

Fiddle Link

Upvotes: 1

Views: 1402

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

The scale calculation: 

  var radiusScale = d3.scale.linear()
    .domain(d3.extent(data.features, function(d) {
      return +d.properties.mass;
    }))
    .range([2, 100]);

linear scale code should not be inside the for loop it should be before the for loop.

Working code here

Upvotes: 1

Related Questions