turf.lineSlice

Takes a line, a start Point, and a stop point and returns a subsection of the line in-between those points. The start & stop points don't need to fall exactly on the line.

This can be useful for extracting only the part of a route between waypoints.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <link rel="stylesheet" href="assets/css/styles.css" type="text/css">
    <script src="//cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
    <script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" type="text/javascript"></script>
    <title>Turf and OpenLayers 3 - lineSlice</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <button id="clear">clear</button>
    <script type="text/javascript">

      // Declare linestring coordinates
      var coordinates = [
        [-1.616687, 47.246036], [-1.616327, 47.245900], [-1.615911, 47.245744],
        [-1.615646, 47.245644], [-1.615469, 47.245580], [-1.615321, 47.245529],
        [-1.615191, 47.245492], [-1.614940, 47.245423], [-1.614411, 47.245301],
        [-1.614134, 47.245240], [-1.613885, 47.245192], [-1.613782, 47.245174],
        [-1.613454, 47.245128], [-1.613241, 47.245104], [-1.612866, 47.245075],
        [-1.612653, 47.245067], [-1.612559, 47.245065], [-1.612470, 47.245063],
        [-1.612048, 47.245067], [-1.611894, 47.245071], [-1.611746, 47.245078],
        [-1.611304, 47.245118], [-1.611270, 47.245122], [-1.611014, 47.245160],
        [-1.609556, 47.245417], [-1.609427, 47.245440], [-1.609121, 47.245494],
        [-1.609078, 47.245502], [-1.608623, 47.245582], [-1.608623, 47.245582],
        [-1.608302, 47.245638], [-1.608178, 47.245658], [-1.608084, 47.245668],
        [-1.608045, 47.245670], [-1.607970, 47.245671], [-1.607933, 47.245669],
        [-1.607905, 47.245666], [-1.607870, 47.245663], [-1.607830, 47.245656],
        [-1.607804, 47.245651], [-1.607781, 47.245646], [-1.607760, 47.245641],
        [-1.607713, 47.245627], [-1.607678, 47.245616], [-1.607651, 47.245608],
        [-1.607620, 47.245597], [-1.607549, 47.245570], [-1.607549, 47.245570],
        [-1.607298, 47.245472], [-1.607045, 47.245369], [-1.606971, 47.245338],
        [-1.606864, 47.245295], [-1.606864, 47.245295], [-1.606398, 47.245112],
        [-1.606259, 47.245085], [-1.606222, 47.245083], [-1.606175, 47.245081],
        [-1.606097, 47.245084], [-1.606065, 47.245087], [-1.606030, 47.245093],
        [-1.605995, 47.245099], [-1.605946, 47.245113], [-1.605894, 47.245129],
        [-1.605815, 47.245166], [-1.605744, 47.245212], [-1.605673, 47.245273],
        [-1.605597, 47.245355], [-1.605568, 47.245390], [-1.605403, 47.245586],
        [-1.605237, 47.245780], [-1.605012, 47.246006], [-1.604916, 47.246097],
        [-1.604844, 47.246165], [-1.604776, 47.246227], [-1.604740, 47.246258],
        [-1.604686, 47.246294], [-1.604647, 47.246319], [-1.604647, 47.246319],
        [-1.604609, 47.246342], [-1.604586, 47.246356], [-1.604554, 47.246373],
        [-1.604525, 47.246387], [-1.604478, 47.246408], [-1.604415, 47.246432],
        [-1.604415, 47.246432], [-1.604344, 47.246455], [-1.604056, 47.246538],
        [-1.604056, 47.246538], [-1.603988, 47.246559], [-1.603948, 47.246573],
        [-1.603901, 47.246591], [-1.603877, 47.246600], [-1.603849, 47.246612],
        [-1.603800, 47.246637], [-1.603755, 47.246663], [-1.603727, 47.246679],
        [-1.603677, 47.246712], [-1.603616, 47.246754], [-1.603275, 47.246991],
        [-1.603275, 47.246991], [-1.602920, 47.247239], [-1.602846, 47.247290],
        [-1.602815, 47.247310], [-1.602775, 47.247336], [-1.602775, 47.247336],
        [-1.602500, 47.247505], [-1.602500, 47.247505], [-1.602445, 47.247539],
        [-1.602445, 47.247539], [-1.602422, 47.247553], [-1.602397, 47.247568],
        [-1.602343, 47.247602], [-1.602258, 47.247657], [-1.602044, 47.247805],
        [-1.601952, 47.247868], [-1.601880, 47.247919], [-1.601780, 47.247989],
        [-1.601720, 47.248030], [-1.601430, 47.248238], [-1.601141, 47.248449],
        [-1.600665, 47.248805], [-1.600665, 47.248805], [-1.600618, 47.248839],
        [-1.600618, 47.248839], [-1.600438, 47.248973], [-1.600438, 47.248973],
        [-1.600388, 47.249010], [-1.600388, 47.249010], [-1.599700, 47.249523],
        [-1.599623, 47.249581], [-1.599587, 47.249606], [-1.599559, 47.249625],
        [-1.599525, 47.249646], [-1.599486, 47.249669], [-1.599444, 47.249692],
        [-1.599409, 47.249711], [-1.599409, 47.249711], [-1.599367, 47.249729],
        [-1.599336, 47.249741], [-1.599311, 47.249750], [-1.599283, 47.249759],
        [-1.599283, 47.249759], [-1.599254, 47.249769], [-1.599226, 47.249778],
        [-1.599203, 47.249784], [-1.599158, 47.249793], [-1.599121, 47.249799],
        [-1.599053, 47.249806], [-1.598992, 47.249809], [-1.598940, 47.249808],
        [-1.598888, 47.249806], [-1.598848, 47.249801], [-1.598766, 47.249786],
        [-1.598691, 47.249767], [-1.598623, 47.249743], [-1.598561, 47.249716],
        [-1.598532, 47.249701], [-1.598489, 47.249677], [-1.598446, 47.249650],
        [-1.598407, 47.249625], [-1.598357, 47.249590], [-1.598306, 47.249549],
        [-1.598224, 47.249483], [-1.598224, 47.249483], [-1.597904, 47.249219],
        [-1.597904, 47.249219], [-1.597452, 47.248847], [-1.596849, 47.248331],
        [-1.596239, 47.247808], [-1.596196, 47.247772], [-1.596132, 47.247719],
        [-1.596082, 47.247679], [-1.596038, 47.247643], [-1.595991, 47.247605],
        [-1.595943, 47.247566], [-1.595896, 47.247528], [-1.595846, 47.247488],
        [-1.595792, 47.247447], [-1.595713, 47.247385], [-1.595170, 47.246979],
        [-1.594628, 47.246574], [-1.594469, 47.246454], [-1.594329, 47.246344],
        [-1.593950, 47.246045], [-1.593950, 47.246045], [-1.592314, 47.244754],
        [-1.591838, 47.244376], [-1.591777, 47.244325], [-1.591748, 47.244299],
        [-1.591715, 47.244270], [-1.591698, 47.244251], [-1.591681, 47.244235],
        [-1.591666, 47.244218], [-1.591642, 47.244192], [-1.591625, 47.244172],
        [-1.591609, 47.244152], [-1.591597, 47.244135], [-1.591579, 47.244109],
        [-1.591566, 47.244088], [-1.591555, 47.244067], [-1.591542, 47.244040],
        [-1.591530, 47.244016], [-1.591523, 47.243997], [-1.591516, 47.243980],
        [-1.591510, 47.243963], [-1.591505, 47.243943], [-1.591498, 47.243917],
        [-1.591492, 47.243876], [-1.591488, 47.243829], [-1.591488, 47.243799],
        [-1.591489, 47.243781], [-1.591490, 47.243766], [-1.591492, 47.243752],
        [-1.591495, 47.243727], [-1.591500, 47.243702], [-1.591506, 47.243674],
        [-1.591512, 47.243640], [-1.591630, 47.243243], [-1.591630, 47.243243],
        [-1.591729, 47.242911], [-1.591748, 47.242838], [-1.591765, 47.242745],
        [-1.591795, 47.242572], [-1.591810, 47.242494], [-1.591927, 47.241989],
        [-1.592115, 47.241186], [-1.592142, 47.241070], [-1.592147, 47.241041],
        [-1.592155, 47.240995], [-1.592159, 47.240968], [-1.592164, 47.240935],
        [-1.592165, 47.240902], [-1.592165, 47.240883], [-1.592162, 47.240834],
        [-1.592156, 47.240793], [-1.592146, 47.240752], [-1.592135, 47.240725],
        [-1.592124, 47.240702], [-1.592107, 47.240668], [-1.592089, 47.240643],
        [-1.592070, 47.240619], [-1.592039, 47.240586], [-1.591982, 47.240536],
        [-1.591939, 47.240507], [-1.591897, 47.240481], [-1.591826, 47.240442],
        [-1.591284, 47.240170], [-1.591284, 47.240170], [-1.589664, 47.239360],
        [-1.589585, 47.239320], [-1.589338, 47.239197], [-1.589263, 47.239159],
        [-1.589115, 47.239086], [-1.588942, 47.239000], [-1.588679, 47.238869],
        [-1.588513, 47.238786], [-1.588365, 47.238716], [-1.588063, 47.238581],
        [-1.587990, 47.238550], [-1.587753, 47.238446], [-1.587687, 47.238417],
        [-1.587529, 47.238346], [-1.587253, 47.238216], [-1.587018, 47.238099],
        [-1.587018, 47.238099], [-1.586766, 47.237967], [-1.586686, 47.237925],
        [-1.586624, 47.237890], [-1.586585, 47.237868], [-1.586546, 47.237845],
        [-1.586515, 47.237826], [-1.586491, 47.237810], [-1.586432, 47.237769],
        [-1.586399, 47.237746], [-1.586372, 47.237725], [-1.586132, 47.237531],
        [-1.586050, 47.237466], [-1.585975, 47.237407], [-1.585892, 47.237343],
        [-1.585331, 47.236933], [-1.584975, 47.236674], [-1.584922, 47.236635],
        [-1.584315, 47.236193], [-1.583746, 47.235778], [-1.583700, 47.235744],
        [-1.583500, 47.235599], [-1.583234, 47.235406], [-1.583171, 47.235364],
        [-1.583137, 47.235342], [-1.583090, 47.235311], [-1.583016, 47.235268],
        [-1.582913, 47.235216], [-1.582859, 47.235191], [-1.582789, 47.235158],
        [-1.582405, 47.234984], [-1.582405, 47.234984], [-1.581812, 47.234720],
        [-1.581638, 47.234648], [-1.581432, 47.234565], [-1.581199, 47.234470],
        [-1.581043, 47.234402], [-1.579952, 47.233910], [-1.578873, 47.233422],
        [-1.578587, 47.233290], [-1.578315, 47.233156], [-1.577910, 47.232963],
        [-1.577509, 47.232782], [-1.577509, 47.232782], [-1.577179, 47.232634],
        [-1.577110, 47.232603], [-1.576786, 47.232462], [-1.576562, 47.232363],
        [-1.576386, 47.232284], [-1.576059, 47.232138], [-1.575812, 47.232027],
        [-1.575438, 47.231857], [-1.575217, 47.231754], [-1.575078, 47.231685],
        [-1.574906, 47.231596], [-1.574743, 47.231502], [-1.574635, 47.231437],
        [-1.574513, 47.231361], [-1.574393, 47.231283], [-1.574189, 47.231140],
        [-1.574021, 47.231011], [-1.573948, 47.230952], [-1.573870, 47.230887],
        [-1.573466, 47.230541], [-1.573429, 47.230507], [-1.573306, 47.230375],
        [-1.573146, 47.230208], [-1.572868, 47.229946], [-1.572868, 47.229946],
        [-1.572548, 47.229645], [-1.572364, 47.229481], [-1.572211, 47.229345],
        [-1.572119, 47.229262], [-1.571721, 47.228894], [-1.571598, 47.228788],
        [-1.571510, 47.228712], [-1.571409, 47.228619], [-1.571138, 47.228366],
        [-1.571009, 47.228249], [-1.570893, 47.228149], [-1.570573, 47.227889],
        [-1.570159, 47.227558], [-1.569980, 47.227415], [-1.569586, 47.227100],
        [-1.569586, 47.227100], [-1.569266, 47.226843], [-1.569120, 47.226729],
        [-1.568782, 47.226474], [-1.568656, 47.226377], [-1.568572, 47.226310],
        [-1.568423, 47.226191], [-1.568314, 47.226104], [-1.568287, 47.226082],
        [-1.568258, 47.226060], [-1.568223, 47.226033], [-1.568178, 47.226000],
        [-1.568135, 47.225968], [-1.568085, 47.225933], [-1.568012, 47.225883],
        [-1.567946, 47.225841], [-1.567841, 47.225775], [-1.567647, 47.225655],
        [-1.567578, 47.225611], [-1.567465, 47.225532], [-1.567423, 47.225502],
        [-1.567379, 47.225468], [-1.567338, 47.225438], [-1.567235, 47.225358],
        [-1.567063, 47.225226], [-1.566930, 47.225127], [-1.566850, 47.225071],
        [-1.566728, 47.224993], [-1.566569, 47.224895], [-1.566422, 47.224809],
        [-1.566324, 47.224754], [-1.566324, 47.224754], [-1.566092, 47.224620],
        [-1.565904, 47.224512], [-1.565813, 47.224457], [-1.565600, 47.224328],
        [-1.565444, 47.224229], [-1.565444, 47.224229], [-1.565344, 47.224167],
        [-1.565272, 47.224119], [-1.565148, 47.224035], [-1.564992, 47.223926],
        [-1.564766, 47.223760], [-1.564766, 47.223760], [-1.564701, 47.223711],
        [-1.564533, 47.223570], [-1.564476, 47.223517], [-1.564429, 47.223473],
        [-1.564217, 47.223252], [-1.564087, 47.223091], [-1.563991, 47.222968],
        [-1.563653, 47.222519], [-1.563245, 47.221978], [-1.563210, 47.221932],
        [-1.563176, 47.221887], [-1.563069, 47.221757], [-1.563007, 47.221685],
        [-1.562710, 47.221342], [-1.562710, 47.221342], [-1.562681, 47.221306],
        [-1.562556, 47.221151], [-1.562438, 47.220998], [-1.562320, 47.220836],
        [-1.562224, 47.220697], [-1.562135, 47.220558], [-1.562025, 47.220374],
        [-1.562008, 47.220345], [-1.561920, 47.220184], [-1.561876, 47.220099],
        [-1.561773, 47.219888], [-1.561681, 47.219679], [-1.561629, 47.219567],
        [-1.561611, 47.219531], [-1.561588, 47.219489], [-1.561533, 47.219403],
        [-1.561490, 47.219340], [-1.561451, 47.219295], [-1.561427, 47.219269],
        [-1.561397, 47.219237], [-1.561364, 47.219211], [-1.561313, 47.219168],
        [-1.561272, 47.219137], [-1.561223, 47.219103], [-1.561162, 47.219064],
        [-1.561114, 47.219034], [-1.560988, 47.218959], [-1.560890, 47.218901],
        [-1.560769, 47.218829], [-1.560688, 47.218781], [-1.560625, 47.218742],
        [-1.560536, 47.218684], [-1.560381, 47.218582], [-1.560381, 47.218582],
        [-1.560313, 47.218537], [-1.560251, 47.218496], [-1.560198, 47.218459],
        [-1.559864, 47.218226], [-1.559793, 47.218176], [-1.559344, 47.217863],
        [-1.559250, 47.217798], [-1.558922, 47.217571], [-1.558404, 47.217228],
        [-1.558404, 47.217228], [-1.558355, 47.217196], [-1.558355, 47.217196],
        [-1.558215, 47.217102], [-1.558165, 47.217068], [-1.558165, 47.217068],
        [-1.558123, 47.217040], [-1.558086, 47.217016], [-1.558042, 47.216986],
        [-1.557989, 47.216949], [-1.557868, 47.216865], [-1.557757, 47.216787],
        [-1.557612, 47.216684], [-1.557462, 47.216578], [-1.557255, 47.216428],
        [-1.556881, 47.216158], [-1.556817, 47.216109], [-1.556802, 47.216098],
        [-1.556783, 47.216082], [-1.556766, 47.216066], [-1.556750, 47.216050],
        [-1.556728, 47.216026], [-1.556712, 47.216006], [-1.556696, 47.215981],
        [-1.556679, 47.215955], [-1.556679, 47.215955], [-1.556598, 47.215757],
        [-1.556484, 47.215477], [-1.556341, 47.215125], [-1.556323, 47.215081],
        [-1.556308, 47.215042], [-1.556292, 47.215007], [-1.556281, 47.214986],
        [-1.556266, 47.214961], [-1.556251, 47.214937], [-1.556233, 47.214913],
        [-1.556200, 47.214873], [-1.556171, 47.214841], [-1.555920, 47.214555],
        [-1.555920, 47.214555], [-1.555725, 47.214332], [-1.555629, 47.214222],
        [-1.555595, 47.214184], [-1.555539, 47.214119], [-1.555437, 47.214003],
        [-1.555324, 47.213873], [-1.555324, 47.213873], [-1.555302, 47.213848],
        [-1.555232, 47.213761], [-1.555116, 47.213636], [-1.555070, 47.213586],
        [-1.554712, 47.213183], [-1.554535, 47.212976], [-1.554350, 47.212762],
        [-1.554256, 47.212656], [-1.554205, 47.212603], [-1.554150, 47.212554],
        [-1.554149, 47.212553], [-1.553706, 47.212199], [-1.553551, 47.212064],
        [-1.553317, 47.211861], [-1.552606, 47.211223], [-1.551939, 47.210626],
        [-1.551742, 47.210455], [-1.551257, 47.210033], [-1.551193, 47.209978],
        [-1.550626, 47.209457], [-1.550565, 47.209399], [-1.550276, 47.209125],
        [-1.549998, 47.208862], [-1.549986, 47.208846], [-1.549969, 47.208824],
        [-1.549939, 47.208785], [-1.549913, 47.208751], [-1.549913, 47.208751],
        [-1.549823, 47.208617], [-1.549740, 47.208483], [-1.549740, 47.208483],
        [-1.548841, 47.207101], [-1.548841, 47.207101], [-1.548824, 47.207076],
        [-1.548794, 47.207031], [-1.548731, 47.206959], [-1.548591, 47.206797],
        [-1.548332, 47.206498], [-1.548107, 47.206243], [-1.547991, 47.206105],
        [-1.547889, 47.205985], [-1.547804, 47.205872], [-1.547669, 47.205684],
        [-1.547542, 47.205496], [-1.547487, 47.205413], [-1.547414, 47.205306],
        [-1.547353, 47.205210], [-1.547315, 47.205152], [-1.547160, 47.204921],
        [-1.546734, 47.204289], [-1.546709, 47.204252], [-1.546659, 47.204177],
        [-1.546511, 47.203957], [-1.546299, 47.203630], [-1.546185, 47.203454],
        [-1.546037, 47.203213], [-1.545859, 47.202913], [-1.545505, 47.202362],
        [-1.545103, 47.201739], [-1.544962, 47.201518], [-1.544866, 47.201368],
        [-1.544747, 47.201185], [-1.544708, 47.201133], [-1.544674, 47.201095],
        [-1.544668, 47.201089], [-1.544641, 47.201061], [-1.544605, 47.201033],
        [-1.544563, 47.201000], [-1.544512, 47.200966], [-1.544399, 47.200893],
        [-1.544385, 47.200884], [-1.544337, 47.200851], [-1.544280, 47.200811],
        [-1.544227, 47.200767], [-1.544199, 47.200740], [-1.544173, 47.200712],
        [-1.544131, 47.200663], [-1.544094, 47.200612], [-1.543828, 47.200229],
        [-1.543797, 47.200185], [-1.543797, 47.200185], [-1.542297, 47.197987],
        [-1.542297, 47.197987], [-1.542220, 47.197875], [-1.542161, 47.197789],
        [-1.542025, 47.197591], [-1.541906, 47.197417], [-1.541874, 47.197368],
        [-1.541846, 47.197318], [-1.541831, 47.197279], [-1.541820, 47.197241],
        [-1.541813, 47.197198], [-1.541809, 47.197154], [-1.541813, 47.197106],
        [-1.541823, 47.197058], [-1.541860, 47.196961], [-1.541903, 47.196862],
        [-1.541938, 47.196779], [-1.541982, 47.196675], [-1.542013, 47.196624],
        [-1.542052, 47.196575], [-1.542085, 47.196540], [-1.542124, 47.196504],
        [-1.542190, 47.196456], [-1.542237, 47.196426], [-1.542287, 47.196399],
        [-1.542365, 47.196367], [-1.542762, 47.196201], [-1.543176, 47.196027],
        [-1.543247, 47.195997], [-1.543365, 47.195949], [-1.543475, 47.195904],
        [-1.543564, 47.195866], [-1.543645, 47.195824], [-1.543716, 47.195782],
        [-1.543778, 47.195737], [-1.543832, 47.195694], [-1.543881, 47.195646],
        [-1.543926, 47.195600], [-1.543965, 47.195552], [-1.544042, 47.195453],
        [-1.544042, 47.195453], [-1.544589, 47.194757], [-1.544589, 47.194757],
        [-1.544622, 47.194719], [-1.544660, 47.194683], [-1.544697, 47.194652],
        [-1.544712, 47.194639], [-1.544768, 47.194599], [-1.544888, 47.194522],
        [-1.545047, 47.194429], [-1.545294, 47.194287], [-1.545391, 47.194226],
        [-1.545474, 47.194168], [-1.545620, 47.194053], [-1.545788, 47.193898],
        [-1.545972, 47.193726], [-1.546330, 47.193393], [-1.546885, 47.192882],
        [-1.546885, 47.192882], [-1.546998, 47.192773], [-1.547108, 47.192675],
        [-1.547540, 47.192274], [-1.547616, 47.192208], [-1.547696, 47.192146],
        [-1.547752, 47.192110], [-1.547779, 47.192096], [-1.547812, 47.192077],
        [-1.547871, 47.192049], [-1.547931, 47.192023], [-1.547970, 47.192008],
        [-1.548013, 47.191991], [-1.548297, 47.191890], [-1.548708, 47.191740],
        [-1.548840, 47.191691], [-1.548884, 47.191675], [-1.548981, 47.191636],
        [-1.549138, 47.191570], [-1.549282, 47.191500], [-1.549434, 47.191418],
        [-1.549641, 47.191298], [-1.549831, 47.191170], [-1.549941, 47.191087],
        [-1.550090, 47.190965], [-1.550243, 47.190822], [-1.550376, 47.190681],
        [-1.550509, 47.190515], [-1.550638, 47.190347], [-1.550887, 47.190024],
        [-1.550999, 47.189886], [-1.551051, 47.189827], [-1.551119, 47.189760],
        [-1.551303, 47.189585], [-1.551529, 47.189391], [-1.551786, 47.189164],
        [-1.551855, 47.189104], [-1.551920, 47.189044], [-1.551999, 47.188967],
        [-1.552060, 47.188887], [-1.552086, 47.188839], [-1.552086, 47.188839],
        [-1.552165, 47.188683], [-1.552464, 47.188040], [-1.552464, 47.188040],
        [-1.552526, 47.187907], [-1.552526, 47.187907], [-1.552773, 47.187379],
        [-1.552798, 47.187329], [-1.552841, 47.187262], [-1.552891, 47.187201],
        [-1.552940, 47.187147], [-1.552984, 47.187107], [-1.552984, 47.187107],
        [-1.553063, 47.187039], [-1.553147, 47.186978], [-1.553388, 47.186814],
        [-1.553388, 47.186814], [-1.553460, 47.186759], [-1.553503, 47.186724],
        [-1.553513, 47.186715], [-1.553586, 47.186638], [-1.553658, 47.186546],
        [-1.553721, 47.186446], [-1.553721, 47.186446], [-1.553952, 47.186122],
        [-1.554133, 47.185863], [-1.554133, 47.185863], [-1.554179, 47.185797],
        [-1.554261, 47.185694], [-1.554321, 47.185631], [-1.554381, 47.185575],
        [-1.554479, 47.185508], [-1.554524, 47.185482], [-1.554524, 47.185482],
        [-1.554575, 47.185453], [-1.554725, 47.185379], [-1.554849, 47.185336],
        [-1.554977, 47.185302], [-1.555618, 47.185191], [-1.555665, 47.185183],
        [-1.555721, 47.185173], [-1.556013, 47.185124], [-1.556061, 47.185116],
        [-1.556097, 47.185110], [-1.557210, 47.184925], [-1.558508, 47.184712],
        [-1.558628, 47.184694], [-1.558750, 47.184685], [-1.558828, 47.184683],
        [-1.558908, 47.184685], [-1.558982, 47.184691], [-1.559030, 47.184696],
        [-1.559519, 47.184757], [-1.559833, 47.184799], [-1.560076, 47.184829],
        [-1.560121, 47.184830], [-1.560268, 47.184830], [-1.560369, 47.184821],
        [-1.560469, 47.184805], [-1.560578, 47.184787], [-1.561112, 47.184701],
        [-1.561214, 47.184684], [-1.561918, 47.184564], [-1.562062, 47.184541],
        [-1.562563, 47.184459], [-1.563080, 47.184373], [-1.563166, 47.184356],
        [-1.563483, 47.184295], [-1.563542, 47.184284], [-1.564390, 47.184143],
        [-1.564505, 47.184124], [-1.564654, 47.184099], [-1.565735, 47.183919],
        [-1.565918, 47.183889], [-1.566092, 47.183860], [-1.567668, 47.183598],
        [-1.567704, 47.183592], [-1.567944, 47.183552], [-1.567998, 47.183543],
        [-1.568804, 47.183414], [-1.569092, 47.183379], [-1.569092, 47.183379],
        [-1.569323, 47.183352], [-1.569570, 47.183321], [-1.570038, 47.183247],
        [-1.570510, 47.183168], [-1.570510, 47.183168], [-1.571053, 47.183077],
        [-1.571407, 47.183003], [-1.571599, 47.182958], [-1.571738, 47.182926],
        [-1.571961, 47.182877], [-1.572010, 47.182866], [-1.572104, 47.182843],
        [-1.572104, 47.182843], [-1.572193, 47.182823], [-1.572193, 47.182823],
        [-1.572699, 47.182701], [-1.573144, 47.182586], [-1.573144, 47.182586],
        [-1.573411, 47.182515], [-1.573411, 47.182515], [-1.573608, 47.182467],
        [-1.573724, 47.182440], [-1.573902, 47.182403], [-1.574898, 47.182207],
        [-1.574898, 47.182207], [-1.575647, 47.182061], [-1.575647, 47.182061],
        [-1.576246, 47.181943], [-1.576246, 47.181943], [-1.576844, 47.181832],
        [-1.577218, 47.181761], [-1.577976, 47.181617], [-1.578919, 47.181452],
        [-1.578919, 47.181452], [-1.579436, 47.181359], [-1.579944, 47.181269],
        [-1.580053, 47.181249], [-1.580053, 47.181249], [-1.581270, 47.181032],
        [-1.581705, 47.180956], [-1.581912, 47.180920], [-1.582261, 47.180860],
        [-1.582448, 47.180838], [-1.582615, 47.180822], [-1.582852, 47.180811],
        [-1.582964, 47.180810], [-1.583083, 47.180812], [-1.583223, 47.180826],
        [-1.583362, 47.180843], [-1.583493, 47.180867], [-1.583617, 47.180896],
        [-1.583998, 47.181012], [-1.584130, 47.181051], [-1.584196, 47.181069],
        [-1.584262, 47.181083], [-1.584309, 47.181093], [-1.584374, 47.181103],
        [-1.584408, 47.181106], [-1.584458, 47.181112], [-1.584516, 47.181117],
        [-1.584573, 47.181118], [-1.584573, 47.181118], [-1.584720, 47.181109],
        [-1.585297, 47.181072], [-1.585351, 47.181068], [-1.585402, 47.181064],
        [-1.585532, 47.181053], [-1.585654, 47.181037], [-1.585710, 47.181029],
        [-1.585764, 47.181019], [-1.585809, 47.181010], [-1.585905, 47.180986],
        [-1.586098, 47.180925], [-1.586118, 47.180918], [-1.586483, 47.180788],
        [-1.586855, 47.180657], [-1.586932, 47.180629], [-1.587033, 47.180594],
        [-1.587145, 47.180545], [-1.587187, 47.180526], [-1.587328, 47.180457],
        [-1.588515, 47.179901], [-1.588568, 47.179879], [-1.588639, 47.179851],
        [-1.588676, 47.179838], [-1.588733, 47.179819], [-1.588869, 47.179783],
        [-1.588907, 47.179774], [-1.589014, 47.179755], [-1.589378, 47.179687],
        [-1.589464, 47.179666], [-1.589547, 47.179641], [-1.589666, 47.179597],
        [-1.589749, 47.179561], [-1.589782, 47.179545], [-1.589900, 47.179481],
        [-1.590030, 47.179401], [-1.590277, 47.179248], [-1.590277, 47.179248],
        [-1.590598, 47.179043], [-1.590754, 47.178926], [-1.591129, 47.178628],
        [-1.591392, 47.178418], [-1.591521, 47.178314], [-1.591582, 47.178259],
        [-1.591637, 47.178200], [-1.591667, 47.178160], [-1.591667, 47.178160],
        [-1.591730, 47.178061], [-1.591764, 47.177997], [-1.591769, 47.177978],
        [-1.591784, 47.177938], [-1.591831, 47.177820], [-1.591862, 47.177766],
        [-1.591885, 47.177730], [-1.591916, 47.177692], [-1.591945, 47.177659],
        [-1.591983, 47.177625], [-1.592029, 47.177587], [-1.592079, 47.177553],
        [-1.592151, 47.177517], [-1.592234, 47.177479], [-1.592342, 47.177442],
        [-1.592342, 47.177442], [-1.592733, 47.177306], [-1.593186, 47.177149],
        [-1.593186, 47.177149], [-1.593437, 47.177061], [-1.593465, 47.177051],
        [-1.594116, 47.176824]
      ];
      // Then properties
      var properties = {
        'osm_id': '64033',
        'name': '3 Marcel Paul > Neustrie',
        'type': 'route',
        'route': 'tram',
        'ref': '3',
        'operator': 'SEMITAN',
        'colour': '#007cc3'
      };

      // Create the tram line Marcel Paul > Neustrie, Nantes
      var line1 = turf.lineString(coordinates, properties);

      // Declare a source
      var vectorSource = new ol.source.Vector();

      // When reading feature, reproject to EPSG 3857
      var feature = (new ol.format.GeoJSON()).readFeature(line1, {
        featureProjection: 'EPSG:3857'
      });
      // Add a feature
      vectorSource.addFeature(feature);

      // The "start" and "destination" features.
      var startPoint = new ol.Feature();
      var destPoint = new ol.Feature();

      // The vector layer used to display the "start" and "destination" features.
      var vectorLayerPoints = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [startPoint, destPoint]
        })
      });

      // Declare a vector layer with the already
      // created source containing added features
      var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'white',
              width: 5
            })
          }),
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: properties['colour'],
              width: 3
            })
          })
        ]
      });

      var vectorLayerSubLine = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'white',
              width: 5
            })
          }),
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 3
            })
          })
        ]
      });

      // Instanciate a map and add layers
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorLayer,
          vectorLayerSubLine,
          vectorLayerPoints
       ],
        view: new ol.View({
          center: ol.proj.fromLonLat([-1.563046, 47.214751]),
          zoom: 12
        })
      });

      map.on('click', function(event) {
        if (startPoint.getGeometry() == null) {
          // First click.
          startPoint.setGeometry(new ol.geom.Point(event.coordinate));
        } else if (destPoint.getGeometry() == null) {
          // Second click.
          destPoint.setGeometry(new ol.geom.Point(event.coordinate));
          // Transform the coordinates from the map projection (EPSG:3857)
          // to the server projection (EPSG:4326).
          var startCoord = ol.proj.toLonLat(startPoint.getGeometry().getCoordinates());
          var destCoord = ol.proj.toLonLat(destPoint.getGeometry().getCoordinates());
          var geojsonStartCoord = turf.point(startCoord);
          var geojsonDestCoord = turf.point(destCoord);
          var subLine = turf.lineSlice(geojsonStartCoord, geojsonDestCoord, line1);
          console.log(subLine);
          var geojsonSubLine = (new ol.format.GeoJSON()).readFeature(subLine, {
            featureProjection: 'EPSG:3857'
          })
          vectorLayerSubLine.getSource().addFeature(geojsonSubLine);
        }
      });

      var clearButton = document.getElementById('clear');
      clearButton.addEventListener('click', function(event) {
        // Reset the "start" and "destination" features.
        startPoint.setGeometry(null);
        destPoint.setGeometry(null);
        vectorLayerSubLine.getSource().clear();
      });
    </script>
  </body>
</html>

results matching ""

    No results matching ""