<!DOCTYPE html>
<link rel="stylesheet" href="/leaflet.css" />

<style>
.NavigatorTitle {
    font-style: bold;
    font-size: small;
}
.exceeds_limit {
    border-style: solid;
    border-color: red;
}
.ok {
    border-style: solid;
    border-color: blue;
}
.NavigatorTitle {
    font-size: 12px;
}
.my-tabs li {display:inline}
.my-tabs li .active {font-style:italic}
</style>

<html>
    <head>
    </head>
    <body>
	BuzMap - Putting the buzz into travel
<div id="map" style="width: 100%; height: 800px"></div>
    </body>
</html>
<script type="text/javascript"  src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
var TRAM=0
var METRO=1
var TRAIN=2
var CABLETRAM=5
var CABLECAR=6
var FUNICULAR=7
var FERRY=4

var url="http://178.62.120.193:5000/t/{x}/{y}/{z}/0"
var url="/t/{x}/{y}/{z}/0"
var map = L.map('map').setView([50.505, 7.09], 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var VectorTileOptions = {
	rendererFactory: L.canvas.tile,
	attribution: '<a href="https://buzmap.com/">&copy; BuzMap</a>, <a href="http://www.openstreetmap.org/copyright">&copy; OpenStreetMap</a> contributors',
	interactive: true,
	getFeatureId:function(feat){
		return feat.properties.group
	},
	style:mainMapStyle,
	vectorTileLayerStyles:{
		geojsonLayer : mainMapStyle
	}
};

var RouteTileOptions = {
	rendererFactory: L.canvas.tile,
	attribution: '<a href="https://buzmap.com/">&copy; BuzMap</a>, <a href="http://www.openstreetmap.org/copyright">&copy; OpenStreetMap</a> contributors',
	interactive: true,
	getFeatureId:function(feat){
		return feat.properties.group
	},
	vectorTileLayerStyles:routeMapStyle
};

function mainMapStyle(feature,zoom){
	var style={
    		"color": "darkgreen",
    		"weight": 3,
	}
	switch (zoom){
		case 1:
		case 2:
		case 3:
		case 4:
		case 5:
		case 6:
		case 7:
			style.weight=1
			break
		case 8:
		case 9:
		case 10:
		case 11:
		case 12:
			style.weight=2
			break
		case 13:
		case 14:
		case 15:
			style.weight=3
			break
		case 16:
		case 17:
		case 18:
			style.weight=4
			break
	}
console.log("ZOOM="+zoom+" T="+feature.t)
	if (selected_feature && intersects(feature,selected_feature))
			style=style.extend(routeColours(feature))
	else
			style=style.extend(mainColours(feature))

}
function intesects(a,b){
	var found=false
	var i
	for (i=0;!found && i < a.routes.lengthl;i++)
		found= b.routes.indexOf(a.routes[i] > 0)
	return found
}

function mainColours(feature){
	var style={}
	switch (feature.t){
		case TRAM:
			style.color="darkblue"
			break
		case TRAIN:
			style.color="black"
			if (zoom>3)
			style.weight+=1
			break
		case FERRY:
			style.color="brown"
			style.weight+=2
			break
	}
	return style
}

function selectedMapStyle(feature,zoom){
	var style=mainMapStyle(feaure,zoom)
	style.weight+=2
}


function  selectedColours(feature){
	switch (feature.t){
		case TRAM:
			style.colur="yellow"
			break
		case TRAIN:
			style.colur="orange"
			break
		case FERRY:
			style.colur="black"
			break
		case BUS:
			style.colur="blue"
			break
	}
	return style
}

var popup = L.popup();
var route_block=[]
var TilesPbfLayer = L.vectorGrid.protobuf(url, VectorTileOptions).setZIndex(2).addTo(map);

var busy=false
TilesPbfLayer.bindPopup(popup)
TilesPbfLayer.on('mouseover', function(e) {
console.log("BEE IS HOVERING "+busy)
	if (e.layer && !busy){
		busy=true
		var url='/group/'+e.layer.properties.group
console.log("BEE IS FETCHING "+url+" ROUTES IS SET TO "+e.layer.properties.routes)
		$.ajax({
			type: 'GET', 
			url: url, 
			cache: 'true',
			contentType:'application/json',
			headers: {
				'Content-Type': 'application/json',
			},
			success: displayRoutes,
		}) 
	}
})
var routeLayer
geo='{ "type": "FeatureCollection", "features": [ { "properties":{"fill":"red","stroke-width":10},"type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [ -6.64197, 53.2305 ], [ -6.64206, 53.23053 ], [ -6.64211, 53.23054 ], [ -6.64218, 53.23053 ], [ -6.64225, 53.23051 ], [ -6.64232, 53.23045 ], [ -6.64233, 53.2304 ], [ -6.64231, 53.23036 ], [ -6.64226, 53.23031 ], [ -6.64218, 53.23028 ], [ -6.6421, 53.23028 ] ] } } ] }'

var myStyle = {
    "color": "red",
    "weight": 6,
    "stroke-width": 6,
};
//debug=L.geoJSON(JSON.parse(geo),myStyle).addTo(map)
//console.log("DEBUG="+debug)

function displayRoutes(routes){
	route_block=routes
	var i
	var stuff=""
	for (i=0;i<route_block.length;i++){
		var route=route_block[i]
		stuff+='<div class="route_marker" route_id='+route.route_id+' index='+i+'>'+route.name+'</div><br>'
	}
	popup.setContent(stuff)
	displayRoute(route_block[0].RouteId)
	busy=false
}

function displayRoute(RouteId){
return
 	if (RouteLayerPbfLayer)
		map.removeLayer(RouteLayerPbfLayer)
	var url="http://178.62.120.193:8080/t/{x}/{y}/{z}/"+RouteId

	var RoutePbfLayer = L.vectorGrid.protobuf(url, RouteTileOptions).seZIndex(1).addTo(map);
}
 </script>
