diff --git a/examples/advanced/dataviz_example.html b/examples/advanced/dataviz_example.html index 6a7a4f2..b09207d 100644 --- a/examples/advanced/dataviz_example.html +++ b/examples/advanced/dataviz_example.html @@ -5,32 +5,6 @@ Dataviz example with jQuery Mapael diff --git a/examples/advanced/eventHandlers_display_information_about_plotted_cities.html b/examples/advanced/eventHandlers_display_information_about_plotted_cities.html index eb1075c..e91230c 100644 --- a/examples/advanced/eventHandlers_display_information_about_plotted_cities.html +++ b/examples/advanced/eventHandlers_display_information_about_plotted_cities.html @@ -20,11 +20,24 @@ margin: auto; } - .map { + .myText { + background-color: #343434; + height: 100px; + padding: 10px; + color: #fff; + overflow: auto; + margin: 10px; + } + + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; @@ -37,15 +50,6 @@ display: none; color: #343434; } - - .myText { - background-color: #343434; - height: 100px; - padding: 10px; - color: #fff; - overflow: auto; - margin: 10px; - } diff --git a/examples/advanced/eventHandlers_option_and_update_event_refresh_onclick.html b/examples/advanced/eventHandlers_option_and_update_event_refresh_onclick.html index f9a0f12..ac47aa7 100644 --- a/examples/advanced/eventHandlers_option_and_update_event_refresh_onclick.html +++ b/examples/advanced/eventHandlers_option_and_update_event_refresh_onclick.html @@ -21,7 +21,11 @@ margin: auto; } - .mapTooltip { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; @@ -35,7 +39,8 @@ color: #343434; } - .zoomIn, .zoomOut { + .mapael .zoomIn, + .mapael .zoomOut { background-color: #fff; border: 1px solid #ccc; color: #000; @@ -56,11 +61,11 @@ user-select: none; } - .zoomOut { + .mapael .zoomOut { top: 30px; } - .map { + .mapael .map { position: relative; } diff --git a/examples/advanced/initial_zoom_level_on_a_specific_position.html b/examples/advanced/initial_zoom_level_on_a_specific_position.html index b21862d..6e1ef3d 100644 --- a/examples/advanced/initial_zoom_level_on_a_specific_position.html +++ b/examples/advanced/initial_zoom_level_on_a_specific_position.html @@ -20,7 +20,15 @@ margin: auto; } - .mapTooltip { + .mapcontainer { + margin: 10px; + } + + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; @@ -34,7 +42,8 @@ color: #343434; } - .zoomIn, .zoomOut { + .mapael .zoomIn, + .mapael .zoomOut { background-color: #fff; border: 1px solid #ccc; color: #000; @@ -56,18 +65,14 @@ user-select: none; } - .zoomOut { + .mapael .zoomOut { top: 30px; } - .map { + .mapael .map { position: relative; background-color: #cddee0; } - - .mapcontainer { - margin: 10px; - } diff --git a/examples/advanced/legend_show_hide.html b/examples/advanced/legend_show_hide.html index 6639897..c4a0e07 100644 --- a/examples/advanced/legend_show_hide.html +++ b/examples/advanced/legend_show_hide.html @@ -20,11 +20,15 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; diff --git a/examples/advanced/links_between_plotted_cities.html b/examples/advanced/links_between_plotted_cities.html index 0365834..d582892 100644 --- a/examples/advanced/links_between_plotted_cities.html +++ b/examples/advanced/links_between_plotted_cities.html @@ -20,11 +20,15 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; diff --git a/examples/advanced/multiple_legends_plotted_cities.html b/examples/advanced/multiple_legends_plotted_cities.html index 2a4960f..8d2882a 100644 --- a/examples/advanced/multiple_legends_plotted_cities.html +++ b/examples/advanced/multiple_legends_plotted_cities.html @@ -22,13 +22,16 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; margin-bottom: 10px; } - /* CSS for the tooltip displayed on mousehover on elements */ - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #474c4b; moz-opacity: 0.70; diff --git a/examples/advanced/update_event_for_refreshing_elements.html b/examples/advanced/update_event_for_refreshing_elements.html index 47d7022..3d75872 100644 --- a/examples/advanced/update_event_for_refreshing_elements.html +++ b/examples/advanced/update_event_for_refreshing_elements.html @@ -20,7 +20,11 @@ margin: auto; } - .mapTooltip { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; @@ -34,7 +38,8 @@ color: #343434; } - .zoomIn, .zoomOut { + .mapael .zoomIn, + .mapael .zoomOut { background-color: #fff; border: 1px solid #ccc; color: #000; @@ -56,11 +61,11 @@ user-select: none; } - .zoomOut { + .mapael .zoomOut { top: 30px; } - .map { + .mapael .map { background-color: #cddee0; margin: 10px; position: relative; diff --git a/examples/advanced/updates_on_links_performed.html b/examples/advanced/updates_on_links_performed.html index c0a56d7..6bc2f7b 100644 --- a/examples/advanced/updates_on_links_performed.html +++ b/examples/advanced/updates_on_links_performed.html @@ -20,11 +20,15 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: fixed; background-color: #fff; moz-opacity: 0.70; @@ -38,7 +42,8 @@ color: #343434; } - .zoomIn, .zoomOut { + .mapael .zoomIn, + .mapael .zoomOut { background-color: #fff; border: 1px solid #ccc; color: #000; @@ -60,7 +65,7 @@ user-select: none; } - .zoomOut { + .mapael .zoomOut { top: 30px; } diff --git a/examples/advanced/zoom_event_on_specific_area.html b/examples/advanced/zoom_event_on_specific_area.html index ac1cef8..ac521b7 100644 --- a/examples/advanced/zoom_event_on_specific_area.html +++ b/examples/advanced/zoom_event_on_specific_area.html @@ -20,7 +20,11 @@ margin: auto; } - .mapTooltip { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; @@ -34,7 +38,8 @@ color: #343434; } - .zoomIn, .zoomOut { + .mapael .zoomIn, + .mapael .zoomOut { background-color: #fff; border: 1px solid #ccc; color: #000; @@ -56,11 +61,11 @@ user-select: none; } - .zoomOut { + .mapael .zoomOut { top: 30px; } - .map { + .mapael .map { position: relative; } diff --git a/examples/basic/horizontal_legend.html b/examples/basic/horizontal_legend.html index 083491c..1dc82eb 100644 --- a/examples/basic/horizontal_legend.html +++ b/examples/basic/horizontal_legend.html @@ -19,12 +19,16 @@ max-width: 800px; margin: auto; } + + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ - .map { + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; @@ -38,7 +42,7 @@ color: #343434; } - .areaLegend { + .mapael .areaLegend { margin-bottom: 20px; } diff --git a/examples/basic/href_areas_plotted_cities.html b/examples/basic/href_areas_plotted_cities.html index 687818a..468ee9d 100644 --- a/examples/basic/href_areas_plotted_cities.html +++ b/examples/basic/href_areas_plotted_cities.html @@ -20,11 +20,16 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .zoomIn, .zoomOut { + .mapael .zoomIn, + .mapael .zoomOut { background-color: #fff; border: 1px solid #ccc; color: #000; @@ -46,12 +51,11 @@ user-select: none; } - .zoomOut { + .mapael .zoomOut { top: 30px; } - /* CSS for the tooltip displayed on mousehover on elements */ - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #474c4b; moz-opacity: 0.70; diff --git a/examples/basic/legendSpecificAttrs_option.html b/examples/basic/legendSpecificAttrs_option.html index 5ed548e..6ff4a4d 100644 --- a/examples/basic/legendSpecificAttrs_option.html +++ b/examples/basic/legendSpecificAttrs_option.html @@ -20,11 +20,15 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: fixed; background-color: #fff; moz-opacity: 0.70; diff --git a/examples/basic/legend_SVG_paths.html b/examples/basic/legend_SVG_paths.html index 4756605..d95d6e1 100644 --- a/examples/basic/legend_SVG_paths.html +++ b/examples/basic/legend_SVG_paths.html @@ -20,13 +20,17 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; background-color:#cddee0; margin-bottom:10px; } - .mapTooltip { + .mapael .mapTooltip { position : absolute; background-color : #474c4b; moz-opacity:0.70; @@ -40,7 +44,8 @@ color:#fff; } - .zoomIn, .zoomOut { + .mapael .zoomIn, + .mapael .zoomOut { background-color: #fff; border: 1px solid #ccc; color: #000; @@ -62,7 +67,7 @@ user-select: none; } - .zoomOut { + .mapael .zoomOut { top: 30px; } diff --git a/examples/basic/legend_areas.html b/examples/basic/legend_areas.html index f16b2df..680c720 100644 --- a/examples/basic/legend_areas.html +++ b/examples/basic/legend_areas.html @@ -20,11 +20,15 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; diff --git a/examples/basic/legend_areas_one_item_activated_at_a_time.html b/examples/basic/legend_areas_one_item_activated_at_a_time.html index b45b3c3..c084ef8 100644 --- a/examples/basic/legend_areas_one_item_activated_at_a_time.html +++ b/examples/basic/legend_areas_one_item_activated_at_a_time.html @@ -20,11 +20,15 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; diff --git a/examples/basic/legend_images.html b/examples/basic/legend_images.html index 7e7383a..1607fe5 100644 --- a/examples/basic/legend_images.html +++ b/examples/basic/legend_images.html @@ -20,13 +20,17 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; background-color:#cddee0; margin-bottom:10px; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #474c4b; moz-opacity: 0.70; diff --git a/examples/basic/legend_plotted_cities.html b/examples/basic/legend_plotted_cities.html index 99045e1..a7c3be7 100644 --- a/examples/basic/legend_plotted_cities.html +++ b/examples/basic/legend_plotted_cities.html @@ -20,11 +20,15 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; @@ -38,7 +42,7 @@ color: #343434; } - .myLegend { + .mapael .myLegend { width: 400px; border: 1px solid #bebeb4; background-color: #f4f4e8; diff --git a/examples/basic/legend_plotted_cities_areas.html b/examples/basic/legend_plotted_cities_areas.html index f091771..77b3e31 100644 --- a/examples/basic/legend_plotted_cities_areas.html +++ b/examples/basic/legend_plotted_cities_areas.html @@ -19,12 +19,16 @@ max-width: 800px; margin: auto; } + + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ - .map { + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; diff --git a/examples/basic/legend_slices_fixed_values.html b/examples/basic/legend_slices_fixed_values.html index c88c04d..aee84a5 100644 --- a/examples/basic/legend_slices_fixed_values.html +++ b/examples/basic/legend_slices_fixed_values.html @@ -20,11 +20,15 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #fff; moz-opacity: 0.70; diff --git a/examples/basic/plotted_cities_areas.html b/examples/basic/plotted_cities_areas.html index cb5e5d6..0bebed0 100644 --- a/examples/basic/plotted_cities_areas.html +++ b/examples/basic/plotted_cities_areas.html @@ -20,11 +20,15 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { position: relative; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #474c4b; moz-opacity: 0.70; diff --git a/examples/basic/zoom_features.html b/examples/basic/zoom_features.html index 85d4d7f..ebd3343 100644 --- a/examples/basic/zoom_features.html +++ b/examples/basic/zoom_features.html @@ -20,13 +20,18 @@ margin: auto; } - .map { + /* Specific mapael css class are below + * 'mapael' class is added by plugin + */ + + .mapael .map { background-color: #cddee0; margin-bottom: 10px; position: relative; } - .zoomIn, .zoomOut { + .mapael .zoomIn, + .mapael .zoomOut { background-color: #fff; border: 1px solid #ccc; color: #000; @@ -48,11 +53,11 @@ user-select: none; } - .zoomOut { + .mapael .zoomOut { top: 30px; } - .mapTooltip { + .mapael .mapTooltip { position: absolute; background-color: #474c4b; moz-opacity: 0.70; diff --git a/js/jquery.mapael.js b/js/jquery.mapael.js index 2ccea4a..8f1d358 100644 --- a/js/jquery.mapael.js +++ b/js/jquery.mapael.js @@ -25,6 +25,8 @@ }(function ($, Raphael, mousewheel) { // jshint ignore:line "use strict"; + + var pluginName = "mapael"; var Mapael = function(options) { @@ -41,11 +43,18 @@ }); return this.each(function() { + + // Avoid multiple instanciation + if ($.data(this, pluginName)) throw new Error("Mapael already exists on this element."); + + // Save instanciation on element + // This allow external access to Mapael using $(".mapcontainer").data("mapael") + $.data(this, pluginName, Mapael); var $self = $(this) , $tooltip = $("
").addClass(options.map.tooltip.cssClass).css("display", "none") , $container = $("." + options.map.cssClass, this).empty().append($tooltip) - , mapConf = $.fn.mapael.maps[options.map.name] + , mapConf = $.fn[pluginName].maps[options.map.name] , paper = new Raphael($container[0], mapConf.width, mapConf.height) , elemOptions = {} , resizeTO = 0 @@ -55,6 +64,9 @@ , zoomCenterX = 0 , zoomCenterY = 0 , previousPinchDist = 0; + + // add plugin class name on element + $self.addClass(pluginName); if (options.map.tooltip.css) $tooltip.css(options.map.tooltip.css); paper.setViewBox(0, 0, mapConf.width, mapConf.height, false); @@ -190,7 +202,7 @@ if (Math.abs(pinchDist - previousPinchDist) > 15) { offset = $container.offset(); - initFactor = (options.map.width) ? (Mapael.maps[options.map.name].width / options.map.width) : ($.fn.mapael.maps[options.map.name].width / $container.width()); + initFactor = (options.map.width) ? (Mapael.maps[options.map.name].width / options.map.width) : ($.fn[pluginName].maps[options.map.name].width / $container.width()); zoomFactor = 1 / (1 + ($self.data("zoomLevel")) * options.map.zoom.step); x = zoomFactor * initFactor * (zoomCenterX + $(window).scrollLeft() - offset.left) + $self.data("panX"); y = zoomFactor * initFactor * (zoomCenterY + $(window).scrollTop() - offset.top) + $self.data("panY"); @@ -1612,8 +1624,6 @@ }; // jQuery access - $.fn.mapael = Mapael; - - return $.fn.mapael; + $.fn[pluginName] = Mapael; }));