4 <title>drawing examples</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
7 <meta name="description" content="An example of drawing with the mode property">
8 <meta name="author" content="Ryan Westphal">
9 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
10 <link rel="stylesheet" type="text/css" href="css/style.css" />
11 <style type="text/css">
28 <a href="../" class="docLink">< docs</a>
29 <a href="http://jsfiddle.net/ryanttb/2TAzc/embedded/" class="fiddleLink not-mobile"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
32 <p class="not-mobile">This example tests the three shape drawing modes: drawPoint, drawLineString and drawPolygon. Choose a tool below and start tapping!</p>
33 <p class="not-mobile">Double-tap to add the last point and end lines & polygons.</p>
34 <p class="not-mobile">You can remove individual points while drawing lines & polygons with the escape key.</p>
36 <input type="radio" id="drawPoint" name="mode" value="drawPoint" checked="checked" /><label for="drawPoint">point</label>
37 <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">line</label>
38 <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">polygon</label>
42 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
43 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
44 <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
47 // create a map, setting mode to drawPoint initially
48 var map = $("#map").geomap({
49 center: [-71.0595678, 42.3604823],
52 shape: function (e, geo) {
53 // the shape event triggers when a user draws a shape
54 // the geo object is a simple GeoJSON object: Point, LineString or Polygon
55 // we can append it directly to the map
56 map.geomap("append", geo);
60 // jQuery UI for pretty buttons
61 $("#modes").buttonset();
63 $("#modes input").click(function () {
64 // set the map's mode option based on value of the input clicked
65 // this will change the map's mode to drawPoint, drawLineString or drawPolygon
66 map.geomap("option", "mode", $(this).val());
72 var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
74 var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
75 g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
76 s.parentNode.insertBefore(g, s);
77 } (document, 'script'));