Difference between revisions of "Widget:SpaceAPI"
m (doh, text node is annoying) |
m (fixed some styling, prepared beacon) |
||
| Line 60: | Line 60: | ||
SpaceAPI.prototype._intervalId = null; | SpaceAPI.prototype._intervalId = null; | ||
SpaceAPI.prototype._node = null; | SpaceAPI.prototype._node = null; | ||
| + | SpaceAPI.prototype._beacon = null; | ||
SpaceAPI.prototype._msgLoading = "Loading.."; | SpaceAPI.prototype._msgLoading = "Loading.."; | ||
SpaceAPI.prototype._msgError = "Error"; | SpaceAPI.prototype._msgError = "Error"; | ||
| Line 81: | Line 82: | ||
if ( this._float ) | if ( this._float ) | ||
style += "float:" + this._float + ";" | style += "float:" + this._float + ";" | ||
| − | document.write( '<div id="spaceAPI' + this._intervalId | + | document.write( '<div id="spaceAPI' + this._intervalId + '"></div>' ); |
var node = document.getElementById( "spaceAPI" + this._intervalId ); | var node = document.getElementById( "spaceAPI" + this._intervalId ); | ||
this._node = node.appendChild( document.createElement( "div" ) ); | this._node = node.appendChild( document.createElement( "div" ) ); | ||
| − | + | this._node.style = style; | |
| − | + | this._node.textContent = this._msgLoading; | |
| − | |||
if ( this._features.split(",").indexOf( "beacon" ) >= 0 ) | if ( this._features.split(",").indexOf( "beacon" ) >= 0 ) | ||
{ | { | ||
| − | var node; | + | var srcNode; |
| + | var mapNode = node.appendChild( document.createElement( "div" ) ); | ||
| + | mapNode.style.width = "100%"; | ||
| + | mapNode.style.height = "276px"; | ||
| − | + | srcNode = document.createElement( "link" ); | |
| − | + | srcNode.href = "/leaflet/leaflet.css"; | |
| − | + | srcNode.rel = "stylesheet"; | |
| − | + | srcNode.type = "text/css"; | |
| + | |||
// Load the css | // Load the css | ||
| − | ( document.head || document.documentElement ).appendChild( | + | ( document.head || document.documentElement ).appendChild( srcNode ); |
| − | + | srcNode = document.createElement( "script" ); | |
| − | + | srcNode.src = "/leaflet/leaflet.js"; | |
| − | + | srcNode.type = "text/javascript"; | |
| − | + | srcNode.addEventListener( "load", function( _evt ) | |
{ | { | ||
| − | + | this._beacon = {}; | |
| − | + | this._beacon.point = L.latLng( 50.883333, 5.983333 ); | |
| + | this._beacon.map = L.map( mapNode ).setView( this._beacon.point, 11); | ||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | ||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | ||
| − | }).addTo(map); | + | }).addTo( this._beacon.map ); |
// TODO: "Follow" control | // TODO: "Follow" control | ||
| + | this._beacon.follow = true; | ||
// TODO: icon | // TODO: icon | ||
| − | + | this._beacon.marker = L.marker( this._beacon.point, { /*icon: myIcon*/ } ).addTo( this._beacon.map ); | |
| − | + | this._beacon.circle = L.circle( this._beacon.point, 80, { stroke: false } ).addTo( this._beacon.map ); | |
} ); | } ); | ||
// Load the script | // Load the script | ||
| − | ( document.head || document.documentElement ).appendChild( | + | ( document.head || document.documentElement ).appendChild( srcNode ); |
} | } | ||
| Line 200: | Line 206: | ||
else | else | ||
this._updateState( message || this._msgUnknown, this._colorUnknown, title ); | this._updateState( message || this._msgUnknown, this._colorUnknown, title ); | ||
| + | |||
| + | if ( this._beacon ) | ||
| + | { | ||
| + | if ( this.data.sensors && this.data.sensors.beacon && this.data.sensors.beacon.length ) | ||
| + | { | ||
| + | // Draw the beacons | ||
| + | //this._beacon.point = L.latLng( this.data.location.lat, this.data.location.lon ); | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | // Assume mandatory location | ||
| + | this._beacon.point = L.latLng( this.data.location.lat, this.data.location.lon ); | ||
| + | |||
| + | this._beacon.marker.update(); | ||
| + | this._beacon.circle.setLatLng( this._beacon.point ).setRadius( 20 ); | ||
| + | this._beacon.map.setView( this._beacon.point, 16, {} ); | ||
| + | } | ||
| + | //this.data.location.lat lon | ||
| + | //this.data.sensors.beacon[] | ||
| + | |||
| + | this._beacon.marker = L.marker( this._beacon.point, { /*icon: myIcon*/ } ).addTo( this._beacon.map ); | ||
| + | this._beacon.circle = L.circle( this._beacon.point, 80, { stroke: false } ).addTo( this._beacon.map ); | ||
| + | |||
| + | } | ||
}; | }; | ||
Revision as of 15:07, 11 May 2016
This widget allows you to display the Space API data (provided as JSON)
Created by Xopr
Using this widget
To insert this widget, use the following code:
{{#widget:SpaceAPI
|url=/spaceAPI/
|width=260px
|height=20px
|padding=8px
|interval=20
|float=right
}}
This will give the following result:
Notes
- url is mandatory, the rest is optional (leave out interval to make the data static).
- it also must be written without protocol since colon (:) is not allowed, and may be relative, for example: //ackspace.nl/spaceAPI/ or /spaceAPI/
- You must provide a unit for the sizes (i.e. px, %, etc.)
Copy to your site
To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:SpaceAPI article.
