Spatial Visualization - technical tips, best practices, and news from the product team

  • December 4, 2015

New feature type (MapMarker) in the recent release

Jayant Sharma
Sr. Director, Product Mgmt

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.
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
getPosition() which returns  an Object containing x, y, and srid
getStyle(sty) which returns a marker style, i.e. an OM.style.Marker

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%'>
<title>Draggable map markers</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<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(
mapviewerURL: baseURL
var tileLayer = new OM.layer.TileLayer(
dataSource: "mvdemo",
tileLayer: "demo_map",
tileServerURL: baseURL + "/mcserver"
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.
// 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()) {
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.setMapCenter(new OM.geometry.Point(-122, 38, 8307));
var copyRight=new OM.control.CopyRight({anchorPosition:6,textValue:'Map data@NaturalEarth',fontSize:8,fontFamily:'Arial',fontColor:'black'});
function addMouseEventListener(){
map.addListener(OM.event.MouseEvent.MOUSE_MOVE, featureMouseMove);
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');
<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>

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.