Jump to content

Error on add marker to map with UniMap

artem_niko

By artem_niko
in General

 Share

Recommended Posts

artem_niko Advanced Member

artem_niko

Posted
Posted

Hello!

I was see and use code from demo about UniMap: 

  with UniMap1.Markers.Add do
  begin
    id:= Trunc(UniNumberEdit4.Value);
    Latitude:= UniFormattedNumberEdit5.Value;
    Longitude:= UniFormattedNumberEdit6.Value;
    Icon.iconUrl:= UniEdit1.Text;
    Draggable:= UniCheckBox2.Checked;
    CustomIconText:='new L.TextIcon({ text: "'+UniEdit4.Text+'", color: "'+UniComboBox1.Text+'" });';
    AddToMap;
    PanToMarker(8);
  end;

This code is working in demo.

But, if I write in my project that: 

procedure TUniFormTravelAddStep.UniSFButtonAutoSaveClick(Sender: TObject);
begin
  with UniMap1.Markers.Add do
  begin
    Id:=Trunc(StrToFloat(UniEditMarkerId.Text));
    Latitude:=UniNumberEditMarkerLatitude.Value;
    Longitude:=UniNumberEditMarkerLongitude.Value;
    Draggable:=UniCheckBox1.Checked;
    Icon.iconUrl:=IconPath + MarkerName;
    CustomIconText:='new L.TextIcon({ text: "11"});';
    Popup.content:='<center><b>' + UniEditMarkerName.Text + '</b></center>';
    AddToMap;
    PanToMarker(8);
  end;	
end;

I get error: 

var aMarkerIcon3= new L.TextIcon({ text: "11"});;O47AMarker3=L.marker([38.7369000000,27.5981000000],{icon:aMarkerIcon3,InternalId:3,id:1,title:"",alt:"",zIndexOffset:0,opacity:1,riseOnHover:false,riseOffset:250,draggable:true,autoPan:false});O47AMarker3.on("dragend",function(e){var map =O47A_uniMap;  ajaxRequest(O47A, "markerdrag", {  lat: (e.latlng ? e.latlng.lat : e.target._latlng.lat), lng: (e.latlng ? e.latlng.lng : e.target._latlng.lng), zoom: map.getZoom(),x: (e.containerPoint ? e.containerPoint.x : 0),y: (e.containerPoint ? e.containerPoint.y : 0),id: e.target.options.id,InternalId: e.target.options.InternalId});});O47AMarker3.bindPopup("\x3Ccenter\x3E\x3Cb\x3E11\x3C/b\x3E\x3C/center\x3E",{maxWidth:300,minWidth:50,keepInView:false,closeButton:true,autoClose:true,closeOnEscapeKey:true});O47AMarker3.addTo(O47A_uniMapmarker);O47A_uniMap.setView(O47AMarker3.getLatLng(),8);

Please, help me!

Hayri ASLAN Advanced Member

Hayri ASLAN

Posted
Posted
10 hours ago, Артем said:

Hello!

I was see and use code from demo about UniMap: 


  with UniMap1.Markers.Add do
  begin
    id:= Trunc(UniNumberEdit4.Value);
    Latitude:= UniFormattedNumberEdit5.Value;
    Longitude:= UniFormattedNumberEdit6.Value;
    Icon.iconUrl:= UniEdit1.Text;
    Draggable:= UniCheckBox2.Checked;
    CustomIconText:='new L.TextIcon({ text: "'+UniEdit4.Text+'", color: "'+UniComboBox1.Text+'" });';
    AddToMap;
    PanToMarker(8);
  end;

This code is working in demo.

But, if I write in my project that: 


procedure TUniFormTravelAddStep.UniSFButtonAutoSaveClick(Sender: TObject);
begin
  with UniMap1.Markers.Add do
  begin
    Id:=Trunc(StrToFloat(UniEditMarkerId.Text));
    Latitude:=UniNumberEditMarkerLatitude.Value;
    Longitude:=UniNumberEditMarkerLongitude.Value;
    Draggable:=UniCheckBox1.Checked;
    Icon.iconUrl:=IconPath + MarkerName;
    CustomIconText:='new L.TextIcon({ text: "11"});';
    Popup.content:='<center><b>' + UniEditMarkerName.Text + '</b></center>';
    AddToMap;
    PanToMarker(8);
  end;	
end;

I get error: 


var aMarkerIcon3= new L.TextIcon({ text: "11"});;O47AMarker3=L.marker([38.7369000000,27.5981000000],{icon:aMarkerIcon3,InternalId:3,id:1,title:"",alt:"",zIndexOffset:0,opacity:1,riseOnHover:false,riseOffset:250,draggable:true,autoPan:false});O47AMarker3.on("dragend",function(e){var map =O47A_uniMap;  ajaxRequest(O47A, "markerdrag", {  lat: (e.latlng ? e.latlng.lat : e.target._latlng.lat), lng: (e.latlng ? e.latlng.lng : e.target._latlng.lng), zoom: map.getZoom(),x: (e.containerPoint ? e.containerPoint.x : 0),y: (e.containerPoint ? e.containerPoint.y : 0),id: e.target.options.id,InternalId: e.target.options.InternalId});});O47AMarker3.bindPopup("\x3Ccenter\x3E\x3Cb\x3E11\x3C/b\x3E\x3C/center\x3E",{maxWidth:300,minWidth:50,keepInView:false,closeButton:true,autoClose:true,closeOnEscapeKey:true});O47AMarker3.addTo(O47A_uniMapmarker);O47A_uniMap.setView(O47AMarker3.getLatLng(),8);

Please, help me!

This code works for me.

Can you please attach test case

artem_niko Advanced Member

artem_niko

Posted
  • Author
Posted
15 hours ago, Hayri ASLAN said:

This code works for me.

Can you please attach test case

I can't make test case, because I take code from demo UniGUI.

Can you explain about error?

image.png.71e2a02cfc0fb7db5e744343a20df66d.png

image.png.7fb982f365a162cd93467861090037bf.png

May be in demo using something JS code?

One moment: if I'm not write  

CustomIconText:='new L.TextIcon({ text: "11"});';

then marker adding! Error if I try set CustomIconText...

Hayri ASLAN Advanced Member

Hayri ASLAN

Posted
Posted
5 hours ago, Артем said:

I can't make test case, because I take code from demo UniGUI.

Can you explain about error?

image.png.71e2a02cfc0fb7db5e744343a20df66d.png

image.png.7fb982f365a162cd93467861090037bf.png

May be in demo using something JS code?

One moment: if I'm not write  


CustomIconText:='new L.TextIcon({ text: "11"});';

then marker adding! Error if I try set CustomIconText...

Please check ServerModule.CustomFiles. We have 2 files there.

artem_niko Advanced Member

artem_niko

Posted
  • Author
Posted
3 hours ago, Hayri ASLAN said:

Please check ServerModule.CustomFiles. We have 2 files there.

I was check.

In UniServerModule I have not any files:

image.thumb.png.f5e100b1ee7d4c00f336bee8e12d4ddc.png

I just install last version of UniGUI and error exist...

Hayri ASLAN Advanced Member

Hayri ASLAN

Posted
Posted
1 hour ago, Артем said:

I was check.

In UniServerModule I have not any files:

image.thumb.png.f5e100b1ee7d4c00f336bee8e12d4ddc.png

I just install last version of UniGUI and error exist...

Are you checking UniMap - Custom Marker demo? I can see the files

  • Like 1
artem_niko Advanced Member

artem_niko

Posted
  • Author
Posted
6 hours ago, Hayri ASLAN said:

Are you checking UniMap - Custom Marker demo? I can see the files

Excellent! Great! Thank you, @Hayri ASLAN! Working! 😀

But, I have one question.

In JS scrtipt file I rename .png and .svg files and put leaflet-text-icon.css in anouther directory: files/ccs/leaflet-text-icon.css.

File leaflet-text-icon.js I put in files/js/leaflet-text-icon.js and this new code in this JS file: 

(function () {

	L.TextIcon = L.Icon.extend({
		options: L.extend({
			className: 'leaflet-div-icon',
			getIconUrl: function(color) {
				return '/files/svg/msccMH-'+ (color || 'green') +'.svg' 
			}
		}, new L.Icon.Default().options),

	 	initialize: function(options) {
	 		L.extend(options, {
	 			shadowUrl:  '/files/images/msccMS.png'
	 		});
	 		L.setOptions(this, options);
	 		var iconUrl = this.options.getIconUrl(this.options.color);
	 		this._iconImg = this._createImg(iconUrl);
	 	},
		createIcon: function() {
			var textDiv = document.createElement('div');
			textDiv.className = 'icon-text';
			textDiv.innerHTML = this.options.text || '';

			var div = document.createElement('div');
			div.appendChild(this._iconImg);
			div.appendChild(textDiv);

			this._setIconStyles(div, 'icon');
			this._textDiv = textDiv;
			return div;
		},
		setColor: function(color) {
			this._iconImg.src = this.options.getIconUrl(color);
		},
		setText: function(text) {
			this._textDiv.innerHTML = text || '';
		}
	});

}());

Where "msccMH-" - this is file with old name marker-hole.svg and "msccMS" - this is file with old name marker-shadow.png.

Now, marker succesfuly adding to the map, but, without icon:

image.png.8bd8c89420719c9c687bc5ebc6c04d33.png

I think, because my CSS file in anouther directory not as JS file.

 

Please, explain me, what must do, that icon will be?

Hayri ASLAN Advanced Member

Hayri ASLAN

Posted
Posted
10 hours ago, Артем said:

Excellent! Great! Thank you, @Hayri ASLAN! Working! 😀

But, I have one question.

In JS scrtipt file I rename .png and .svg files and put leaflet-text-icon.css in anouther directory: files/ccs/leaflet-text-icon.css.

File leaflet-text-icon.js I put in files/js/leaflet-text-icon.js and this new code in this JS file: 


(function () {

	L.TextIcon = L.Icon.extend({
		options: L.extend({
			className: 'leaflet-div-icon',
			getIconUrl: function(color) {
				return '/files/svg/msccMH-'+ (color || 'green') +'.svg' 
			}
		}, new L.Icon.Default().options),

	 	initialize: function(options) {
	 		L.extend(options, {
	 			shadowUrl:  '/files/images/msccMS.png'
	 		});
	 		L.setOptions(this, options);
	 		var iconUrl = this.options.getIconUrl(this.options.color);
	 		this._iconImg = this._createImg(iconUrl);
	 	},
		createIcon: function() {
			var textDiv = document.createElement('div');
			textDiv.className = 'icon-text';
			textDiv.innerHTML = this.options.text || '';

			var div = document.createElement('div');
			div.appendChild(this._iconImg);
			div.appendChild(textDiv);

			this._setIconStyles(div, 'icon');
			this._textDiv = textDiv;
			return div;
		},
		setColor: function(color) {
			this._iconImg.src = this.options.getIconUrl(color);
		},
		setText: function(text) {
			this._textDiv.innerHTML = text || '';
		}
	});

}());

Where "msccMH-" - this is file with old name marker-hole.svg and "msccMS" - this is file with old name marker-shadow.png.

Now, marker succesfuly adding to the map, but, without icon:

image.png.8bd8c89420719c9c687bc5ebc6c04d33.png

I think, because my CSS file in anouther directory not as JS file.

 

Please, explain me, what must do, that icon will be?

Hi,

Can you provide test case so i can understand the problem.

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share
Go to topic listing
×
×
  • Create New...