Yermo / nativescript-mapbox

:statue_of_liberty: :tokyo_tower: :mount_fuji: Native OpenGL powered Maps, by Mapbox
MIT License
194 stars 94 forks source link

Geocoding (search) services #185

Open d3mac123 opened 6 years ago

d3mac123 commented 6 years ago

Any chance to implement mapbox search (geocode search) anytime soon? Details here https://www.mapbox.com/ios-sdk/ in the Geocoding section.

EddyVerbruggen commented 6 years ago

This is the one, I think: https://www.mapbox.com/geocoding/

Not planned, but looks cool. Seems to be a paid option, right?

d3mac123 commented 6 years ago

It is free up to 50k requests per month. And yes, your link is right,

wyattp11 commented 6 years ago

You mean you want a search field that geocodes on the map itself? Like from this Mapbox GL JS example?

It is easy enough to code yourself and then use a {N} absolute positioned search field on top of the map. Here is my view model, bind/pass {{text}} from your page via js/ts and {{feature}} is where I pop out the results under the field:

const observableModule = require("data/observable");
var ObservableArray = require("data/observable-array").ObservableArray;
const geolocation = require("nativescript-geolocation");
const http = require("http");
var api_key;  //your api key here

function SearchViewModel() {
    var viewModel = new ObservableArray([]);
    viewModel.search = function(text) {
        let userLoc;
        //remove spaces
        let a = text.replace(/\s+/g, "%20");
        return geolocation.getCurrentLocation({
            desiredAccuracy: 3,
            updateDistance: 10,
            maximumAge: 20000,
            timeout: 20000 })
        .then((loc) => {
            if (loc) {
                userLoc = `&proximity=${JSON.stringify(loc.longitude)},${JSON.stringify(loc.latitude)}`;
            }else{userLoc="";}
            console.log(userLoc);
            http.getJSON("https://api.mapbox.com/geocoding/v5/mapbox.places/"+a+".json?"+userLoc+"&types=poi,address,neighborhood,place&access_token="+api_key).then(function (r) {
            // Argument (r) is JSON!
            viewModel.set("feature",r.features);
            }, function (e) {
            // Argument (e) is Error!
            console.log('error');
            console.log(e);
            });
        })
    }
return viewModel;
}
module.exports = SearchViewModel;