The l.line3 from mcanthony

mcanthony / l.line3 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from kekscom/l.line3

A 3D vector line add on for Leaflet.

License: BSD 2-Clause "Simplified" License

Batchfile 0.01% Shell 0.02% JavaScript 95.36% HTML 1.04% CSS 3.57%

l.line3's Introduction

L.Line3 is Leaflet map layer for drawing 3D vector lines.

Example http://keks.com/dev/line3

Documentation

Integration with Leaflet

Link Leaflet and OSM Buildings files in your HTML head section.

<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="L.Line3.js"></script>
</head>

Initialize the map engine and add a map tile layer.

var map = new L.Map('map').setView([52.52020, 13.37570], 17);
new L.TileLayer('http://{s}.tiles.mapbox.com/v3/<YOUR KEY HERE>/{z}/{x}/{y}.png',
  { attribution: 'Map tiles &copy; <a href="http://mapbox.com">MapBox</a>', maxZoom: 17 }).addTo(map);

Add the Line3 layer.

new L.Line3(GeoJSON).addTo(map);

Supported GeoJSON geometry is LineString, property can hold color, coordinates must contain a 3rd member: altitude.

var geoJSON = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "LineString",
      "coordinates": [[
        [13.37356, 52.52064, 50],
        [13.37350, 52.51971, 40],
        [13.37664, 52.51973, 45],
        [13.37594, 52.52062, 10]
      ]]
    },
    "properties": {
      "color": "rgb(255,0,0)"
    }
  }]
};

Recommend Projects