Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Last active August 29, 2015 14:25
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ThomasG77/d28b7d0ecb5c43ebc368 to your computer and use it in GitHub Desktop.
Use OpenLayers 3 with TSV through GeoJSON
<!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>
Latitude Longitude Name
48.1 0.25 First point
49.2 1.1 Second point
47.5 0.75 Third point
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment