OpenLayers3 Map Geodesic LineString

by Nick Karnik

HTML

<link rel="stylesheet" href="http://ol3js.org/en/master/resources/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="http://ol3js.org/en/master/resources/layout.css">
<link rel="stylesheet" href="http://ol3js.org/en/master/resources/bootstrap/css/bootstrap.min.css">
<script src="http://ol3js.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="http://ol3js.org/en/master/build/ol.css">
<script src="http://underscorejs.org/underscore.js"></script>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div id="map" class="map"></div>
        </div>
    </div>
</div>

CSS

.map:-moz-full-screen {
    height: 100%;
}
.map:-webkit-full-screen {
    height: 100%;
}
.map:full-screen {
    height: 100%;
}

JavaScript

var vector2 = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [
        new ol.Feature({
            color: 'red',
            geometry: new ol.geom.LineString([
                [589342.0821832094, 1542652.0276869189],
                [589408.7625581945, 3542613.0666280063]
            ])
        })]
    })
});

var mapLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

window.olmap = new ol.Map({
    layers: [mapLayer, vector2],
    renderer: "canvas",
    target: 'map',
    view: new ol.View2D({
        center: [589342.0821832094, 1542652.0276869189],
        zoom: 2
    })
});