Sunday, July 28, 2019

Ways to create and add SVG maps to a web page

SVG stands for 'Scalable Vector Graphics' which defines vector-based graphics in XML format. It is just another format for displaying images on the web and every element and every attribute of its can be animated. It have greater advantages over other image file types such as PNG, JPG, GIF, BMP, etc.

Some of its notable advantages are:-
~ It is scalable. That is it doesn't loss quality when stretched or compressed.
~ It has interactive ability with CSS and JS
~ It can be created and edited with any text editor
~ It can be searched, indexed and scripted
~ It can be printed with high quality at any resolution

Ways to create SVG image maps

SVG maps can be created with either of the two ways namely; text editor or drawing program. The examples of each is given below:-
1) Text editor (Code): any text editor such as notepad++, sublime, atom, etc can be used.
2) Drawing tools/program: Inkscape, Adobe Illustrator, etc. While most of these tools can save SVG files directly, it is worth noting that there are some such as ArcGIS and QGIS that edit maps in other formats such as shapefile then other online such as Mapshaper,  Mapstarter, Geoconverter, etc are used to convert the shapefile to SVG file.

Creating SVGs with Code allows you to understand the different svg elements and the attributes that make up the file. This is very import when you want to manipulate and interact with the SVG using CSS and JS scripting.

If your SVG is a complex one such as a state map administrative boundaries, you are better off creating the SVGs with drawing tools.

Ways to add SVG image maps into HTML web page

1) Using inline SVG tag (<svg>...</svg>)

2) Using image tag (<img src='filename.svg' >)

3) Using CSS background-image property
background: url(filename.svg);

4) Using HTML object, iframe or embed tags

Using inline SVG tag to add SVG images are the most powerful and flexible, as it allows certain CSS and JS operations with SVG that other ways don't allow. This method also helps with very fast loading speed of the web page.

On the other hand, a major draw back for using the inline SVG tag is that it is very poor in "search engine indexing".

That is it, hope it was useful.
Thank you for reading.

Saturday, July 6, 2019

Toggle cell line numbers in Jupyter notebook

When you are switching from a text editor to jupyter notebook environment for writing python code, you will definitely wish to see line numbers on jupyter notebook cells. And one obvious reason is that it makes it easier to trace errors as seen below.

In the script pictured above, there is an 'ElementNotVisibleException' error on line 86. If the cell line number was off, it will be very difficult to count and locate the line where the error occurred. But will line number enabled, we just scroll to the line number as seen below.

How to enable cell line numbers in Jupyter notebook

To toggle cell line numbers in Jupyter notebook, you can use two keyboard shortcuts in "Command Mode" as follow:-
1) L - to toggle line numbers
2) Shift-L - to toggles line numbers in all cells, and persist the setting

Note that the Jupyter Notebook has two different keyboard input modes.
Edit mode allows you to type code or text into a cell and is indicated by a green cell border.

Command mode binds the keyboard to notebook level commands and is indicated by a grey cell border with a blue left margin.

That is it!