├── index.jade
├── README.txt
├── config.rb
├── index.html
├── sass
└── style.sass
├── license.txt
├── css
└── style.css
└── js
└── index.js
/index.jade:
--------------------------------------------------------------------------------
1 | body(onload="initialize()")
2 | h3 Drag or re-shape for coordinates to display below
3 | h3
4 | a(href="http://codepen.io/jhawes/blog/creating-a-real-estate-polygon-tool") See blog post
5 | #map-canvas
6 | .lngLat
7 | span.one Lat
8 | span.two ,Lng
9 | button#clipboard-btn(onclick="copyToClipboard(document.getElementById('info').innerHTML)") Copy to Clipboard
10 | textarea#info
--------------------------------------------------------------------------------
/README.txt:
--------------------------------------------------------------------------------
1 | A Pen created at CodePen.io. You can find this one at http://codepen.io/jhawes/pen/ujdgK.
2 |
3 | Outputs the coordinates (longitude, latitude) for Google Maps whenever the Polygon is moved or re-shaped. Recently added a 'Copy to Clipboard' button and had data output into a textarea for easier copying & pasting
4 |
5 | I originally built this to build map outlines for neighborhoods, villages, districts and counties - specifically for real estate purposes.
--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
1 | # Require any additional compass plugins here.
2 |
3 | # Set this to the root of your project when deployed:
4 | http_path = "/"
5 | css_dir = "css"
6 | sass_dir = "sass"
7 | images_dir = "images"
8 | javascripts_dir = "js"
9 | fonts_dir = "fonts"
10 |
11 | output_style = :expanded
12 |
13 | # To enable relative paths to assets via compass helper functions. Uncomment:
14 | # relative_assets = true
15 |
16 | # To disable debugging comments that display the original location of your selectors. Uncomment:
17 | # line_comments = false
18 | color_output = false
19 |
20 |
21 | # If you prefer the indented syntax, you might want to regenerate this
22 | # project again passing --syntax sass, or you can uncomment this:
23 | # preferred_syntax = :sass
24 | # and then run:
25 | # sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass
26 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Google Maps Polygon Coordinates Tool
7 |
8 |
9 |
10 |
11 |
12 |
13 | Drag or re-shape for coordinates to display below
14 |
15 |
16 | Lat,Lng
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/sass/style.sass:
--------------------------------------------------------------------------------
1 | @import compass
2 |
3 | body
4 | background: #222
5 | h3
6 | margin: 4px 0
7 | padding: 5px 0
8 | font-family: arial, sans-serif
9 | width: 100%
10 | color: #fff
11 | a
12 | color: #00B2EE
13 | text-decoration: none
14 | &:hover
15 | color: lighten(#00B2EE, 20%)
16 | #map-canvas
17 | width: auto
18 | height: 500px
19 | #info
20 | color: #222
21 | .lngLat
22 | color: #fff
23 | margin-bottom: 5px
24 | .one
25 | padding-left: 250px
26 | .two
27 | padding-left: 34px
28 | #clipboard-btn
29 | float: left
30 | margin-right: 10px
31 | padding: 6px 8px
32 | +border-radius(3px)
33 | #info
34 | height: 140px
35 | float: left
36 | margin-bottom: 30px
37 | border: solid 2px #eee
38 | +border-radius(3px)
39 | +box-shadow(inset 0 2px 5px #444)
40 | #info, .lngLat
41 | font-family: arial, sans-serif
42 | font-size: 12px
43 | padding-top: 10px
44 | width: 270px
45 |
--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
1 |
2 |
11 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #222;
3 | }
4 |
5 | h3 {
6 | margin: 4px 0;
7 | padding: 5px 0;
8 | font-family: arial, sans-serif;
9 | width: 100%;
10 | color: #fff;
11 | }
12 | h3 a {
13 | color: #00B2EE;
14 | text-decoration: none;
15 | }
16 | h3 a:hover {
17 | color: #55d4ff;
18 | }
19 |
20 | #map-canvas {
21 | width: auto;
22 | height: 500px;
23 | }
24 |
25 | #info {
26 | color: #222;
27 | }
28 |
29 | .lngLat {
30 | color: #fff;
31 | margin-bottom: 5px;
32 | }
33 | .lngLat .one {
34 | padding-left: 250px;
35 | }
36 | .lngLat .two {
37 | padding-left: 34px;
38 | }
39 |
40 | #clipboard-btn {
41 | float: left;
42 | margin-right: 10px;
43 | padding: 6px 8px;
44 | -moz-border-radius: 3px;
45 | -webkit-border-radius: 3px;
46 | border-radius: 3px;
47 | }
48 |
49 | #info {
50 | height: 140px;
51 | float: left;
52 | margin-bottom: 30px;
53 | border: solid 2px #eee;
54 | -moz-border-radius: 3px;
55 | -webkit-border-radius: 3px;
56 | border-radius: 3px;
57 | -moz-box-shadow: inset 0 2px 5px #444;
58 | -webkit-box-shadow: inset 0 2px 5px #444;
59 | box-shadow: inset 0 2px 5px #444;
60 | }
61 |
62 | #info, .lngLat {
63 | font-family: arial, sans-serif;
64 | font-size: 12px;
65 | padding-top: 10px;
66 | width: 270px;
67 | }
68 |
--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
1 | //var myPolygon;
2 | function initialize() {
3 | // Map Center
4 | var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
5 | // General Options
6 | var mapOptions = {
7 | zoom: 12,
8 | center: myLatLng,
9 | mapTypeId: google.maps.MapTypeId.RoadMap
10 | };
11 | var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
12 | // Polygon Coordinates
13 | var triangleCoords = [
14 | new google.maps.LatLng(33.5362475, -111.9267386),
15 | new google.maps.LatLng(33.5104882, -111.9627875),
16 | new google.maps.LatLng(33.5004686, -111.9027061)
17 | ];
18 | // Styling & Controls
19 | myPolygon = new google.maps.Polygon({
20 | paths: triangleCoords,
21 | draggable: true, // turn off if it gets annoying
22 | editable: true,
23 | strokeColor: '#FF0000',
24 | strokeOpacity: 0.8,
25 | strokeWeight: 2,
26 | fillColor: '#FF0000',
27 | fillOpacity: 0.35
28 | });
29 |
30 | myPolygon.setMap(map);
31 | //google.maps.event.addListener(myPolygon, "dragend", getPolygonCoords);
32 | google.maps.event.addListener(myPolygon.getPath(), "insert_at", getPolygonCoords);
33 | //google.maps.event.addListener(myPolygon.getPath(), "remove_at", getPolygonCoords);
34 | google.maps.event.addListener(myPolygon.getPath(), "set_at", getPolygonCoords);
35 | }
36 |
37 | //Display Coordinates below map
38 | function getPolygonCoords() {
39 | var len = myPolygon.getPath().getLength();
40 | var htmlStr = "";
41 | for (var i = 0; i < len; i++) {
42 | htmlStr += "new google.maps.LatLng(" + myPolygon.getPath().getAt(i).toUrlValue(5) + "), ";
43 | //Use this one instead if you want to get rid of the wrap > new google.maps.LatLng(),
44 | //htmlStr += "" + myPolygon.getPath().getAt(i).toUrlValue(5);
45 | }
46 | document.getElementById('info').innerHTML = htmlStr;
47 | }
48 | function copyToClipboard(text) {
49 | window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
50 | }
--------------------------------------------------------------------------------