Update examples with specific mapael class

neveldo · Nov 20, 2015 · 079a7f3 · 079a7f3
1 parent 275c168
commit 079a7f3
Show file tree

Hide file tree

Showing 22 changed files with 187 additions and 104 deletions.
diff --git a/examples/advanced/dataviz_example.html b/examples/advanced/dataviz_example.html
@@ -5,32 +5,6 @@
     <title>Dataviz example with jQuery Mapael</title>
     <meta charset="utf-8"/>
     <style type="text/css">
-        .mapTooltip {
-            position: absolute;
-            background-color: #fff;
-            moz-opacity: 0.80;
-            opacity: 0.80;
-            filter: alpha(opacity=80);
-            border-radius: 4px;
-            padding: 10px;
-            z-index: 1000;
-            max-width: 200px;
-            display: none;
-            color: #232323;
-        }
-
-        .cityFrance {
-            background-color: #343434;
-            border-radius: 10px;
-            width: 400px;
-        }
-
-        .mapLegend {
-        }
-
-        .map {
-            position: relative;
-        }
 
         h1 {
             font-size: 30px;
@@ -73,15 +47,34 @@
             margin-left: 5px;
         }
 
-        .map {
+        /* Specific mapael css class are below
+         * 'mapael' class is added by plugin
+        */
+
+        .mapael .mapTooltip {
+            position: absolute;
+            background-color: #fff;
+            moz-opacity: 0.80;
+            opacity: 0.80;
+            filter: alpha(opacity=80);
+            border-radius: 4px;
+            padding: 10px;
+            z-index: 1000;
+            max-width: 200px;
+            display: none;
+            color: #232323;
+        }
+
+        .mapael .map {
             margin-right: 228px;
             overflow: hidden;
             position: relative;
             background-color: #232323;
             border-radius: 5px;
         }
 
-        .zoomIn, .zoomOut {
+        .mapael .zoomIn,
+        .mapael .zoomOut {
             background-color: #dbdbdb;
             border: 1px solid #cfcfcf;
             color: #161616;
@@ -103,7 +96,7 @@
             user-select: none;
         }
 
-        .zoomOut {
+        .mapael .zoomOut {
             top: 35px;
         }
     </style>

diff --git 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;
-        }
     </style>
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>

diff --git 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;
         }
     </style>

diff --git 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;
-        }
     </style>
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
         }
     </style>

diff --git 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;
         }