5 <title>USA States</title>
6 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
7 <meta name="description" content="A demo that pulls in USA state data from GeoCommons">
8 <meta name="author" content="Ryan Westphal">
9 <link rel="stylesheet" href="css/style.css" />
10 <style type="text/css">
11 #map { position: fixed; left: 0; top: 0; right: 0; bottom: 0; }
20 <a href="../" class="docLink">< docs</a>
21 <a href="http://jsfiddle.net/ryanttb/sh8uH/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
24 <p class="not-mobile">This map reads USA state boundary data as a GeoJSON FeatureCollection and draws it on top of OpenStreetMap.</p>
25 <p>Click a state to change its color!</p>
28 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
29 <script src="js/iecors.js"></script>
30 <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
33 var map = $("#map").geomap({
34 center: [-71.0595678, 42.3604823],
37 shape: function (e, geo) {
38 var state = map.geomap("find", geo, 0);
39 if (state.length > 0) {
40 map.geomap("remove", state[0]);
42 var color = Math.round(0xffffff * Math.random()).toString(16);
44 map.geomap("append", state[0], {
45 color: "#" + ( color.length == 5 ? "0" : "" ) + color
53 url: "http://data.jquerygeo.com/usastates.json",
55 success: function (result) {
57 map.geomap("append", states);
59 error: function (xhr) {
60 alert(xhr.statusText);