Search code examples
javascriptleafletsocrata

Socrata views in Leaflet maps

I'm new to programming and I'm trying to display permits information in a leaflet map. The permits data is from a view in Socrata. I follow http://fire.seattle.io/ code to figure out how to do this and managed to recreate the map on my own but when I try to use the desired view I keep getting the error "Uncaught Error: Invalid LatLng object: (null, null)".

The view have several records without coordinates information; I want to filter the view so I can only received valid records, but I haven't figured out how so far. Using a where clause in the API endpoint (using url with resource) I can do the filter but I get an undefined warning and the error "Uncaught TypeError: Cannot read property 'length' of undefined" pointing to my jquery.

The code from the application I'm following use another url to access the data (using url with api/views), but I have not been able to do any filter or selection (keep getting the records with null coordinates).

How to eliminate those records with null values so I can display the data in leaflet map? Any help is appreciated...

The code is...

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Just a test</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<script src='http://fire.seattle.io/js/leaflet/leaflet.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />

<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
$.getJSON('https://data.pr.gov/api/views/93ae-6ffm/rows.json?jsonp=?&max_rows=2', function(results) {
  console.log(results.data);

var map = L.map('map').setView([18.25,-66.45], 9);

   // add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

   $.each(results.data, function(index, value) {
     L.marker([value[28], value[29]]).addTo(map)
     .bindPopup('<h6>' + value[6] + '</h6>' + value[7] + '<br>');
   });

 });

</script>


</body>
</html>

Thanks

Solution

  • It looks like you're encountering results that don't have a valid lat, long location associated with them. For those records, your latitude and longitude fields will be null. In your $.each loop, you can check for those and skip them.

    I'd also recommend using Chris Whong's newer soda-leaflet example instead. It makes use of our modern SODA 2.0 API and also includes some functionality for filtering and styling your data.