PIXILAB Wiki

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
blocks:app-note:interactivemap [2020-11-10 14:47]
mattias [How does this work?] 		blocks:app-note:interactivemap [2023-08-01 21:07] (current)
admin [Installation]
Line 13: Line 13:
  
 We have prepared a PIXILAB-blocks-root folder containing everything you need to run the examples. We have prepared a PIXILAB-blocks-root folder containing everything you need to run the examples.
-{{ :blocks:app-note:interactivemapofafrica.zip |Download this ZIP file and unpack it}}+{{ :blocks:app-note:interactivemap:interactivemapofafrica.zip |Download this ZIP file and unpack it}}
  
-If you don't know how to do this, read the instructions in the [[https://int.pixilab.se/docs/blocks/app-note/start|general setup section.]]+If you don't know how to do this, read the instructions in the [[blocks:app-note:start|general setup section]].
  
  
Line 50: Line 50:
 =====How does this work?===== =====How does this work?=====
  
-The interactive map itself is a custom web page that is stored under /public/html/SVGMap. In blocks this is displayed with a web block.+The interactive map itself is a custom web page that is stored under /public/html/SVGMap.  
 + 
 +{{:blocks:app-note:interactivemap:atomeditor.png?nolink&800|}} 
 + 
 +In blocks the web page is displayed with a web block.
  
 {{:blocks:app-note:interactivemap:webblocksettings.png?nolink&800|}} {{:blocks:app-note:interactivemap:webblocksettings.png?nolink&800|}}
  
 In the URL setting of the web block there are two query-parameters. blocksVar will point to a blocks variable, svgFileName will set the filename of the svg file used for the project.  In the URL setting of the web block there are two query-parameters. blocksVar will point to a blocks variable, svgFileName will set the filename of the svg file used for the project. 
-The map itself is a svg file that is picked up by script.js and applied to the html document in runtime. +The map image is a .svg file that is picked up by script.js and applied to the html document in runtime. 
-Script.js uses the Blocks javascript bridge API called pub_sub_peer.js to set valuea and subscripe to the Blocks variable.+Script.js (the compiled version of scrip.ts) uses the Blocks javascript bridge API called pub_sub_peer.js to set value and subscripe to the Blocks variable.