Hello friends I have a question:
I see this thread on github:
https://github.com/openhab/openhab1-addons/wiki/GoogleMap
So i create exactly the same the example:
Items:
Location locationPatrik
String mqttPositionPatrikRaw "Patrik Raw Data" { mqtt="<[home:owntracks/Lex/LexLuther:state:default]" }
String mqttPatrikLatitude "Patrik's Lat"
String mqttPatrikLongitude "Patrik's Lon"
String mqttPatrikAccuracy "Patrik's Accuracy"
String mqttHtcOneBattery "Patrik's HTC One Battery [%s%%]" <battery> (Phone, MQTT, Battery)
.rule:
import org.openhab.core.library.types.*
rule "MqttPostionParsePatrik"
when
Item mqttPositionPatrikRaw changed
then
val String json = (mqttPositionPatrikRaw.state as StringType).toString
// {"_type": "location", "lat": "47.5010314", "lon": "8.3444293",
// "tst": "1422616466", "acc": "21.05", "batt": "40"}
val String type = transform("JSONPATH", "$._type", json)
if (type == "location") {
val String lat = transform("JSONPATH", "$.lat", json)
val String lon = transform("JSONPATH", "$.lon", json)
val String acc = transform("JSONPATH", "$.acc", json)
val String batt = transform("JSONPATH", "$.batt", json)
mqttPatrikLatitude.postUpdate(lat)
mqttPatrikLongitude.postUpdate(lon)
locationPatrik.postUpdate(new PointType(lat + "," + lon))
mqttPatikAccuracy.postUpdate(new DecimalType(acc))
mqttHtcOneBattery.postUpdate(new PercentType(batt))
}
end
.html:
<!DOCTYPE html>
<html>
<head>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,drawing,geometry"></script>
<script type="text/javascript">
////////////////////////////////////////////////////////////////////////
// Google Maps JavaScript API:
// https://developers.google.com/maps/documentation/javascript/?hl=de
// Marker Icons:
// https://sites.google.com/site/gmapsdevelopment/
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
// JQuery
////////////////////////////////////////////////////////////////////////
var map = null;
//make an empty bounds variable
var bounds = new google.maps.LatLngBounds();
// LatLng's we want to show
var latlngHome = new google.maps.LatLng("47.501006", "8.344842");
var latlngPatrik = new google.maps.LatLng("47.501006", "8.344842"); // initialize to home ...
var latlngKarin = new google.maps.LatLng("47.501006", "8.344842"); // initialize to home ...
var map_options = { center : latlngHome,
zoom : 10,
mapTypeId : google.maps.MapTypeId.ROADMAP };
$( "#map_canvas" ).ready($(function() {
var map_canvas = document.getElementById('map_canvas');
map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position : latlngHome,
map : map,
icon : 'http://maps.google.com/mapfiles/kml/pal2/icon10.png',
title : "Ehrendingen"
})
var circle = new google.maps.Circle({
center : latlngHome,
radius : 1500,
map : map,
strokeColor : '#050505',
strokeOpacity : 0.5,
strokeWeight : 2,
fillColor : '#000000',
fillOpacity : 0,
}); // end of [Circle]
bounds.extend(latlngHome);
}))
$( document ).ready($(function() {
// ******************************************************************************
$.ajax({
url : "../rest/items/locationPatrik/state/",
data : {},
success : function( data ) {
if ( map == null) { return; }
if ( data == "Uninitialized") { return; }
var coords = data.split(',');
var latlngPatrik = new google.maps.LatLng(coords[0],coords[1]);
var marker = new google.maps.Marker({
position : latlngPatrik,
map : map,
icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title : "Patrik"
}) // end of [Marker]
$.ajax({
url : "../rest/items/mqttPatikAccuracy/state/",
data : {},
success : function( data ) {
if ( data == "Uninitialized") { return; }
var accuracy = parseInt(data);
var circle = new google.maps.Circle({
center : latlngPatrik,
radius : accuracy,
map : map,
strokeColor : '#00FF00',
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : '#00FF00',
fillOpacity : 0.35,
}); // end of [Circle]
bounds.extend(latlngPatrik);
map.fitBounds(bounds);
} // end of [function]
}) // end of [$.ajax]
} // end of [function]
}) // end of [$.ajax]
// ******************************************************************************
$.ajax({
url : "../rest/items/locationKarin/state/",
data : {},
success : function( data ) {
if ( map == null) { return; }
if ( data == "Uninitialized") { return; }
var coords = data.split(',');
var latlngKarin = new google.maps.LatLng(coords[0],coords[1]);
var marker = new google.maps.Marker({
position : latlngKarin,
map : map,
icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
title : "Karin"
}) // end of [Marker]
$.ajax({
url : "../rest/items/mqttKarinAccuracy/state/",
data : {},
success : function( data ) {
if ( data == "Uninitialized") { return; }
var accuracy = parseInt(data);
var circle = new google.maps.Circle({
center : latlngKarin,
radius : accuracy,
map : map,
strokeColor : '#00FF00',
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : '#00FF00',
fillOpacity : 0.35,
}); // end of [Circle]
bounds.extend(latlngKarin);
map.fitBounds(bounds);
} // end of [function]
}) // end of [$.ajax]
} // end of [function]
}) // end of [$.ajax]
// ******************************************************************************
}))
</script>
</head>
<body>
<div id="map_canvas" class="Flexible-container" />
</body>
</html>
the only change is the coordinate in html - i amended to adapt to my current location:
] // LatLng's we want to show
var latlngHome = new google.maps.LatLng("47.501006", "8.344842");
var latlngPatrik = new google.maps.LatLng("47.501006", "8.344842"); // initialize to home ...
var latlngKarin = new google.maps.LatLng("47.501006", "8.344842"); // initialize to home ...
I successfully made it displayed on my OH2 classic UI.
But Iâve an little obstacle and I hope you guys can help me
I installed owntracks for my android phone:
I donât know how to config this app so that it can connect to my OH2 host (on raspberry pi 3) and send my phoneâs location to the .html file. Please show me how?
If it doesnât work with OH2, can you suggest me other ways to display my phoneâs location on google map?