xRTML.org

xRTML's Blog

xRTML News, from Portugal to the Realtime World Web.

An Introduction to the Map Tag

— by Ana Filipa Carvalho on December 29, 2011

An Introduction to the Map Tag

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"/>
Map

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.

 

Map

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

Name Type Description Possible values
imageurl String The path to the image marker. Any
imageheight Number The height of the marker image. Any
imagewidth Number The width of the marker image. Any
offsetimageheight Number The offset applied to the height of the marker image. Any
offsetimagewidth Number The offset applied to the width of the marker image. Any
shadowimage String The path to the shadow image marker. Only available to google maps. Any
offsetshadowimageHeight Number The offset applied to the height of the marker shadow image. Only available to google maps. Any
offsetshadowimagewidth Number The offset applied to the width of the marker shadow image. Only available to google maps. Any

 

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"/>
Map DrawingMode
drawingMode="points" drawingMode="polyline" drawingMode="route"

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.

Tags in this post:  #Map  #xRTML 2.x 
comments powered by Disqus