rvalitov / widgetkit-map-ex Goto Github PK

Responsive version of Yootheme's Map Widget (Widgetkit2) with center map point and advanced features

License: GNU General Public License v3.0

PHP 82.18% JavaScript 17.53% CSS 0.29%

yootheme map widgetkit widget joomla wordpress plugin google-maps google-maps-api

widgetkit-map-ex's Introduction

Overview

MapEx is an advanced Map widget for Yootheme Widgetkit2. After installation it becomes available in the Widgets list as a "native" widget and can be used as any other widget.

Notice about Widgetkit 3 and status of this project: Yootheme announced a third version of Widgetkit on January 26th, 2021. I received reports that after upgrade to Widgetkit 3 this widget does not work properly. I'm very sorry that I currently not able to devote my time to this project to develop it further. In its current state it's "bug free" and works with Widgetkit 2 and Joomla 3. Currently, I don't have plans to add support for Widgetkit 3 or add any other serious improvements. This widget has been my pet project that I was doing in my free time, and I've been happy to share it for free with the community. As I stopped using Widgetkit in my own projects, I lost motivation in further updates to this widget. I'm happy if my work and widgets were of any help or use in your websites!

Features

Basic Features

Based on Google Map - the widget uses Google Map API to create the map.
Map with markers - the widget shows a map with optional markers on it.
Styled map - you can change the visual look of the map.
Backward compatibility - all other behavior, styling and features of the original Map widget are preserved.
Use with your existing data - you can easily convert your existing Map widgets into MapEx preserving all the data and options.
Compatible with ZOO - you can use MapEx with Yootheme's ZOO, read more.
Compatible with Yootheme Pro - you can use MapEx with Yootheme Pro.

Unique Features

The new features that the MapEx has and that are not available in the original Map widget:

Responsive behavior - the map will automatically adjust (pan & zoom) if the user changes the window size or orientation (on mobile devices). The problem's description.
Custom pin images - you can set a custom icon for all pin markers or set a unique image for each marker (Read more).
Google Maps API key - you can enter your key that will be used in all instances of the widget. Read more
Advanced markers clustering mode with custom images - a full control of grouping the markers into clusters to provide a better user experience. Online collection of markers is also available. Read more.
Center map - you can put an arbitrary center of the map. This feature is not available in the original Map widget - problem exists since 2013, e.g. post#1, post#2.
Correct visualization inside the lightbox (modal) - there's a problem with the original Map widget when the widget is not rendered correctly when displayed inside the modal dialog: the map tiles are not rendered completely or partly, so the widget is not visible properly. This MapEx widget fixes this issue. Read more.
Correct visualization inside other widgets - widgets from Yootheme don't support nesting inside of each other. This MapEx widget fixes this issue and can be used inside other widgets (e.g. Switcher) or UIKit components (e.g. Tabs). Read more.
Auto close (hide) popup windows - you can set an option to automatically close popup info windows, so that only one window can be visible at at time. Read more
Tooltips for all options - it's much easier to use the widget, because tooltips are available for all settings.
More map types (Roadmap, Satellite, Hybrid, Terrain, Styled) - the widget supports all standard map types that are available at Google Maps, read more.
Advanced map controls - you can customize visibility of all map controls and tweak their look, read more.
Sophisticated styling options - you can create your own custom map with unique appearance using various styling options and Wizard, read more.
Support of SEF URLs - search engine friendly links are supported, no matter where you publish these links in the widget, read more.
Update notifications - you will be notified if new versions of the widget are available.
Multilingual interface, translated into languages:
- English (en_GB)
- Русский (ru_RU)
- Deutsch (de_DE)
- Your language not listed? You can help with translation, read more.
Access to the original Google Map object - Javascript object that is used in creation of the map. So, the user may change and/or modify the object as he needs from any web page using Javascript which provides vast opportunities for Javascript programmers to customize the map using native Google Map API, read more.

Supported platforms

The core code is based on Widgetkit 2.5.3 and was updated since accordingly. This widget should work with any Widgetkit 2.4.x and later (recommended 2.5.0+). Tested with Widgetkit 2.6.x, 2.7.x, 2.8.x, 2.9.x too.
PHP5 and PHP7 compatible
Joomla 3.4.x or later. Tested on Joomla 3.4.x, 3.5.x, 3.6.x, 3.7.x, 3.8.x.
Wordpress 4.4.x or later

Read full system requirements here.

How to install?

The installation procedure is described here.

The manual

Some issues about using the widget are available in the Wiki area.

Authors, Contributors and Acknowledgment

This widget is created by Ramil Valitov.
The code is based on the original Map widget by Yootheme.
Logo designed by Freepik
Special thanks to Florian, member of the Yootheme support team, for his post about the problem with the map widget displayed in a lightbox and the approach how to solve it (however, we use another better solution now).
Thanks to Marco Rensch for testing this widget with ZOO and providing related instructions; making translation to German language.

Disclaimer

This project is NOT affiliated with, endorsed, or sponsored by the Yootheme. Widgetkit, its name, trademark, and other aspects of the app are trademarked and owned by their respective owners.

Feedback

Your feedback is very appreciated. If you want to see new features in this module, please, post your ideas and feature requests in the issue tracker.

Donations

This is a free project that I do in my spare time. If you find it useful, then you can support it by donating some amount of money. This will help to keep the project alive and making it better: develop new features, make new releases, fix bugs, update the manuals, and provide at least some minimal technical support (there's an issue tracker here).

You can choose any payment method you prefer:

Your Currency	Payment Method
Euro €
USD $
Russian Ruble ₽
Other

Support or Contact

Having trouble with MapEx Widget? May be something has already been described in the Wiki area or reported in the issue tracker. If you don't find your problem there, then, please, add your issue there.

Being a free project which I do in my spare time, I hope you understand that I can't offer 24/7 support:) You may contact me via e-mail [email protected], I will try to answer to all of them (if such messages imply an answer), however, not immediately, it may take a few days or a week... so, just be patient.

Note, that I can answer only to questions and problems directly related to MapEx widget. Answers to basic questions about the widgetkit nature and simple help about how to use widgets in general or how to use Joomla you can find in appropriate forums:

widgetkit-map-ex's People

Contributors

Stargazers

Watchers

Forkers

marcorensch darkgreg sebastienvermeille

widgetkit-map-ex's Issues

Feature: map printing

Feature to print the map (print-friendly version).

Maps do not work in UIKit tabs

Expected behavior

The maps do not get properly rendered, when they are in UIKit tab that is not selected on page load - pins centering does not work at least and this is probably due to wrong size calculations on hidden DOM objects.

Actual behavior

When the map tab gets rendered, the map does not render on it's right position and also shows some other odd behavior.

Steps to reproduce the behavior

Put a map widget in an UIKit tab set, in a tab that is not selected by default.

System information

CMS type: Joomla

CMS version: 3.5.1

Version of the widget:1.4.7

My fix is to add the following in $(document).ready(...) in widget.php :

jQuery(document).on(
    "display.uk.check",
    function(event) {
        var self = jQuery(event.target);
        var map = self.find('[id^="wk-map-ex"]');
        if(map.is(':visible')) {
            map.each(
                function() {
                    var id = jQuery(this).attr('id');
                    var item = getWidgetkitMap(id);
                    if(item) {
                        google.maps.event.trigger(item, "resize");
                        var sub_id = id.substring(9);
                        if(typeof window['updateMap' + sub_id] === 'function') {
                            window['updateMap' + sub_id](item);
                        }
                    }
                }
            );
        }
    }
);

Missing translation

The current obviously doesn't support translation of the following strings:

MapEx specific strings

Enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery. By default, the control's presence is determined by the presence or absence of 45° imagery for the given map type at the current zoom and location. You cannot make the control appear if no 45° imagery is currently available.
Cluster Marker Level
%from% to %to%
e.g. %example%
Downloaded information about # items
Inherit

The following strings are custom fields that unfortunately are not translatable by Widgetkit design:

Location
Enter a location
CUSTOM PIN IMAGE
CUSTOM PIN ANCHOR X (PX)
CUSTOM PIN ANCHOR Y (PX)

General Widgetkit strings

To translate the following general strings that are shared between different widgets, please, follow this project.

Settings
Select
Manage Fields
Add Item
Add Media
Drop files here
Upload
Add Folder
Pick Media
Save
Save & Close

Wizard button under style.. KO

Google has moved Styled Maps Wizard tools to: http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html
so the button under style does'nt work..

Feature: Use different Markers per ZOO Category

@rvalitov :
As i can see there is acutally no Way (or Guide) to use it with Content Type ZOO Category and assign a custom icon for each category or Type, is that right?

Feature: choose unit systems for Scaling Control

Option to explicitly specify the Unit system (kilometers or miles) for Scaling control.

Remove custom marker field

This field appeared in Widgetkit 2.7.x and automatically added into MapEx. The UI of MapEx must be rewritten to remove this disturbing field. Currently MapEx ignores this field. This issue is connected with #30

Google API Key will not work

Hello,

It seems as if the API key is not being used properly. If I use the normal map widget, I have no problems. When I use the Map-Ex widget, I get an error message. Both widgets use the same API key. See: http://www.geliti.de/urlaub-am-petzinsee/ausflugsziele

That worked until recently. This must have happened with an update. I am using J3.6.4 and Widgetkit 2.8.0.

Can you help me?

Thanks, Sven

Feature: set different zoom level for responsive breakpoints.

The problem

If there are several places that you want to show in the widget, then a problem with zoom level can happen. If you initially set the zoom level according to a large screen monitor, then such map on smaller screens (e.g. smartphones) will look like it has a too large scale. And map points that were visible on larger screens will invisible (out of the screen area) in this case.

Example

Screenshot of the map on a large screen:

Screenshot of the same map on smartphone:

Possible implementation

To fix this behavior it's suggested to add some extra settings to control the zoom level on various devices. For example a field call Tablet Zoom level and another one called Phone Zoom level. Or may be "auto zoom" feature will be added.

Feature: add attribution information

Attribution information can be embedded into the map.

Custom unique marker using Zoo content?

Is it possible to map a custom unique marker from Zoo content (image) instead of widgetkit content?

System information

CMS type: Joomla or WordPress

CMS version:

Version of the widget:

Website URL:

Debug output of the widget:

Custom markers with relative URLs may not show in Wordpress

I never had time to implement full support for custom markers defined by relative URLs. This issue is only for Wordpress.

Центровка карты

На сайте центрую карту, все ок показывает что бы сразу помещались два города. А на мобильном карта остается в том же зуме что и на сайте в итоге мы видим центр карты без точек.

CMS type: Joomla or WordPress
Joomla
CMS version:
последняя
Version of the widget:
v1.4.3
Website URL:

Debug output of the widget:

Feature: set position of controls

Ability to choose position of controls on the screen.

Show popup on hover: feature request

Show popup when mouse hovers icon. Now users need to click it.

Feature: cluster custom icons

Currently custom icons are supported for individual locations. This feature adds ability to customize cluster icons.

Feature: auto hide popup windows

When user clicks on a pin, then popup info window appears. If there are several pins on a map, then every time you click on a pin, a new window will show up. Other windows will still be visible and it's the user who can close or hide the windows.

The idea is to add an option that allows to auto hide (close) other popup info windows every time the user clicks on a pin, so that maximum only one single (active or current) popup window will be visible on a screen.

Feature: import and export settings

Ability to save or load settings of the widget. This will help to quickly move or copy a widget from one site to another.

export data
import data
import + export integration, tests

Failed to parse SourceMap underscore-min.map

If you open a console log at the backend, then a browser may write a message

Failed to parse SourceMap: http://website.com/administrator/components/com_widgetkit/plugins/widgets/map_ex/assets/underscore-min.map

This error message doesn't influence or break the functionality of the widget, because the browser just couldn't find the map file for minified version of JS.