Untitled

<!DOCTYPE html>
<html>
<head>

    <title>Mobile - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <link rel="stylesheet" href="css/leaflet.extra-markers.min.css">
    <link rel="stylesheet" href="css/MarkerCluster.css">
    <link rel="stylesheet" href="css/MarkerCluster.Default.css">

    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="js/leaflet.extra-markers.min.js"></script>
    <script src="js/leaflet.markercluster-src.js"></script>

    <script type="text/javascript">
	function log(str)
	{
		$('#result').text($('#result').text() + "-" + str);
	}

	function Invoke(data) {
		try {
		    log("Sending Data:" + data);
		    //invokeCSharpAction(data);
		    Native("dataCallback", data);
		}
		catch (err){
		  	log(err);
		}
	}

	function click(item) {
	    console.log(item, $(item));

	    groupClick($(item).attr("data-id"));
	}
    // The method which is called in the FAtaskpage.xaml.cs file to inject the markers in this this HTML javascript file
	function AddClusterGroup(data)
	{
        //Creates a list which will be filled with markers
		var markers = L.markerClusterGroup();

        // Loopt through the JSon like list to retrieve the data from each object in the list.
		for (var i in data) {
		    var item = data[i];
		    var title = item[2];
		    var description = item[4];
            // Creates a marker for every object with the retrieved long and lat coords
		    var marker = L.marker(new L.LatLng(item[0], item[1]), { title: title });
		    // Sets the popup content variable
		    var popupcontent = '<p><b>' + item[2] + '</b> <br />' + item[4] + '</p>';
		    // Sets the variable inside the popup which will be displayed when a marker is clicked. Inside the popup is the title and a description. With an onclick event
		    marker.bindPopup($(popupcontent).click(function (item) {
		        // Creates a list and adds the clicked task ID to the list
		        var ids = [];
		        ids.push(item[3]);
                //Creates a callback to the fataskpage.xaml.cs called "navigate" with the ID's list with the clicked ID in it.
		        Native("navigate", ids);

		    }.bind(null, item))[0]);
            // Adds the marker to the markers list
		    markers.addLayer(marker);

		}
        /*
		for (var i = 0; i < data.length; i++)
		{
			var a = data[i];
			var title = a[2];
			var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title }).addEventListener("click", function(a) {
			    groupClick(a[3]);
			}.bind(null, a), false);
			marker.bindPopup(title);
			markers.addLayer(marker);

		}*/
        // Adds the markers list to the map
		map.addLayer(markers);

	}
	function groupClick(id) {

	    var ids = [];
	    ids.push(id);
	    native("navigate", ids);
	}
    </script>


    <style>
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    <style>
        body {
            padding: 0;
            margin: 0;
        }

        html, body, #map {
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>
<body>
    <div id='result'></div>
    <div class="custom-popup" id='map' style="width:100%;height:100%;"></div>
    <button onclick="Invoke('Javascript')" title="click"></button>
    <script>
	var map = L.map('map' , { preferCanvas: true }).fitWorld();
	/*
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
		maxZoom: 18,
		attribution: '',
		id: 'mapbox.streets'
	}).addTo(map);
	*/
    L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
	    attribution: '',
       maxZoom: 20
    }).addTo(map);

	function onLocationFound(e)
	{
		var radius = e.accuracy / 2;

		L.marker(e.latlng).addTo(map)
			.bindPopup("You are within " + radius + " meters from this point").openPopup();

		L.circle(e.latlng, radius).addTo(map);
		//invokeCSCode('JOHAN C#');
	}

	function onLocationError(e)
	{
		alert(e.message);
	}

	//map.on('locationfound', onLocationFound);
	//map.on('locationerror', onLocationError);

	// map.locate({setView: true, maxZoom: 16});
	map.setView([52.528253, 4.839478], 4);
    </script>


</body>
</html>