Last active
April 11, 2017 18:11
-
-
Save andmcgregor/6386263 to your computer and use it in GitHub Desktop.
Revisions
-
andmcgregor revised this gist
Aug 30, 2013 . 1 changed file with 9 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -16,6 +16,14 @@ Uses the Google Maps API to display latitude and longitude coordinates. Copy the following files into a directory named `map` within the `widgets` directory of your Dashing app. Or type `dashing install 6386263` from your project directory. Add the following line of code to your layout.erb file: <script src="http://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_KEY'] %>&sensor=false&libraries=visualization"></script> And finally set the environment variable `GOOGLE_MAPS_KEY` with your Google Maps API key. ## Using the widget 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 @@ -28,4 +36,4 @@ Include a widget with a `data-view` of `Map`. You can also use `data-color` to c This widget is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 3.0](http://creativecommons.org/licenses/by-nc-sa/3.0/) license. <img src="http://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png" width="100"> -
Aug 30, 2013 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -26,6 +26,6 @@ Include a widget with a `data-view` of `Map`. You can also use `data-color` to c ## License This widget is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 3.0](http://creativecommons.org/licenses/by-nc-sa/3.0/) license. <img src="http://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png" width="100"> -
Aug 30, 2013 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,7 @@ # Dashing Map Widget Live demo: [http://dashing-map.herokuapp.com/](http://dashing-map.herokuapp.com/) Created by: [@andmcgregor](http://www.twitter.com/andmcgregor) ## About -
Aug 30, 2013 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,30 @@ # Dashing Map Widget Live demo: [http://dashing-map.herokuapp.com/](http://dashing-map.herokuapp.com/) Created by: [@andmcgregor](http://www.twitter.com/andmcgregor) ## About Uses the Google Maps API to display latitude and longitude coordinates. ## Screenshot  ## Installation Copy the following files into a directory named `map` within the `widgets` directory of your Dashing app. ## Using the widget 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 <li data-row="1" data-col="1" data-sizex="3" data-sizey="2"> <div data-id="map" data-view="Map" data-title="Map" data-type="heat" data-color="#222222"></div> </li> ## License 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. <img src="http://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png" width="100"> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,185 @@ class Dashing.Map extends Dashing.Widget ready: -> $(@node).removeClass('widget') color = $(@node).data("color") if color style = [ { "featureType": "water", "stylers": [ { "color": color } ] },{ "featureType": "road", "stylers": [ { "color": color }, { "weight": 0.5 } ] },{ "featureType": "poi.government", "stylers": [ { "lightness": 95 }, { "visibility": "off" } ] },{ "featureType": "transit", "stylers": [ { "color": "#ffffff" } ] },{ "featureType": "transit", "elementType" : "geometry", "stylers": [ { "weight": 0.5 } ] },{ "featureType": "transit", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "road", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.land_parcel" },{ "featureType": "poi.park", "stylers": [ { "lightness": 90 }, { "color": "#ffffff" } ] },{ "featureType": "landscape", "stylers": [ { "color": "#ffffff" }, { "visibility": "on" } ] },{ "featureType": "poi.park", "stylers": [ { "color": "#ffffff" } ] },{ "featureType": "landscape.man_made", "stylers": [ { "color": color }, { "lightness": 95 } ] },{ "featureType": "poi", "stylers": [ { "visibility": "on" }, { "color": "#ffffff" } ] },{ "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "landscape", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.province", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "elementType": "administrative.locality", "elementType": "labels", "stylers": [ { "color": "#000000" }, { "weight": 0.1 } ] },{ "featureType": "administrative.country", "elementType": "labels.text", "stylers": [ { "color": "#000000" }, { "weight": 0.1 } ] },{ "featureType": "administrative.country", "elementType": "geometry", "stylers": [ { "color": color }, { "weight": 1.0 } ] },{ "featureType": "administrative.province", "elementType": "geometry", "stylers": [ { "color": color }, { "weight": 0.5 } ] },{ "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ] else [] options = zoom: 2 center: new google.maps.LatLng(30, -98) disableDefaultUI: true draggable: false scrollwheel: false disableDoubleClickZoom: true styles: style mapTypeId: google.maps.MapTypeId.ROADMAP @map = new google.maps.Map $(@node)[0], options @heat = [] @markers = [] onData: (data) -> return unless @map if $(@node).data("type") == 'heat' marker.set('map', null) for marker in @heat @markers = [] @markers.push new google.maps.LatLng(marker[0],marker[1]) for marker in data.markers pointArray = new google.maps.MVCArray @markers @heat.push new google.maps.visualization.HeatmapLayer data: pointArray map: @map else marker.set('map', null) for marker in @markers @markers = [] for marker in data.markers marker_object = new google.maps.Marker position: new google.maps.LatLng(marker[0],marker[1]) map: @map @markers.push marker_object if @markers.length == 1 @map.set('zoom', 9) @map.set('center', @markers[0].position) else bounds = new google.maps.LatLngBounds bounds.extend(marker.position || marker) for marker in @markers @map.panToBounds(bounds) @map.fitBounds(bounds) This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ <div data-bind="map"></div> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,16 @@ p { color: #000; } #map { width: 100%; height: 100%; } .widget-map { background: #fff; text-align: center; width: 100%; display: table-cell; vertical-align: middle; }