cleaning readme

2026-07-28 08:02:41 +02:00 · 2013-06-23 18:26:18 +02:00
parent d3a3fbbe81
commit 1819a7a4f1
1 changed files with 43 additions and 57 deletions
@@ -23,17 +23,16 @@ As Rapha
 Here is the simplest example that shows how to display an empty map of the world :

 **HTML :**
-`
-	&lt;div class="map1"&gt;Alternative content&lt;/div&gt;
-`
+
+    <div class="map1">Alternative content</div>;
+
 **JS :**
-`
-	$(".map1").mapael({
-		map : {
-			type : "world1"
-		}
-	});
-`
+
+    $(".map1").mapael({
+        map : {
+            type : "world1"
+        }
+    });

 ## Examples

@@ -55,32 +54,26 @@ Parameter 'options' :

 *   **map :** global options for the map

-        *   **name :** (String) Name of the map to load
+    *   **name :** (String) Name of the map to load
    *   **width :** (Integer) Width of the map
    *   **height :** (Integer) Height of the map
    *   **tooltip :** (Object) options for the tooltip
-
-                *   **cssClass :**  (String, default value : "mapTooltip") CSS class of the tooltip container.
+        *   **cssClass :**  (String, default value : "mapTooltip") CSS class of the tooltip container.
    *   **defaultArea :** (Object) Default options for all areas of the map
-
-                *   **attrs :** (Object, default value : {fill: "#343434", stroke: "#5d5d5d", stroke-width: 1, stroke-linejoin : "round"}) Default Raphael attributes for all areas. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options.
+        *   **attrs :** (Object, default value : {fill: "#343434", stroke: "#5d5d5d", stroke-width: 1, stroke-linejoin : "round"}) Default Raphael attributes for all areas. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options.
        *   **attrsHover :** (Object, default value : {fill: "#f38a03", animDuration : 300}) Raphael attributes on mouse hover for all areas. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options. You can set the animation duration with the 'animDuration' option.
        *   **textAttrs :** (Object, default value : {font-size: 15, fill:"#c7c7c7", text-anchor": "center"}) Default Raphael attributes for each text within areas. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options.
        *   **textAttrsHover :** (Object, default value : {fill:"#eaeaea", "animDuration" : 300}) Default Raphael attributes on mouse hover for each text within areas. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options. You can set the animation duration with the 'animDuration' option.
    *   **defaultPlot :** (Object) Default options for all plots of the map
-
-                *   **type :** (String, default value : "circle") Plot shape : 'circle' or 'square'.
+        *   **type :** (String, default value : "circle") Plot shape : 'circle' or 'square'.
        *   **size :** (Integer, default : 15) The default size of all plots.
        *   **attrs :** (Object, default value : {fill: "#0088db", stroke: "#fff", stroke-width: 0, stroke-linejoin : "round"}) Default Raphael attributes for all plots. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options.
        *   **attrsHover :** (Object, default value : {stroke-width: 3, animDuration : 300}) Raphael attributes on mouse hover for all plots. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options. You can set the animation duration with the 'animDuration' option.
        *   **textAttrs :** (Object, default value : {font-size: 15, fill:"#c7c7c7", text-anchor": "start"}) Default Raphael attributes for each text next to the plots. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options.
        *   **textAttrsHover :** (Object, default value : {fill:"#eaeaea", "animDuration" : 300}) Default Raphael attributes on mouse hover for each text next to the plots. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options. You can set the animation duration with the 'animDuration' option.
-
 *   **legend : (Object). Legend options**
-
-        *   **area :** (Object). Options for the areas legend.
-
-                *   **cssClass :** (String, default value : "mapLegend") CSS class of the container for the areas legend.
+    *   **area :** (Object). Options for the areas legend.
+        *   **cssClass :** (String, default value : "mapLegend") CSS class of the container for the areas legend.
        *   **display :** (Boolean, default value : false) Display the legend.
        *   **marginLeft :** (Integer, default value : 15) Margin left for each line of the legend.
        *   **marginLeftTitle :** (Integer, default value : 5) Margin left for title of the legend.
@@ -89,14 +82,12 @@ Parameter 'options' :
        *   **titleAttrs : **(Object, default value : {"font-size" : 18, fill : "#343434", "text-anchor" : "start"}) Raphael attributes for the title of the legend. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options.
        *   **labelAttrs : **(Object, default value : {"font-size" : 15, fill : "#343434", "text-anchor" : "start"}) Raphael attributes for the labels of each slice. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options.
        *   **slices :**(Array, default : []) Array of slice options. For each slice, options are provided as an object :
-
-                        *   **min :** (Float) The minimal value of the slice
+            *   **min :** (Float) The minimal value of the slice
            *   **max :** (Float) The maximal value of the slice
            *   **attrs :** (Object) Raphael attributes for all areas affected by the slice. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options. These attributes overload the default attributes from the 'defaultArea' options.
            *   **label :** (String) The label of the slice for the legend.
    *   **plot :** (Object). Options for the plots legend.
-
-                *   **cssClass :** (String, default value : "mapLegend") CSS class of the container for the areas legend.
+        *   **cssClass :** (String, default value : "mapLegend") CSS class of the container for the areas legend.
        *   **display :** (Boolean, default value : false) Display the legend.
        *   **marginLeft :** (Integer, default value : 15) Margin left for each line of the legend.
        *   **marginLeftTitle :** (Integer, default value : 5) Margin left for title of the legend.
@@ -105,57 +96,52 @@ Parameter 'options' :
        *   **titleAttrs : **(Object, default value : {"font-size" : 18, fill : "#343434", "text-anchor" : "start"}) Raphael attributes for the title of the legend. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options.
        *   **labelAttrs : **(Object, default value : {"font-size" : 15, fill : "#343434", "text-anchor" : "start"}) Raphael attributes for the labels of each slice. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options.
        *   **slices :** (Array, default : []) Array of options for each slice. For each slice, options are provided as an object :
-
-                        *   **size :** (Integer) Size of the plot
+            *   **size :** (Integer) Size of the plot
            *   **type :**  (String) Shape of the plot : 'circle' or 'square'
            *   **min :** (Float) The minimal value of the slice
            *   **max :** (Float) The maximal value of the slice
            *   **attrs :** (Object) Raphael attributes for all plots affected by the slice. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options. These attributes overload the default attributes from the 'defaultPlot' options.
            *   **label :** (String) The label of the slice for the legend.
 *   **areas :** (Object, default : []) List of specific options for each area. For each area (identified with a string in the JS file of the map), options are provided as an object :
-
-        *   **value :** (Float) Value associated with the area for the legend.
+    *   **value :** (Float) Value associated with the area for the legend.
    *   **attrs :** (Object) Raphael attributes for the area. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options. These attributes overload the default attributes from the 'defaultArea' options.
    *   **tooltip :** (Object) Options for the tooltip
-
-                *   **content :** (String) Tooltip content to display on mouse hover
+        *   **content :** (String) Tooltip content to display on mouse hover
 *   **plots :** (Array, default : []) Array of specific options for each plot. For each plot, options are provided as an object :
-
-        *   **type :** (String) Type of the plot : 'square' or 'circle'
+    *   **type :** (String) Type of the plot : 'square' or 'circle'
    *   **size :** (Integer) Size of the plot
    *   **value :** (Float) Value associated with the plot in order to get the size, attrs and type from the legend options.
    *   **latitude :** (Float) latitude of the plot
    *   **longitude :** (Float) longitude of the plot
    *   **attrs :** (Object) Raphael attributes for the plot. Go to the [Raphael reference](http://raphaeljs.com/reference.html#Element.attr) to view available options. These attributes overload the default attributes from the 'defaultPlot' options.
    *   **tooltip :** (Object) Options for the tooltip
-
-                *   **content :** (String) Tooltip content to display on mouse hover
+        *   **content :** (String) Tooltip content to display on mouse hover

 ## How to add new maps ?

 Maps for the world, France and USA countries are available with Mapael. It's easy to create new maps, so feel free to add new ones. 
 The first step is to retrieve the SVG file of the wanted map. You can find this kind of resources on [Natural Earth Data](http://www.naturalearthdata.com) or [Wikimedia Commons](http://commons.wikimedia.org/wiki/Category:SVG_maps). Then, you have to create a new JS file from this template :
-`
-(function($) {
-	$.extend(true, $.fn.mapael, 
-		{
-			maps :{
-				yourMapName : {
-					width : 600,
-					height : 500,
-					getCoords : function (lat, lon) {
-						// Convert latitude,longitude to x,y here
-						return {x : 1, y : 1};
-					}
-					elems : {
-						// List of SVG paths for building the map
-					}
-				}
-			}
-		}
-	);
-})(jQuery);
-`
+
+    (function($) {
+        $.extend(true, $.fn.mapael, 
+            {
+                maps :{
+                    yourMapName : {
+                        width : 600,
+                        height : 500,
+                        getCoords : function (lat, lon) {
+                            // Convert latitude,longitude to x,y here
+                            return {x : 1, y : 1};
+                        }
+                        elems : {
+                            // List of SVG paths for building the map
+                        }
+                    }
+                }
+            }
+        );
+    })(jQuery);
+
 You have to set the default width and height of your map. If you want to plot cities, you will have to customize the getCoords() function that takes as arguments a latitude and a longitude, and returns x,y coordinates depending on the map projection (mercator, miller, ...).
 Then, the last step is to open the SVG image with a text editor and copy the paths definitions into the "elems" parameter.
 In order to use your new map, you need to load the JS file, and set 'yourMapName' for the Mapael 'name' parameter.