<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"  data-require="leaflet@0.7.3" data-semver="0.7.3" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" data-require="leaflet@0.7.3" data-semver="0.7.3"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>
var map = L.map('map', {
  'center': [54.435, 18.505],
  'zoom': 0,
  'layers': [
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data &copy; OpenStreetMap contributors'
    })
  ]
});

var rower = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "colour": "blue"
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-45, -45],
        [-45,45]
      ]
    }
  },{
    "type": "Feature",
    "properties": {
      "colour": "red"
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [45, -45],
        [45,45]
      ]
    }
  },{
    "type": "Feature",
    "properties": {
      "colour": "yellow"
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [0, -45],
        [0,45]
      ]
    }
  }]
};

		function highlight (layer) {
			layer.setStyle({
				weight: 5,
				dashArray: ''
			});
			if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}
		}

		function dehighlight (layer) {
		  if (selected === null || selected._leaflet_id !== layer._leaflet_id) {
			  geojson.resetStyle(layer);
		  }
		}

		function select (layer) {
		  if (selected !== null) {
		    var previous = selected;
		  }
			map.fitBounds(layer.getBounds());
			selected = layer;
			if (previous) {
			  dehighlight(previous);
			}
		}

		var selected = null;

		var geojson = L.geoJson(rower, {
			style: function (feature) {
  			return {
  				weight: 2,
  				opacity: 1,
  				color: feature.properties.colour,
  				dashArray: 3,
  			};
  		},
			onEachFeature: function (feature, layer) {
		    layer.on({
  		    'mouseover': function (e) {
  		      highlight(e.target);
  		    },
  		    'mouseout': function (e) {
  		      dehighlight(e.target);
  		    },
  				'click': function (e) {
  				  select(e.target);
  				}
  			});
  		}
		}).addTo(map);

body {
  margin: 0;
}
html, body, #map {
  height: 100%;
}