CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
Deeba Yavrom
Deeba Yavrom

Reputation: 91

Supplement local data for geocoder using Mapbox GL JS

I am running a map of the location of a few facilities with their name and coordinate data. I want the geocoder to be able to search for the name of the facility.

Mapbox has a great example of this, but their example shows a use case where the dataset is loaded INTO the actual code. My dataset is much larger and it is currently located on a .geojson file in the project folder.

How can I transform this code to work for my example?

I tried to call back my dataset into the geocoder code by using 

  var myData =getSource('BRdata');

then calling 

 for (var i = 0; i < myData.features.length; i++) {
    var feature = myData.features[I];

// handle queries with different capitalization than the source data by calling toLowerCase()
     if (feature.properties.HandlerId.toLowerCase().search(query.toLowerCase()) !== -1) {

     feature['place_name'] = '🌲 ' + feature.properties.HandlerId;
     feature['center'] = feature.geometry.coordinates;
      matchingFeatures.push(feature);
 }
}
  return matchingFeatures;
}

to get the data into the geocoder, but its not working. I get the error "

myData is not defined

A working plunker can be seen here https://plnkr.co/edit/UUaf6OCgvoavwshdUdN9?p=preview

Expected result: Geocoder to call .geojson data into the search field Actual result: Geocoder cannot find the .geojson.

Error: "myData is not defined"

edit added this code which includes the new var myData:

    function forwardGeocoder(query) {
  // Fetch data on server and serve me the raw geojson
  var myData = fetch('test-plnkr.json').then(res => res.json());
    var matchingFeatures = [];
    for (var i = 0; i < myData.features.length; i++) {
    var feature = myData.features[i];
    // handle queries with different capitalization than the source data by calling toLowerCase()
    if (feature.properties.HandlerId.toLowerCase().search(query.toLowerCase()) !== -1) {
    // add a tree emoji as a prefix for custom data results
    // using carmen geojson format: https://github.com/mapbox/carmen/blob/master/carmen-geojson.md
    feature['place_name'] = '🌲 ' + feature.properties.HandlerId;
    feature['center'] = feature.geometry.coordinates;
    //feature['place_type'] = ['park'];
    matchingFeatures.push(feature);
    }
    }
    return matchingFeatures;
    }

map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: forwardGeocoder,
zoom: 14,
placeholder: "Enter search e.g. Lincoln Park",
mapboxgl: mapboxgl
}));

FIX:

copy and paste your geojson inside of:

var customData = { *your geojson data* }

then load the geocoder using the below code

function forwardGeocoder(query) {
var matchingFeatures = [];
for (var i = 0; i < customData.features.length; i++) {
var feature = customData.features[i];
// handle queries with different capitalization than the source data by      calling toLowerCase()
if     (feature.properties.yourPropertyId.toLowerCase().search(query.toLowerCase())   !== -1) {
// add a tree emoji as a prefix for custom data results

feature['place_name'] = '🏢 ' + feature.properties.yourPropertyId;
feature['center'] = feature.geometry.coordinates;
//feature['place_type'] = ['park'];
matchingFeatures.push(feature);
}
}
return matchingFeatures;
}

map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: forwardGeocoder,
zoom: 13,
placeholder: "search for building here",
mapboxgl: mapboxgl
}));

Upvotes: 2

Views: 943

Answers (1)

BDD
BDD

Reputation: 715

TL;DR: getSource is not a function and you need to re-request your data.

getSource is not a function in your plunkr code, so I think you meant to write map.getSource. Even still, map.getSource isn't going to give you the raw GeoJSON data back. Check out this issue on Github in the mapbox-gl-js repository.

The suggestion by Vladimir is to request the data by doing a fetch for it, which would look something like this:

// Fetch data on server and serve me the raw geojson
var myData = fetch('data.json').then(res => res.json());

Upvotes: 3

Related Questions