Difference between revisions of "Widget:SpaceAPI"

Revision as of 13:09, 11 May 2016

This widget allows you to display the Space API data (provided as JSON)

Created by Xopr

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.)

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.

@@ Line 84: / Line 84: @@
              this._node = document.getElementById( "spaceAPI" + this._intervalId );
+            var mapNode = this._node.appendChild( document.createElement( "div" ) );
+            mapNode.style.width = "100%";
+            mapNode.style.height = "276px";
              if ( this._features.split(",").indexOf( "beacon" ) >= 0 )
@@ Line 101: / Line 104: @@
                  node.addEventListener( "load", function( _evt )
                  {
-                     console && console.log( "leaflet script loaded" );
+                     var point = L.latLng( 50.883333, 5.983333 );
+                    var map = L.map( mapNode ).setView( point, 11);
+                    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+                        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+                    }).addTo(map);
+                    // TODO: "Follow" control
+                    // TODO: icon
+                    var marker = L.marker( point, { /*icon: myIcon*/ } ).addTo( map );
+                    var circle = L.circle( point, 80, { stroke: false } ).addTo( map );
                  } );