Corine Land Cover Nomenclature (CLC) SKOS No license
Last submission date October 1, 2018
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Add CLC Web Widgets to your site
Jump To

Type a class name from CLC and jump to it in AgroPortal

  • Download the quick_jump.js file and put it on your server
  • Copy the code below and paste it to your HTML page
  • Note: If you would like to use Quick Jump across multiple ontologies:
    • You can enter a comma-separated list of ontology ids:
      var BP_ontology_id = "NCIt,SNOMEDCT";
    • You can set the variable to 'all' to search all ontologies in AgroPortal:
      var BP_ontology_id = "all";
  • To include definitions in the Jump To drop-down, add the following variable in Javascript:
    var BP_include_definitions = true;
  • In the code that you just pasted, make sure to change the path to the quick_jump.js file to point to the location where you put the file (relative to your HTML file)
    • For example, if you put the quick_jump.js file in the same directory as your HTML file, this is the code you would use:
      <div id="bp_quick_jump"></div>
                  <script type="text/javascript">
                      var BP_ontology_id = "CLC";</script>
                  <script src="quick_jump.js" type="text/javascript" charset="utf-8"></script>
      

For more help visit NCBO Widget Wiki


Autocomplete

Fill your form fields with classes from CLC

Example 1 (start typing the class name to get its full URI)

Example 2 (get the ID for a class)

Example 3 (get the preferred name for a class)

  • Download the form_complete.js file and put it on your server.
  • In the header for the page where you want the form field, include the form_complete.js file.
  • On your form, for the fields where you want to use the class-selection widget, specify the field's class in the following format: bp_form_complete-{ontology_id_list}-{value}
    • For example, bp_form_complete-NCIT-uri will use NCI Thesaurus (ontology id is NCIT) and will put the class URI in the field after the user selects the class from the pull-down list.
      • Note: In addition to single ontology ids, you can use a list:
        bp_form_complete-NCIT,NCBITAXON-uri
      • OR use 'all' to search across all AgroPortal ontologies:
        bp_form_complete-all-uri
      • The autocomplete widget accesses ontology content from the latest version of the ontology.
    • You can use the following parameters to select which value will be placed into the user-visible input field:
      • uri put the complete URI of the class (e.g., http://www.w3.org/2015/03/corine#clc123 )
      • shortid put the short id of the class, as used in AgroPortal (e.g., "Common_Neoplasm");
      • name put the preferred name of the class (e.g., "Common Neoplasm");
  • In addition to the input element you defined, there are four hidden form elements that are created and then set when a user selects a class from the list. For example, if you create a field with this code:
      <input type="text" name="a" class="bp_form_complete-all-uri" size="100"/>
    The 'name' attribute is used to create the four following fields (note how the 'a' from the name attribute is appended to the id attribute):
    • <input type="hidden" id="a_bioportal_preferred_name">
    • <input type="hidden" id="a_bioportal_concept_id">
    • <input type="hidden" id="a_bioportal_ontology_id">
    • <input type="hidden" id="a_bioportal_full_id">
    • Additional parameters are documented on the NCBO Widget Wiki

    For more help visit NCBO Widget Wiki


    Visualization

    Display a visualization for a given class in CLC

    Copy the code below and paste it to your HTML page

    <iframe frameborder="0" src="/widgets/visualization?ontology=CLC&class=http%3A%2F%2Fwww.w3.org%2F2015%2F03%2Fcorine%23clc123&apikey=YOUR_API_KEY"></iframe>
    

    For more help visit NCBO Widget Wiki


    Tree Widget

    Display a class tree with a search field for CLC

    Copy the code below and paste it to your HTML page

    <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
      <script src="/widgets/jquery.ncbo.tree-2.0.2.js"></script>
      <div id="widget_tree"></div>
      var widget_tree = $("#widget_tree").NCBOTree({
        apikey: "YOUR_API_KEY",
        ontology: "CLC"
      });
    
    

    You can also view a detailed demonstration

    For more help visit NCBO Widget Wiki


    Loading