CODEWITHSUNDEEP
javascriptleaflet
user9819024
user9819024

Reputation: 1

Cannot read property '1' of undefined in leaflet.js

I‘m running a code to plot the marker according to their coordination on leaflet after I getJSON from mysql database,

but the system continue getting error as 'Uncaught TypeError: Cannot read property '1' of undefined'.Code is presented below

<html>
<head>
<title>A Leaflet map</title>

<link rel="stylesheet" 
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="crossorigin=""/>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js?ver=1.10.2'></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src="https://unpkg.com/[email protected]/dist/leaflet.js"integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="crossorigin=""></script>

<div id="map"></div>
<style>
#map{ height: 100% }
</style>
</head>
<body>

<script type="text/javascript">
var markerArray = [];
// initialize the map
var map = L.map('map').setView([40.730610, -73.935242], 11.5);

// load a tile layer
L.tileLayer('https://cartodb-basemaps{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',{
attribution: '&copy; <a href=" ">OpenStreetMap</a > &copy; <a href="http://cartodb.com/attributions">CartoDB</a >',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);

var url= "http://dev.spatialdatacapture.org:8827/airbnb";
console.log(url);
$.getJSON( url, function(data){
  $.each(data, function(k,v){

   //var latLng = new google.maps.LatLng(v.points.y, v.points.x);
     var lng = v.longitude;
     var lat = v.latitude;

     var marker = {
       "type":'Feature',
       "properties":
            {
               "id":v.id,
               "host_id":v.host_id,
               "host_listings_count":v.host_listings_count,
               "property_type":v.property_type,
               "room_type":v.room_type,
               "price":v.price,
               "review_scores_rating":v.review_scores_rating,
               "review_scores_accuracy":v.review_scores_accuracy,
               "review_scores_cleaness":v.review_scores_cleaness,
               "review_scores_checkin":v.review_scores_checkin,
               "review_scores_communication":v.review_scores_communication,
               "review_scores_location":v.review_scores_location,
               "review_scores_value":v.review_scores_value,
               "NTACode":v.NTACode,
               "NTAName":v.NTAName,
             },
        "geometry":{
          "type":'Point',
          "coordination" : [lng,lat]
        }
     };

       markerArray.push(marker);

  });
  var geoj = {"type":"FeatureCollection","features": markerArray};


      console.log(geoj);


  L.geoJson(geoj,{
   PointToLayer: function(feature,latlng){
   returnL.circleMarker(latLng,geojsonMarkerOptions).on('mouseover',function(){
     this.bindPopup("NTAName"+feature.properties.NTAName +"</div><div>"+"price"+feature.properties.price+"</div><div>"+"</div>").openPopup();
                   });
                  }
                }).addTo(map);

 });

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

Then I got error: Cannot read property '1' of undefined in leaflet.js Does anyone know what should I do?

Upvotes: 0

Views: 1393

Answers (1)

ghybs
ghybs

Reputation: 53205

The GeoJSON format expects the key "coordinates" in geometry of features, instead of "coordination" in your code.

You can easily check the GeoJSON data that you build using online GeoJSON linting tools.

Furthermore you have 2 typos:

  • PointToLayer option should be pointToLayer (lowercase first letter)
  • returnL.circleMarker should be return L.circleMarker (whitespace between return return and circleMarker)

If that is not enough to remove the error, we would need more information from your side. Ideally share a reproduction example.

Upvotes: 1

Related Questions