developer-anuragsingh · August 6, 2019 10:07
diff --git a/index.php b/index.php

 <?php 
    // Multi locations marker for Bing Map
    // Add js file in header along with bing map API key 
    // Ex - http://www.bing.com/api/maps/mapcontrol?key=XXXXXXXXXX'
    // Ref -https://bingmapsv8samples.azurewebsites.net/#Infobox_MultiplePushpins
    $all_venue_locations = array(
    	array(
    		'name'	=> 'India Gate',
    		'address' => 'Address Details, <br> India Gate',
    		'latitude' => 28.6129,
    		'longitude' => 77.2295,
    	), 
    	array(
    		'name'	=> 'Taj Mahal',
    		'address' => 'Address Details, <br> Agra',
    		'latitude' => 27.1750,
    		'longitude' => 78.0422,
    	), 
    	array(
    		'name'	=> 'Qutub Minar',
    		'address' => '',
    		'latitude' => 28.5245,
    		'longitude' => 77.1855,
    	)
    );

    function get_center_from_degrees($data) {
 	    if (!is_array($data)) return FALSE;

 	    $num_coords = count($data);

 	    $X = 0.0;
 	    $Y = 0.0;
 	    $Z = 0.0;

 	    foreach ($data as $coord)
 	    {
 	        $lat = $coord['latitude'] * pi() / 180;
 	        $lon = $coord['longitude'] * pi() / 180;

 	        $a = cos($lat) * cos($lon);
 	        $b = cos($lat) * sin($lon);
 	        $c = sin($lat);

 	        $X += $a;
 	        $Y += $b;
 	        $Z += $c;
 	    }

 	    $X /= $num_coords;
 	    $Y /= $num_coords;
 	    $Z /= $num_coords;

 	    $lon = atan2($Y, $X);
 	    $hyp = sqrt($X * $X + $Y * $Y);
 	    $lat = atan2($Z, $hyp);

 	    return array($lat * 180 / pi(), $lon * 180 / pi());
 	}

     ?>
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'>
    var map, infobox, tooltip;
    var tooltipTemplate = '<div style="background-color:white;height:20px;width:150px;padding:5px;text-align:center"><b>{title}</b></div>';

    function GetMap() {
        var allLocations = <?php echo json_encode($all_venue_locations); ?>;
        var center = <?php echo json_encode(get_center_from_degrees($all_venue_locations));?>

        map = new Microsoft.Maps.Map('#myMap', {});


        map.setView({
            mapTypeId: Microsoft.Maps.MapTypeId.grayscale, // https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/maptypeid-enumeration
            center: new Microsoft.Maps.Location(center[0], center[1]),
            zoom: 8
        });

        //Create an infobox to use as a tooltip when hovering.
        tooltip = new Microsoft.Maps.Infobox(map.getCenter(), {
            visible: false,
            showPointer: false,
            showCloseButton: false,
            offset: new Microsoft.Maps.Point(-75, 10)
        });

        tooltip.setMap(map);
        
        //Create an infobox for displaying detailed information.
        infobox = new Microsoft.Maps.Infobox(
        	map.getCenter(), 
        	{
 	            visible: false
 	        }
        );

        infobox.setMap(map);
                
        //Create random locations in the map bounds.
        // var allLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds());
        
        for (var i = 0; i < allLocations.length; i++) {
            var pin = new Microsoft.Maps.Pushpin(allLocations[i]);

            //Store some metadata with the pushpin.
            pin.metadata = {
                title: allLocations[i]['name'],
                description: allLocations[i]['address'],
            };

            //Add a mouse events to the pushpin.
            Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
            Microsoft.Maps.Events.addHandler(pin, 'mouseover', pushpinHovered);
            Microsoft.Maps.Events.addHandler(pin, 'mouseout', closeTooltip);

            //Add pushpin to the map.
            map.entities.push(pin);
        }
    }

    function pushpinClicked(e) {
        //Hide the tooltip
        closeTooltip();

        //Make sure the infobox has metadata to display.
        if (e.target.metadata) {
            //Set the infobox options with the metadata of the pushpin.
            infobox.setOptions({
                location: e.target.getLocation(),
                title: e.target.metadata.title,
                description: e.target.metadata.description,
                visible: true
            });
        }
    }

    function pushpinHovered(e) {
        //Hide the infobox
        infobox.setOptions({ visible: false });

        //Make sure the infobox has metadata to display.
        if (e.target.metadata) {
            //Set the infobox options with the metadata of the pushpin.
            tooltip.setOptions({
                location: e.target.getLocation(),
                htmlContent: tooltipTemplate.replace('{title}', e.target.metadata.title),
                visible: true
            });
        }
    }

    function closeTooltip() {
        //Close the tooltip and clear its content.
        tooltip.setOptions({
            visible: false
        });
    }

    /**
     * Calculate the center/average of multiple GeoLocation coordinates
     * Expects an array of objects with .latitude and .longitude properties
     *
     * @url http://stackoverflow.com/a/14231286/538646
     * @ref- https://gist.github.com/tlhunter/0ea604b77775b3e7d7d25ea0f70a23eb
     */

    function averageGeolocation(coords) {
      if (coords.length === 1) {
        return coords[0];
      }

      let x = 0.0;
      let y = 0.0;
      let z = 0.0;

        for(var key in coords) {
            let value = coords[key];
            let latitude = value.latitude * Math.PI / 180;
            let longitude = value.longitude * Math.PI / 180;

            x += Math.cos(latitude) * Math.cos(longitude);
            y += Math.cos(latitude) * Math.sin(longitude);
            z += Math.sin(latitude);
        }

      let total = coords.length;

      x = x / total;
      y = y / total;
      z = z / total;

      let centralLongitude = Math.atan2(y, x);
      let centralSquareRoot = Math.sqrt(x * x + y * y);
      let centralLatitude = Math.atan2(z, centralSquareRoot);

      return {
        latitude: centralLatitude * 180 / Math.PI,
        longitude: centralLongitude * 180 / Math.PI
      };
    }

    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=AhGkwWZx5X0x61zxNkkCZpAY6Jv12Gab5oGZLifLdQMSVcWdm5aBm6RHJHm2FRQG' async defer></script>
 </head>
 <body>
    <div id="myMap" style="position:relative;width:800px;height:600px;"></div>

    <!-- ref- https://bingmapsv8samples.azurewebsites.net/#Infobox_MultiplePushpins -->

    
 </body>
 </html>

	<?php
	// Multi locations marker for Bing Map
	// Add js file in header along with bing map API key
	// Ex - http://www.bing.com/api/maps/mapcontrol?key=XXXXXXXXXX'
	// Ref -https://bingmapsv8samples.azurewebsites.net/#Infobox_MultiplePushpins
	$all_venue_locations = array(
	array(
	'name' => 'India Gate',
	'address' => 'Address Details, <br> India Gate',
	'latitude' => 28.6129,
	'longitude' => 77.2295,
	),
	array(
	'name' => 'Taj Mahal',
	'address' => 'Address Details, <br> Agra',
	'latitude' => 27.1750,
	'longitude' => 78.0422,
	),
	array(
	'name' => 'Qutub Minar',
	'address' => '',
	'latitude' => 28.5245,
	'longitude' => 77.1855,
	)
	);

	function get_center_from_degrees($data) {
	if (!is_array($data)) return FALSE;

	$num_coords = count($data);

	$X = 0.0;
	$Y = 0.0;
	$Z = 0.0;

	foreach ($data as $coord)
	{
	$lat = $coord['latitude'] * pi() / 180;
	$lon = $coord['longitude'] * pi() / 180;

	$a = cos($lat) * cos($lon);
	$b = cos($lat) * sin($lon);
	$c = sin($lat);

	$X += $a;
	$Y += $b;
	$Z += $c;
	}

	$X /= $num_coords;
	$Y /= $num_coords;
	$Z /= $num_coords;

	$lon = atan2($Y, $X);
	$hyp = sqrt($X * $X + $Y * $Y);
	$lat = atan2($Z, $hyp);

	return array($lat * 180 / pi(), $lon * 180 / pi());
	}

	?>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8" />
	<script type='text/javascript'>
	var map, infobox, tooltip;
	var tooltipTemplate = '<div style="background-color:white;height:20px;width:150px;padding:5px;text-align:center"><b>{title}</b></div>';

	function GetMap() {
	var allLocations = <?php echo json_encode($all_venue_locations); ?>;
	var center = <?php echo json_encode(get_center_from_degrees($all_venue_locations));?>

	map = new Microsoft.Maps.Map('#myMap', {});


	map.setView({
	mapTypeId: Microsoft.Maps.MapTypeId.grayscale, // https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/maptypeid-enumeration
	center: new Microsoft.Maps.Location(center[0], center[1]),
	zoom: 8
	});

	//Create an infobox to use as a tooltip when hovering.
	tooltip = new Microsoft.Maps.Infobox(map.getCenter(), {
	visible: false,
	showPointer: false,
	showCloseButton: false,
	offset: new Microsoft.Maps.Point(-75, 10)
	});

	tooltip.setMap(map);

	//Create an infobox for displaying detailed information.
	infobox = new Microsoft.Maps.Infobox(
	map.getCenter(),
	{
	visible: false
	}
	);

	infobox.setMap(map);

	//Create random locations in the map bounds.
	// var allLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds());

	for (var i = 0; i < allLocations.length; i++) {
	var pin = new Microsoft.Maps.Pushpin(allLocations[i]);

	//Store some metadata with the pushpin.
	pin.metadata = {
	title: allLocations[i]['name'],
	description: allLocations[i]['address'],
	};

	//Add a mouse events to the pushpin.
	Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
	Microsoft.Maps.Events.addHandler(pin, 'mouseover', pushpinHovered);
	Microsoft.Maps.Events.addHandler(pin, 'mouseout', closeTooltip);

	//Add pushpin to the map.
	map.entities.push(pin);
	}
	}

	function pushpinClicked(e) {
	//Hide the tooltip
	closeTooltip();

	//Make sure the infobox has metadata to display.
	if (e.target.metadata) {
	//Set the infobox options with the metadata of the pushpin.
	infobox.setOptions({
	location: e.target.getLocation(),
	title: e.target.metadata.title,
	description: e.target.metadata.description,
	visible: true
	});
	}
	}

	function pushpinHovered(e) {
	//Hide the infobox
	infobox.setOptions({ visible: false });

	//Make sure the infobox has metadata to display.
	if (e.target.metadata) {
	//Set the infobox options with the metadata of the pushpin.
	tooltip.setOptions({
	location: e.target.getLocation(),
	htmlContent: tooltipTemplate.replace('{title}', e.target.metadata.title),
	visible: true
	});
	}
	}

	function closeTooltip() {
	//Close the tooltip and clear its content.
	tooltip.setOptions({
	visible: false
	});
	}

	/**
	* Calculate the center/average of multiple GeoLocation coordinates
	* Expects an array of objects with .latitude and .longitude properties
	*
	* @url http://stackoverflow.com/a/14231286/538646
	* @ref- https://gist.github.com/tlhunter/0ea604b77775b3e7d7d25ea0f70a23eb
	*/

	function averageGeolocation(coords) {
	if (coords.length === 1) {
	return coords[0];
	}

	let x = 0.0;
	let y = 0.0;
	let z = 0.0;

	for(var key in coords) {
	let value = coords[key];
	let latitude = value.latitude * Math.PI / 180;
	let longitude = value.longitude * Math.PI / 180;

	x += Math.cos(latitude) * Math.cos(longitude);
	y += Math.cos(latitude) * Math.sin(longitude);
	z += Math.sin(latitude);
	}

	let total = coords.length;

	x = x / total;
	y = y / total;
	z = z / total;

	let centralLongitude = Math.atan2(y, x);
	let centralSquareRoot = Math.sqrt(x * x + y * y);
	let centralLatitude = Math.atan2(z, centralSquareRoot);

	return {
	latitude: centralLatitude * 180 / Math.PI,
	longitude: centralLongitude * 180 / Math.PI
	};
	}

	</script>
	<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=AhGkwWZx5X0x61zxNkkCZpAY6Jv12Gab5oGZLifLdQMSVcWdm5aBm6RHJHm2FRQG' async defer></script>
	</head>
	<body>
	<div id="myMap" style="position:relative;width:800px;height:600px;"></div>

	<!-- ref- https://bingmapsv8samples.azurewebsites.net/#Infobox_MultiplePushpins -->


	</body>
	</html>