JSFiddle - React, Tailwind, and code Playground

DTEC Polylines

by skibulk

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="browse">
    <input type="file" />
</div>
<div id="map"></div>
<script>
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: {
                lat: 43,
                lng: -76
            },
            mapTypeId: 'terrain'
        });
    }
	
	/*
	// Output map container, not map object!
    console.log(map);
	
	// We cannot access map methods via the dom
    map2 = $('#map')[0];
    marker = new google.maps.Marker({
        position: {
            lat: 0,
            lng: 0
        },
        label: "Absolute Center",
        map: map
    });
	*/
	
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBonfeRUbrsOvzMi_05BkDrULtM8KvQfII&callback=initMap"></script>

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#browse {
    position: absolute;
    z-index: 1000;
    padding: 10px 20px;
    background: white;
}

#map {
    height: 100%;
}

JavaScript

// File Reader
$('#browse').on('change', function(event) {

    var file = event.target.files[0];

    if (file) {

        var reader = new FileReader();

        reader.onload = fileHandler;
        reader.readAsText(file);

    }
});

// Data Handler
function fileHandler(event) {

    var data, line, groupData, groups = [];
    data = event.target.result;

    if (data) {

        data = data.split(/\r\n/);

        for (var i = 0; i < data.length; i++) {

            line = data[i].split(",");

            if (i == 0 && line[1]) {

                groupData = [];
                groups.push(groupData);
            }

            if (!line[1]) {

                groupData = [];
                groupData.name = line[0] + i;
                groups.push(groupData);

            } else {

                groupData.push({
                    lat: +line[0],
                    lng: +line[1]
                });
            }
        }
    }

    plotter(groups);
}

// Line Plotter
function plotter(groups) {

    var i, polyline, center, marker;

    for (i = 0; i < groups.length; i++) {

        polyline = new google.maps.Polyline({
            path: groups[i],
            geodesic: false,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map: map
        });

        center = Math.round(groups[i].length / 2);
        center = groups[i][center];

        marker = new google.maps.Marker({
            position: center,
            label: groups[i].name,
            map: map
        });
    }
}