przemas75/osm.html

## osm.html
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
   <head profile="http://gmpg.org/xfn/11">
    <style type="text/css">
      <!--
      .Flexible-container {
        position: relative;
        padding-bottom: 0px;
        padding-top   : 0px;
        height        : 345px ;
        overflow: hidden;
      }

      .Flexible-container iframe,
      .Flexible-container object,
      .Flexible-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
     -->
     </style>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
      <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
   integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
   crossorigin=""></script>
   </head>

   <body>

    <div id="mapid" style="height: 440px; border: 1px solid #AAA;"></div>
    <script>
      var lat = XX.4672296;
      var lon = YY.4847917;
      var latlngHome   = [XX.4672296, YY.4847917];

      // initialize map
      var map = new L.map('mapid').setView([lat, lon], 13);
      var featgroup = new L.featureGroup();
      // set map tiles source
      var layer = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
        minZoom: 8,
        maxZoom: 15,
      });
      map.addLayer(layer);

      var rodzina = [ 'magda', 'helena', 'przemas' ];
      rodzina.forEach(function(item, index, array){
        console.log(item, index);
        var ikona = L.icon({
          iconUrl: 'http://172.16.8.9:8080/static/' + item + '.png',
          iconSize: [32, 32],
          iconAnchor: [4, 4],
          popupAnchor: [0, 0]
        });
        var capitem = item.charAt(0).toUpperCase() + item.slice(1);

        var url_battery  = 'http://172.16.8.9:8080/rest/items/' + capitem + 'Battery/state';
        var url_locacc   = 'http://172.16.8.9:8080/rest/items/' + capitem + 'LocAcc/state';
        var url_lastupd  = 'http://172.16.8.9:8080/rest/items/' + capitem + 'LastUpdated/state';
        var url_location = 'http://172.16.8.9:8080/rest/items/location' + capitem + '/state';

        $.when(
          $.ajax(url_battery),
          $.ajax(url_locacc),
          $.ajax(url_lastupd),
          $.ajax(url_location)
        ).done(function(battery, locacc, lastupd, location) {
              var coords = location[0].split(',');
              var latlng = [coords[0],coords[1]];
              marker= L.marker([latlng[0],latlng[1]], {icon: ikona} ).addTo(map).bindPopup("<b>" + capitem + "</b><br>Dokładność: " + locacc[0] + "<br>Bateria: " + battery[0] + "<br>" + lastupd[0]);
              featgroup.addLayer(marker);
              map.fitBounds(featgroup.getBounds()), {padding: L.point(20, 20)};
        });

      });

    </script>

   </body>
</html>
	<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
	<head profile="http://gmpg.org/xfn/11">
	<style type="text/css">
	<!--
	.Flexible-container {
	position: relative;
	padding-bottom: 0px;
	padding-top : 0px;
	height : 345px ;
	overflow: hidden;
	}

	.Flexible-container iframe,
	.Flexible-container object,
	.Flexible-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	-->
	</style>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
	integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
	crossorigin=""/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
	integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
	crossorigin=""></script>
	</head>

	<body>

	<div id="mapid" style="height: 440px; border: 1px solid #AAA;"></div>
	<script>
	var lat = XX.4672296;
	var lon = YY.4847917;
	var latlngHome = [XX.4672296, YY.4847917];

	// initialize map
	var map = new L.map('mapid').setView([lat, lon], 13);
	var featgroup = new L.featureGroup();
	// set map tiles source
	var layer = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
	minZoom: 8,
	maxZoom: 15,
	});
	map.addLayer(layer);

	var rodzina = [ 'magda', 'helena', 'przemas' ];
	rodzina.forEach(function(item, index, array){
	console.log(item, index);
	var ikona = L.icon({
	iconUrl: 'http://172.16.8.9:8080/static/' + item + '.png',
	iconSize: [32, 32],
	iconAnchor: [4, 4],
	popupAnchor: [0, 0]
	});
	var capitem = item.charAt(0).toUpperCase() + item.slice(1);

	var url_battery = 'http://172.16.8.9:8080/rest/items/' + capitem + 'Battery/state';
	var url_locacc = 'http://172.16.8.9:8080/rest/items/' + capitem + 'LocAcc/state';
	var url_lastupd = 'http://172.16.8.9:8080/rest/items/' + capitem + 'LastUpdated/state';
	var url_location = 'http://172.16.8.9:8080/rest/items/location' + capitem + '/state';

	$.when(
	$.ajax(url_battery),
	$.ajax(url_locacc),
	$.ajax(url_lastupd),
	$.ajax(url_location)
	).done(function(battery, locacc, lastupd, location) {
	var coords = location[0].split(',');
	var latlng = [coords[0],coords[1]];
	marker= L.marker([latlng[0],latlng[1]], {icon: ikona} ).addTo(map).bindPopup("<b>" + capitem + "</b><br>Dokładność: " + locacc[0] + "<br>Bateria: " + battery[0] + "<br>" + lastupd[0]);
	featgroup.addLayer(marker);
	map.fitBounds(featgroup.getBounds()), {padding: L.point(20, 20)};
	});

	});

	</script>

	</body>
	</html>