Skip to content

Latest commit

 

History

History
258 lines (247 loc) · 6.02 KB

README.md

File metadata and controls

258 lines (247 loc) · 6.02 KB
Raw

FENIX Map Creator

Example

var MapCreator = require('fx-dashboard/start');

var mapCreator = new MapCreator({
   el: '#map-creator',
   model: {},
   geoSubject: 'gaul0',
   colorRamp: 'GnBu',  //Blues, Greens. colorRamp values http://fenixrepo.fao.org/cdn/fenix/fenix-ui-map-datasets/colorramp.png
   legendtitle: 'Example Override Legend Title',
   fenix_ui_map: {
      guiController: {
         overlay: false,
         baselayer: false,
         wmsLoader: false
      },
      baselayers: {
         "cartodb": {
             title_en: "CartoDB light",
             url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
         }
      },
      labels: true,
      boundaries: true
   }
});

Configuration

Parameter Type Default Value Example Description
el CSS3 Selector/JavaScript DOM element/jQuery DOM element - "#container" component container
model Object - - Fenix Resource Object
fenix_ui_map Object ```javascript guiController: { overlay: false, baselayer: false, wmsLoader: false }, ... ``` - Pass options to Fenix ui Map Options
WMS_URL string "http://fenix.fao.org/demo/fenix/geoserver" "http://fenix.fao.org/geoserver" (production URI) URI for Geoserver Services, WMS/WFS Layers and others
leaflet Object 
  ```javascript
  {
        zoomControl: false,
        attributionControl: false,
        minZoom: 1
    }
    ```
    </td>
  <td> - </td>
  <td>Override LeafletJs Map Options</td>
</tr>    
<tr>
  <td>geoSubject</td>
  <td>string</td>
  <td>'geo'</td>
  <td>'adm0_code'</td>
  <td>geo column for create Fenix Resource Join map</td>
</tr>
<tr>
  <td>valueSubject</td>
  <td>string</td>
  <td>'value'</td>
  <td> - </td>
  <td></td>
</tr>    
<tr>
  <td>colorRamp</td>
  <td>string</td>
  <td>"Reds"</td>
  <td>"Greens"</td>
  <td>Scale of colors for join map, possibile values: <br>
  [colorramp.png](http://fenixrepo.fao.org/cdn/fenix/fenix-ui-map-datasets/colorramp.png)
  </td>
</tr>
<tr>
  <td>muSubject</td>
  <td>string</td>
  <td>"full"</td>
  <td>"half"</td>
  <td>Measurement unit displayed in map popup and legend</td>
</tr>
 <tr>
      <td>join.style</td>
      <td>Object</td>
      <td>
      
      ```javascript
        {
            layertype: 'JOIN',
            jointype: 'shaded',
            defaultgfi: true,
            openlegend: true,
            lang: 'EN',
            opacity: '0.7',
            colorramp: 'Greens',
            decimalvalues: 2
        }
        ```
        </td>
      <td> - </td>
      <td>Style rules for Join Map</td>
    </tr>
 <tr>
      <td>join.layerMapping</td>
      <td>Object</td>
      <td>
      
      ```javascript
      {
            gaul0: {
                layers: 'fenix:gaul0_3857',
                joincolumn: 'adm0_code',
                joincolumnlabel: 'adm0_name'
            },
            gaul1: {
                layers: 'fenix:gaul1_3857',
                joincolumn: 'adm1_code',
                joincolumnlabel: 'adm1_name'
            },
            iso3: {
                layers: 'fenix:gaul0_faostat3_3857',
                joincolumn: 'iso3',
                joincolumnlabel: 'areanamee'
            },
            uneca_iso3: {
                layers: 'fenix:gaul0_faostat3_3857',
                joincolumn: 'iso3',
                joincolumnlabel: 'areanamee'
            },
            ...
        }
        ```
        </td>
      <td> - </td>
      <td>Geoserver Layers correspondence for geoSubject in Join operations </td>
    </tr>      
    <tr>
       <td>layers</td>
       <td>Object</td>
       <td>-</td>
       <td>
       
       ```javascript
       {
     gaul0: {
         layers: 'fenix:gaul0_3857',
         urlWMS: 'http://fenix.fao.org/demo/fenix/geoserver',
         opacity: '0.9',
         joincolumn: 'adm0_code',
         joincolumnlabel: 'areanamee',
         layertype: 'JOIN',
         jointype: 'shaded',
         openlegend: true,
         defaultgfi: true,
         colorramp: 'YlGn',
         lang: 'en'
     }, ...
    }
    ```
    </td>
     <td>Layers preloaded in the map</td>
     </tr>

Methods

Name Parameters Description
invalidateSize - Update Map dimensions after container is resized
addLayer Object: Fenix Model | Leaflet Layer Append more Fenix Layers in the same map
addBaseLayer Object: Leaflet Layer Append more Base Layers in the same map
dispose - destroy the map

Events

Name Parameters Description
ready - Run after Map rendered data