Issue with Google Maps Geomarker and evothings-app.css

Ask, and ye shall receive.
pmasingh
Posts: 6
Joined: 22:48, 01 Apr 2015

Issue with Google Maps Geomarker and evothings-app.css

Postby pmasingh » 07:06, 09 Dec 2015

First of all, thank you for an excellent workbench for my TI project.

I'm trying to plot the TI sensor data in an information window with GeoMarker and google maps. When I remove "@import 'ui/css/evothings-app.css';" from my code the map and the marker display correctly. However I do like your styles and fonts and when I use evothings-app.css then there is a grey box around the marker and it obscures the map at the point of interest. The complete test code is below - comment out the css line to view the effect. Appreciate your thoughts.

Cheers!
Peter

Code: Select all

<!DOCTYPE html>
<!--
   MicroClimateLabs use of TI SensorTag JavaScript library.
   Kudos to Evothings for the TI and BLE JavaScript Library
   Custom code: (C)2015 &micro;ClimateLabs
-->
<html>

<head>
   <meta charset="utf-8" />
   <meta name="format-detection" content="telephone=no" />
   <meta name="viewport" content="width=device-width, user-scalable=no
      initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

   <title>&micro;ClimateLabs Environment Sensors</title>

   <style>
        @import 'ui/css/evothings-app.css';
      p.serif {
         font-family: "Times New Roman", Times, serif;
      }
      p.sansserif {
         font-family: Arial, Helvetica, sans-serif;
      }
      h1.sansserif {
         font-family: Arial, Helvetica, sans-serif;
      }
      h2.sansserif {
                font-family: Arial, Helvetica, sans-serif;
      }
   </style>

    <h1 class="sansserif">
    <h2 class="sansserif">
   <p class="sansserif">


</head>
 
<body>

   <h2>&micro;ClimateLabs sensors for Personal Environment Monitoring (PEM)</h2>

    <hr>
    <p id="plotMap"></p>
    <p><button class="w3-btn w3-blue" onclick="getLocation()">Locate Me </button></p>

    <div id="mapholder"></div>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
   <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/geolocationmarker/src/geolocationmarker-compiled.js"></script>
    <script>
      // SensorTag object.
      var sensortag
//      var x = document.getElementById("LatLon");
      var d = new Date() ;
      var n = d.getTime();
      var dstr = d.toString();
      var lat // latitude
      var ltd // latitude
      var lgt // longitude
      var speed // speed
      var altitude //
      var heading
      var localtimestamp;//
      var markerTitle;

      /**
          Geolocation services
**/
        var x=document.getElementById("plotMap");
        function getLocation()
        {
            if (navigator.geolocation)
            {
                navigator.geolocation.getCurrentPosition(showPosition,showError);
            }
            else{x.innerHTML="Geolocation is not supported by this browser.";}
        }

        function showPosition(position)
        {
            ltd=position.coords.latitude;
            lgt=position.coords.longitude;
//         lat=position.coords.latitude;
            latlon=new google.maps.LatLng(ltd, lgt)
            myMapholder=document.getElementById('mapholder')
            myMapholder.style.height= '380px';
            myMapholder.style.width='100%';

            var mapOptions = {
                zoom: 17,
                center: latlon,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('mapholder'),
                    mapOptions);
            var GeoMarker = new GeolocationMarker(map);

            var infoWindow = new google.maps.InfoWindow({map: map});
             infoWindow.setPosition(latlon);
             infoWindow.setContent("markerTitle");
             map.setCenter(latlon);
        }

        function showError(error)
        {
            switch(error.code)
            {
                case error.PERMISSION_DENIED:
                    x.innerHTML="User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML="Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    x.innerHTML="The request to get user location timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML="An unknown error occurred."
                    break;
            }
        }
    </script>
    <hr>
   <h2>Device info:</h2>
   <p>
      SensorTag device model: <span id="DeviceModel">?</span><br />
      Firmware version: <span id="FirmwareData">?</span>
   </p>

</body>

</html>
Attachments
geomarker.png
geomarker.png (121.39 KiB) Viewed 11763 times

User avatar
micke
Posts: 256
Joined: 20:49, 18 Nov 2013

Re: Issue with Google Maps Geomarker and evothings-app.css

Postby micke » 17:49, 09 Dec 2015

Hi,

It might be caused by Google Maps inserting DOM elements that get styled by the Evothings CSS, creating the grey box.

One approach to debug the CSS is to use remove debugging using Safari on and OS X machine (for debuggin iOS) and Chrome for debugging Android.

Another option, if you can live without access to native code, is to debug in a web browser. You can connect to Evothings Studio from a web browser using a URL on this format:

https://deploy.evothings.com/connect/CONNECT_KEY

where CONNECT_KEY is the key you get in the Workbench, for example:

https://deploy.evothings.com/connect/abcd1234

Of course you can also just open your local files directly in a web browser :)

Perhaps you already tried this approach?

Regards, Mikael

pmasingh
Posts: 6
Joined: 22:48, 01 Apr 2015

Re: Issue with Google Maps Geomarker and evothings-app.css

Postby pmasingh » 20:05, 09 Dec 2015

Thanks Mikael. Found a solution. Just commented the padding and background color for the canvas, in the css file:
canvas {
/* padding: 1px;
border-radius: 1px;*/
border: none;
/* background-color: #f3f3f3; /* Default color: "Arctic"*/
}

Will share my working TI code once I've finished it :) !

Thanks again and Regards,
Peter
Last edited by pmasingh on 20:13, 09 Dec 2015, edited 1 time in total.

pmasingh
Posts: 6
Joined: 22:48, 01 Apr 2015

Re: Issue with Google Maps Geomarker and evothings-app.css

Postby pmasingh » 20:10, 09 Dec 2015

Hi Mikael,

Have you or any one else had issues with the data for:
* relative humidity
* pressure

I get negative values for RH, and pressure values that are way off, yet the SensorTag app on iPhone looks ok.

Thanks,
Peter


Return to “Questions and answers”

Who is online

Users browsing this forum: No registered users and 8 guests