Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Selecting leaflet markers and changing marker icons

Status
Not open for further replies.

Julierme

Programmer
Jan 28, 2015
13
0
0
BR

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:

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>
</select>

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

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}?

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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top