Search code examples
leafletmapboxturfjs

Leaflet-Omnivore make external file.geojson available to javascript variable


I'm using the Omnivore extension to load my GeoJSON files into a Mapbox/ Leaflet map. Later, I'm using Turf.js on this data.

I'm loading the external GeoJSON file to the map as a customLayer, but having trouble making the GeoJSON data available in the variable pts for use later.

var polyLayer = L.geoJson(null, {
    style: function(feature) {
        return { color: '#f00', weight: 1, opacity: 0.9
		};
    }
}).addTo(map);

var polys = omnivore.geojson('polys.geojson', null, polyLayer);


var ptsLayer = L.geoJson(null, {
	onEachFeature: labelEachFeature, 
	pointToLayer: function (feature, latlng) {
		return L.circleMarker(latlng, style(feature))
	;}
});

var pts = omnivore.geojson('pts.geojson', null, ptsLayer);

polyLayer.on('mouseover', function(e) {
	var matchingPoints = turf.featurecollection([])
	matchingPoints.features = pts.features.filter(function(pt) {
	  if(pt.properties.servesbldg === e.layer.feature.properties.bldg_no) return true
	})

	ptsLayer.setGeoJSON(matchingPoints);
});


function getPoints(building, pts) {
  var matchingPoints = turf.featurecollection([])
  matchingPoints.features = pts.features.filter(function(pt) {
	if(pt.properties.servesbldg === building.properties.bldg_no) return true
  })
  return matchingPoints
}   

Here's a GIST of what I've got including the GeoJSON files.


Solution

  • Instead of using omnivore to grab the pts layer... Why not declare a pts variable, use jQuery.getJSON to grab pts.geojson and assign that response to the pts variable, then call L.geoJson(pts).addTo(map). Then you have the layer added, and you have the original geojson structure available for use in other places, like you need.