CODEWITHSUNDEEP
javascriptjsonleafletgeojsonmarkers
Elton Santos
Elton Santos

Reputation: 581

How put numered marker with geojson on leaflet

Forget everything until here, I spent the dawn trying, to see if I could move forward, I'll explain. I have a map and I need to enumerate the 1 to 15 markings. The markings are correct, the problem that marks only 1, 15 times. This is my json:

https://github.com/eltonsantos/analise_integrada/blob/master/path.js

simple json, nothing much

My code is:

var rotas = L.geoJSON(paradas, {
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng){
        console.log("Qtd: " + paradas.features.length)
        for(var i = 1; i <= paradas.features.length; i++){
            return L.marker(latlng, {
                icon: new L.AwesomeNumberMarkers({
                    number: i,
                    markerColor: 'purple'
                })
            })
        }
    }
}).addTo(map);

This code does not show any error message, it just shows all my points being numbered all with 1. I just wanted them to be numbered from 1 to 15, according to the amount in json

Upvotes: 1

Views: 1563

Answers (1)

ghybs
ghybs

Reputation: 53185

The pointToLayer function option is called once per marker (per "Point" type feature to be exact). You have a single latlng value per function call.

Therefore you will understand that it is pointless trying to loop up to your paradas.features.length.

Furthermore, your loop returns at its first iteration, that is why you see only icons with "1" enumeration.

Since you want the L.geoJSON factory to increment your enumeration each time it calls your pointToLayer function, you just need to hold the counter in an outer scope:

var map = L.map('map');

// Hold the counter in an outer scope.
var i = 0;

var rotas = L.geoJSON(paradas, {
  //onEachFeature: onEachFeature,
  pointToLayer: function(feature, latlng) {
    console.log("Qtd: " + paradas.features.length)
    // Increment the counter.
    i += 1;
    // No need to loop.
    //for (var i = 1; i <= paradas.features.length; i++) {
      // Directly return the Marker for the given `latlng`
      return L.marker(latlng, {
        icon: new L.AwesomeNumberMarkers({
          number: i,
          markerColor: 'purple',
        }),
      });
    //}
  }
}).addTo(map);

map.fitBounds(rotas.getBounds());

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.AwesomeNumberMarkers assets -->
<link rel="stylesheet" href="https://rawgit.com/Zahidul-Islam/Leaflet.awesome-numbered-marker/f7b5b594e9fc451cd006ee345220a86390eb1cf1/src/leaflet_awesome_number_markers.css" />
<script src="https://rawgit.com/Zahidul-Islam/Leaflet.awesome-numbered-marker/f7b5b594e9fc451cd006ee345220a86390eb1cf1/src/leaflet_awesome_number_markers.js"></script>

<!-- your GeoJSON data that defines the `paradas` global variable -->
<script src="https://rawgit.com/eltonsantos/analise_integrada/8b771bed3bd0bbfe1da3d02ce09b37630a637a0c/path.js"></script>

<div id="map" style="height: 180px"></div>

Upvotes: 5

Related Questions