<commit_before>---
layout: example
title: turf-midpoint
description: Takes two point features and returns the mid point.
tags:
    - measurement
---
<div id='map'></div>

<script>
L.mapbox.accessToken = '<KEY>';
var map = L.mapbox.map('map', 'morganherlocker.kgidd73k')
    .setView([35.465453, -97.513914], 15);

var point1 = turf.point(-97.514914, 35.463453, {
    "marker-color": "#6BC65F",
    "marker-size": "small"
});

var point2 = turf.point(-97.517839, 35.466998, {
    "marker-color": "#6BC65F",
    "marker-size": "small"
});

var midpoint = turf.midpoint(point1, point2);
midpoint.properties = {
    "marker-color": "#25561F",
    "marker-size": "large",
    "marker-symbol": "star-stroked"
}

var linestring = turf.linestring([point1.geometry.coordinates,
        point2.geometry.coordinates,
        midpoint.geometry.coordinates], {
    "stroke": "#6BC65F",
    "stroke-width": 5
});
var pts = turf.featurecollection([point1, point2]);

var ptsLayer = L.mapbox.featureLayer().setGeoJSON(pts).addTo(map);
var midPointLayer = L.mapbox.featureLayer().addTo(map);
var lineLayer = L.mapbox.featureLayer().addTo(map);

ptsLayer.eachLayer(function(layer) {
    layer.options.draggable = true;
    layer.on('drag', function(e) {
        calculateMidpoint();
    });
});

function calculateMidpoint() {
    var pts = ptsLayer.getLayers();
    var linestring = turf.linestring([pts[0].toGeoJSON().geometry.coordinates, pts[1].toGeoJSON().geometry.coordinates], 
        {
            "stroke": "#6BC65F",
            "stroke-width": 5
        });
    lineLayer.featureLayer().setGeoJSON(linestring);

}
</script><commit_msg>interactive midpoint calculation<commit_after>---
layout: example
title: turf-midpoint
description: Takes two point features and returns the mid point.
tags:
    - measurement
---
<div id='map'></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script>

<script>
L.mapbox.accessToken = '<KEY>';
var map = L.mapbox.map('map', 'morganherlocker.kgidd73k')
    .setView([35.465453, -97.513914], 15);

var pt1 = turf.point(-97.514914, 35.463453, {
    "marker-color": "#6BC65F",
});
var pt2 = turf.point(-97.517839, 35.466998, {
    "marker-color": "#6BC65F",
});
var pts = turf.featurecollection([pt1, pt2]);

var ptsLayer = L.mapbox.featureLayer().setGeoJSON(pts);
var midPointLayer = L.mapbox.featureLayer().addTo(map);
var lineLayer = L.mapbox.featureLayer().addTo(map);

ptsLayer.eachLayer(function(layer) {
    layer.options.draggable = true;
    layer.on('drag', function(e) {
        calculateMidpoint();
    });
});

ptsLayer.addTo(map);
calculateMidpoint();

function calculateMidpoint() {
    var pt1 = ptsLayer.getLayers()[0].toGeoJSON();
    var pt2 = ptsLayer.getLayers()[1].toGeoJSON();
    var linestring = turf.linestring([pt1.geometry.coordinates, pt2.geometry.coordinates], 
        {
            "stroke": "#6BC65F",
            "stroke-width": 5
        });
    lineLayer.setGeoJSON(linestring);

    var midpoint = turf.midpoint(pt1, pt2);
    midpoint.properties = {
        "marker-color": "#25561F",
        "marker-size": "large",
        "marker-symbol": "star-stroked"
    }
    midPointLayer.setGeoJSON(midpoint);
}
</script>
{'fraction_non_alphanumeric': 0.17630683575626352, 'fraction_numerical': 0.050417568821527994, 'mean_word_length': 3.6869565217391305, 'pattern_counts': {'":': 18, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5508230', 'n_tokens_mistral': 1260, 'n_tokens_neox': 1157, 'n_words': 194}