Cartovisor. Insert-marker-test

Ejemplo de como pedir al usuario la localización de un punto sobre el mapa para posteriormente insertar un Marcador en la posición introducida

Ejemplo

Código fuente

<html>
  <head>
    <title>insert-marker-test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://www.cartociudad.es/VisualizadorCartografico/CartoVisor.js" type="text/javascript"></script>
  </head>
  <body>
      <table>
          <tr>
              <td>
                  <button id="markerbutton" onclick="newMarker();">Nuevo marcador</button>
                  <button id="cancelbutton" onclick="cartovisor.cancelQueryMapPoint();markerbutton.disabled = false;">Cancelar</button>
              </td>
              <td></td>
          </tr>
          <tr>
              <td id="container"></td>
              <td id="information"></td>
          </tr>
      </table>
      <script type="text/javascript">
            var cartovisor;
            var markerbutton = document.getElementById('markerbutton');
            var cancelbutton = document.getElementById('cancelbutton');
            var information_area = document.getElementById('information');
            var marker_counts = 0;
            function marker_OnClick(data)
            {
                var detailHtml = '<p>';
                detailHtml += '<b>' + data.popup.header + '</b><br/>';
                detailHtml += data.popup.body + '<br/><br/>';
                for (var key in data)
                            if (key != 'onClickFunction')
                                        detailHtml += key + " : " + data[key] + "<br/>";
                detailHtml += '</p>';
                information_area.innerHTML = detailHtml;
            }
            function addMarker(data)
            {
                markerbutton.disabled = false;
                cancelbutton.disabled = true;
                marker_counts++;
                var marker = cartovisor.createMarker({'longitude':data.longitude,
                                                     'latitude':data.latitude,
                                                     'layername':'marcadores',
                                                     'width':15,
                                                     'height':23,
                                                     'offset_left':-6,
                                                     'offset_top':-21,
                                                     'url':'./mapmarker.png',
                                                     'onClickFunction':marker_OnClick,
                                                     'tooltip':'Marcador '+ marker_counts,
                                                     'customData':'Información personalizada',
                                                     'popup':{'header':'Marcador '+ marker_counts,
                                                             'body':'Detalle de Marcador '+ marker_counts,
                                                             'width':150,
                                                             'height':70}
                                                     });
            }
            function newMarker()
            {
                markerbutton.disabled = true;
                cancelbutton.disabled = false;
                cartovisor.queryMapPoint({prompt:'Seleccione ubicación para el nuevo marcador',
                                          callbackFunction:addMarker});
            }
            function loadFunction()
            {
                cartovisor.activateLayerSwitcherControl(true);
            }
            markerbutton.disabled = false;
            cancelbutton.disabled = true;
            cartovisor = new CartoVisor({elementId:'container',
                                         longitude:-3.6935,
                                         latitude:40.5308,
                                         zoom:3,
                                         onLoadFunction:loadFunction});
      </script>
  </body>
</html>