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!

*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.


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: ""<br>"+"Comissao: ""<br>"+ "Bandeira do Navio:""<br>"+"Equipamento: ""<br>"+ "Inicio da Comissao:""<br>"+"Fim da Comissao : ""<br>"+"Data de Lancamento: "+"<br>"+"Hora de Lancamento: ""<br>"+"Quadrado de Marsden: ""<br>"+"Subquadrado de Marsden: " ); //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