0

I am trying to follow an example posted at https://www.mapbox.com/mapbox-gl-js/example/filter-markers/, however in my case, the GeoJSON data is loaded from an external file:

map.on('load', function() {
    map.addSource("cacheData", {
        type: "geojson",
        data: "./data.geojson",

If I'm following the example, I don't seem to have access to the 'markers' variable to iterate through and add each marker to a layer.

In the original version of Mapbox.js, I am able to enable / disable an individual feature .. I don't seem to be able to do that the same way in mapboxGL.

Is there an event or something I can use to possibly modify the data as it's being loaded to add each marker from the file to a layer?

RobLabs
  • 2,257
  • 2
  • 18
  • 20
Tim AtLee
  • 917
  • 1
  • 10
  • 17

1 Answers1

1

In the example from Mapbox that you posted, there is var markers = {} declaration. For example,

var markers = {
  // properties snipped, see link for GeoJson data
}

But in your map.on() call, it references ./data.geojson. So you don't actually have a markers object to work with.

It may be easier to separate the map.addsource() from pulling in the GeoJson from disk.

Here is one approach you could using Jquery to getJSON data from a local path or URL first, then you can use the result in map.on.

    <!-- 1. Add these JavaScript inclusions in the head of your page -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.0.0.min.js">
      </script>

    <script type="text/javascript">
    $(document).ready(function() {

      var geoJsonFile = "./data.geojson";


      $.getJSON(geoJsonFile, function(markers){

        console.log(markers.type);

      }); // getJSON
    });  // $(document)
RobLabs
  • 2,257
  • 2
  • 18
  • 20
  • 1
    Ran into an issue with loading the content from a file (instead of from a server). Fix at https://stackoverflow.com/questions/21855355/loading-a-text-file-through-ajax-gives-restricted-uri-error helped. Thanks! – Tim AtLee Jun 27 '16 at 03:43