Representando linhas de ônibus no Leaflet

Hoje vamos falar sobre o plugin Polylines Offset que adiciona a habilidade de você desenhar uma linha com um offset (deslocamento) de pixel relativo, sem modificar seus LatLongs reais. O valor do desse offset (deslocamento) pode ser negativo ou positivo, para o deslocamento do lado esquerdo ou do lado direito, e permanece constante nos níveis de zoom.

A ideia do plugin é desenhar uma linha paralela a uma existente, a uma distância fixa. Não é uma simples tradução (x, y) de toda a forma, pois não deve se sobrepor. Ele pode ser usado para enfatizar visualmente diferentes propriedades do mesmo recurso linear ou obter um estilo composto complexo.

1. Instalando o plugin

Caso você esteja utilizando o Node.js você pode instalar o plugin da seguinte forma:

npm install leaflet-polylineoffset

Caso não esteja utilizando o Node.js, pode referenciar diretamente a URL no seu HTML apontando para o GitHub:

<script src="http://bbecquet.github.io/Leaflet.PolylineOffset/leaflet.polylineoffset.js"></script>

2. Dados

Para representar as linhas de ônibus, iremos utilizar um arquivo no formato GeoJSON, conforme demonstrado abaixo:

          "features": [
            {
              "type": "Feature",
              "properties": {
          "features": [
            {
              "type": "Feature",
              "properties": {
                "lines": [0, 1]
              },
              "geometry": {
                "type": "LineString",
                "coordinates": [
                  [
                    2.357919216156006,
                    48.87621773324153
                  ],
                  [
                    2.357339859008789,
                    48.874834693731664
                  ],
                  [
                    2.362983226776123,
                    48.86855408432749
                  ],
                  [
                    2.362382411956787,
                    48.86796126699168
                  ],
                  [
                    2.3633265495300293,
                    48.86735432768131
                  ]
                ]
              }
            }

É importante ressaltar a propriedade lines, indica a quais linhas de ônibus o trecho (Feature) representa, podendo representar uma ou mais linhas de ônibus. Ou seja, nesse GeoJSON temos as informações geográficas de todas as nossas linhas de ônibus, que no nosso caso são 4.

3. Adicionando os pontos de parada

Como em toda rede de ônibus, precisamos ter alguns pontos de parada, para o nosso mapa iremos defini-los dinamicamente, como demonstra o código abaixo:

        // Adicionando os pontos de parada
        var ends = [];
        function addStop(ll) {
          for(var i=0, found=false; i<ends.length && !found; i++) {
            found = (ends[i].lat == ll.lat && ends[i].lng == ll.lng);			
          }
          if(!found) {
            ends.push(ll);
          }
        }

4. Gerando os segmentos das linhas de ônibus

Agora que nossos pontos de parada já estão criados, nós vamos pegar os dados vindos do GeoJSON e organizar as linhas por segmentos, definindo suas propriedades e também criar o offset que visualmente não deixa de ser um buffer ao redor das linhas. Para isso, faremos da seguinte maneira:

        // Gera os segmentos de linha
		var lineSegment, linesOnSegment, segmentCoords, segmentWidth;
        geoJson.features.forEach(function(lineSegment) {
          segmentCoords = L.GeoJSON.coordsToLatLngs(lineSegment.geometry.coordinates, 0);

          linesOnSegment = lineSegment.properties.lines;
          segmentWidth = linesOnSegment.length * (lineWeight + 1);
		  
          
		  // Gera o linha ao redor do buffer
		  L.polyline(segmentCoords, {
            color: '#000',
            weight: segmentWidth + 5,
            opacity: 1
          }).addTo(outlines);

         
		 // Gera Buffer ao redor das linhas
		 L.polyline(segmentCoords, {
            color: '#fff',
            weight: segmentWidth + 3,
            opacity: 1
          }).addTo(lineBg);

          // Organiza as linhas por segmento, definindo cor, largura, opacidade e offset
		  for(var j=0;j<linesOnSegment.length;j++) {
            alert(lineColors[linesOnSegment[j]]);
			L.polyline(segmentCoords, {
              color: lineColors[linesOnSegment[j]],
              weight: lineWeight,
              opacity: 1,
              offset: j * (lineWeight + 1) - (segmentWidth / 2) + ((lineWeight + 1) / 2)
            }).addTo(busLines);
          }

          addStop(segmentCoords[0]);
          addStop(segmentCoords[segmentCoords.length - 1]);
        });

Por último, vamos adicionar os pontos de ônibus e as camadas ao mapa:

// Adicionando os pontos de ônibus
        ends.forEach(function(endCoords) {
          L.circleMarker(endCoords, {
            color: '#000',
            fillColor: '#ccc',
            fillOpacity: 1,
            radius: 10,
            weight: 4,
            opacity: 1
          }).addTo(busStops);
        });

	// Adiciona as linhas ao mapa
        outlines.addTo(map);
        lineBg.addTo(map);
        busLines.addTo(map);
        busStops.addTo(map);

5. Resultado

Após executar os passos acima, o resultado obtido deve ser o seguinte:

6. O Código

Para baixar o código completo, clique aqui.