Skip to content

Commit

Permalink
examples(source / file): simplify FileSource usage
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgermerie @gchoqueux
mgermerie authored and gchoqueux committed Dec 2, 2021
1 parent b732c0a commit 21317b4
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 123 deletions.
8 changes: 4 additions & 4 deletions examples/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@
},

"Source / File": {
"source_file_gpx_3d": "GPX to 3D objects",
"source_file_geojson_3d": "GeoJSON to 3D objects",
"source_file_shapefile": "Shapefile to raster",
"source_file_geojson_raster": "GeoJSON to raster",
"source_file_geojson_3d": "GeoJSON to 3D objects",
"source_file_kml_raster": "KML to raster",
"source_file_gpx_raster": "GPX to raster",
"source_file_kml_raster": "KML to raster"
"source_file_gpx_3d": "GPX to 3D objects",
"source_file_shapefile": "Shapefile to raster"
},

"Effects": {
Expand Down
66 changes: 21 additions & 45 deletions examples/source_file_geojson_raster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@
itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);


// Display the content of a GeoJSON on terrain with ColorLayer and FileSource.
// The GeoJSON is loaded from url, set in FileSource
// Display the content of two GeoJSON files on terrain with ColorLayer and FileSource.
// The GeoJSONs are loaded from url, set in FileSource

// Declare the source for the data on Ariege area
const ariegeSource = new itowns.FileSource({
Expand All @@ -85,59 +85,35 @@
view.addLayer(ariegeLayer).then(FeatureToolTip.addLayer);


// Display the content of a GeoJSON on terrain with ColorLayer and FileSource.
// The GeoJSON content is fetched from the file, then parsed and finally passed into FileSource data.
// The process is decomposed so that the fetching and parsing steps are visible.

// Fetch data from the GeoJSON file.
// Should you implement a custom fetcher, it would need to be called here.
itowns.Fetcher.json(
'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/66-pyrenees-orientales/departement-66-pyrenees-orientales.geojson'
).then(function _(geojson) {
// Parses the fetched data into an itowns FeatureCollection.
// See http://www.itowns-project.org/itowns/docs/#api/Base/FeatureCollection.
// Should you implement a custom parser, it would need to be called here.
// The second parameter of the `parse` method we use here defines options for the transformation from
// data to FeatureCollection.
return itowns.GeoJsonParser.parse(geojson, {
// Information on the fetched data.
// See http://www.itowns-project.org/itowns/docs/#api/Source/ParsingOptions.
in: {
crs: 'EPSG:4326',
},
// Information on the FeatureCollection that should be created from the fetched data
// Here, we pass a FeatureBuildingOptions (http://www.itowns-project.org/itowns/docs/#api/Base/FeatureBuildingOptions)
out: {
crs: view.tileLayer.extent.crs,
},
});
}).then(function _(features) {
// Create a FileSource from the parsed FeatureCollection.
var pyoSource = new itowns.FileSource({ features });

var pyoStyle = new itowns.Style({
// Declare the source for the data on Pyrenees Orientales area
const pyoSource = new itowns.FileSource({
url: 'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/66-pyrenees-orientales/departement-66-pyrenees-orientales.geojson',
crs: 'EPSG:4326',
format: 'application/json',
});
// Create a ColorLayer for the Pyrenees Orientales area
const pyoLayer = new itowns.ColorLayer('pyrenees-orientales', {
name: 'pyrenees-orientales',
transparent: true,
source: pyoSource,
style: new itowns.Style({
fill: {
pattern: 'images/cross.png',
opacity: 0.8,
},
stroke: {
color:'IndianRed',
},
});
}),
});
// Add The Pyrennees Orientales ColorLayer to the view and grant it a tooltip
view.addLayer(pyoLayer).then(FeatureToolTip.addLayer);

// Create a ColorLayer to display the FeatureCollection.
var pyoLayer = new itowns.ColorLayer('pyrenees-orientales', {
name: 'pyrenees-orientales',
transparent: true,
source: pyoSource,
style: pyoStyle,
});

return view.addLayer(pyoLayer);
}).then(FeatureToolTip.addLayer).then(() => {
// Center the camera on the data extents
// Center the camera on the data extents
view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
const layersExtent = ariegeSource.extent.clone();
layersExtent.union(view.getLayerById('pyrenees-orientales').source.extent);
layersExtent.union(pyoSource.extent);
view.controls.lookAtCoordinate(layersExtent, false);
});

Expand Down
64 changes: 28 additions & 36 deletions examples/source_file_gpx_raster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,45 +57,37 @@
itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);

// Parse and Convert by iTowns
itowns.Fetcher.xml('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx')
.then(function _(gpx) {
var gpxStyle = new itowns.Style({
zoom: {
min: 9,
},
stroke: {
color: 'red',
},
point: {
color: 'white',
line: 'red',
},
text: {
field: '{name}',
transform: 'uppercase',
font: ['Arial', 'sans-serif'],
haloColor: 'white',
haloWidth: 1,
},
});

var gpxSource = new itowns.FileSource({
fetchedData: gpx,
crs: 'EPSG:4326',
parser: itowns.GpxParser.parse,
});
const gpxSource = new itowns.FileSource({
url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx',
crs: 'EPSG:4326',
format: 'application/gpx',
});

var gpxLayer = new itowns.ColorLayer('Gpx', {
name: 'Ultra 2009',
transparent: true,
source: gpxSource,
style: gpxStyle,
addLabelLayer: true,
});
const gpxStyle = new itowns.Style({
zoom: { min: 9 },
stroke: { color: 'red' },
point: {
color: 'white',
line: 'red',
},
text: {
field: '{name}',
transform: 'uppercase',
font: ['Arial', 'sans-serif'],
haloColor: 'white',
haloWidth: 1,
},
});

const gpxLayer = new itowns.ColorLayer('Gpx', {
source: gpxSource,
style: gpxStyle,
addLabelLayer: true,
});

view.addLayer(gpxLayer);

return view.addLayer(gpxLayer);
});

debug.createTileDebugUI(menuGlobe.gui, view);
</script>
Expand Down
5 changes: 1 addition & 4 deletions examples/source_file_kml_raster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,7 @@
var kmlSource = new itowns.FileSource({
url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/croquis.kml',
crs: 'EPSG:4326',
fetcher: itowns.Fetcher.xml,
parser: itowns.KMLParser.parse,
format: 'application/kml',
});

var kmlStyle = new itowns.Style({
Expand All @@ -78,8 +77,6 @@
});

var kmlLayer = new itowns.ColorLayer('Kml', {
name: 'kml',
transparent: true,
source: kmlSource,
style: kmlStyle,
addLabelLayer: true,
Expand Down
73 changes: 39 additions & 34 deletions examples/source_file_shapefile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
var viewerDiv = document.getElementById('viewerDiv');

// Instanciate iTowns GlobeView*
// Instantiate iTowns GlobeView*
var view = new itowns.GlobeView(viewerDiv, placement);
var menuGlobe = new GuiTools('menuDiv', view);

Expand All @@ -41,47 +41,52 @@
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
});

// Load all the necessary files for a shapefile, parse them and
// display them.
itowns.Fetcher.multiple('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/shapefile/velib-disponibilite-en-temps-reel', {
arrayBuffer: ['shp', 'dbf', 'shx'],
text: ['prj'],
}).then(function _(res) {
return itowns.ShapefileParser.parse(res, {


// As there is no Shapefile fetcher directly bundled within iTowns, we need to specify a method to fetch data.
// We use here `multiple` fetcher, which can fetch multiple files within multiple formats.
itowns.Fetcher.multiple(
'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/shapefile/velib-disponibilite-en-temps-reel',
{
// fetch all files whose name match the `url` parameter value, and whose format is either `shp`,
// `dbf`, `shx` or `prj`.
arrayBuffer: ['shp', 'dbf', 'shx'],
text: ['prj'],
},
).then((fetched) => {
// Once our Shapefile data is fetched, we can parse it by running itowns built-in Shapefile parser.
return itowns.ShapefileParser.parse(fetched, {
// Options indicating how the features should be built from data.
out: {
// Specitfy the crs to convert the input coordinates to.
crs: view.tileLayer.extent.crs,
}
});
}).then(function _(features) {
var velibSource = new itowns.FileSource({ features });

var velibStyle = new itowns.Style({
zoom: { min: 10, max: 20 },
point: {
color: 'white',
line: 'green',
},
text: {
field: '{name}\n(id: {station_id})',
size: 14,
haloColor: 'white',
haloWidth: 1,
font: ['monospace'],
},
});
}).then((parsed) => {
// We can then instantiate a FileSource, passing the parsed data,
// and create a Layer bound to this source.
const velibSource = new itowns.FileSource({ features: parsed });

var velibLayer = new itowns.ColorLayer('velib', {
return view.addLayer(new itowns.ColorLayer('velib', {
source: velibSource,
style: velibStyle,
style: new itowns.Style({
zoom: { min: 10, max: 20 },
point: { color: 'white', line: 'green' },
text: {
field: '{name}\n(id: {station_id})',
size: 14,
haloColor: 'white',
haloWidth: 1,
font: ['monospace'],
}
}),
addLabelLayer: true,
});

debug.createTileDebugUI(menuGlobe.gui, view);

return view.addLayer(velibLayer);
}).then(function _(layer) {
}));
}).then((layer => {
// Finally, we generate tooltip for when the mouse hovers the data displayed within our created layer.
FeatureToolTip.addLayer(layer, { filterAllProperties: false });
});
}));

</script>
</body>
</html>

0 comments on commit 21317b4

Please sign in to comment.