Search code examples
angularjsnode.jsionic-frameworkmapboxturfjs

How to use turf.js with ionic?


I am new to ionic and trying to use turf in ionic app. First i installed it via npm using

npm install turf

This added turf folder in node modules. I copied this in lib folder. Then i added link to turf.min.js in index page.

Its giving this error

turf.featurecollection is not a function

Code used -

  var features = [
            turf.point([-97.502754, 35.463455], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.508269, 35.463245], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.516809, 35.465779], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.515372, 35.467072], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.509363, 35.463053], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.511123, 35.466601], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.518547, 35.469327], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.519706, 35.469659], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.517839, 35.466998], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.508678, 35.464942], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            }),
            turf.point([-97.514914, 35.463453], {
                "marker-color": "#6BC65F",
                "title": "Too Far",
                "marker-size": "small"
            })
        ];

        var fc = turf.featurecollection(features);

        var nearest = turf.nearest(point, fc);

        nearest.properties["marker-color"] = "#25561F";
        nearest.properties["title"] = "Nearest Point";
        nearest.properties["marker-size"] = "large";
        nearest.properties["marker-symbol"] = "star-stroked";

        var nearest_fc = turf.featurecollection([point, nearest]);

        var map = L.mapbox.map('map', 'charuoshan.0n1b363n')
            .setView([35.463453, -97.508014], 14);

        L.mapbox.featureLayer().setGeoJSON(fc).addTo(map);
        L.mapbox.featureLayer().setGeoJSON(nearest_fc).addTo(map);

Solution

  • Looks like a simple typo. It should be featureCollection.