1

I have got some features in different GeoJSON files.

One of them includes Feature Collections (points and polyline) and the others just points.

I include those files into the Leaflet map using leaflet-omnivore plugin:

var track = omnivore.geojson("xxxx.geojson").addTo(map) 

It is shown on the map as a polyline or a simple point, but I like to show a label including the "properties".

This is the .geojson file:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-100.0947, 56.1581]
    },
    "properties": {
        "object": "aaaa",
        "psn": "lipsum",
        "lat": "lipsum",
        "long": "lipsum"
    }
}

I cannot find the properties into the variable track after the GeoJSON file is loaded.

I try to show a label with object,psn,lat, lon

All the examples I found show how to do that with a JSON object as a variable, but the goal is: how to identify the properties of the every feature once it is loaded through omnivore?

1

You have 2 possible solutions to access the properties of your GeoJSON Feature objects and use them to put in a label / popup / whatever:

  1. Use a customLayer as 3rd argument of omnivore.geojson call. That custom layer must be a Leaflet GeoJSON Layer Group, on which you can use its onEachFeature option to access your Feature objects' properties as they are converted into Leaflet layers, and assign your labels from there.

  2. Use the Omnivore's "ready" event to execute a callback when it finishes loading and converting your GeoJSON data. In this callback, you can access the GeoJSON Layer Group returned by Omnivore, loop on its child layers with its eachLayer method. The Feature object from which each layer was converted can be accessed as the feature member of the layer (layer.feature), so you can access the properties with layer.feature.properties, and assign your labels.

In details:

  1. Build your custom layer with L.geoJSON factory, with null initial data, but specifying its onEachFeature option and assigning your labels in there. Pass this custom layer to your omnivore.geojson call.

Live example: https://plnkr.co/edit/0cBem7HVZO0J2ByxBO6z?p=preview

var customLayer = L.geoJSON(null, {
  onEachFeature: function (feature, layer) {
    var properties = feature.properties;
    // Build the label / tooltip content…
    var content = [];
    for (var key in properties) {
      content.push(key + ': ' + properties[key]);
    }
    // Attach the label / tooltip to the built layer.
    layer.bindTooltip(content.join('<br>'), {
      permanent: true
    });
  }
}).addTo(map);

omnivore.geojson('demo.geojson', null, customLayer);
  1. Call Omnivore the way you are currently doing, but attach a listener on its "ready" event. In the listener, loop through your track Layer Group using its eachLayer method, accessing the Features data with layer.feature.properties and creating your labels.

Live example: https://plnkr.co/edit/gT0bJxOUBJk6PVdLCk5F?p=preview

var track = omnivore.geojson('demo.geojson').addTo(map);

track.on('ready', function () {
  track.eachLayer(function (layer) {
    var properties = layer.feature.properties;
    // Build the label / tooltip content…
    var content = [];
    for (var key in properties) {
      content.push(key + ': ' + properties[key]);
    }
    // Attach the label / tooltip to the layer.
    layer.bindTooltip(content.join('<br>'), {
      permanent: true
    });
  });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.