Added U.S. Territories, hover states for text labels, iPad/iPhone support

example/index.html

@@ -16,9 +16,9 @@
 
 	<script src="../lib/raphael.js"></script>
 	<!-- <script src="scale.raphael.js"></script> -->
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
+	<script src="jquery-3.5.1.min.js"></script>
 	<script src="color.jquery.js"></script>
-	<script src="../us-map.js"></script>
+	<script src="../jquery.usmap.min.js"></script>
 
 	<script>
 	$(document).ready(function() {
@@ -29,6 +29,9 @@
 	    'stateSpecificHoverStyles': {
 	      'HI' : {fill: '#ff0'}
 	    },
+	    'stateSpecificLabelTextStyles': {
+		    'HI' : { fill: '#333333' }
+	    },
 
 	    'mouseoverState': {
 	      'HI' : function(event, data) {
@@ -42,7 +45,7 @@
 	        .text('Click '+data.name+' on map 1')
 	        .stop()
 	        .css('backgroundColor', '#ff0')
-	        .animate({backgroundColor: '#ddd'}, 1000);
+	        .animate({backgroundColor: '#ddd'}, 500);
 	    }
 	  });
 
@@ -52,6 +55,9 @@
 	      "stroke-width": 1,
 	      'stroke' : '#036'
 	    },
+	    'stateSpecificLabelTextStyles': {
+		    'HI' : { fill: '#025' }
+	    },
 	    'stateHoverStyles': {
 	      fill: 'teal'
 	    },
@@ -61,7 +67,7 @@
 	        .text('Click '+data.name+' on map 2')
 	        .stop()
 	        .css('backgroundColor', '#af0')
-	        .animate({backgroundColor: '#ddd'}, 1000);
+	        .animate({backgroundColor: '#ddd'}, 500);
 	    }
 	  });
 
@@ -72,6 +78,34 @@
 	  $('#out-md').click(function(event){
 	    $('#map').usmap('trigger', 'MD', 'mouseout', event);
 	  });
+
+      $('#us-map-terr').usmap({
+	    'stateStyles': {
+		    fill: '#eef3fc',
+		    stroke: '#336699'
+	    },
+	    'stateHoverAnimation': false,
+	    'stateHoverStyles': {
+		    fill: '#336699',
+		    stroke: '#336699'
+	    },
+	    'labelBackingStyles': {
+		    fill: '#eef3fc',
+		    stroke: '#336699'
+	    },
+	    'labelTextStyles': {
+		    fill: '#336699'
+	    },
+	    'labelTextHoverStyles': {
+		    fill: '#ffffff'
+	    },
+	    'labelBackingHoverStyles': {
+		    fill: '#336699'
+	    },
+        'includeTerritories': [ 'PR', 'VI' ],
+	    'click' : function(event, data) {
+	    }
+      });
 	});
 	</script>
 </head>
@@ -82,5 +116,8 @@
 
   <button id="over-md">mouseover MD</button> <button id="out-md">mouseout MD</button>
   <div id="map2" style="width: 300px; height: 300px;"></div>
+
+  <h3>Map including Puerto Rico and U.S. Virgin Islands</h3>
+  <div id="us-map-terr" style="width: 700px; height: 500px;"></div>
 </body>
 </html>