Error on add marker to map with UniMap

artem_niko · November 30, 2020

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 · November 30, 2020

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 · December 1, 2020

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 · December 1, 2020

5 hours ago, Артем said:
I can't make test case, because I take code from demo UniGUI.

Can you explain about error?

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 · December 1, 2020

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:

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

Hayri ASLAN · December 1, 2020

1 hour ago, Артем said:

I was check.

In UniServerModule I have not any files:

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

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

artem_niko · December 2, 2020

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 · December 2, 2020

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:

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.

Sign In

Error on add marker to map with UniMap

Recommended Posts

artem_niko

Hayri ASLAN

artem_niko

Hayri ASLAN

artem_niko

Hayri ASLAN

artem_niko

Hayri ASLAN

Join the conversation

Browse

Activity