OL3: animate point

by anushamc

HTML

<script src="http://openlayers.org/en/v3.10.1/build/ol.js"></script>
<div id="map"></div>
<button id='go_to_field'>GO</button>
<select id='go_to_field_id'></select>

CSS

#map {
    width: 100%;
    height: 500px;
}

#go_to_field {
    position: absolute;
    top: 10px;
    left: 165px;
}

#go_to_field_id {
	position: absolute;
	width:150px;
	top:10px;
	left:10px;
}

JavaScript

var map;
var fields_vector_source;

setup_map(); // set up the map
get_fields(); // Map the fields from WKT
locate_me(); // Add point

$(document).on("click", "button#go_to_field", function() {
    go_to_field();
});

function locate_me() {
    var locationPoint = new ol.Feature({
        geometry: new ol.geom.Point([0.3901863098144531, 52.803332200169166])
    });
    locationPoint.getGeometry().transform('EPSG:4326', 'EPSG:3857');

    // A vector layer to hold the location point
    var locationLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                locationPoint
            ]
        })
    });
    map.addLayer(locationLayer);
}

function get_fields() {
    fields = [];
    fields.push('POLYGON((0.3761100769042969 52.80686052140097, 0.38186073303222656 52.80748313660423, 0.3827190399169922 52.7994403373623, 0.38486480712890625 52.7998035926278, 0.3857231140136719 52.79902518477217, 0.37490844726562494 52.795703821384514, 0.3710460662841797 52.79445824472413, 0.3706169128417969 52.79705315585013, 0.3717327117919922 52.801464149489235, 0.3761100769042969 52.80686052140097))');
    fields.push('POLYGON((0.3937053680419922 52.80758690493795, 0.39430618286132807 52.804888847770094, 0.3993701934814453 52.804888847770094, 0.4001426696777344 52.807950092155664, 0.3937053680419922 52.80758690493795))');
    fields.push('POLYGON((0.3912162780761719 52.794977239333925, 0.3947353363037109 52.79892139600545, 0.4010009765625 52.79819486770316, 0.4010009765625 52.79502913845432, 0.3912162780761719 52.794977239333925))');
    fields.push('POLYGON((0.40546417236328125 52.807431252344514, 0.406494140625 52.80426619541684, 0.4145193099975586 52.803280310956076, 0.41503429412841797 52.80603035392739, 0.40546417236328125 52.807431252344514))');
    fields.push('POLYGON((0.3989839553833008 52.80473318551767, 0.40001392364501953 52.80203495126637, 0.4065799713134765 52.80203495126637, 0.40550708770751953 52.804914791424665,...