ZoneMinder Forums

Posted: **Mon Apr 25, 2022 10:59 pm**

Hi. I am providing here instructions to add a map view page for Zoneminder.

https://www.dropbox.com/s/ruggvm4lrnq968z/mapa.php?dl=0

https://www.dropbox.com/s/esmhgp9wt7/mapa.zip?dl=0

mapa.zip decompresses to a folder named 'mapa' to be copied into /usr/share/zoneminder/www
In that folder, in main.js in line 9 we set the coordinates of the center of the initial map view.

The file mapa.php goes in /usr/share/zoneminder/www/skins/classic/views

I'm including my own /usr/share/zoneminder/www/skins/classic/includes/functions.php. Starting line 98 you will find this code:

Code: Select all

  <!-- Agregado para ver el mapa -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
  <link rel="stylesheet" href="leaflet-extramarker/css/leaflet.extra-markers.min.css">
  <link rel="stylesheet" href="mapa/main.css">
  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.3/dist/esri-leaflet.js"
    integrity="sha512-kuYkbOFCV/SsxrpmaCRMEFmqU08n6vc+TfAVlIKjR1BPVgt75pmtU9nbQll+4M9PN2tmZSAgD1kGUCKL88CscA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet Geocoder from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.1/dist/esri-leaflet-geocoder.css"
    integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
    crossorigin="">
  <script src="https://unpkg.com/esri-leaflet-geocoder@3.1.1/dist/esri-leaflet-geocoder.js"
    integrity="sha512-enHceDibjfw6LYtgWU03hke20nVTm+X5CRi9ity06lGQNtC9GkBNl/6LoER6XzSudGiXy++avi1EbIg9Ip4L1w=="
    crossorigin=""></script>   
  <!-- FIN AGREGADO-->

Then, in the same file, if you search for 'mapa' you will find a couple of function calls on lines 254 and 384 and a function definition on line 608. You should add this to your functions.php
Of course, you must add the coordinates of each momitor you want to show up in the map.

So, I think I haven't missed anything.

Enjoy!

Posted: **Mon Apr 25, 2022 11:08 pm**

Forgot this:

Posted: **Thu Apr 28, 2022 1:07 pm**

Are you licensing this under GPL? If so, we can just merge it into ZoneMinder. Will only do so if you agree of course.

Posted: **Fri Apr 29, 2022 12:22 pm**

Hi. Of course it's GPL. You can modify, change, merge, etc. Thank you very much.
Credit should go to Matías Figueroa.

Posted: **Fri Apr 29, 2022 1:20 pm**

second link doesn't work for me.

Posted: **Fri Apr 29, 2022 3:29 pm**

Try this, please.

https://www.dropbox.com/s/zo40mxljw84vgka/mapa.zip?dl=0

Posted: **Mon May 09, 2022 6:03 pm**

Where can I find this part "Then, in the same file, if you search for 'mapa' you will find a couple of function calls on lines 254 and 384 and a function definition on line 608. You should add this to your functions.php"

Thanks

Posted: **Thu May 12, 2022 9:29 am**

Thank you so much! I'll check out the link.

Posted: **Mon May 16, 2022 8:44 pm**

Hi!

Where can I find this part "Then, in the same file, if you search for 'mapa' you will find a couple of function calls on lines 254 and 384 and a function definition on line 608. You should add this to your functions.php"

It means that in your own /usr/share/zoneminder/www/skins/classic/includes/functions.php you should add the included code and the calls an definitions you wil find searching for the string "mapa" in my /usr/share/zoneminder/www/skins/classic/includes/functions.php, also included. Reason is, you may have changed your functions.php, so line numbers ar not the same as in the original file.

Posted: **Sat Feb 25, 2023 6:25 pm**

I merged this code on a branch a long time ago, and just got around to merging it to master.

I reworked it a lot so it may be unrecognisable, but I want everyone know that the current map code is a direct result of this mapa.

Posted: **Wed Jun 28, 2023 9:08 pm**

Hi where can I find your file functions.php? I did not find it in the file mapa.zip

Thanks in advance

Posted: **Fri Jul 28, 2023 12:40 pm**

It's also easy to just use an HTML imagemap and an iframe to view cameras. I was able to do the following (links below) in a couple hours.

I don't know if the map view in this thread has the option to view streams or not. Also I don't know if this view is only for a traditional street map, or if you can use any image. (I suppose i'll find out when 1.38 is released.)

viewtopic.php?t=32675
https://wiki.zoneminder.com/External_Li ... of_Cameras

ZoneMinder Forums

Map view for Zoneminder

Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder

Re: Map view for Zoneminder