AuthPuppy

How to embed the hotspots map in another website?

Asked by Andrea Grandi

Hi all,

the map of our hotspots is currently visible at this address: http://wifi.ptlug.org/nodeextra/map
we're creating a dedicated website for our network and we would like to embed this map into the new website. I've tried copy-pasting the code in the page but it doesn't work. Can you please help me? Thanks!

Question information

Language:
English Edit question
Status:
Solved
For:
AuthPuppy Edit question
Assignee:
No assignee Edit question
Solved by:
Andrea Grandi
Solved:
Last query:
Last reply:
Revision history for this message
Andrea Grandi (andreagrandi) said : 		#1

A little suggestion: I could manage to create an iframe on the new website, but I would need to have a single page containing just the map. For example: instead of embedding http://wifi.ptlug.org/nodeextra/map I would need http://wifi.ptlug.org/nodeextra/map_mini that contains only the map. I don't know how to use Synfony, else I would modify the view by myself. Could you please tell me how to create a new view? Thanks!

Revision history for this message
Robin Jones (robin-networkfusion) said : 		#2

you can get an XML list of all the deployed nodes from your server (http://<your authpuppy server>/nodeextra/list/xml), you can also get this list in json format (http://<your authpuppy server>/nodeextra/list/xml).

Using those functions you can build your own version of the hotspot map, possibly taking a look at the source of the rendered hotspotmap webpage and taking a look at the JS source of http://bazaar.launchpad.net/~alliancecsf-dev/authpuppy/apNodeExtraPlugin/view/head:/web/js/hotspots_map_google.js

hope that helps...

Robin.

Revision history for this message
Robin Jones (robin-networkfusion) said : 		#3

sorry json format should be (http://<your authpuppy server>/nodeextra/list/json)

Revision history for this message
Andrea Grandi (andreagrandi) said : 		#4

At the end we have resolved the problem using this code:

<div style="width: 600px; height: 500px; padding-top: -50px; overflow: hidden; margin: auto; ">
<iframe name="map" id="map" scrolling="no" width="800" height="800" frameborder="0" style="left: -20px; position: relative; top: -214px;" src="http://wifi.ptlug.org/nodeextra/map" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>
</div>

we put this html code into a wordpress page and here you can see the result: http://www.pistoiawireless.net/mappa/

it just works :)