Mappls Realview Widget¶

Introduction¶

RealView is a way for you to view the world, right from the comfort of where you are. Now, get a full panoramic view of your assets and even geo-tag, measure and analyse them with photo-realistic quality. Visualise streets, roads, motorways, railway tracks, as well as residential and commercial zones from the comfort of your own desk.

The Realview widget provides an easy mechanism to consume our Realview services within your applications.

Power your business with RealView to increase operational efficiency. Avoid in-person surveys, countless man-hours on the field, and wasted time. Sit from the comfort of your desk and see all your assets, across locations, in one go. Monitor and geo-tag your assets and control your own data collection with the Mappls RealView Widget.

Note¶

This wdiget is access controlled and a paid service.

Getting Access¶

Before using our SDKs or APIs in your solution, please ensure that the related access is enabled in the Mappls API Console.

Mappls SDKs & APIs follow OAuth2 based security. Access Tokens can be generated using Token Generation API. To know more on how to create your access tokens, please use our authorization API URL. More details available here. The access token is valid by default for 24 hours from the time of generation. This can be configured by you in the API console.

Embed Mappls Realview on your app by following the below steps.¶

To use the Mappls Realview Widget, you need to specify the following URL format:

<iframe
        src="https://realview.mappls.com/realview_widget/jq5qn8?access_token=<Token>&minDistance=1&maxDistance=500&arrow=true&map=true&zoomControls=true&controls=true&mapWidth=200&mapHeight=200"
        style="width: 100%; height: 80vh;" title="embed Example" allowfullscreen="">
    </iframe>

Configurable Parameters¶

<MAPPLS_PIN> OR <latitude,longitude> (Required): Replace this with the unique identifier of the Mappls Pin or the coordinates for which you want to display details for.
access_token (required): An access_token token for access control.
minDistance (Optional): An integer value in meters to configure the minimum distance around the referred place against which a Realview will be returned for . (Default: 20 meters)
maxDistance (Optional): An integer value in meters to configure the maximum distance around the referred place against which a Realview will be returned for . (Default: 1000 meters)
arrow (Optional): A boolean value which configures the Realview to display navigation control arrow or not. (Default: true)
map (Optional): A boolean value which configures the Realview to display map or not. (Default: true)
zoomControls (Optional): A boolean value which configures the Realview to display zoom controls over the panoramic images or not. (Default: false)
controls (Optional): A boolean value which configures the Realview to display bottom toggle controls or not. (Default: true)
mapWidth (Optional): An integer value in pixels to configure the map width.
mapHeight (Optional):An integer value in pixels to configure the map height.

Demo Link¶

https://realview.mappls.com/realview_widget/sample/index.php?token=6xxxxxx4-9xxx-xxx7-xxxb-8dxxa7xxxdc

To learn more on how to create your authorization tokens, please use our authorization token URL. More details available here.

Sample code for Mappls pin¶

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mappls Realview Widget</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <iframe
        src="https://realview.mappls.com/realview_widget/jq5qn8?access_token=<Token>&minDistance=1&maxDistance=500&arrow=true&map=true&zoomControls=true&controls=true&mapWidth=200&mapHeight=200"
        style="width: 100%; height: 80vh;" title="embed Example" allowfullscreen="">
    </iframe>
</body>

</html>

Sample code for Coordinate Pair¶

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mappls Realview Widget</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <iframe
        src="https://realview.mappls.com/realview_widget/28.553302,77.258677?access_token=<Token>&minDistance=1&maxDistance=500&arrow=true&map=true&zoomControls=true&controls=true&mapWidth=200&mapHeight=200"
        style="width: 100%; height: 80vh;" title="embed Example" allowfullscreen="">
    </iframe>
</body>

</html>