Skip to content

Commit 761adb6

Browse files
andmcgregorandmcgregor
committed
Finished v1
0 parents  commit 761adb6

File tree

4 files changed

+233
-0
lines changed

4 files changed

+233
-0
lines changed

‎README.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Dashing Map Widget
2+
3+
Live demo: [http://dashing-map.herokuapp.com/](http://dashing-map.herokuapp.com/)
4+
5+
Created by: [@andmcgregor](http://www.twitter.com/andmcgregor)
6+
7+
## About
8+
9+
Uses the Google Maps API to display latitude and longitude coordinates.
10+
11+
## Screenshot
12+
13+
![Dashing map](https://s3-us-west-2.amazonaws.com/vineline/dashing_map.png)
14+
15+
## Installation
16+
17+
Copy the following files into a directory named `map` within the `widgets` directory of your Dashing app.
18+
19+
## Using the widget
20+
21+
Include a widget with a `data-view` of `Map`. You can also use `data-color` to color the map and set `data-type` to heat to display a heatmap rather than markers
22+
23+
<li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
24+
<div data-id="map" data-view="Map" data-title="Map" data-type="heat" data-color="#222222"></div>
25+
</li>
26+
27+
## License
28+
29+
The colour schemes and this widget are licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 3.0](http://creativecommons.org/licenses/by-nc-sa/3.0/) license.
30+
31+
<img src="http://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png" width="100">

‎map/map.coffee

+185
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
class Dashing.Map extends Dashing.Widget
2+
3+
ready: ->
4+
$(@node).removeClass('widget')
5+
color = $(@node).data("color")
6+
7+
if color
8+
style = [
9+
{
10+
"featureType": "water",
11+
"stylers": [
12+
{ "color": color }
13+
]
14+
},{
15+
"featureType": "road",
16+
"stylers": [
17+
{ "color": color },
18+
{ "weight": 0.5 }
19+
]
20+
},{
21+
"featureType": "poi.government",
22+
"stylers": [
23+
{ "lightness": 95 },
24+
{ "visibility": "off" }
25+
]
26+
},{
27+
"featureType": "transit",
28+
"stylers": [
29+
{ "color": "#ffffff" }
30+
]
31+
},{
32+
"featureType": "transit",
33+
"elementType" : "geometry",
34+
"stylers": [
35+
{ "weight": 0.5 }
36+
]
37+
},{
38+
"featureType": "transit",
39+
"elementType": "labels",
40+
"stylers": [
41+
{ "visibility": "off" }
42+
]
43+
},{
44+
"featureType": "road",
45+
"elementType": "labels",
46+
"stylers": [
47+
{ "visibility": "off" }
48+
]
49+
},{
50+
"featureType": "poi",
51+
"elementType": "labels",
52+
"stylers": [
53+
{ "visibility": "off" }
54+
]
55+
},{
56+
"featureType": "administrative.land_parcel" },{
57+
"featureType": "poi.park",
58+
"stylers": [
59+
{ "lightness": 90 },
60+
{ "color": "#ffffff" }
61+
]
62+
},{
63+
"featureType": "landscape",
64+
"stylers": [
65+
{ "color": "#ffffff" },
66+
{ "visibility": "on" }
67+
]
68+
},{
69+
"featureType": "poi.park",
70+
"stylers": [
71+
{ "color": "#ffffff" }
72+
]
73+
},{
74+
"featureType": "landscape.man_made",
75+
"stylers": [
76+
{ "color": color },
77+
{ "lightness": 95 }
78+
]
79+
},{
80+
"featureType": "poi",
81+
"stylers": [
82+
{ "visibility": "on" },
83+
{ "color": "#ffffff" }
84+
]
85+
},{
86+
"featureType": "poi",
87+
"elementType": "labels",
88+
"stylers": [
89+
{ "visibility": "off" }
90+
]
91+
},{
92+
"featureType": "landscape",
93+
"elementType": "labels",
94+
"stylers": [
95+
{ "visibility": "off" }
96+
]
97+
},{
98+
"featureType": "administrative.province",
99+
"elementType": "labels",
100+
"stylers": [
101+
{ "visibility": "off" }
102+
]
103+
},{
104+
"elementType": "administrative.locality",
105+
"elementType": "labels",
106+
"stylers": [
107+
{ "color": "#000000" },
108+
{ "weight": 0.1 }
109+
]
110+
},{
111+
"featureType": "administrative.country",
112+
"elementType": "labels.text",
113+
"stylers": [
114+
{ "color": "#000000" },
115+
{ "weight": 0.1 }
116+
]
117+
},{
118+
"featureType": "administrative.country",
119+
"elementType": "geometry",
120+
"stylers": [
121+
{ "color": color },
122+
{ "weight": 1.0 }
123+
]
124+
},{
125+
"featureType": "administrative.province",
126+
"elementType": "geometry",
127+
"stylers": [
128+
{ "color": color },
129+
{ "weight": 0.5 }
130+
]
131+
},{
132+
"featureType": "water",
133+
"elementType": "labels",
134+
"stylers": [
135+
{ "visibility": "off" }
136+
]
137+
}
138+
]
139+
else
140+
[]
141+
142+
options =
143+
zoom: 2
144+
center: new google.maps.LatLng(30, -98)
145+
disableDefaultUI: true
146+
draggable: false
147+
scrollwheel: false
148+
disableDoubleClickZoom: true
149+
styles: style
150+
151+
mapTypeId: google.maps.MapTypeId.ROADMAP
152+
@map = new google.maps.Map $(@node)[0], options
153+
@heat = []
154+
@markers = []
155+
156+
onData: (data) ->
157+
return unless @map
158+
if $(@node).data("type") == 'heat'
159+
marker.set('map', null) for marker in @heat
160+
@markers = []
161+
162+
@markers.push new google.maps.LatLng(marker[0],marker[1]) for marker in data.markers
163+
164+
pointArray = new google.maps.MVCArray @markers
165+
@heat.push new google.maps.visualization.HeatmapLayer
166+
data: pointArray
167+
map: @map
168+
169+
else
170+
marker.set('map', null) for marker in @markers
171+
@markers = []
172+
for marker in data.markers
173+
marker_object = new google.maps.Marker
174+
position: new google.maps.LatLng(marker[0],marker[1])
175+
map: @map
176+
@markers.push marker_object
177+
178+
if @markers.length == 1
179+
@map.set('zoom', 9)
180+
@map.set('center', @markers[0].position)
181+
else
182+
bounds = new google.maps.LatLngBounds
183+
bounds.extend(marker.position || marker) for marker in @markers
184+
@map.panToBounds(bounds)
185+
@map.fitBounds(bounds)

‎map/map.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div data-bind="map"></div>

‎map/map.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
p {
2+
color: #000;
3+
}
4+
5+
#map {
6+
width: 100%;
7+
height: 100%;
8+
}
9+
10+
.widget-map {
11+
background: #fff;
12+
text-align: center;
13+
width: 100%;
14+
display: table-cell;
15+
vertical-align: middle;
16+
}

0 commit comments

Comments
 (0)