Integracion MapQuest en WaveMaker

Buscando una alternativa a google maps encontre MapQuest para usar en algunas apps sin preocuparse en cuestiones de licencia.

Podemos hacer la integracion con codigo js que nos provee en la documentacion de MapQuest

aqui les comparto un ejemplo de marcadores.

Primero debemos crear una cuenta en MapQuest y obtener un key para apuntar al script en el index.html 

<script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=YOURKEY"></script>

Ahora en Wavemaker  usar un widget Html como contenedor para alli mostrar el mapa, luego en source js vamos a configurar nuestro marker en mi caso hice 3 custom markers

var customIcon1 = new MQA.Icon('resources/images/yo_green46.png', 20, 29);

var customIcon2 = new MQA.Icon('resources/images/yo_yellow46.png', 20, 29); 

var customIcon3 = new MQA.Icon('resources/images/yo_red46.png', 20, 29);

la idea ahora es crear un objeto coleccion de mapquest con el conjunto de coordenadas de los marcadores

y podemos llenar desde la db o una lista ..en mi caso utilice la db y obtengo los datos desde un liveVariable

 /*Create a new POI collection.*/

        var sc = new MQA.ShapeCollection(),

            poi, latlng = {

                lat: 39.0,

                lng: -82.0

            },

            i;

        /*Create additional POIs and add them to the shape collection.*/

        for (i = 0; i < this.liveVariable1.getData().length; i++) {

            latlng.lat = this.liveVariable1.getData()[i].lat;

            latlng.lng = this.liveVariable1.getData()[i].lng;

            poi = new MQA.Poi(latlng);

            if (this.liveVariable1.getData()[i].status == "Status 1") {

                poi.setIcon(customIcon1); 

            }

            else if (this.liveVariable1.getData()[i].status == "Status 2") {

                poi.setIcon(customIcon2);

            }

            else if (this.liveVariable1.getData()[i].status == "Status 3") {

                poi.setIcon(customIcon3);

            }

            sc.add(poi);

        }

Al finalizar creo un objeto TileMap para agregar la coleccion que ya tenemos

 /*Construct an instance of MQA.TileMap with the shape collection and margin offset in the map constructor.*/

        window.map = new MQA.TileMap({

            elt: document.getElementById('main_mapHtml1'),

            mtype: 'osm',

            collection: sc,

            bestFitMargin: 100

        });

Eso es todo ahora para generar otro mapa como consejo se tendria que borrar el anterior para ello

con main.mapHtml1.domNode.innerHTML = ""; podemos hacerlo.