RPC step by step

This guide will tell you how to control a published map from the parent document.

What do I need?

What's the aim of this example?

In this example we show a published map on our webpage and control it from the parent document by clicking the map and getting coordinates of the clicked location. Marker is used to mark the location of coordinates.

Let's start!

1. Define required libraries at your webpage

Copy the code below to your html-page header and change the paths of .js files if needed.

<script src="/js/rpc/rpc-client.min.js"></script>

2. Copy the code of your published map to your website where you want it to occur and give an id to the element

Below is an example of the code for a published map

<iframe id="publishedMap" src="http://www.paikkatietoikkuna.fi/published/fi/ab389bdd-f47c-43f8-b529-ae7789f53703"></iframe>

3. Now let's add some javascript to handle map click

 <script>
    var channel = OskariRPC.connect(
      document.getElementById('publishedMap'),
      'http://www.paikkatietoikkuna.fi'
    ),
    coordinateDisplay = document.getElementById('coordinates'),
    coords = null,
    markerCounter = 0;

    channel.handleEvent(
    'MapClickedEvent',
        function(data) {

            if(markerCounter === 0) {
                channel.postRequest(
                    'MapModulePlugin.AddMarkerRequest', [{
                            x: data.lon,
                            y: data.lat
                        },
                        'RPCMarker' + markerCounter
                    ]
                );
                markerCounter++;
                setCoords(data.lon, data.lat);
            } else {
                channel.postRequest(
                    'MapModulePlugin.RemoveMarkersRequest', []
                );
                markerCounter = 0;
                channel.postRequest(
                    'MapModulePlugin.AddMarkerRequest', [{
                            x: data.lon,
                            y: data.lat
                        },
                        'RPCMarker' + markerCounter
                    ]
                );
                markerCounter++;
                setCoords(data.lon, data.lat);
            }
        },
    );
    setCoords = function(x, y) {
        coordinateDisplay.value = x + ', ' + y;
    }
</script>

Let's take a closer look at the code. First we opened communications with the published map.

var channel = OskariRPC.connect(
      document.getElementById('publishedMap'),
      'http://www.paikkatietoikkuna.fi'
    );

Then we defined some variables needed. MarkerCounter is used to count the amount of markers on the map so that we can remove the previous markers.

var coordinateDisplay = document.getElementById('coordinates'),
    coords = null,
    markerCounter = 0;

Now that we have variables defined, we can add the function to handle map click. First we check if there is need to remove the previous marker and then we either remove it and add a new marker or just add a new marker. After adding new marker we call the function to tell us coordinates and give lon and lat as params.

channel.handleEvent(
    'MapClickedEvent',
    function(data) {

        if(markerCounter === 0) {
            channel.postRequest(
                'MapModulePlugin.AddMarkerRequest', [{
                        x: data.lon,
                        y: data.lat
                    },
                    'RPCMarker' + markerCounter
                ]
            );
            markerCounter++;
            setCoords(data.lon, data.lat);
        } else {
            channel.postRequest(
                'MapModulePlugin.RemoveMarkersRequest', []
            );
            markerCounter = 0;
            channel.postRequest(
                'MapModulePlugin.AddMarkerRequest', [{
                        x: data.lon,
                        y: data.lat
                    },
                    'RPCMarker' + markerCounter
                ]
            );
            markerCounter++;
            setCoords(data.lon, data.lat);
        }
    },
);

The last part of the code is to show us the coordinates. In this example we show them as an alert to keep things simple, but you can as well show them anywhere on your website the way you want.

setCoords = function(x, y) {
    alert(x + ', ' + y);
}

Now we are ready with this example and you can start to develop your own code. Take a look at the RPC bundle documentation for more advice.

Last modified: Fri Mar 15 2024 14:11:33 GMT+0200 (Eastern European Standard Time)