CODEWITHSUNDEEP
leaflet
Christoph
Christoph

Reputation: 968

Using array of polyline objects as layer

I have a question about why a way that I'm trying to add polylines as a layer isn't working. To be clear, I'm not trying to assert that it should be working, just that I'm curious why it works in one case but not in another. Consider the following code:

var oMbTiles = new L.tileLayer('/mbtiles/mbtiles.php?&z={z}&x={x}&y={y}', {
    tms: true,
    opacity: 0.7
  }),
  oUpIcon = new L.Icon({
    iconUrl: '/custom/css/themes/app/markers/up.png',
    iconSize: [24, 26]
  }),
  oMapTypes = {
    'Yakabox': oMbTiles
  },
  aFirstMarkers = [],
  aFirstLines = [],
  aFirstLatLng,
  oFirstLine,
  oFirstGroup,
  oLayersControl,
  oOverlayMaps,
  oMap,
  i;

aFirstLatLng = [
  [18.319026, -66.420557],
  [18.180555, -66.749961],
  [18.361945, -67.175597],
  [18.455183, -67.119887],
  [18.158345, -66.932911],
  [18.295366, -67.125135],
  [18.402253, -66.711397],
  [18.420412, -66.671979],
  [18.445147, -66.559696],
  [17.991245, -67.153993],
  [18.083361, -67.153897],
  [18.064919, -66.716683],
  [18.412600, -66.863926],
  [18.190607, -66.832041],
  [18.076713, -66.947389],
  [18.295913, -66.515588],
  [18.263085, -66.712985],
  [18.433150, -66.285875],
  [17.963613, -66.947127],
  [18.349416, -66.578079],
  [18.448452, -66.594127],
  [17.985033, -66.886536],
  [18.053539, -66.792931],
  [18.407226, -66.808999],
  [18.134695, -67.116199],
  [18.468320, -67.015781],
  [18.210330, -66.591616],
  [18.003422, -67.035810],
  [18.277102, -66.869645],
  [18.240187, -66.988776],
  [18.422908, -66.489337],
  [18.377637, -67.079574],
  [18.332568, -67.227022],
  [18.434099, -66.927384],
  [18.182055, -67.132502],
  [18.221464, -67.156039],
  [18.107800, -67.037263],
  [18.332929, -66.959689]
];

for (i = 0; i < aFirstLatLng.length; i++) {
  aFirstMarkers.push(L.marker(aFirstLatLng[i]).setIcon(oUpIcon).bindPopup('lat/lng : ' + aFirstLatLng[i].join(', ')))

  if (i === (aFirstLatLng.length - 1)) {
    aFirstLines.push(L.polyline([aFirstLatLng[i], aFirstLatLng[0]], {color: 'red', weight: 3, opacity: 0}));
  } else {
    aFirstLines.push(L.polyline([aFirstLatLng[i], aFirstLatLng[i + 1]], {color: 'red', weight: 3, opacity: 0}));
  }
}

oFirstLine = L.polyline(aFirstLatLng, {
  weight: 5,
  color: 'red'
});
oFirstLine.on('click', function () {
  console.log('Clicked First line', arguments);
});

oFirstGroup = L.layerGroup(aFirstMarkers, {});

// This works
oFirstGroup.addLayer(oFirstLine);

// These next two lines do not work

// Here I'm trying to just add an array of polyline objects as a layer
//oFirstGroup.addLayer(aFirstLines);

// Here I'm trying to add the array of polyline objects as a layer group
//oFirstGroup.addLayer(L.layerGroup(aFirstLines));

oOverlayMaps = {
  'First Group': oFirstGroup,
};
oMap = new L.map('map', {
  minZoom: 4,
  maxZoom: 10,
  zoom: 9,
  center: aFirstLatLng[7],
  layers: [oMbTiles, oFirstGroup]
});

oLayersControl = new L.Control.Layers(oMapTypes, oOverlayMaps, {
  collapsed: false
}).addTo(oMap);

So here, I'm just trying to iterate through some zip codes, create markers for each location, and connect the markers using polylines. If I instantiate the polyline object using only the array of lat/lng, that works when I add that polyline to the markers layer group (oFirstGroup). But if I pass in an array of polyline objects (which were passed in the start/end lat/lng coordinates), that doesn't work. The lines do not show up on the map. This is because I get an error saying "The provided object is not a layer". Ok, so I try to explicitly create a layer group using that array of polyline objects and while the error goes away, the lines are still not added to the map.

So I'm curious, should that be working? Or is it the case that the only way to properly create a polyline connecting markers is by passing the lat/lng coordinates as an array when instantiating a single polyline object for adding to the layer? Why is it that I can pass in an array of marker objects (when instantiating oFirstGroup) and add that layer to the map but I can't do the same thing when passing in an array of polyline objects?

thnx,
Christoph

Upvotes: 1

Views: 2431

Answers (1)

Christoph
Christoph

Reputation: 968

Ok, I'm not ashamed to admit it -- I'm a moron. The problem was opacity: 0. I copied the code from elsewhere (to try to understand what was going on) and I didn't remove that. As soon as I did, voila!

I iz be dumm.

thnx,
Christoph

Upvotes: 5

Related Questions