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.
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:
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.
The latest stable Ramani Javscript API release is hosted — to start using it straight away, place this in the head of your HTML code:
<link rel="stylesheet" href="http://ramani.ujuizi.com/api/v.0.2/ramani.min.css" />
<link rel="stylesheet" href="http://ramani.ujuizi.com/api/v.0.3/ramani.min.css" />
<link rel="stylesheet" href="http://ramani.ujuizi.com/api/v.0.4/ramani.min.css" />
<script src="http://ramani.ujuizi.com/api/v.0.2/ramani.min.js"></script>
<script src="http://ramani.ujuizi.com/api/v.0.3/ramani.min.js"></script>
<script src="http://ramani.ujuizi.com/api/v.0.4/ramani.min.js"></script>
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.
To illustrate how to use our Maps-API, we provide an example application that demonstrates some of the API methods detailed below.
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
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.
getPointInfo)The extended version of Get Point Profile. Where you're able to not just get the information on a single point, but also the information of the neighboor GeoPoint, in a 3x3, 5x5, etc bounding box. It would be usefull for a comparison (e.g temperature between all neighboring pixels in a 3x3).
var layerobj = [];
layerobj.push({
point : [52.338, 6.332],
params : {
layer : 'ddl.simS1seriesTwenteNetherlands.smc',
info_format : 'text/json-ld'
}
});
var getCube = rc.getPointCube(layerobj, 3, 0.005, function(err, ret){
$.each(ret.data, function(k, obj) {
console.log(obj.value);
});
});
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.
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.
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.
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.
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.
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 :
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.
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.
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.
rc.setParams({ item:'dates', format : 'rss' }); var metadata = rc.getMetadata(layerID);
Example: click to see the example.
rc.setParams({ item:'dates' }); var metadata = rc.getMetadata(layerID);
Example: click to see the example.
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)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.
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);
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.
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.