0

I am trying to dynamically supply turf.point([coordinate array]) with values from leaflet.draw markers.

I can only find hard coded examples for all turf examples.

I will demonstrate:

// Draw controls
var drawControl = new L.Control.Draw({
    position: 'topright',
    draw: {
        polygon:false,
        polyline: false,
        rectangle: false,
        circle: false,
        marker: {
            icon: cssIcon
        },
    },
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);

     map.on('draw:created', function (e) {
        var type = e.layerType,
            layer = e.layer;

        if (type === 'marker') {
            //Grab Coordinates As Array
        }

        drawnItems.addLayer(layer);
    });

////////////////////////////////
// Pass marker to turf.point
var point = turf.point([*Pass Array Here*], {
    "marker-color": "#6BC65F",
    "title": "Start Point"
});

2 Answers 2

3

You can grab the marker's coordinates from the draw:created event like this: e.layer._latlng

You can then pass these coordinates to your Turf.js function like this:

map.on('draw:created', function (e) {
  var type = e.layerType,
      layer = e.layer;

  if (type === 'marker') {
      //Grab Coordinates As Array
      var lnglat = [e.layer._latlng.lng, e.layer._latlng.lat];
      passToTurf(lnglat)
  }

  drawnItems.addLayer(layer);
});

////////////////////////////////
// Pass marker to turf.point
function passToTurf(lnglat){
  var point = turf.point(lnglat, {
    "marker-color": "#6BC65F",
    "title": "Start Point"
  });
}

Please note that Leaflet 0.7 stores coordinates in [latitude, longitude] pairs while Turf.js uses [longitude, latitude].

-1

this is may be not an answer for your question, but I think it will be valuable for a beginner (like me), playing with leaflet and turf, using toGeoJSON() function directly, without storing points as array first.

This is my code snippet, based on Leaflet.draw provided full.html example (with additional turf.min.js)

    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
        map = new L.Map('map', {layers: [osm], center: new L.LatLng(51.505, -0.04), zoom: 13}),
        drawnItems = L.featureGroup().addTo(map);

    map.addControl(new L.Control.Draw({
        edit: { featureGroup: drawnItems }
    }));

    map.on('draw:created', function(event) {
        var layer = event.layer;

        drawnItems.addLayer(layer);
    });


    //turf control panel on bottom right of map
    var turfControlPanel = L.control({position: 'bottomright'});
    turfControlPanel.onAdd = function(map){
        var div = L.DomUtil.create('div', 'myclass');
        div.innerHTML= "<input id='tin' type='button' value='do tin'/>"
            +"<input id='convex' type='button' value='do convex'/>";
        return div;
    }
    turfControlPanel.addTo(map);

    //store turf results to ease debugging
    var currentConvex;
    var currentTin; 

    //handle clicking on our control panel
    L.DomUtil.get('tin').onclick = function () {
        currentTin = turf.tin(drawnItems.toGeoJSON());
        L.geoJson(currentTin).addTo(map);
    }
    L.DomUtil.get('convex').onclick = function () {
        currentConvex = turf.convex(drawnItems.toGeoJSON());
        L.geoJson(currentConvex).addTo(map);
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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