index.html
<!DOCTYPE html>
<html>
<head>
<title>Vector layer example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
<script src="https://rawgit.com/tmcw/csv2geojson/gh-pages/csv2geojson.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var url = 'sample-geo.tsv';
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON()
})
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
}),
vectorLayer
],
target: 'map',
view: new ol.View({
center: ol.proj.transform([2, 47], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function(data) {
if (httpRequest.readyState != 4 || httpRequest.status != 200) {
return;
} else {
csv2geojson.csv2geojson(httpRequest.responseText, {
latfield: 'Latitude',
lonfield: 'Longitude',
delimiter: '\t'
}, function(err, data) {
var geoJsonFormat = new ol.format.GeoJSON();
var features = geoJsonFormat.readFeatures(
data, {
featureProjection: 'EPSG:3857'
}
);
vectorLayer.getSource().addFeatures(features);
});
}
};
httpRequest.open('GET', url);
httpRequest.send();
</script>
</body>
</html>