Hyper Globe - The world for your website or app

Examples

There are a ton of styling options. See what is possible…

Features

• Easy to create with a configurator.
• Can be integrated into any type of website.
• Add markers, texts, lines or HTML elements to geo locations.
• Responsive, cross-browser compatible, works in WebViews
• Lightweight: less than 50 KB (gzipped), asynchronous loading
• Secure and data protection compliant, no dependencies, no cookies
• Scripting API for advanced use cases.
• Comes with documentation, source code, support and unlimited updates.

Configurator

Get an idea of how to create a globe.

FAQ

• Where can it be integrated? Any CMS, page builder or type of website should be ok. All you have to do is insert HTML code. WordPress users have the option to integrate it with a plugin. You should be able to host files on your web server but it is not required (everything can be embedded into the code). It even works with local HTML files and in WebViews (apps).
• What skills are required? The configurator can be used by anyone. Advanced use cases may require knowledge of CSS, JavaScript or image editing.
• What can I use it for? Anything you can think of, e.g. display of branch offices, travel plans, points of interest, shipping routes, international partners, origin of resources, service apps, education, statistics, heatmaps, data visualisation, special effects.
• Is there a trail version? Sorry, we do not offer a trail version. You purchase without risk, as you get a full refund if you are not satisfied!
• What technologies are used? It is an ES6 JavaScript module that provides a custom element named <hyper-globe> CSS variables are used for styling, so the appearance can be changed with @media queries. A WebGL context is used for fast rendering.
• Can I use it with my framework? All code and examples are in native JavaScript so there are no dependencies. You are free to use it with the framework of your choice (e.g. React/Vue/Angular/...) but we cannot assist you.
• What can I do with custom CSS?
  • Styling based on @media queries (e.g. for smartphones or dark mode)
  • Styling of hover states
  • Styling based on custom CSS selectors
• What can I do with scripting?
  • Use events (e.g. marker click) for custom behaviors.
  • Dynamically add or remove content
  • Animate the globe and content styles
  • Use helper methods (e.g. get the geo location of a click)
• Can I load locations from a database? Yes, but you have to write the server-side script to fetch and serve the data yourself. The documentation shows a way to add content loaded via an Ajax request.