artem_niko Posted November 30, 2020 Share Posted 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! Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted November 30, 2020 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
artem_niko Posted December 1, 2020 Author Share Posted 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? 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... Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted December 1, 2020 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
artem_niko Posted December 1, 2020 Author Share Posted 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... Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted December 1, 2020 Share Posted 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 1 Quote Link to comment Share on other sites More sharing options...
artem_niko Posted December 2, 2020 Author Share Posted 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: I think, because my CSS file in anouther directory not as JS file. Please, explain me, what must do, that icon will be? Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted December 2, 2020 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.