Quote from luishp on April 3, 2021, 11:17 am

Hi @roccocogliano. Currently it's only possible using JavaScript:

https://leafletjs.com/examples/custom-icons/

BeginJS
$App["myicon"] = L.icon({
    iconUrl: "Put here base64 encoded image",
    shadowUrl: "Put here base64 encoded shadow image",

    iconSize:     [25, 41],
    shadowSize:   [41, 41],
    iconAnchor:   [12, 41],
    shadowAnchor: [12, 41],
    popupAnchor:  [0, -41]
});
containerId="Container1";
mname="MyMarker1";
lat=45.3;
lon=1.4;
setdraggable=false;
thetitle="Write here your Popup text";
$App[containerId+mname+"neoMapObject"]=L.marker([lat, lon],{draggable: setdraggable,icon: $App["myicon"]}).addTo($App[containerId+"neoMap"]);
$App[containerId+mname+"neoMapObject"].bindPopup(thetitle);
EndJS

It's not easy but If you think it's important I can create a new command to add custom icons.
Regards.

Quote from roccocogliano on April 3, 2021, 11:54 am

Hi Luis,
Thank you for your answer. Yes, the customization of the marker could be very useful for me, but I think it can be for everyone.
But obviously there is no rush. In the meantime I will try the solution with JS.

Thanks so much
Rocco

Quote from roccocogliano on May 24, 2022, 3:03 pm

Hello,
I use neomap a lot. A little hint: when using very large datasets, I don't use the 'neomapaddmarker' method but a small js function that uses the 'circlemarker' method of the leaflet library (https://leafletjs.com/reference.html#circlemarker), which in terms of performance is much, much, more powerful .
Using point sets with cardinality up to 2000 or 3000, 'neomapaddmarker' is still fine, plus it slows it down conspicuously. With 'circlemarker' (which is similar to neomapaddcircle but uses px for the radius and not the meters) you can easily and abundantly exceed 10000 points without any particular slowdown.
This is the function I use:

setvar [containerMap] [eContainer]
setvar [lat] [eLat]
setvar [lon] [eLon]
setvar [popUp] [ePopUp]
setvar [fillcolor] [eColor]
setvar [fillopacity] [eOpacity]
setvar [radius] [eRadius]

BeginJS
   containerId=$App.containerMap;
   popup = $App.popUp;
   mname=$App.mName;
   radius = $App.radius;
   fillcolor = $App.fillcolor;
   fillopacity = $App.fillopacity;

   lat = $App.lat;
   lon = $App.lon;

   L.circleMarker([lat,lon], {color:'gray',radius:radius, fill:true, fillColor:fillcolor, fillOpacity:fillopacity, opacity:1, weight:1}).addTo($App[containerId+"neoMap"]).bindPopup(popup);
EndJS

(in the function I used only some of the possible parameters)

It might be useful to add two new functions to the neomap plugin that implement the functionality suggested by luis (for custom markers and which I use a lot instead of neomapaddmarker) and for circular markers.

I hope it is useful

Greetings
Rocco

Quote from luishp on May 25, 2022, 6:50 am

@roccocogliano thank you for sharing!
I will try to add your script as a neoMap plugin command :)

Regards.

Quote from roccocogliano on May 25, 2022, 9:31 am

Thank you so much @luishp

Regards

 

Quote from luishp on May 25, 2022, 11:56 am

@roccocogliano plase install the attached neoMap plugin.
It now includes a new command: neoMapAddCircleMarker
Please check it and let me know if it works as expected.

Thank you!

Quote from roccocogliano on May 25, 2022, 12:23 pm

Great!!!
Hi @luishp, I tried and it works perfectly and excellently. I loaded more than 20,000 features into the map in about 5 seconds. Great I'd say. In addition, even the actions made on the map with the mouse (pan, zoom, ...) are more fluid. Thank you so much Luis.

Greetings
Rocco

Quote from luishp on May 25, 2022, 12:27 pm

Perfect :)
I will include this update in the next VisualNEO Web version.
Thank you!

Quote from sakismor on July 6, 2022, 6:33 pm

Hello roccocogliano

Is it possible to make a sample app to see how to use the new function and where you save the very large datasets?

I try to make a simple app for my fire station.

Thank you.

Quote from sakismor on July 6, 2022, 7:31 pm

Hello luishp

Is it possible to have the new command to add custom icons?

I need it for my project.

Thank you.

Quote from roccocogliano on July 6, 2022, 7:48 pm

Hi @sakismor,

in attach a a small example extracted from one of my applications.
The points on the map are earthquakes and are loaded as csv by a webservices. There are 15,000 earthquakes so 15,000 points.
In the 'Load' button there is the query that loads the data in the text area.
In the 'Plot' button the points on the map are plotted.

I hope it will be useful to you.

Greetings
Rocco

Quote from sakismor on July 6, 2022, 8:49 pm

I am really thank you for your quick respond. Your app is exactly what I want. Thank you.

Quote from sakismor on July 18, 2022, 10:21 pm

Hello luishp

Is it possible to have the new command to add custom icons?

I need it for my project.

Thank you.

Quote from luishp on July 19, 2022, 9:51 am

@sakismor it's already possible as shown at the beginning of this thread.
neoMapAddCircleMarker is just a lighweight marker. It's lighweight because it's a circle.
If you want to use your own marker, then it's not a circle nor lightweight anymore.

Regards.

Quote from Palamar on January 9, 2023, 3:47 pm

Quote from luishp on April 3, 2021, 11:17 am

Hi @roccocogliano. Currently it's only possible using JavaScript:

https://leafletjs.com/examples/custom-icons/

BeginJS

$App["myicon"] = L.icon({

iconUrl: "Put here base64 encoded image",

shadowUrl: "Put here base64 encoded shadow image",

iconSize: [25, 41],

shadowSize: [41, 41],

iconAnchor: [12, 41],

shadowAnchor: [12, 41],

popupAnchor: [0, -41]

});

containerId="Container1";

mname="MyMarker1";

lat=45.3;

lon=1.4;

setdraggable=false;

thetitle="Write here your Popup text";

$App[containerId+mname+"neoMapObject"]=L.marker([lat, lon],{draggable: setdraggable,icon: $App["myicon"]}).addTo($App[containerId+"neoMap"]);

$App[containerId+mname+"neoMapObject"].bindPopup(thetitle);

EndJS

BeginJS $App["myicon"] = L.icon({ iconUrl: "Put here base64 encoded image", shadowUrl: "Put here base64 encoded shadow image", iconSize: [25, 41], shadowSize: [41, 41], iconAnchor: [12, 41], shadowAnchor: [12, 41], popupAnchor: [0, -41] }); containerId="Container1"; mname="MyMarker1"; lat=45.3; lon=1.4; setdraggable=false; thetitle="Write here your Popup text"; $App[containerId+mname+"neoMapObject"]=L.marker([lat, lon],{draggable: setdraggable,icon: $App["myicon"]}).addTo($App[containerId+"neoMap"]); $App[containerId+mname+"neoMapObject"].bindPopup(thetitle); EndJS

BeginJS
$App["myicon"] = L.icon({
    iconUrl: "Put here base64 encoded image",
    shadowUrl: "Put here base64 encoded shadow image",

    iconSize:     [25, 41],
    shadowSize:   [41, 41],
    iconAnchor:   [12, 41],
    shadowAnchor: [12, 41],
    popupAnchor:  [0, -41]
});
containerId="Container1";
mname="MyMarker1";
lat=45.3;
lon=1.4;
setdraggable=false;
thetitle="Write here your Popup text";
$App[containerId+mname+"neoMapObject"]=L.marker([lat, lon],{draggable: setdraggable,icon: $App["myicon"]}).addTo($App[containerId+"neoMap"]);
$App[containerId+mname+"neoMapObject"].bindPopup(thetitle);
EndJS

It's not easy but If you think it's important I can create a new command to add custom icons.
Regards.

Perdón que reviva algo antiguo, pero es mejor que todas las dudas acerca de esto queden en el mismo post. No logro hacer funcionar esto, interpreto que el icono debe cambiar antes de la acción de poner el marcador.

De todas maneras veo que el código sirve para un marcador puntual, hay alguna forma de cambiar el ícono definitivamente para cualquier marcador que se coloque?. Gracias.

Quote from luishp on January 10, 2023, 12:11 pm

@palamar, este es el código que utiliza el plugin para añadir un marcador. Fijate que los marcadores están incluidos como imágenes .png en formato Base64 (he recortado el código correspondiente a las imágenes para que se entienda mejor).
Tu podrías crear una función similar añadiendo tus propios marcadores.

function neoMapAddMarker(containerId,mname,iconColor,lat,lon,setdraggable,thetitle){

   var blueBase64='data:image/png;base64,iVBORw...';
   var redBase64='data:image/png;base64,iVBORw...';
   var greenBase64='data:image/png;base64,iVBORw...';
   var violetBase64='data:image/png;base64,iVBORw...';
   var orangeBase64=' data:image/png;base64,iVBORw0KG...';
   var pinkBase64=' data:image/png;base64,iVBORw...';
   var shadowIcon='data:image/png;base64,iVBORw...';

   $App["blueIcon"] = L.icon({
    iconUrl: blueBase64,
    shadowUrl: shadowIcon,

    iconSize:     [25, 41], // size of the icon
    shadowSize:   [41, 41], // size of the shadow
    iconAnchor:   [12, 41], // point of the icon which will correspond to marker's location
    shadowAnchor: [12, 41],  // the same for the shadow
    popupAnchor:  [0, -41] // point from which the popup should open relative to the iconAnchor
   });

  $App["redIcon"] = L.icon({
    iconUrl: redBase64,
    shadowUrl: shadowIcon,

    iconSize:     [25, 41],
    shadowSize:   [41, 41],
    iconAnchor:   [12, 41],
    shadowAnchor: [12, 41],
    popupAnchor:  [0, -41]
   });

  $App["greenIcon"] = L.icon({
    iconUrl: greenBase64,
    shadowUrl: shadowIcon,

    iconSize:     [25, 41],
    shadowSize:   [41, 41],
    iconAnchor:   [12, 41],
    shadowAnchor: [12, 41],
    popupAnchor:  [0, -41]
   });

  $App["orangeIcon"] = L.icon({
    iconUrl: orangeBase64,
    shadowUrl: shadowIcon,

    iconSize:     [25, 41],
    shadowSize:   [41, 41],
    iconAnchor:   [12, 41],
    shadowAnchor: [12, 41],
    popupAnchor:  [0, -41]
   });

  $App["violetIcon"] = L.icon({
    iconUrl: violetBase64,
    shadowUrl: shadowIcon,

    iconSize:     [25, 41],
    shadowSize:   [41, 41],
    iconAnchor:   [12, 41],
    shadowAnchor: [12, 41],
    popupAnchor:  [0, -41]
   });

   $App["pinkIcon"] = L.icon({
    iconUrl: pinkBase64,
    shadowUrl: shadowIcon,

    iconSize:     [25, 41],
    shadowSize:   [41, 41],
    iconAnchor:   [12, 41],
    shadowAnchor: [12, 41],
    popupAnchor:  [0, -41]
   });

   $App[containerId+mname+"neoMapObject"]=L.marker([lat, lon],{draggable: setdraggable,icon: $App[iconColor+"Icon"]})
  .addTo($App[containerId+"neoMap"]);
   if(thetitle!=""){
  $App[containerId+mname+"neoMapObject"].bindPopup(thetitle);
   }
}

Espero que te sea útil.

Saludos.