diff --git a/examples/config.json b/examples/config.json index 609c8e8c85..fec87a964e 100644 --- a/examples/config.json +++ b/examples/config.json @@ -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": { diff --git a/examples/source_file_geojson_raster.html b/examples/source_file_geojson_raster.html index 70b22c5483..b4ac0d5c7a 100644 --- a/examples/source_file_geojson_raster.html +++ b/examples/source_file_geojson_raster.html @@ -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({ @@ -85,37 +85,18 @@ 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, @@ -123,21 +104,16 @@ 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); }); diff --git a/examples/source_file_gpx_raster.html b/examples/source_file_gpx_raster.html index 75dc0cefc3..076aa87164 100644 --- a/examples/source_file_gpx_raster.html +++ b/examples/source_file_gpx_raster.html @@ -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); diff --git a/examples/source_file_kml_raster.html b/examples/source_file_kml_raster.html index ea0b8be4b4..bc8947a904 100644 --- a/examples/source_file_kml_raster.html +++ b/examples/source_file_kml_raster.html @@ -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({ @@ -78,8 +77,6 @@ }); var kmlLayer = new itowns.ColorLayer('Kml', { - name: 'kml', - transparent: true, source: kmlSource, style: kmlStyle, addLabelLayer: true, diff --git a/examples/source_file_shapefile.html b/examples/source_file_shapefile.html index 5413766e5d..16ca3a0c7c 100644 --- a/examples/source_file_shapefile.html +++ b/examples/source_file_shapefile.html @@ -25,7 +25,7 @@ // `viewerDiv` will contain iTowns' rendering area (``) var viewerDiv = document.getElementById('viewerDiv'); - // Instanciate iTowns GlobeView* + // Instantiate iTowns GlobeView* var view = new itowns.GlobeView(viewerDiv, placement); var menuGlobe = new GuiTools('menuDiv', view); @@ -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 }); - }); + })); +