Friday Dec 04, 2015

New feature type (MapMarker) in the recent release

The javascript lib (Oracle Maps) in the recent MapViewer release (12.2.1) has a new feature class called MapMarker. The primary purpose is to simplify the process of creating adding markers from a set of POI records, with labels such as 'A' - 'Z' or '1' - 'N' on them. It also supports dragging the markers around and handling the drag events. You can for instance drag the start and destination marker on a route to re-route it.

This post contains sample code showing how to do the latter, that is create draggable markers and handle the drag events.

The screenshot below shows the result.

Draggable markers example screenshot

The code is given below. The steps are create a map object, create one or more MapMarkers, set the dragStart and dragEnd listeners, add the markers to a MarkerLayer (a type of VectorLayer), display the map.

The MapMarker class has the following attributes and methods.

A constructor which takes a config object that defines the attributes and optionally the listeners.
OM.MapMarker(options)
where options is an object, or object literal, containing :

  • id {String}: The unique id for the map marker.
  • label {String}: The marker's label text.
  • draggable {Boolean}: Optional. The marker is draggable when this param is set to true.
  • renderingStyle {OM.style.Marker}: Optional. The rendering style for the marker. A default style will be used if none is specified.
  • position {Object}: The marker's position. It may contain the following attributes:
    • x {Number}: The marker's x coordinate
    • y {Number}: The marker's y coordinate
    • srid {Integer}: Optional. The coordinate system for the above x,y values. Default is 8307.
  • dragStart {Function}: Optional. The drag start event listener function.
  • dragging {Function}: Optional. The dragging event listener function.
  • dragEnd {Function}: Optional. The drag end event listener function.

And setters and getters for the above attributes. That is
setId(id)
getId()
setLabel(label)
getLabel()
setDraggable(draggable)
isDraggable()
setPosition(x,y,srid)
getPosition() which returns  an Object containing x, y, and srid
setStyle(sty)
getStyle(sty) which returns a marker style, i.e. an OM.style.Marker
setDragEndListener(dragEndListenerFunction)
setDragStartListener(dragStartListenerFunction)
setDraggingListener(draggngListenerFunction)

A marker layer (OM.layer.MarkerLayer)  is a vector layer than only contains MapMarkers.

The sample code is below. This assumes the 12.2.1 Glassfish based quickstart kit is deployed.

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html style='width:100%;height:100%'>
<head>
<title>Draggable map markers</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style>body{width:100%;height:100%;margin:0;padding:0}</style>
<script type='text/javascript' src='http://localhost:8080/mapviewer/jslib/v2/oraclemapsv2.js'></script>
<style type= 'text/css '>body {cursor:default;}</style>

<script language="JavaScript" type="text/javascript">
    var layer;
    var map;

    function showMap()
    {
        var baseURL = "http://localhost:8080/mapviewer";
        map = new OM.Map(
                document.getElementById('map'),
                {
                    mapviewerURL: baseURL
                });

        var tileLayer = new OM.layer.TileLayer(
                "baseMap",
                {
                    dataSource: "mvdemo",
                    tileLayer: "demo_map",
                    tileServerURL: baseURL + "/mcserver"
                });
        map.addLayer(tileLayer);
        layer = new OM.layer.MarkerLayer("markerlayer1");
        var dragStart = function(evt){
         document.getElementById("dragstart").innerHTML="Drag started from location (x, y): ("+
                                 evt.markerX.toFixed(4)+", "+evt.markerY.toFixed(4)+").";};
        var dragEnd = function(evt){
         document.getElementById("dragging").innerHTML="Dropped at location (x, y): ("
                                +evt.markerX.toFixed(4)+", "+evt.markerY.toFixed(4)+").";};
        var dragging = function(evt){
         document.getElementById("dragging").innerHTML="Dragging now at location (x, y): ("
                                +evt.markerX.toFixed(4)+", "+evt.markerY.toFixed(4)+").";};

        // Create an empty MapMarker and then set all properties. srid is the default (8307)
        var insertMapMarker1 = function(id, cx, cy, label, draggable) {
                var mm = new OM.MapMarker();
                layer.addMapMarker(mm);   // add a map marker into marker layer
                mm.setPosition(cx, cy);
                mm.setLabel(label);  // it will also set the marker text.
                mm.setID(id);
                mm.setDraggable(draggable);
                mm.setDragStartListener(dragStart);
                mm.setDragEndListener(dragEnd);
                mm.setDraggingListener(dragging);
        };

        // Specify properties in the options object. srid is the default (8307)
        var insertMapMarker2 = function(id, cx, cy, label, draggable) {
                var myobj = {'id': id,
                             'label': label,
                             'draggable': draggable,
                             'dragStart': dragStart,
                             'dragEnd': dragEnd,
                             'dragging': dragging,
                             'position': {'x': cx, 'y': cy}};
                var mm = new OM.MapMarker(myobj);
                layer.addMapMarker(mm);   // add a map marker into marker layer
        };

        // an obj with all properties to instantiate a map marker
        var insertMapMarker3 = function(id, cx, cy, srid, label, draggable) {
                var myobj = {'id': id,
                             'label': label,
                             'draggable': draggable,
                             'dragStart': dragStart,
                             'dragEnd': dragEnd,
                             'dragging': dragging,
                             'position': {'x': cx, 'y': cy, 'srid': srid}};
                var mm = new OM.MapMarker(myobj);
                var styleForNonDragableMarker = new OM.style.Marker({
            				src: "http://localhost:8080/mvdemo/icons/p_or_ena.png",
            				width: 50,  height: 50,
            				textStyle: {fontSize: 12, fill: '#000000'},
            				textOffset: {x: -2, y: -3}});
                if(!mm.isDraggable()) {
                    mm.setStyle(styleForNonDragableMarker);
                    console.log("Setting style for non-draggable marker " + mm.getLabel());
                }
                layer.addMapMarker(mm);   // add a map marker into marker layer
        };
        insertMapMarker1('m1', -122.3, 38.5, '11', true);  // id, cx, cy, srid, label, draggable
        insertMapMarker2('m2', -122, 37.5, '22', true);
        insertMapMarker3('m3', -120.7, 38, 8307, '33', true);
        insertMapMarker3('m4', -121, 39, 8307, ''); // m4 will not be draggable and should use a different style

        map.addLayer(layer);
        layer.setToolTipCustomizer(featureTip);

        map.setMapCenter(new OM.geometry.Point(-122, 38, 8307));
        map.setMapZoomLevel(5);
        var copyRight=new OM.control.CopyRight({anchorPosition:6,textValue:'Map data@NaturalEarth',fontSize:8,fontFamily:'Arial',fontColor:'black'});
        map.addMapDecoration(copyRight);
        addMouseEventListener();
        map.init();
    }
    function addMouseEventListener(){
        map.addListener(OM.event.MouseEvent.MOUSE_MOVE, featureMouseMove);
        layer.enableInfoWindow(false);
    }
    function featureMouseMove()
    {
        var mouseLoc = map.getCursorLocation();
        var x = mouseLoc.getX();
        var y = mouseLoc.getY();
        document.getElementById("mouseLocation").innerHTML="Mouse location (x, y): ("
                                +x.toFixed(4)+", "+y.toFixed(4)+").";
    }
    function featureTip(f)
    {
        return "id: "+f.id+"\nlabel: "+ (f.label ? f.label : 'undefined');
    }

</script>

</head>
<body onload="javascript:showMap()">
    <DIV id=map style="width:90%;height:90%;margin:10px;"></DIV>
    <span id="text">Creating draggable map markers.</span>   
    <span id="mouseLocation"></span><br/>
    <span id="dragstart"></span> 
    <span id="dragging"></span>
</body>
</html>


About

Official blog for Oracle Maps and related products.

Search

Categories
Archives
« May 2016
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    
       
Today