Question

No se muestra imagen establecida en un campo HTML Personalizado a subir a repositorio

Forms

Updated July 16, 2015

asked on May 20, 2015

Hola:

Estoy trabajando con FORMS 9.1.1.1517 y utilizando un campo HTML Personliazado muestro una imagen de un mapa obtenida a partir de una función de Geolocalización. El formulario pasa por medio de un BP a otro usuario y la imagen se muestra sin problema, Pero al llevarla al repositorio en un archivo tif la imagen del mapa no se muestra. Agradezco su apoyo y atención a este problema.


function showMap(LatLng) {
	var position = LatLng.split('|');
	
	var latitude = position[0];
	var longitude = position[1];

	var output = document.getElementById('map-canvas');
	output.innerHTML = '<p>Latitud actual: ' + latitude + '° | Longitud actual: ' + longitude + '°</p>';

	var img = new Image();
	img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude +
		"&zoom=17&size=700x300&markers=color:red|label:P|" + latitude + ',' + longitude;

	output.appendChild(img);

}

0 0

Answer

APPROVED ANSWER

replied on May 21, 2015 • Show version history

Here is an example that works for me:

Form

The input field is Field1 and uses the CSS class latlong. Then I have a custom HTML field for the canvas underneath it.

Here is the Javascript

$(document).ready(function () {
  $('.latlong input').on('change', function() {
    drawMap($(this).val());
  });
  
  if ($('#Field1').prop('tagName') != 'INPUT') {
    var divlatlong = document.getElementById("Field1").innerHTML;
    drawMap(divlatlong);
  }
  
  function drawMap(n) {
    var position =  n.split('|');
    var latitude = position[0];
    var longitude = position[1];
    var google_tile = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=17&size=700x300&markers=color:red|label:P|" + latitude + "," + longitude;
    var canvas = document.getElementById("map-canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = google_tile;
    img.onload = function(){
      context.drawImage(img, 0, 0);
    }
  }    
});

So when the form is being filled out, you can type in the latitude and longitude and it will update the map on the form. Then after the form is submitted, the input where you get the latitude and longitude from is converted to a div so now you need to get the value from the div so that the map is properly drawn onto the submitted form.

Here's the document in the repository

0 0

Replies

replied on May 20, 2015 • Show version history

I apologize for replying in English, however it might be better than if I tried to run this through a translation service.

I haven't tried this in Forms 9.1.1, but I was able to get things working in Forms 9.2.1. I created a form that only has a custom HTML field with the following

<canvas id="map-canvas"></canvas>

I then added the following Javascript

$(document).ready(function () {
  var google_tile = "https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap";
  var canvas = document.getElementById("map-canvas");
  var context = canvas.getContext("2d");
  var img = new Image();
  img.src = google_tile;
  img.onload = function(){
    context.drawImage(img, 0, 0);
  }
});

Here is what the form looks like

And here is what the document looks like in my repository after I submit the form

Can you try modifying the Javascript in your form and test? If there's still an issue, can you try upgrading to Forms 9.2.1?

*Edit*

The same form as above works fine for me in Forms 9.1.1 so the issue could be related to the Javascript you're using.

0 0

replied on May 21, 2015

Hi,

I followed his instructions and the result was as follows:
The map is displayed but no location.

Any suggestions?

0 0

replied on May 21, 2015 • Show version history

Gerardo,

Can you test in a new form with only a single custom HTML field using

<canvas id="map-canvas" width="700" height="300"></canvas>

and this exact Javascript

$(document).ready(function () {
  var latitude = "32.50923333";
  var longitude = "-117.0975806";
  var google_tile = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=17&size=700x300&markers=color:red|label:P|" + latitude + "," + longitude;
  var canvas = document.getElementById("map-canvas");
  var context = canvas.getContext("2d");
  var img = new Image();
  img.src = google_tile;
  img.onload = function(){
    context.drawImage(img, 0, 0);
  }
});

Here is what my form looks like

And here is what the document in the repository looks like

Note that this was using Forms 9.1.1 and Laserfiche 9.1.1

0 0

replied on May 21, 2015

when the values of latitude and longitude is static, forms sent the image to LF.

when I apply the values using fields latitude and longitude in the format requested, does not sent the image to LF

i need use two fields in the format with latitude and longitude

0 0

APPROVED ANSWER

replied on May 21, 2015 • Show version history

Here is an example that works for me:

Form

The input field is Field1 and uses the CSS class latlong. Then I have a custom HTML field for the canvas underneath it.

Here is the Javascript

$(document).ready(function () {
  $('.latlong input').on('change', function() {
    drawMap($(this).val());
  });
  
  if ($('#Field1').prop('tagName') != 'INPUT') {
    var divlatlong = document.getElementById("Field1").innerHTML;
    drawMap(divlatlong);
  }
  
  function drawMap(n) {
    var position =  n.split('|');
    var latitude = position[0];
    var longitude = position[1];
    var google_tile = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=17&size=700x300&markers=color:red|label:P|" + latitude + "," + longitude;
    var canvas = document.getElementById("map-canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = google_tile;
    img.onload = function(){
      context.drawImage(img, 0, 0);
    }
  }    
});

Here's the document in the repository

0 0

replied on July 16, 2015 • Show version history

Hi Alexander

Not work.

The process is:

Setp one: the user one start business process with the form

The image map is ok.

Setp two: the user two approval the form and send to repository.

The image map is ok, then send to repository with 'aprobar' button.

So ... in repository we can not see the image map.

Only seen the box

The code (JavaScript) in the HTML custom field:

$(document).ready(function () {
	
		//-- Llamada a funcion para ajustar controles de la tabla
		resizeControls();
	
		//-- Establece en variable el valor del campo con Lat_Long
		var mapValue = $('.latlong input').val();
        	//-- Si exite valor en la variable...
		if (mapValue.length > 1) {
			//-- Llama a funcion para mostrar mapa
                  	drawMap(mapValue);
		}
      
      
		//-- Llamada a función para mostrar mapa
		$('.latitude input').change(function () {
               	drawMap($('.latitude input').val() + '|' + $('.longitude input').val());
		});

		//-- Llamada a función para mostrar mapa
		$('.longitude input').change(function () {
                  drawMap($('.latitude input').val() + '|' + $('.longitude input').val());
		});

		//-- Llamada a función para Geolocalización
		$('#btnUpdateMap').click(function () {
			updateMap();
		});

		//-- Llamada a funcion "setAreaTotal" cuando hay un cambio de valores en la tabla
		$('.cf-table-block').change(setAreaTotal);

	    //-- Llamada a funcion "resizeControls" cuando se agrega una linea a la tabla
      	$('.cf-table-add-row').click(function(){
			resizeControls();
  		});
					
		//-- Funcion para ajustar controles de la tabla
		function resizeControls() {
			$('.ncra input').css('width', '100%');
			$('.ncra input').css('text-align', 'center');
			$('.tipoAntena select').css('width', '100%');
			$('.quantity input').css('width', '100%');
			$('.quantity input').css('text-align', 'center');
			$('.tecnologia select').css('width', '100%');
			$('.diametro select').css('width', '100%');
          	$('.areaTotal input').css('width', '100%');
			$('.areaTotal input').css('text-align', 'right');
          	$('.ListOperadora select').css('width', '100%');
		}

		//-- Funcion para mostrar mapa en BP
		function drawMap(LatLng) {
			//-- Establece en variable el valor de Latitud y Longitud
            var position = LatLng.split('|');
            
			//-- Separamos valores (Latitud-Longitud)
			var latitude = position[0];
			var longitude = position[1];

          	var google_tile = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude +
				"&zoom=17&size=700x300&markers=color:red|label:P|" + latitude + ',' + longitude;
          
          	var canvas = document.getElementById("map-canvas");
                      
			//-- Establece en variable el objeto HTML Personalizado
			//var output = document.getElementById("map-canvas");
			
			var context = canvas.getContext("2d");
                            
			//-- Establece en variable nuevo objeto Imagen
			var img = new Image();
			img.src = google_tile;
          
			//-- Muestra imagen de mapa
			img.onload = function () {
				context.drawImage(img, 0, 0, 700, 300);
			}

			$('.latlong input').val($('.latitude input').val() + '|' + $('.longitude input').val());

			//-- Llama a funcion para actualizar valores de area
			setAreaTotal();
		}

		//-- funcion para buscar Geolocalizacion
		function updateMap() {
			var output = document.getElementById('map-canvas');

			if (!navigator.geolocation) {
				alert('Su navegador no soporta Geolocalización');

It is all the code.

Can you help us?

0 0

You are not allowed to follow up in this post.

Question

Question

No se muestra imagen establecida en un campo HTML Personalizado a subir a repositorio

Answer

Replies

Sign in to reply to this post.