UNPKG

terriajs

Version:

Geospatial data visualization platform.

155 lines 707 kB
{ "docs": [ { "location": "/", "text": "TerriaJS\n is an open-source framework for web-based geospatial catalog explorers.\n\n\n\n\nGetting Started\n: Quick start guide to building your first TerriaJS application.\n\n\nCustomizing\n: Configure and tweak a TerriaJS application, including skinning and setting up the catalog.\n\n\nConnecting to Data\n: Connect TerriaJS to your servers and data.\n\n\nDeploying\n: Deploy a TerriaJS application in simple and advanced scenarios.\n\n\nContributing\n: Add new features to TerriaJS, be part of the TerriaJS development team, set up a development environment, write tests, and perform code reviews.\n\n\n\n\nLooking for help using a TerriaJS-based site? Try the \nNationalMap user documentation\n.\n\n\nThis documentation is maintained at \ngithub.com/TerriaJS/TerriaJS/tree/master/doc\n.\n\n\nIt can be viewed at \nterria.io/Documentation\n.", "title": "Home" }, { "location": "/getting-started/", "text": "The easiest way to get started with TerriaJS is to use \nTerriaMap\n. TerriaMap is a full-featured application built on TerriaJS, ready to be customized with your own branding and catalog. It is also a great starting point for more in-depth customization.\n\n\nThis guide explains how to build and run TerriaMap locally. See \nDeploying\n to learn how to deploy it for use by others.\n\n\nYou may also be interested in how to \nmake your own map without writing any code\n.\n\n\nQuick Start\n\n\nIf you've done this sort of thing before, you'll find it easy to clone and build TerriaMap with these quick instructions:\n\n\ngit clone https://github.com/TerriaJS/TerriaMap.git\n\ncd TerriaMap\n\nnpm install \n npm run gulp \n npm start\n\n# Open at http://localhost:3001\n\n\n\n\nIf you run into trouble or want more explanation, read on.\n\n\nPrerequisites\n\n\nTerriaJS can be built and run on almost any macOS, Linux, or Windows system. The following are required to build TerriaJS:\n\n\n\n\nThe Bash command shell. On macOS or Linux you almost certainly already have this. On Windows, you can easily get it by installing \nGit for Windows\n. In the instructions below, we assume you're using a Bash command prompt.\n\n\nNode.js\n v6.0 or later. v7.x and v8.x are also known to work. You can check your node version by running \nnode --version\n on the command-line.\n\n\nnpm\n v3.0 or later. v4.x and v5.x are also known to work. npm is usually installed automatically alongside the above. You can check your npm version by running \nnpm --version\n.\n\n\n\n\nThe following components are optional:\n\n\n\n\nGDAL\n - Used for the conversion service that transforms Esri Shapefiles and other more obscure formats into GeoJSON for display in TerriaJS. This is \nnot\n required for formats that TerriaJS supports directly, including KML, GeoJSON, etc.\n\n\n\n\nCloning TerriaMap\n\n\nThe latest version of TerriaMap is on \nGitHub\n, and the preferred way to get it is by using \ngit\n:\n\n\ngit clone https://github.com/TerriaJS/TerriaMap.git\n\ncd TerriaMap\n\n\n\n\nIf you're unable to use git, you can also \ndownload a ZIP file\n and extract it somewhere on your system. We recommend using git, though, because it makes it much easier to update to later versions in the future.\n\n\nInstalling Dependencies\n\n\nAll of the dependencies required to build and run TerriaMap, other than the prerequisites listed above, are installed using \nnpm\n:\n\n\nnpm install\n\n\n\n\nThe dependencies are installed in the \nnode_modules\n subdirectory. No global changes are made to your system.\n\n\nBuilding TerriaMap\n\n\nDo a standard build of TerriaMap with:\n\n\nnpm run gulp\n\n\n\n\nOr, you can create a minified release build with:\n\n\nnpm run gulp release\n\n\n\n\nTo watch for changes and automatically do an incremental build when any are detected, use:\n\n\nnpm run gulp watch\n\n\n\n\nnpm run gulp\n simply runs \ngulp\n, so you can use that directly if you prefer (run \nnpm install -g gulp\n to install it globally).\n\n\nThe full set of \ngulp\n tasks can be found on the \nDevelopment Environment\n page.\n\n\nRunning TerriaMap\n\n\nTerriaMap includes a simple Node.js-based web server, called \nterriajs-server\n. To start it, run:\n\n\nnpm start\n\n\n\n\nThen, open a web browser on \nhttp://localhost:3001\n to use TerriaMap.\n\n\nKeeping up with Updates\n\n\nIf you're building an application by using TerriaMap as a starting point, you will want to keep in sync as TerriaMap is improved and updated to use new versions of TerriaJS. Forking the TerriaMap repo and using git to keep it in sync is outside the scope of this document, but GitHub has a \nnice explanation\n.\n\n\nAfter pulling new changes, you will need to run \nnpm install\n again to pick up any changed dependencies and then build TerriaMap. If you have problems building or running, it is sometimes helpful to remove and reinstall the dependencies from npm:\n\n\nrm -rf node_modules\nnpm install\n\n\n\n\nNext Steps\n\n\nNow that you have a working local build of TerriaMap, you may want to \ncustomize it\n or \ndeploy it\n for others to use.", "title": "Getting Started" }, { "location": "/getting-started/#quick-start", "text": "If you've done this sort of thing before, you'll find it easy to clone and build TerriaMap with these quick instructions: git clone https://github.com/TerriaJS/TerriaMap.git\n\ncd TerriaMap\n\nnpm install npm run gulp npm start\n\n# Open at http://localhost:3001 If you run into trouble or want more explanation, read on.", "title": "Quick Start" }, { "location": "/getting-started/#prerequisites", "text": "TerriaJS can be built and run on almost any macOS, Linux, or Windows system. The following are required to build TerriaJS: The Bash command shell. On macOS or Linux you almost certainly already have this. On Windows, you can easily get it by installing Git for Windows . In the instructions below, we assume you're using a Bash command prompt. Node.js v6.0 or later. v7.x and v8.x are also known to work. You can check your node version by running node --version on the command-line. npm v3.0 or later. v4.x and v5.x are also known to work. npm is usually installed automatically alongside the above. You can check your npm version by running npm --version . The following components are optional: GDAL - Used for the conversion service that transforms Esri Shapefiles and other more obscure formats into GeoJSON for display in TerriaJS. This is not required for formats that TerriaJS supports directly, including KML, GeoJSON, etc.", "title": "Prerequisites" }, { "location": "/getting-started/#cloning-terriamap", "text": "The latest version of TerriaMap is on GitHub , and the preferred way to get it is by using git : git clone https://github.com/TerriaJS/TerriaMap.git\n\ncd TerriaMap If you're unable to use git, you can also download a ZIP file and extract it somewhere on your system. We recommend using git, though, because it makes it much easier to update to later versions in the future.", "title": "Cloning TerriaMap" }, { "location": "/getting-started/#installing-dependencies", "text": "All of the dependencies required to build and run TerriaMap, other than the prerequisites listed above, are installed using npm : npm install The dependencies are installed in the node_modules subdirectory. No global changes are made to your system.", "title": "Installing Dependencies" }, { "location": "/getting-started/#building-terriamap", "text": "Do a standard build of TerriaMap with: npm run gulp Or, you can create a minified release build with: npm run gulp release To watch for changes and automatically do an incremental build when any are detected, use: npm run gulp watch npm run gulp simply runs gulp , so you can use that directly if you prefer (run npm install -g gulp to install it globally). The full set of gulp tasks can be found on the Development Environment page.", "title": "Building TerriaMap" }, { "location": "/getting-started/#running-terriamap", "text": "TerriaMap includes a simple Node.js-based web server, called terriajs-server . To start it, run: npm start Then, open a web browser on http://localhost:3001 to use TerriaMap.", "title": "Running TerriaMap" }, { "location": "/getting-started/#keeping-up-with-updates", "text": "If you're building an application by using TerriaMap as a starting point, you will want to keep in sync as TerriaMap is improved and updated to use new versions of TerriaJS. Forking the TerriaMap repo and using git to keep it in sync is outside the scope of this document, but GitHub has a nice explanation . After pulling new changes, you will need to run npm install again to pick up any changed dependencies and then build TerriaMap. If you have problems building or running, it is sometimes helpful to remove and reinstall the dependencies from npm: rm -rf node_modules\nnpm install", "title": "Keeping up with Updates" }, { "location": "/getting-started/#next-steps", "text": "Now that you have a working local build of TerriaMap, you may want to customize it or deploy it for others to use.", "title": "Next Steps" }, { "location": "/customizing/", "text": "TerriaJS can be extensively customized, often without writing any code. The catalog and many aspects of the look and feel are controlled by JSON configuration files.\n\n\nThis section explains the various ways to customize a TerriaJS application. It assumes you have already completed the \nGetting Started\n section and have a working Terria Map.\n\n\n\n\nClient-side Config\n: Configure which catalog (init) files to load, the application name and support email address, the branding at the top of the application, disclaimers, keys for Bing Maps and Google Analytics, and more.\n\n\nInitialization Files\n: TerriaJS init files describe the catalog that will be presented to the user, the initial map view, and more. Init files let you connect TerriaJS to your servers and data.\n\n\nServer-side Config\n: Configure which domains the server will proxy for (to avoid \nCross-Origin Resource Sharing (CORS) problems\n), persistence of sharing data, and more.\n\n\nSkinning\n: Customize the look and feel of a TerriaJS application.", "title": "Overview" }, { "location": "/customizing/client-side-config/", "text": "The file \nwwwroot/config.json\n in TerriaMap contains client-side configuration parameters.\n\n\nIt has this structure:\n\n\n{\n \ninitializationUrls\n : [\n \nmyinitfile\n,\n \nanotherinitfile\n\n ],\n \nparameters\n: {\n \nbingMapsKey\n: \n...\n,\n ...\n }\n}\n\n\n\n\nintializationUrls\n\n\nEach string in the array specifies a single \ninitialization file\n (catalog) to be loaded by TerriaJS. The init files are loaded in the order they're specified.\n\n\nIf a string ends with \n.json\n, it is assumed to be a complete relative or absolute URL to an init file. The file may be on an entirely separate web server, but in that case it must be accessible for \nCross-Origin Resource Sharing (CORS)\n. It may also be generated by a service rather than being a simple static file. If the URL is relative, it is relative to the config file.\n\n\nIf the string does not end with \n.json\n, such as \n\"foo\"\n, it refers to an init file on the same web server at \ninit/foo.json\n. In a TerriaMap directory on your computer, it can be found at \nwwwroot/init/foo.json\n.\n\n\nparameters\n\n\nSpecifies various options for configuring TerriaJS:\n\n\n\n\n\n\n\n\nOption\n\n\nMeaning\n\n\n\n\n\n\n\n\n\n\n\"appName\"\n\n\nTerriaJS uses this name whenever it needs to display the name of the application.\n\n\n\n\n\n\n\"autoPlay\"\n\n\ntrue to start playing time-dynamic datasets on load, or false to start them paused.\n\n\n\n\n\n\n\"bingMapsKey\"\n\n\nA \nBing Maps API key\n used for requesting Bing Maps base maps and using the Bing Maps geocoder for searching. It is your responsibility to request a key and comply with all terms and conditions.\n\n\n\n\n\n\n\"brandBarElements\": [ ]\n\n\nAn array of strings of HTML that fill up the top left logo space.\n\n\n\n\n\n\n\"defaultMaximumShownFeatureInfos\"\n\n\nThe maximum number of \"feature info\" boxes that can be displayed when clicking a point. (Default: 100)\n\n\n\n\n\n\n\"disclaimer\": {\n\"text\": \"\",\n\"url\": \"\"\n}\n\n\nThis text will be displayed prominently at the bottom of the map, with a clickable link to the URL.\n\n\n\n\n\n\n\"feedbackUrl\"\n\n\nURL of the service used to send feedback. If not specified, the \"Give Feedback\" button will not appear.\n\n\n\n\n\n\n\"googleAnalyticsKey\"\n\n\nA Google API key for \nGoogle Analytics\n. If specified, TerriaJS will send various events about how it's used to Google Analytics.\n\n\n\n\n\n\n\"googleAnalyticsOptions\"\n\n\nAdditional options that will be passed to the Google Analytics call.\n\n\n\n\n\n\n\"printDisclaimer\": {\n\"text\": \"\",\n\"url\": \"\"\n}\n\n\nSame as \ndisclaimer\n, except only shown in printed views.\n\n\n\n\n\n\n\"supportEmail\"\n\n\nThe email address shown when things go wrong.\n\n\n\n\n\n\n\"mobileDefaultViewerMode\"\n\n\nA string specifying the default view mode to load when running on a mobile platform. Options are: \n\"3DTerrain\"\n, \n\"3DSmooth\"\n, \n\"2D\"\n. (Default: \n\"2D\"\n)\n\n\n\n\n\n\n\"initFragmentPaths\"\n\n\nAn array of base paths to use to try to use to resolve init fragments in the URL. For example, if this property is \n[ \"init/\", \"http://example.com/init/\"]\n, then a URL with \n#test\n will first try to load \ninit/test.json\n and, if that fails, next try to load \nhttp://example.com/init/test.json\n. If not specified, this property defaults to \n[ \"init/\" ]\n.\n\n\n\n\n\n\n\"disableMyLocation\"\n\n\nTrue to disable the \"go to my location\" button.\n\n\n\n\n\n\n\"disableSplitter\"\n\n\nTrue to disable the use of the splitter control.\n\n\n\n\n\n\n\"tabbedCatalog\"\n\n\nTrue to create a separate explorer panel tab for each top-level catalog group to list its items in.\n\n\n\n\n\n\n\"interceptBrowserPrint\"\n\n\nTrue (the default) to intercept the browser's print feature and use a custom one accessible through the Share panel.\n\n\n\n\n\n\n\"useCesiumIonTerrain\"\n\n\nTrue to use Cesium World Terrain from Cesium ion. False to use terrain from the URL specified with the \n\"cesiumTerrainUrl\"\n property. If this property is false and \n\"cesiumTerrainUrl\"\n is not specified, the 3D view will use a smooth ellipsoid instead of a terrain surface. Defaults to true.\n\n\n\n\n\n\n\"cesiumIonAccessToken\"\n\n\nThe access token to use with Cesium ion. If \n\"useCesiumIonTerrain\"\n is true and this property is not specified, the Cesium default Ion key will be used. It is a violation of the Ion terms of use to use the default key in a deployed application.\n\n\n\n\n\n\n\"cesiumTerrainUrl\"\n\n\nThe URL to use for Cesium terrain in the 3D model. This property is ignored if \n\"useCesiumIonTerrain\"\n is set to true.\n\n\n\n\n\n\n\n\nAdvanced options\n\n\nThese options only need to be changed in unusual deployments. They define the URLs that are accessed for certain additional services, so must be changed if deploying as a static site, for instance.\n\n\n\n\n\n\n\n\nOption\n\n\nMeaning\n\n\nDefault\n\n\n\n\n\n\n\n\n\n\n\"conversionServiceBaseUrl\"\n\n\nURL of OGR2OGR conversion service (part of TerriaJS-Server).\n\n\nconvert/\n\n\n\n\n\n\n\"corsProxyBaseUrl\"\n\n\nURL of CORS proxy service (part of TerriaJS-Server)\n\n\nproxy/\n\n\n\n\n\n\n\"proj4ServiceBaseUrl\"\n\n\nURL of Proj4 projection lookup service (part of TerriaJS-Server)\n\n\nproj4/\n\n\n\n\n\n\n\"proxyableDomainsUrl\"\n\n\nURL of list of domains which the CORS proxy service will allow to be proxied.\n\n\nproxyabledomains/\n\n\n\n\n\n\n\"regionMappingDefinitionsUrl\"\n\n\nURL of the JSON file that defines region mapping for CSV files.\n\n\ndata/regionMapping.json", "title": "Client-side Config" }, { "location": "/customizing/client-side-config/#intializationurls", "text": "Each string in the array specifies a single initialization file (catalog) to be loaded by TerriaJS. The init files are loaded in the order they're specified. If a string ends with .json , it is assumed to be a complete relative or absolute URL to an init file. The file may be on an entirely separate web server, but in that case it must be accessible for Cross-Origin Resource Sharing (CORS) . It may also be generated by a service rather than being a simple static file. If the URL is relative, it is relative to the config file. If the string does not end with .json , such as \"foo\" , it refers to an init file on the same web server at init/foo.json . In a TerriaMap directory on your computer, it can be found at wwwroot/init/foo.json .", "title": "intializationUrls" }, { "location": "/customizing/client-side-config/#parameters", "text": "Specifies various options for configuring TerriaJS: Option Meaning \"appName\" TerriaJS uses this name whenever it needs to display the name of the application. \"autoPlay\" true to start playing time-dynamic datasets on load, or false to start them paused. \"bingMapsKey\" A Bing Maps API key used for requesting Bing Maps base maps and using the Bing Maps geocoder for searching. It is your responsibility to request a key and comply with all terms and conditions. \"brandBarElements\": [ ] An array of strings of HTML that fill up the top left logo space. \"defaultMaximumShownFeatureInfos\" The maximum number of \"feature info\" boxes that can be displayed when clicking a point. (Default: 100) \"disclaimer\": { \"text\": \"\", \"url\": \"\" } This text will be displayed prominently at the bottom of the map, with a clickable link to the URL. \"feedbackUrl\" URL of the service used to send feedback. If not specified, the \"Give Feedback\" button will not appear. \"googleAnalyticsKey\" A Google API key for Google Analytics . If specified, TerriaJS will send various events about how it's used to Google Analytics. \"googleAnalyticsOptions\" Additional options that will be passed to the Google Analytics call. \"printDisclaimer\": { \"text\": \"\", \"url\": \"\" } Same as disclaimer , except only shown in printed views. \"supportEmail\" The email address shown when things go wrong. \"mobileDefaultViewerMode\" A string specifying the default view mode to load when running on a mobile platform. Options are: \"3DTerrain\" , \"3DSmooth\" , \"2D\" . (Default: \"2D\" ) \"initFragmentPaths\" An array of base paths to use to try to use to resolve init fragments in the URL. For example, if this property is [ \"init/\", \"http://example.com/init/\"] , then a URL with #test will first try to load init/test.json and, if that fails, next try to load http://example.com/init/test.json . If not specified, this property defaults to [ \"init/\" ] . \"disableMyLocation\" True to disable the \"go to my location\" button. \"disableSplitter\" True to disable the use of the splitter control. \"tabbedCatalog\" True to create a separate explorer panel tab for each top-level catalog group to list its items in. \"interceptBrowserPrint\" True (the default) to intercept the browser's print feature and use a custom one accessible through the Share panel. \"useCesiumIonTerrain\" True to use Cesium World Terrain from Cesium ion. False to use terrain from the URL specified with the \"cesiumTerrainUrl\" property. If this property is false and \"cesiumTerrainUrl\" is not specified, the 3D view will use a smooth ellipsoid instead of a terrain surface. Defaults to true. \"cesiumIonAccessToken\" The access token to use with Cesium ion. If \"useCesiumIonTerrain\" is true and this property is not specified, the Cesium default Ion key will be used. It is a violation of the Ion terms of use to use the default key in a deployed application. \"cesiumTerrainUrl\" The URL to use for Cesium terrain in the 3D model. This property is ignored if \"useCesiumIonTerrain\" is set to true.", "title": "parameters" }, { "location": "/customizing/client-side-config/#advanced-options", "text": "These options only need to be changed in unusual deployments. They define the URLs that are accessed for certain additional services, so must be changed if deploying as a static site, for instance. Option Meaning Default \"conversionServiceBaseUrl\" URL of OGR2OGR conversion service (part of TerriaJS-Server). convert/ \"corsProxyBaseUrl\" URL of CORS proxy service (part of TerriaJS-Server) proxy/ \"proj4ServiceBaseUrl\" URL of Proj4 projection lookup service (part of TerriaJS-Server) proj4/ \"proxyableDomainsUrl\" URL of list of domains which the CORS proxy service will allow to be proxied. proxyabledomains/ \"regionMappingDefinitionsUrl\" URL of the JSON file that defines region mapping for CSV files. data/regionMapping.json", "title": "Advanced options" }, { "location": "/customizing/initialization-files/", "text": "A catalog in TerriaJS is defined in one or more \"initialization files\" (or init files). In a default TerriaMap installation, the main init file is found in \nwwwroot/init/terria.json\n.\n\n\nAn init file is a \nJSON file\n with this basic structure:\n\n\n{\n \ncatalog\n: [\n {\n \ntype\n: \ngroup\n,\n \nname\n: \nMy group\n,\n \nitems\n: [\n ...\n ]\n },\n ...\n ],\n \nhomeCamera\n: {\n \nnorth\n: -8,\n \neast\n: 158,\n \nsouth\n: -45,\n \nwest\n: 109\n },\n \ninitialCamera\n: { ... },\n \ncorsDomains\n: [ \nmyserver.gov.au\n ]\n}\n\n\n\n\nKey points:\n\n\n\n\ncatalog\n is an array.\n\n\nEvery element of that array must have a \ntype\n (corresponding to a value recognised by TerriaJS) and a \nname\n.\n\n\nThe three major categories of catalog member types are:\n\n\nCatalog Group\n: A group (folder) of items. Different group types allow the contents to be manually specified or to be automatically determined by querying various types of server.\n\n\nCatalog Item\n: Actual geospatial or chart data from a file or service, in various formats.\n\n\nCatalog Function\n: A parameterized service, such as a Web Processing Service (WPS). The user supplies the parameters and gets back some result.\n\n\n\n\n\n\n\n\nMost of the other properties of each layer depend on the specific type. See the links above for details of each type.\n\n\nUsing a catalog file\n\n\nThere are four ways to load a catalog file into a TerriaJS application:\n\n\n\n\nStore it in Terria Map's \nwwwroot/init\n directory, and refer to it in the \ninitializationUrls\n section of the \nconfig.json\n file. It is loaded automatically when you visit the webpage. This is how \nwwwroot/init/terria.json\n is loaded in the default TerriaMap setup.\n\n\nStore it in Terria Maps's \nwwwroot/init\n directory, without adding it to config.json. Add the catalog file name (without \n.json\n) to the URL after \n#\n. For instance, \nexample.com/terria#mycatalog\n. See \nControlling with URL Parameters\n for more information. This method is useful when developing a catalog that is not quite ready for public access, but it is helpful to show it to interested stakeholders.\n\n\nStore it anywhere on the web (on a \nCORS-enabled\n server). Add the complete URL (including \n.json\n) to the URL, after \n#\n. For instance, \nhttp://nationalmap.gov.au/#http://example.com/mycatalog.json\n. This method is useful when developing services for a TerriaJS instance which you don't directly control, and for rapidly previewing changes which you can also share with people.\n\n\nStore it locally, then drag and drop it into the Terria Map window.\n\n\n\n\nAll catalog files, however loaded, are merged together in TerriaJS. Any two items with the same name and place in the tree are combined. This means that if two catalog files each define a group called \"Water\", there will be only one \"Water\" group in Terria, containing the two sets of group members merged together.\n\n\nEditing catalog files\n\n\nCatalog files can be edited three ways:\n\n\n\n\nUsing a desktop text editor. Be very careful to ensure that your file is valid JSON. This is more restrictive format than simple JavaScript, for instance. You can use \nhttp://jsonlint.com/\n.\n\n\nUsing a JSON-specific editor, such as \nhttp://www.jsoneditoronline.org/\n. This has the advantage that your file will be valid JSON.\n\n\nUsing the TerriaJS Catalog Editor, currently available in a preview version at \nhttp://terria.io/DataSourceEditor/\n. This editor is not yet considered reliable, and may cause data corruption.\n\n\n\n\nCatalog file properties\n\n\ncorsDomains\n\n\nBy default, TerriaJS proxies all requests within the proxy whitelist specified in the \nServer-side Config\n, making the assumption that the servers do not support CORS. You can add hosts that are known to support CORS to this property to avoid proxying them.\n\n\n\"corsDomains\": [ \"myserver.gov.au\" ]\n\n\nSee \nCross-Origin Resource Sharing\n for more information.\n\n\nhomeCamera\n and \ninitialCamera\n\n\nMaps have two camera positions, \nhomeCamera\n and \ninitialCamera\n. They are specified identically. All the examples here use \nhomeCamera\n, but apply equally to both.\n\n\n\n\ninitialCamera\n: the location when the map first displays\n\n\nhomeCamera\n: where the camera goes when you click the \"home\" button between the zoom-in and zoom-out buttons.\n\n\n\n\nOption 1: \nnorth\n, \nsouth\n, \neast\n, \nwest\n\n\nThe bounding box method uses \nnorth\n, \neast\n,\nsouth\n, and \nwest\n, in lat/lng decimal degrees. The camera will be positioned in the center point of those bounds, looking toward the Earth's center, zoomed back enough to see to the edges of the bounds.\n\n\nThis is the only mode supported in 2D mode (Leaflet). Therefore, you should always include a bounding box, even if you also use another mode.\n\n\nhomeCamera\n: {\n \nnorth\n: -8,\n \neast\n: 158,\n \nsouth\n: -45,\n \nwest\n: 109\n}\n\n\n\n\nOption 2: \nposition\n, \ndirection\n and \nup\n\n\nThis overrides Option 1.\n\n\nYou can specify \nposition\n, \ndirection\n, and \nup\n (as well as\n\nnorth\n, \neast\n,\nsouth\n, and \nwest\n). \nposition\n, \ndirection\n and \nup\n\nneed \nx\n, \ny\n and \nz\n keys specifying locations in\n\nECEF\n metre coordinates, which\nmeans the origin is the centre of the Earth, positive Z points to\nthe north pole, positive X points toward\n\n\"Null Island\"\n where the\nequator intersects with 0 degrees longitude, and positive Y points at\n(0, 90E) -- which is in the Indian Ocean south of the Bay of Bengal.\n\n\n\n\nposition\n: where the camera is\n\n\ndirection\n: where the camera is looking\n\n\nup\n: which way is \"up\", which determines how the camera is rotated\n\n\n\n\nFor most purposes positioning this way is difficult for normal\nhumans. To see an example, move the camera to some location, click the \"share\" button (and choose to not use the\nURL shortner), then URL-decode the URL you get.\n\n\nhomeCamera\n: {\n \nwest\n: 105.51019777628066,\n \nsouth\n: -39.61110094535454,\n \neast\n: 161.48980219597954,\n \nnorth\n: -9.09249015267353,\n \nposition\n: {\n \nx\n: -6685409.955422118,\n \ny\n: 7044952.140379313,\n \nz\n: -4828130.30167422\n },\n \ndirection\n: {\n \nx\n: 0.6155666547559182,\n \ny\n: -0.6486719065674744,\n \nz\n: 0.4475516184561574\n },\n \nup\n: {\n \nx\n: -0.30807420442344124,\n \ny\n: 0.3246424737331665,\n \nz\n: 0.8942580996654569\n }\n}\n\n\n\n\nOption 3: \npositionHeading\n (like an aircraft)\n\n\nSetting \npositionHeading\n is useful for when you're showing a view from an aircraft or\nsatellite, and overrides Options 1 and 2.\n\n\nIt has the following attributes:\n\n\n\n\ncameraLongitude\n: longitude of camera\n\n\ncameraLatitude\n: latitude of camera\n\n\ncameraHeight\n: height of camera above earth's surface, probably in metres\n\n\nheading\n: in degrees clockwise from north (90 is east)\n\n\npitch\n: how much the camera is tilted, in degrees down from horizontal (-90 is straight down)\n\n\nroll\n: how much the camera is rotated left or right, in degrees\n\n\n\n\nhomeCamera\n: {\n \npositionHeading\n: {\n \ncameraLongitude\n: 145,\n \ncameraLatitude\n: -37,\n \ncameraHeight\n: 1000,\n \nheading\n: 0,\n \npitch\n: -70,\n \nroll\n: 0,\n }\n}\n\n\n\n\nOption 4: \nlookAt\n (a feature)\n\n\nlookAt\n is probably the most useful one for showing a feature on the\nmap, and overrides Options 1, 2, and 3.\n\n\nIt has these attributes:\n\n\n\n\ntargetLongitude\n: The longitude to look at\n\n\ntargetLatitude\n: The latitude to look at\n\n\ntargetHeight\n: in meters above the WGS84 ellipsoid (positive is up)\n\n\nheading\n: in degrees clockwise from north\n\n\npitch\n: in degrees down from horizontal (so negative values mean you're looking at the sky)\n\n\nrange\n: in meters from the thing you're looking at\n\n\n\n\nhomeCamera\n: {\n \nlookAt\n: {\n \ntargetLongitude\n: 145,\n \ntargetLatitude\n: 37,\n \ntargetHeight\n: 0,\n \nheading\n: 0,\n \npitch\n: -90,\n \nrange\n: 1000,\n }\n}", "title": "Initialization Files" }, { "location": "/customizing/initialization-files/#using-a-catalog-file", "text": "There are four ways to load a catalog file into a TerriaJS application: Store it in Terria Map's wwwroot/init directory, and refer to it in the initializationUrls section of the config.json file. It is loaded automatically when you visit the webpage. This is how wwwroot/init/terria.json is loaded in the default TerriaMap setup. Store it in Terria Maps's wwwroot/init directory, without adding it to config.json. Add the catalog file name (without .json ) to the URL after # . For instance, example.com/terria#mycatalog . See Controlling with URL Parameters for more information. This method is useful when developing a catalog that is not quite ready for public access, but it is helpful to show it to interested stakeholders. Store it anywhere on the web (on a CORS-enabled server). Add the complete URL (including .json ) to the URL, after # . For instance, http://nationalmap.gov.au/#http://example.com/mycatalog.json . This method is useful when developing services for a TerriaJS instance which you don't directly control, and for rapidly previewing changes which you can also share with people. Store it locally, then drag and drop it into the Terria Map window. All catalog files, however loaded, are merged together in TerriaJS. Any two items with the same name and place in the tree are combined. This means that if two catalog files each define a group called \"Water\", there will be only one \"Water\" group in Terria, containing the two sets of group members merged together.", "title": "Using a catalog file" }, { "location": "/customizing/initialization-files/#editing-catalog-files", "text": "Catalog files can be edited three ways: Using a desktop text editor. Be very careful to ensure that your file is valid JSON. This is more restrictive format than simple JavaScript, for instance. You can use http://jsonlint.com/ . Using a JSON-specific editor, such as http://www.jsoneditoronline.org/ . This has the advantage that your file will be valid JSON. Using the TerriaJS Catalog Editor, currently available in a preview version at http://terria.io/DataSourceEditor/ . This editor is not yet considered reliable, and may cause data corruption.", "title": "Editing catalog files" }, { "location": "/customizing/initialization-files/#catalog-file-properties", "text": "", "title": "Catalog file properties" }, { "location": "/customizing/initialization-files/#corsdomains", "text": "By default, TerriaJS proxies all requests within the proxy whitelist specified in the Server-side Config , making the assumption that the servers do not support CORS. You can add hosts that are known to support CORS to this property to avoid proxying them. \"corsDomains\": [ \"myserver.gov.au\" ] See Cross-Origin Resource Sharing for more information.", "title": "corsDomains" }, { "location": "/customizing/initialization-files/#homecamera-and-initialcamera", "text": "Maps have two camera positions, homeCamera and initialCamera . They are specified identically. All the examples here use homeCamera , but apply equally to both. initialCamera : the location when the map first displays homeCamera : where the camera goes when you click the \"home\" button between the zoom-in and zoom-out buttons.", "title": "homeCamera and initialCamera" }, { "location": "/customizing/initialization-files/#option-1-north-south-east-west", "text": "The bounding box method uses north , east , south , and west , in lat/lng decimal degrees. The camera will be positioned in the center point of those bounds, looking toward the Earth's center, zoomed back enough to see to the edges of the bounds. This is the only mode supported in 2D mode (Leaflet). Therefore, you should always include a bounding box, even if you also use another mode. homeCamera : {\n north : -8,\n east : 158,\n south : -45,\n west : 109\n}", "title": "Option 1: north, south, east, west" }, { "location": "/customizing/initialization-files/#option-2-position-direction-and-up", "text": "This overrides Option 1. You can specify position , direction , and up (as well as north , east , south , and west ). position , direction and up \nneed x , y and z keys specifying locations in ECEF metre coordinates, which\nmeans the origin is the centre of the Earth, positive Z points to\nthe north pole, positive X points toward \"Null Island\" where the\nequator intersects with 0 degrees longitude, and positive Y points at\n(0, 90E) -- which is in the Indian Ocean south of the Bay of Bengal. position : where the camera is direction : where the camera is looking up : which way is \"up\", which determines how the camera is rotated For most purposes positioning this way is difficult for normal\nhumans. To see an example, move the camera to some location, click the \"share\" button (and choose to not use the\nURL shortner), then URL-decode the URL you get. homeCamera : {\n west : 105.51019777628066,\n south : -39.61110094535454,\n east : 161.48980219597954,\n north : -9.09249015267353,\n position : {\n x : -6685409.955422118,\n y : 7044952.140379313,\n z : -4828130.30167422\n },\n direction : {\n x : 0.6155666547559182,\n y : -0.6486719065674744,\n z : 0.4475516184561574\n },\n up : {\n x : -0.30807420442344124,\n y : 0.3246424737331665,\n z : 0.8942580996654569\n }\n}", "title": "Option 2: position, direction and up" }, { "location": "/customizing/initialization-files/#option-3-positionheading-like-an-aircraft", "text": "Setting positionHeading is useful for when you're showing a view from an aircraft or\nsatellite, and overrides Options 1 and 2. It has the following attributes: cameraLongitude : longitude of camera cameraLatitude : latitude of camera cameraHeight : height of camera above earth's surface, probably in metres heading : in degrees clockwise from north (90 is east) pitch : how much the camera is tilted, in degrees down from horizontal (-90 is straight down) roll : how much the camera is rotated left or right, in degrees homeCamera : {\n positionHeading : {\n cameraLongitude : 145,\n cameraLatitude : -37,\n cameraHeight : 1000,\n heading : 0,\n pitch : -70,\n roll : 0,\n }\n}", "title": "Option 3: positionHeading (like an aircraft)" }, { "location": "/customizing/initialization-files/#option-4-lookat-a-feature", "text": "lookAt is probably the most useful one for showing a feature on the\nmap, and overrides Options 1, 2, and 3. It has these attributes: targetLongitude : The longitude to look at targetLatitude : The latitude to look at targetHeight : in meters above the WGS84 ellipsoid (positive is up) heading : in degrees clockwise from north pitch : in degrees down from horizontal (so negative values mean you're looking at the sky) range : in meters from the thing you're looking at homeCamera : {\n lookAt : {\n targetLongitude : 145,\n targetLatitude : 37,\n targetHeight : 0,\n heading : 0,\n pitch : -90,\n range : 1000,\n }\n}", "title": "Option 4: lookAt (a feature)" }, { "location": "/customizing/server-side-config/", "text": "Coming soon!\n\n\nIn the meantime, see \nhttps://github.com/TerriaJS/terriajs-server\n.", "title": "Server-side Config" }, { "location": "/customizing/skinning/", "text": "Once you have TerriaMap up and running, you will want to make some changes to logos, labels, and colors to give your application a distinct appearance.\n\n\nHere are some TerriaMap files you may want to tweak.\n\n\nwwwroot/index.html\n\n\nChange the \ntitle\n and the \nmeta\n elements (e.g. \ndescription\n, \ncopyright\n) to reflect your application. You may also want to change the favicon.\n\n\nwwwroot/config.json\n\n\nChange the \nappName\n, \nbrandBarElements\n, etc. See \nClient-side Config\n for more information.\n\n\nlib/Styles/variables.scss\n\n\nUncomment and tweak the SASS variables to set the main colors and fonts used throughout the application. You will need to \nrebuild TerriaMap\n after changing this file.\n\n\nlib/Views/global.scss\n\n\nIn this file, you can override any of TerriaJS's CSS. It contains some commented-out examples of some things you might like to change. You can also use your browser's DOM inspector to look at elements in the TerriaJS UI and which CSS classes they use, and then override those classes as desired in this file. You will need to \nrebuild TerriaMap\n after changing this file.\n\n\nlib/Views/UserInterface.jsx\n\n\nThis file creates the main user interface, using \nReact\n. In this file you can add extra menu items across the top of the screen, or add extra buttons to the navigation controls area on the right side of the screen.\n\n\nFor example, here's a version that includes an extra menu that links to terria.io, and adds the measure tool to the navigation area:\n\n\nimport React from 'react';\n\nimport version from '../../version';\n\nimport StandardUserInterface from 'terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface.jsx';\nimport MenuItem from 'terriajs/lib/ReactViews/StandardUserInterface/customizable/MenuItem';\nimport RelatedMaps from './RelatedMaps';\nimport { Menu, Nav } from 'terriajs/lib/ReactViews/StandardUserInterface/customizable/Groups';\nimport MeasureTool from 'terriajs/lib/ReactViews/Map/Navigation/MeasureTool';\n\nimport './global.scss';\n\nexport default function UserInterface(props) {\n return (\n \nStandardUserInterface {... props} version={version}\n\n \nMenu\n\n \nRelatedMaps viewState={props.viewState} /\n\n \nMenuItem caption=\nAbout\n href=\nabout.html\n key=\nabout-link\n/\n\n \nMenuItem caption=\nTerriaJS\n href=\nhttp://terria.io\n key=\nterria-link\n/\n\n \n/Menu\n\n \nNav\n\n \nMeasureTool terria={props.viewState.terria} key=\nmeasure-tool\n/\n\n \n/Nav\n\n \n/StandardUserInterface\n\n );\n}\n\n\n\n\nYou will need to \nrebuild TerriaMap\n after changing this file.\n\n\nindex.js\n\n\nIt's not usually necessary to change this file, but it is the main entry point for TerriaMap, so you can add any extra initialization that your application needs here. You will need to \nrebuild TerriaMap\n after changing this file.", "title": "Skinning" }, { "location": "/connecting-to-data/", "text": "This section explains how to get your own catalogs and data into a TerriaJS application.\n\n\nBefore beginning, it is very important to understand \nCross-Origin Resource Sharing\n. Web browsers impose restrictions on how we're allowed to access data across hosts (e.g. accessing data on \ndata.gov.au\n from a web site running at \nnationalmap.gov.au\n). Understanding these issues will avoid a lot of frustration while trying to add your data to a TerriaJS application.\n\n\nTerriaJS can interface with three broad types if data:\n\n\n\n\nCatalog Group\n: A group (folder) of items. Different group types allow the contents to be manually specified or to be automatically determined by querying various types of server. TerriaJS can use many different types of servers to populate a group, including CKAN, CSW, WMS, and more. For example, if you define a catalog group that points at a Web Map Service (WMS) server, TerriaJS will query the WMS \nGetCapabilities\n when the group is opened and fill the group with all of the layers advertised by the WMS server.\n\n\nCatalog Item\n: Actual geospatial or chart data from a file or service, in various formats. TerriaJS supports WMS, KML, GeoJSON, ArcGIS MapServer, and many more files and services as catalog items.\n\n\nCatalog Function\n: A parameterized service, such as a Web Processing Service (WPS). The user supplies the parameters and gets back some result.", "title": "Overview" }, { "location": "/connecting-to-data/cross-origin-resource-sharing/", "text": "To ensure that TerriaJS is able to access your data, you must add all servers you intend to access to \ndevserverconfig.json\n's \nallowProxyFor\n list. This \"whitelist\" authorizes the proxy to work with those servers.\n\n\nFailing to do this may result in an error like this:\n\n\n...the server does not support CORS. If this is your server, verify that CORS is enabled and enable it if it is not. If you do not control the server, please contact the administrator of the server and ask them to enable CORS. Or ... ask us to add this server to the list of non-CORS-supporting servers that may be proxied.\n\n\nNext, you should add servers that \ndo\n support Cross-Origin Resource Sharing (CORS) to the \ncorsDomains\n list in your \ninitialization file\n. Servers in this list are contacted directly instead of going through the proxy... except:\n\n\n\n\nin Internet Explorer 9\n\n\nif an HTTPS web page is accessing an HTTP server (this way we avoid a mixed content warning from the browser).\n\n\n\n\nIf your server does \nnot\n support CORS, then you still need to add it to the \nallowProxyFor\n whitelist, but do not add it to the \ncorsDomains\n list. It will then be proxied.\n\n\nSometimes we deliberately exclude CORS-supporting servers from the \ncorsDomains\n list; the proxy caches its data, so we leverage its caching to improve performance.\n\n\nIn both lists, a server name \nfoo.org\n will be interpreted as \n*.foo.org\n. The port must match exactly. It's not very smart, so if you specify port 80 that won't match a server without a port specified, and vice-versa.\n\n\nThe downside to a permissive whitelist is that you'll proxy for more servers, and people could use your proxy to make their (malicious?) traffic look like it's coming from your server instead of from theirs.\n\n\nMore Detailed Explanation\n\n\nAs a general rule, web browsers do not allow web sites running on one host (e.g. \nnationalmap.gov.au\n) from accessing data running on another host (e.g. \ndata.gov.au\n) unless the data server (\ndata.gov.au\n in our example) explicitly enables a feature called Cross-Origin Resource Sharing (CORS) by including a special HTTP header in its response. Unfortunately, many servers still do not support CORS. If you control the server you're trying to access data on, enabling CORS is almost certainly a good idea, and you can read more about how to do it at \nenable-cors.org\n.\n\n\nTerriaJS has a trick to allow it to access data from a server even if that server doesn't support CORS: it uses a proxy server built into \nterriajs-server\n, which is included with TerriaMap. The idea is simple: we avoid the need for cross-origin support from servers by running a proxy on the same host that runs our app. That proxy can make requests to \nother\n servers on our application's behalf. This works because cross-origin restrictions are a security feature of web browsers, not web servers. The proxy makes it look to the browser like the data comes from the same origin. There's nothing dodgy about this. The risks that browsers are defending against by imposing cross-origin restrictions are not present in this scenario.\n\n\nHowever, by running a proxy server, our TerriaMap server potentially opens itself up to risks. We don't want people to be able to bounce arbitrary requests through our proxy, because that could be used to make (malicious?) traffic look like it is coming from your server instead of from the real source. This is why \nterriajs-server\n uses a whitelist of servers that it is willing to proxy for. The \nallowProxyFor\n property in \ndevserverconfig.json\n specifies the whitelist. If the server is asked to proxy for any server not in the whitelist, the request will be rejected.", "title": "Cross-Origin Resource Sharing" }, { "location": "/connecting-to-data/cross-origin-resource-sharing/#more-detailed-explanation", "text": "As a general rule, web browsers do not allow web sites running on one host (e.g. nationalmap.gov.au ) from accessing data running on another host (e.g. data.gov.au ) unless the data server ( data.gov.au in our example) explicitly enables a feature called Cross-Origin Resource Sharing (CORS) by including a special HTTP header in its response. Unfortunately, many servers still do not support CORS. If you control the server you're trying to access data on, enabling CORS is almost certainly a good idea, and you can read more about how to do it at enable-cors.org . TerriaJS has a trick to allow it to access data from a server even if that server doesn't support CORS: it uses a proxy server built into terriajs-server , which is included with TerriaMap. The idea is simple: we avoid the need for cross-origin support from servers by running a proxy on the same host that runs our app. That proxy can make requests to other servers on our application's behalf. This works because cross-origin restrictions are a security feature of web browsers, not web servers. The proxy makes it look to the browser like the data comes from the same origin. There's nothing dodgy about this. The risks that browsers are defending against by imposing cross-origin restrictions are not present in this scenario. However, by running a proxy server, our TerriaMap server potentially opens itself up to risks. We don't want people to be able to bounce arbitrary requests through our proxy, because that could be used to make (malicious?) traffic look like it is coming from your server instead of from the real source. This is why terriajs-server uses a whitelist of servers that it is willing to proxy for. The allowProxyFor property in devserverconfig.json specifies the whitelist. If the server is asked to proxy for any server not in the whitelist, the request will be rejected.", "title": "More Detailed Explanation" }, { "location": "/connecting-to-data/catalog-groups/", "text": "A Catalog Group is a folder in the TerriaJS catalog that contains \nCatalog Items\n, \nCatalog Functions\n, and other groups. The Type column in the table below indicates the \n\"type\"\n property to use in the \nInitialization File\n.\n\n\n\n\n\n\n\n\nName\n\n\nType\n\n\n\n\n\n\n\n\n\n\nABS ITT\n\n\nabs-itt-dataset-list\n\n\n\n\n\n\nCKAN\n\n\nckan\n\n\n\n\n\n\nCatalog Service for the Web (CSW)\n\n\ncsw\n\n\n\n\n\n\nArcGIS Server\n\n\nesri-group\n\n\n\n\n\n\nArcGIS FeatureServer\n\n\nesri-featureServer-group\n\n\n\n\n\n\nArcGIS MapServer\n\n\nesri-mapServer-group\n\n\n\n\n\n\nGroup (Manual)\n\n\ngroup\n\n\n\n\n\n\nSocrata\n\n\nsocrata\n\n\n\n\n\n\nWeb Feature Service (WFS)\n\n\nwfs-getCapabilities\n\n\n\n\n\n\nWFS Features\n\n\nwfs-features-group\n\n\n\n\n\n\nWeb Map Service (WMS)\n\n\nwms-getCapabilities\n\n\n\n\n\n\nWeb Processing Service (WPS)\n\n\nwps-getCapabiliti