Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


Selecting leaflet markers and changing marker icons

Selecting leaflet markers and changing marker icons

Selecting leaflet markers and changing marker icons


I have data coming from a Json file and I created a layer based on this Json file using markerClusterGroup. I am hitting the wall trying to do two things:

1 - Select some markers based on some Json's feature ("temperatura", "salinidade","corrente", "profundidade" e "geofisico") in xbt.json and using a select list in the HTML:


<select name="sometext" >
  <option value="temperatura">temperatura</option>
  <option value="salinidade">salinidade</option>
  <option value="corrente">corrente</option>
  <option value="profundidade">profundidade</option>
  <option value="geofisico">geofisico</option>

2 - Change the marker icon using var and code below;

CODE --> JavaScript

var greenIcon = L.icon({
    iconUrl: 'icon/leaf-green.png',
    shadowUrl: 'icon/leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor

Based on var greenIcon and on the way I am adding the json to the map using popups and makercluster (see code below), How can I call {icon:greenIcon}?

CODE --> javascript

var xbt = getJson('geojson/xbt.json');
var markers_xbt = L.markerClusterGroup();
var estacoes_xbt = L.geoJson(xbt, { 
        onEachFeature: function (feature, layer) //functionality on click on feature
            layer.bindPopup("Navio: "+feature.properties.navio+"<br>"+"Comissao: "+feature.properties.comissao+"<br>"+ "Bandeira do Navio:"+feature.properties.naviobandeira+"<br>"+"Equipamento: "+feature.properties.equipamento+"<br>"+ "Inicio da Comissao:"+feature.properties.iniciocomissao+"<br>"+"Fim da Comissao : "+feature.properties.fimcomissao+"<br>"+"Data de Lancamento: "+ feature.properties.estacaodata+"<br>"+"Hora de Lancamento: " +feature.properties.estacaohora+"<br>"+"Quadrado de Marsden: "+feature.properties.quadrado+"<br>"+"Subquadrado de Marsden: "+feature.properties.subquadrado ); //just to show something in the popup. could be part of the geojson as well!

    markers_xbt.addLayer(estacoes_xbt); // add it to the cluster group
    map.addLayer(markers_xbt);      // add it to the map
    map.fitBounds(markers_xbt.getBounds()); //set view on the cluster extend 

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close