fernandoc1/openlayers_kml_plot.html

## openlayers_kml_plot.html
<!DOCTYPE html>
<!-- Code from https://bootswatch.com/slate/ -->
<!-- Using OpenLayers version from https://github.com/mapgears/ol3-google-maps -->
<html ondragstart="return false;" ondrop="return false;" lang="pt" style="-webkit-user-select: none; user-select: none; cursor: default;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>KML Load test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./css/bootstrap.css" media="screen">
        <link rel="stylesheet" href="./css/custom.min.css">
        <link rel="stylesheet" href="./css/ol3gm.css">

        <script src="./js/jquery-1.10.2.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="./js/vec3d.js"></script>
        <script src="./js/ol3gm.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="bs-docs-section">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="bs-component">
                            <div class="well" style="height: 700px;">
                                <div id="mapDiv" style="height: 100%;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="bs-component">
                            <div class="well">
                                <div class="input-group">
                                    <span class="input-group-addon">KML</span>
                                        <input type="file" id="kmlSelector" style="display:none">
                                        <input type="text" id="kmlSelectorFilename" class="form-control" disabled>
                                        <span class="input-group-btn">
                                        <button class="btn btn-default" onclick="openKMLFileSelect()" type="button">Load from Disk</button>
                                    </span>
                                </div>
                            </div>
                            <div class="well" style="user-select: initial; cursor: auto;">
                                <div>Selected arc</div>
                                <pre id="outputPre"></pre>
                            </div>
                            <div class="well">
                                <div>Arc 1</div>
                                <input type="text" id="arc1Input">
                                <div>Arc 2</div>
                                <input type="text" id="arc2Input">
                                <div>
                                    <button class="btn btn-default" onclick="plotArcs()" type="button">Plot arcs</button>
                                </div>
                            </div>
                            <div class="well">
                                <div>Marker</div>
                                <input type="text" id="markerInput">
                                <div>
                                    <button class="btn btn-default" onclick="plotMarker()" type="button">Plot marker</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

<script>

var initialPosition = {lng: 0, lat: 0};

var map = null;
var vectorSource = null;

var landmarkList = [];

function initMap(position)
{
    var centerPosition = ol.proj.transform([position.lng, position.lat], 'EPSG:4326', 'EPSG:3857');

    vectorSource = new ol.source.Vector({});

    map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://192.168.0.219/map_cache.php?z={z}&x={x}&y={y}'
                })
            }),
            new ol.layer.Vector({
                source: vectorSource
            })
        ],
        target: 'mapDiv',
        view: new ol.View({
            center: centerPosition,
            zoom: 1
        })
    });

    map.on('click', function(evt)
    {
        var lnglat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
        landmarkList.push(lnglat);
        length = landmarkList.length;
        if(length > 1)
        {
            addLineToMap(landmarkList[length - 2], landmarkList[length - 1]);
            document.getElementById("outputPre").innerHTML +=  landmarkList[length - 2][0] + ", "
                                                             + landmarkList[length - 2][1] + ", "
                                                             + landmarkList[length - 1][0] + ", "
                                                             + landmarkList[length - 1][1] + "\n";
            landmarkList = [];
        }
        console.log(lnglat);
    });

}

function addLayerToMap(url)
{
    if(map == null)
    {
        console.log("map is null");
        return;
    }

    var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: url,
            format: new ol.format.KML()
        })
    });

    map.addLayer(vector);
}

function addLineToMap(coordA, coordB)
{
    if(map == null)
    {
        console.log("map is null");
        return;
    }

    var a = ol.proj.transform(coordA, 'EPSG:4326', 'EPSG:3857');
    var b = ol.proj.transform(coordB, 'EPSG:4326', 'EPSG:3857');

    var linestring = new ol.geom.LineString([a, b], 'XY');

    var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: linestring
            })]
        })
    });

    map.addLayer(vector);
}

function addMarker(markerPosition)
{
    position = ol.proj.transform([markerPosition.lng, markerPosition.lat], 'EPSG:4326', 'EPSG:3857');
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(position),
    });

    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 1],
            anchorXUnits: 'fraction',
            anchorYUnits: 'fraction',
            src: './imgs/map_marker.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    vectorSource.addFeature(iconFeature);
}

function getArcFromString(str)
{
    tokens = str.replace(/°|,/gi, '').split(" ");

    return [[parseFloat(tokens[1]), parseFloat(tokens[0])],
            [parseFloat(tokens[3]), parseFloat(tokens[2])]];
}

function plotArcs()
{
    a1 = getArcFromString(document.getElementById("arc1Input").value);
    a2 = getArcFromString(document.getElementById("arc2Input").value);
    addLineToMap(a1[0], a1[1]);
    addLineToMap(a2[0], a2[1]);
}

function plotMarker()
{
    text = document.getElementById("markerInput").value;
    tokens = text.replace(/°|,/gi, '').split(" ");
    markerPosition = {lat: parseFloat(tokens[0]), lng: parseFloat(tokens[1])};
    addMarker(markerPosition);
}

function openKMLFileSelect()
{
    kmlSelector = document.getElementById("kmlSelector")
    kmlSelector.click();
    kmlSelector.onchange = function ()
    {
        var file    = document.getElementById("kmlSelector").files[0];
        var reader  = new FileReader();
        document.getElementById("kmlSelectorFilename").value = file.name;

        reader.addEventListener("load", function () {
                //console.log(reader.result);
                addLayerToMap(reader.result);
                }, false);

        if (file) {
            reader.readAsDataURL(file);
        }
    }
}

initMap(initialPosition);
//addLayerToMap('https://openlayers.org/en/v4.2.0/examples/data/kml/2012-02-10.kml');

</script>
	<!DOCTYPE html>
	<!-- Code from https://bootswatch.com/slate/ -->
	<!-- Using OpenLayers version from https://github.com/mapgears/ol3-google-maps -->
	<html ondragstart="return false;" ondrop="return false;" lang="pt" style="-webkit-user-select: none; user-select: none; cursor: default;">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>KML Load test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="./css/bootstrap.css" media="screen">
	<link rel="stylesheet" href="./css/custom.min.css">
	<link rel="stylesheet" href="./css/ol3gm.css">

	<script src="./js/jquery-1.10.2.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./js/vec3d.js"></script>
	<script src="./js/ol3gm.js"></script>
	</head>
	<body>
	<div class="container">
	<div class="bs-docs-section">
	<div class="row">
	<div class="col-lg-6">
	<div class="bs-component">
	<div class="well" style="height: 700px;">
	<div id="mapDiv" style="height: 100%;"></div>
	</div>
	</div>
	</div>
	<div class="col-lg-6">
	<div class="bs-component">
	<div class="well">
	<div class="input-group">
	<span class="input-group-addon">KML</span>
	<input type="file" id="kmlSelector" style="display:none">
	<input type="text" id="kmlSelectorFilename" class="form-control" disabled>
	<span class="input-group-btn">
	<button class="btn btn-default" onclick="openKMLFileSelect()" type="button">Load from Disk</button>
	</span>
	</div>
	</div>
	<div class="well" style="user-select: initial; cursor: auto;">
	<div>Selected arc</div>
	<pre id="outputPre"></pre>
	</div>
	<div class="well">
	<div>Arc 1</div>
	<input type="text" id="arc1Input">
	<div>Arc 2</div>
	<input type="text" id="arc2Input">
	<div>
	<button class="btn btn-default" onclick="plotArcs()" type="button">Plot arcs</button>
	</div>
	</div>
	<div class="well">
	<div>Marker</div>
	<input type="text" id="markerInput">
	<div>
	<button class="btn btn-default" onclick="plotMarker()" type="button">Plot marker</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>

	<script>

	var initialPosition = {lng: 0, lat: 0};

	var map = null;
	var vectorSource = null;

	var landmarkList = [];

	function initMap(position)
	{
	var centerPosition = ol.proj.transform([position.lng, position.lat], 'EPSG:4326', 'EPSG:3857');

	vectorSource = new ol.source.Vector({});

	map = new ol.Map({
	layers: [
	new ol.layer.Tile({
	source: new ol.source.XYZ({
	url: 'http://192.168.0.219/map_cache.php?z={z}&x={x}&y={y}'
	})
	}),
	new ol.layer.Vector({
	source: vectorSource
	})
	],
	target: 'mapDiv',
	view: new ol.View({
	center: centerPosition,
	zoom: 1
	})
	});

	map.on('click', function(evt)
	{
	var lnglat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
	landmarkList.push(lnglat);
	length = landmarkList.length;
	if(length > 1)
	{
	addLineToMap(landmarkList[length - 2], landmarkList[length - 1]);
	document.getElementById("outputPre").innerHTML += landmarkList[length - 2][0] + ", "
	+ landmarkList[length - 2][1] + ", "
	+ landmarkList[length - 1][0] + ", "
	+ landmarkList[length - 1][1] + "\n";
	landmarkList = [];
	}
	console.log(lnglat);
	});

	}

	function addLayerToMap(url)
	{
	if(map == null)
	{
	console.log("map is null");
	return;
	}

	var vector = new ol.layer.Vector({
	source: new ol.source.Vector({
	url: url,
	format: new ol.format.KML()
	})
	});

	map.addLayer(vector);
	}

	function addLineToMap(coordA, coordB)
	{
	if(map == null)
	{
	console.log("map is null");
	return;
	}

	var a = ol.proj.transform(coordA, 'EPSG:4326', 'EPSG:3857');
	var b = ol.proj.transform(coordB, 'EPSG:4326', 'EPSG:3857');

	var linestring = new ol.geom.LineString([a, b], 'XY');

	var vector = new ol.layer.Vector({
	source: new ol.source.Vector({
	features: [new ol.Feature({
	geometry: linestring
	})]
	})
	});

	map.addLayer(vector);
	}

	function addMarker(markerPosition)
	{
	position = ol.proj.transform([markerPosition.lng, markerPosition.lat], 'EPSG:4326', 'EPSG:3857');
	var iconFeature = new ol.Feature({
	geometry: new ol.geom.Point(position),
	});

	var iconStyle = new ol.style.Style({
	image: new ol.style.Icon({
	anchor: [0.5, 1],
	anchorXUnits: 'fraction',
	anchorYUnits: 'fraction',
	src: './imgs/map_marker.png'
	})
	});

	iconFeature.setStyle(iconStyle);

	vectorSource.addFeature(iconFeature);
	}

	function getArcFromString(str)
	{
	tokens = str.replace(/°\|,/gi, '').split(" ");

	return [[parseFloat(tokens[1]), parseFloat(tokens[0])],
	[parseFloat(tokens[3]), parseFloat(tokens[2])]];
	}

	function plotArcs()
	{
	a1 = getArcFromString(document.getElementById("arc1Input").value);
	a2 = getArcFromString(document.getElementById("arc2Input").value);
	addLineToMap(a1[0], a1[1]);
	addLineToMap(a2[0], a2[1]);
	}

	function plotMarker()
	{
	text = document.getElementById("markerInput").value;
	tokens = text.replace(/°\|,/gi, '').split(" ");
	markerPosition = {lat: parseFloat(tokens[0]), lng: parseFloat(tokens[1])};
	addMarker(markerPosition);
	}

	function openKMLFileSelect()
	{
	kmlSelector = document.getElementById("kmlSelector")
	kmlSelector.click();
	kmlSelector.onchange = function ()
	{
	var file = document.getElementById("kmlSelector").files[0];
	var reader = new FileReader();
	document.getElementById("kmlSelectorFilename").value = file.name;

	reader.addEventListener("load", function () {
	//console.log(reader.result);
	addLayerToMap(reader.result);
	}, false);

	if (file) {
	reader.readAsDataURL(file);
	}
	}
	}

	initMap(initialPosition);
	//addLayerToMap('https://openlayers.org/en/v4.2.0/examples/data/kml/2012-02-10.kml');

	</script>