xRTML.org

An Introduction to the Map Tag

— by Ana Filipa Carvalho on December 29, 2011

In my first post we will show some simple properties we can use and how to change them using JavaScript.

I'm very excited to show you this new tag since it allows for a new kind of interaction with maps, in a professional or personal context. This tag is based in Google or Bing maps and it allows users to add and/or see markers and routes being added in realtime.

As always, you will need to implement a Connection and a Channel, that will be used by our Map tag.

We will not cover in this post and assume the Connection described in My First Connection.

The map tag is ideal for showing your friends, in real-time, where you have been in your vacations and the routes you took. It is simple to use and there are lots of properties available to make the experience much more appealing.

Don't forget to include the Maps API JavaScript using a script tag.

Google map API

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Bing map API

        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Then we give some examples for some properties of the map:

Default Map

Displaying the map is as simple as indicating in which div we want our map to render, and the map type. In this example we will use the googlemap type. By default the map's role is role="sender" so that you can interact with it, if the role was receiver you could only receive data with role="receiver".

        <xrtml:map channelid="myChannel" id="xrtmlMap" target="map_canvas" type="googlemap">
        <xrtml:triggers>
        <xrtml:trigger name="myTrigger"/>
        </xrtml:triggers>
        </xrtml:map>
        <div class="map" id="map_canvas" style="width: 100%; height: 100%; position:absolute"/>

As in Google Maps, you can interact with the map's default menu, you're able to zoom, drag the map, change the view mode or enable street view, and the awesomeness of it all is that your friends will be seeing the same as you.

Personalize your icon marker map

As you have seen in the previous example, the map tag has a predefined marker, but you can actually customize the marker.

Here are the properties available for you to customize your marker:

Change drawingMode, strokeColorRoute, strokeWeightRoute and zoom

Next we will show an example of how you can configure the map by changing drawingMode, strokeColorRoute, strokeWeightRoute and zoom.

        <xrtml:map channelid="myChannel" id="xrtmlMap" role="sender" 
        target="map_canvas" type="googlemap" zoom="6" 
        drawingMode=" ... " strokeColorRoute="#0A13FC" strokeWeightRoute="3">
        <xrtml:triggers>
        <xrtml:trigger name="myTrigger"/>
        </xrtml:triggers>
        </xrtml:map>
        <div class="map" id="map_canvas" style="width: 100%; height: 100%; position:absolute"/>

Another common alternative is to use JavaScript, suppose you have a menu to directly interact with the map

        function Change() {
        var map = xRTML.getTag("xrtmlMap");
        var props = [];
        props.push({ name: "drawingMode", value: document.getElementById("selectType").value });

        var colorRoute = {
        strokeColor: document.getElementById("strokeColorRoute").value,
        strokeOpacity: document.getElementById("strokeOpacityRoute").value,
        strokeWeight: document.getElementById("strokeWeightRoute").value
        }

        props.push({ name: "colorRoute", value: colorRoute });

        map.setProperties(props);
        }

Keep following our blog, we will post more useful articles showing you how to interact and configure the map.

More information in Documentation.