JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<script src="http://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Kmjtd%7Cluua2qu7n9%2C7a%3Do5-lzbgq"></script>
<div id='map' style='width:750px; height:280px;'></div>
<p>
<a href="javascript:addPoi()">Add Poi</a> 
<a href="javascript:map.removeAllShapes()">Remove All Shapes</a>

<a href="javascript:addShapeCollection()">Add Shape Collection</a>

    <br/>
<a href="javascript:map.setZoomLevel(map.getZoomLevel()-1)">Zoom Out</a>

<a href="javascript:map.setZoomLevel(map.getZoomLevel()+1)">Zoom In</a>

    <br/>
<a href="javascript:map.setMapType('sat')">Aerial</a>

<a href="javascript:map.setMapType('hyb')">Hybrid</a>

<a href="javascript:map.setMapType('map')">Street</a>

    <br />
<a href="javascript:clearEventDiv()">Clear Events</a>

</p>
 <h3>Events Fired</h3>

<div id="showEvents" style="margin:10px; padding:10px; width:785px; height:200px; overflow:auto; border:dotted 1px #eeeeee"></div>

CSS

.mqabasicwnd-content {
    white-space: nowrap;
    font-weight: bold;
    font-size: 1.25em;
    color: #000000;
}

JavaScript

/*An example of using the MQA.EventUtil to hook into the window load event and execute defined function
      passed in as the last parameter. You could alternatively create a plain function here and have it
      executed whenever you like (e.g. <body onload="yourfunction">).*/

      MQA.EventUtil.observe(window, 'load', function () {

          /*Create an object for options*/
          var options = {
              elt: document.getElementById('map'),
              /*ID of element on the page where you want the map added*/
              zoom: 10,
              /*initial zoom level of map*/
              latLng: {
                  lat: 39.743943,
                  lng: -105.020089
              },
              /*center of map in latitude/longitude*/
              mtype: 'map' /*map type (map)*/
          };

          /*Construct an instance of MQA.TileMap with the options object*/
          window.map = new MQA.TileMap(options);

          /*Hook up event listeners*/
          MQA.EventManager.addListener(map, 'movestart', eventRaised);
          MQA.EventManager.addListener(map, 'move', eventRaised);
          MQA.EventManager.addListener(map, 'moveend', eventRaised);
          MQA.EventManager.addListener(map, 'dragstart', eventRaised);
          MQA.EventManager.addListener(map, 'drag', eventRaised);
          MQA.EventManager.addListener(map, 'dragend', eventRaised);
          MQA.EventManager.addListener(map, 'click', eventRaised);
          MQA.EventManager.addListener(map, 'doubleclick', eventRaised);
          MQA.EventManager.addListener(map, 'zoomstart', eventRaised);
          MQA.EventManager.addListener(map, 'zoomend', eventRaised);
          MQA.EventManager.addListener(map, 'maptypechanged', eventRaised);
          MQA.EventManager.addListener(map, 'mapcleard', eventRaised);
          MQA.EventManager.addListener(map, 'shapeadded', eventRaised);
          MQA.EventManager.addListener(map, 'shaperemoved', eventRaised);
         ...