Geo Maps Live Editor

Posted on: September 12, 2015 by Dimitar Ivanov


A visual tool for creating, embedding and sharing custom geo maps. Live editor is a brand new addition to Zino UI.

This editor aims to provide easy way for creating and sharing geo maps. The primary target group of this product are bloggers and content writers, also webmasters with less programming skills or those who does not own a website.


  • Revision history
  • Private maps
  • 238 countries
  • Tooltips & legend
  • Custom URLs
  • Live preview
  • Export to PNG, JPG, PDF, SVG, HTML
  • Javascript & IFRAME integration
  • Easy to create, embed and share
  • It's FREE

User actions

To save the map use the Save link located in the top navigation. Saving the current state of the map allows you to get access to the rest of the editor's features as sharing, editing and duplicating. Registered users get more benefits as for example: revision history, private maps and custom URLs.
Once you save the map you can edit and update each revision which results in creating new revision. To update the map use the Update link who is located in top navigation bar.
When you want to use existing configuration as a quick start for creating a new map use the Fork link. Forking the map will create a copy of current state with new address.
Once you save the map you can share it with the world. You can embed the map in your own website and/or share a link in social media, blogs, forums, chats. Open the sharing dialog using the Share link in top navigation bar.
Share Geo map
Figure 1. Share Geo map
Alternatively you can download the map in various file formats as PNG, JPG, PDF, SVG, HTML. To export the map use the cloud icon in the top bar.
Export Geo map
Figure 2. Export Geo map

Live preview

The real preview of current state of the map is located in the right panel. After each change on the left panel, the preview of the map is updated. So you can see the changes at the same time.


To convenience the settings are split in four tabs as follow:


In the General tab you can choose country, customize the map zoom and the canvas size, color of the map and background of canvas.

General settings
Figure 3. General settings

The province setting is activated by default. To activate/deactivate this setting go to the Province tab who is located in the left panel and use the "Activate provinces" toggle button.

Provinces settings
Figure 4. Provinces settings

Once you activate the provinces settings you can set custom background for each province. This way you can fill the provinces with your preferred colors.

Map of France with provinces
Figure 5. Map of France with provinces

The legend setting is deactivated by default. To activate this setting go to the Legend tab who is located in the left panel and use the "Activate legend" toggle button.Once you activate it its detailed settings will appear below.

Legend settings
Figure 6. Legend settings

Using the "Position" and "Alignment" settings you can easily position the legend on the canvas. Use the "Add item" button to add unlimited items. Of course you can remove them later. Once again you can choose custom colors for each item and the legend itself.

Map of France with legend
Figure 7. Map of France with legend

To customize the tooltip go to the Tooltip tab who is located at the left panel. The tooltip can be turned on/off using the "Activate tooltip" button. By default the tooltip is turned on and shows up on the map.

Tooltip settings
Figure 8. Tooltip settings

In this tab you can find the detailed settings for font family and size, color and background, border radius, opacity, offset and custom pattern for the tooltip content.

Map of France with tooltip
Figure 9. Map of France with tooltip


Rather than using this editor as service, you can consider our chart map plugin.
Live editor is in beta stage, further updates are on the way, so stay tuned at @zino_ui and @DimitarIvanov.

Share this post


Comments are closed