Ramani Javascript-API

With Ramani's Javascript-API you can add maps to your application with a few lines of code. The API automatically handles access to the map servers, returns tiled-map displays (retina optimized), and provides a variety of charts returned as PNG-image or Scalable Vector-Graphics (SVG) for further client-side interactions.

Supported Platforms

With Ramani's Javascript-API you can build web apps or mobile apps using HTML2, CSS and Javascript.

The JavaScript-API is a thin wrapper around Leaflet. It makes it easy to initiate a Leaflet map with tile and vector overlays from a Ramani server. Also it defines commonly used base layers from providers like OSM, Google, Bing, HERE, Yandex and Stamen.

Developing applications with our Javascript-API requires the following:

  • jQuery v1.11.13 or v2.1.4 or later
  • Leafletjs v0.7.7

Adding Leafletjs to your project

Before you can add our map services to your application, you will need to add the Leafletjs Maps SDK to your project. You can follow this instruction to add the Leafletjs Maps SDK to your project.


Adding Ramani's Javascript-API to your project

The latest stable Ramani Javscript API release is hosted — to start using it straight away, place this in the head of your HTML code:

          

            <script src="http://ramani.ujuizi.com/api/v.0.2/ramani.min.js"></script>

          
        

Add your API-Key ( apiKey)

You must provide the API-Key that you get from our client-area webpage before the API can access our map services. Please register here if you have not done already.

          

            var rc = new RamaniAPI(); rc.init({ username:'
            username', apiKey:'
            API_KEY', package:'
            package' });

          
        

Note: Replace username using your ramanicloud username, API_KEYand package with the string API_KEY that you created from your client area.


Study our HTML example application (optional)

To illustrate how to use our Maps-API, we provide an example application that demonstrates some of the API methods detailed below.


Get a Map Layer ( getMap)

With the Ramani Javascript API, you can add a Map Layer to your application. The code below demonstrates how to add a map layer to an existing map view.

          
            var rc = new RamaniAPI(); rc.init({ username:'
            username', apiKey:'
            API_KEY', package:'
            package' }); var map = rc.map({ center : new L.LatLng(49.27497287599639, 2.867431640625), baselayer : 'osm' }); rc.getTile({ db: "db", layer: 'layerID' });

          
        

Note: Replace db with your Ramanicloud username. layerID with the string name of the ID of a layer of your choice. A valid string consist of a layerID/param combination. You can obtain the layer ID/param-combination from the Layer Information-widget as part of our Digital Data Library (DDL).

Example: Once in the DDL-interface > select Layer entitled: Sentinel-3: Global Leaf-Area Index > leaf area index. Then from the Layer information-widget find the > Layer ID : simS3seriesLaiGlobal/lai


Get Location Info ( getFeatureInfo)

          

            var info = rc.getFeatureInfo(overlay.getLatLng(), { layer: 'ddl.simS5seriesForAirQualityEuro.o3conc', info_format : 'text/json' });

          
        

Note: The getFeatureInfo operation is designed to provide clients with more information of the features for a single point. The return text can be provided on either JSON ('text/json') or GeoJSON ('text/geojson') format.


Get Point Info ( getPointInfo)

          

            var getPoint = rc.getPoint(overlay.getLatLng(), { layer: 'ddl.simS5seriesForAirQualityEuro.o3conc', info_format : 'text/json' });

          
        

Note: The getPoint operation is designed to provide clients with more information about a single location on a map. The return text can be provided on either JSON ('text/json') or GeoJSON ('text/geojson') format.


Get a Vertical Profile ( getVerticalProfile)

          

            var info = rc.getVerticleProfile(overlay.getLatLng(), { layer: 'ddl.simS5seriesForAirQualityEuro.o3conc', info_format : 'image/png', imgobj : 'imgobj' });

          
        

Note: Same as Get Point Info (getFeatureInfo), but along a vertical dimension instead of a single point. Only works on layers that have a vertical dimension (explore the maps we have on offer in our DDL). If you want show the result as images replace imgobj with the ID of image element to show the image, and don't forget to change info_format to image/png to receive a PNG image as return.

Example: For example, nitrates variability along ocean depth.


Get a Time-series Profile ( getTimeseriesProfile)

          

            var info = rc.getTimeseriesProfile(overlay.getLatLng(), { layer: 'ddl.simS5seriesForAirQualityEuro.o3conc', info_format : 'image/png', imgobj : 'imgobj' });

          
        

Note: Same as Get Location Info (getFeatureInfo) but varying in time (along a temporal dimension). Only works on layers that have a temporal dimension (explore the maps we have on offer in our DDL). If you want show the result as image replace imgobj with the ID of image element to show the image, and don't forget to change info_format to image/png to receive a PNG image as return.

Example: For example, LAI over the seasons of the year.


Get a Horizontal Profile ( getTransect)

          

            var transect = rc.getTransect(coordinatesArray, { layer: 'ddl.simS5seriesForAirQualityEuro.o3conc', info_format : 'image/png', imgobj : 'imgobj' });

          
        

Note: Same as Get Location Info (getFeatureInfo), but along a horizontal dimension. coordinatesArray is an Array list, consisting of two coordinates for a single line or multiple coordinates for several segments.

Example: For example, atmospheric ozone along a line (single or multiple segments) crossing a city.


Get a Area Profile ( getArea)

for this method we are support for XML, JSON and GeoJSON format, to get this return type yoou need to specify info_format properties with :

  • text/json
  • text/xml
  • text/geojson

          

            var transect = rc.getArea(coordinatesArray, { layer: 'ddl.simS5seriesForAirQualityEuro.o3conc', info_format : 'image/png', imgobj : 'imgobj' });


          
        

Note: Same as Get a Horizontal Profile (getTransect), but for an area defined by coordinatesArray, which must contain 3 or more elements to define a polygon.


Set Layer Attributes ( setParams)

          
            rc.setParams({ TIME : '2010-02-04T00:00:00.000Z/2010-04-15T00:00:00.000Z' });

          
        

Note: Use this method to set Layer attributes. For more information about which parameters you can set follow this link.

Example: Use the param ( TIME) to set the temporal range of a time-series.


Get Layer Attributes ( getMetadata)

          
            var metadata = rc.getMetadata(layerID);
          
        

Note: Use this method to get Layer attributes aka metadata. For more information about which parameters you can get follow this link.

Example: To obtain the temporal range of a time-series required by getTimeseriesProfile use ( TIME), or to get the extremes of a layer ( Min) and ( Max) to set the scaleRange parameter.

Get dates for timeseries and get return as RSS

          
            rc.setParams({ item:'dates', format : 'rss' }); var metadata = rc.getMetadata(layerID);
          
        

Example: click to see the example.

Get dates with ISO8601 format

          
            rc.setParams({ item:'dates' }); var metadata = rc.getMetadata(layerID);
          
        

Example: click to see the example.


Get an animated Map ( getAnimation)

With the Ramani API Framework for JavaScript, you can create animated map layers (provided the dataset of interest has a temporal dimension). The code below demonstrates how to receive an image (imgobj) for each time step available.

          
            var transect = rc.getAnimation(point, { layer: 'layerID', info_format : 'image/png', imgobj : 'imgobj' });
          
        

Note: You can set the TIME param to choose the time range to be covered (as described in Set Layer Attributes).


Search using Elasticsearch ( search)

Search data inside a vector layer and show it on the map.

          

            $('#search').on('blur', function(e){ var key= $(this).val(); rc.search('
            layerID', key, true ); });

          
        

Note: All you have to do before calling this method is select the corresponding layer in the Ramani Cloud Admin and click the “Index in Elasticsearch” button. Ramani Cloud will first map the table schema to an Elasticsearch type and then pipe the tabular data as GeoJSON to Elasticsearch.


Manipulate data of a vector map ( sqlAPI)

The first example shows how to search for a feature in a layer and show it on the map, the second shows how to insert a new point (i.e. GPS-location).

          
            /*example to get a feature point from table */ var query = "SELECT * FROM [schemaName].[layerID] WHERE round(ST_Distance(ST_Transform(\"the_geom\",3857), 'ST_GeomFromText('POINT(551569.5961058318
            6701998.640044251)',3857)))
            < 6114.9622628 ORDER BY round(ST_Distance(ST_Transform(\ "the_geom\",3857), ST_GeomFromText( 'POINT(551569.5961058318 6701998.640044251)',3857)))LIMIT 5 ";

          	rc.sqlApi(query);



          	/*other example for insert*/
          	var insertQuery = "INSERT INTO [schemaName].[layerID] (the_geom ,time, longitude, latitude, accelx, accely, accelz, orientx, orienty, orientz, magneticx, magneticy, magneticz, bearing, speed, gpsaccuracy, entropy, annotation_observe, status, rpqs, annotation_predict) VALUES (ST_GeomFromText('POINT(110.597145
              -7.002776666666667)',4326), 1434159945524,110.597145,-7.002776666666667, 4.338,3.217,4.616,2.2945807,-53.003002,1.0712337, -2.5,41.25,-15.0,0.0,0.0,6.8,0.9999999999999998,null, null,null,null);"; rc.sqlApi(

              insertQuery);
          
        


Store Point ( storePoint)

Store a new or modified point feature on Ramani Cloud (currently only support for private layers):

          
            var fields = { id : '1', name : 'pointA' }; rc.storePoint('
            layerID', fields, overlay.getLatLng());
          
        

Note: Allows the user to define series of points of interest and store these for repeated usage on different requests.


Store Polygon ( storePolygon)

Store a (multi)polygon feature on Ramani Cloud (currently only support for private layers):

          
            var fields = { id : '1', name : 'pointA' }; rc.storePoint('
            layerID', fields, points);
          
        

Note: Note: This function can be used to retrieve a pre-defined area for future usage.


Store Line ( storeLine)

Store your (multi)line feature on Ramani Cloud (currently only support for private layers):

          
            var fields = { id : '1', name : 'pointA' }; rc.storePoint('
            layerID', fields, points);
          
        

Note: Useful to keep a line stored for future usage, e.g. for obtaining a Horizontal Profile (with getTransect) for the same region over different days.