Skip to content

Instantly share code, notes, and snippets.

@przemas75
Last active Nov 27, 2018
Embed
What would you like to do?
openhab webview openstreetmap osm
<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>
@przemas75
Copy link
Author

przemas75 commented Oct 24, 2018

Just put it in 'html' directory in openhab configuration dir (mine is located in /etc/openhab2/html).
Sitemap is standard:
Frame { Webview url="http://172.16.8.9:8080/static/owc_osm.html" height=10 }

@przemas75
Copy link
Author

przemas75 commented Oct 24, 2018

Watch out if you want to use FQDN, your android phone might not be able to resolve your local domain name.

@pabloNZ
Copy link

pabloNZ commented Oct 30, 2018

Thanks for putting this together. What are your family item names? I don't quite understand the slice commands.

@syrisara
Copy link

syrisara commented Nov 27, 2018

Map not showing up over ohcloud on Android phone when on phone 4g. How to resolve this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment