Trail map- custom page

qlin · Post by **qlin** » Saturday 13 February 2016 20:03

Hey
I would like to build a custom page showing GPS track on map. This should work base no mqtt GPS data from smartphone (send by owntracks app).
I find interesting plugin http://leafletjs.com/ and try to use it base of example

Code: Select all

<html>
<head>
  <title>A Leaflet map!</title>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

  <style>
    #map{ height: 180% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  // initialize the map
  var map = L.map('map').setView([42.35, -71.08], 13);

  // load a tile layer
  L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

  </script>
</body>
</html>

This example is working fine when i call
http://192.168.10.95:8181/map.html
or
http://192.168.10.95:8181/tempaltes/map.html

but not from domoticz user menu.

I received :

Code: Select all

ReferenceError: L is not defined	
var map = L.map('map').setView([42.35, -71.08], 13);

where L is leaflet object.
I noticed that leafletjs link and script in this way are not call, so I moved both to www/index.html.
After that i don't received this error but map is not displayed.

Is there somebody to help me solve this problem?

nayr · Post by **nayr** » Saturday 13 February 2016 20:58

custom templates cant have a html, head, and body tags.. those are already provided.

check out the custom.example in the templates folder, and look at the javascript console for errors.

Since your page is local you can also try loading it in an iframe, this is all you need in your template:

Code: Select all

<iframe frameborder="0" allowtransparency="true" src="/map.html" style="height: 95%; width: 100%; position: absolute; left: 0; top: 40px;"></iframe>

qlin · Post by **qlin** » Monday 15 February 2016 0:06

some problems run it base on index.html

. Without any error on console but map doesn't appear.
So I used iframe followed your suggestion and now is working fine. Thanks a lot.
I think that it is better solve for me.

If somebody want try to use:

maps_v1.tar.gz: (48.37 KiB) Downloaded 104 times

Pls, copy contents to www/templates folder and use by user menu.
In next step I will try parse some data from database.

Trail map- custom page

Trail map- custom page

Re: Trail map- custom page

Re: Trail map- custom page

Who is online