I have two pieces of data; one is nonSpatial Jobs data and one is a spatial grid (polygon that was turned into geoJson). They are being served through separate API's/ajax calls. A primary-foreign key was created to link the two datasets(Cell ID or CID that is created from the southwest coordinate of each grid cell. Ex n89, w113 = CID:n89w113). My goal is for the user to be able to create and display the Jobs data based on the grid cell. Thus fa, I have not been able to achieve this. Assuming that a job already exist with a certain CID (but this job has no spatial value-lat/lng) and there is a corresponding grid cell that has that same CID and is spatial located on a map, how can I use Leaflet (or just javascript) to display the information for the Job corresponding to that grid cell (using a mouseover/click event and popup method like .bindPopup)? Here's my current logic, but I think there is something amiss...
var globalArrayJobsCID = [];
$.ajax for Jobs data{
...
data.forEach(function (value) {
var cid = value.cid;
globalArrayJobsCID.push(cid);
...
};
$.getJSON("url', function(data) {
grid = L.geoJson(data, {...};
onEachFeature: function(feature, layer) {
var id = feature.properties.cid;
globalJobsArrayCID.forEach (item) {
if(item == id) {
layer.bindPopup(<Jobs data>);
});
};