Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Last active August 29, 2015 14:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/d28b7d0ecb5c43ebc368 to your computer and use it in GitHub Desktop.
Save ThomasG77/d28b7d0ecb5c43ebc368 to your computer and use it in GitHub Desktop.
Download ZIP
Use OpenLayers 3 with TSV through GeoJSON
Raw
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>
Raw
sample-geo.tsv
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