Skip to content

Instantly share code, notes, and snippets.

@claytantor

claytantor/froggy_styling_place.css

Created April 15, 2012 20:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save claytantor/2394637 to your computer and use it in GitHub Desktop.
Save claytantor/2394637 to your computer and use it in GitHub Desktop.
Download ZIP
Welocally Places For Developers
Raw
froggy_styling_place.css
/* omitting styles that are not customized */
/* overall style for place widget */
.welocally_place_widget {
font-family: 'Oxygen', verdana, sans-serif;
font-size: 0.8em;
border:2px solid #aca;
background-color: #586B49;
padding:0px; }
/* map size */
.wl_places_place_map_canvas { height: 320px; width: 100% }
/* place title */
.wl_places_place_name {
font-family: 'Della Respira', verdana, sans-serif;
font-size: 1.4em;
font-weight:bold;
color: #F1F5B3; }
.wl_places_place_web_link {
background: url(../images/froggy_web.png);
text-align: left;
display: inline-block;
width:70px; height:22px;
margin-right: 15px; }
.wl_places_place_web_link a {
margin-left: 22px;
position: relative;
top: 5px;
color: #B0C98F;
}
.wl_places_place_web_link
a:hover { color: #D9D757; }
Raw
froggy_styling_places.css
/* overall style */
.wl_places_multi_widget{
font-family:
'Oxygen', sans-serif;}
/* map size */
and for the multimap:
.wl_places_multi_map_canvas {
width: 100%; margin:5px auto;
height: 340px; border:
1px solid #aaaaaa; }
/* selected place area */
.wl_places_multi_selected {
background: #586B49;}
/* the custom infobox style */
.wl_places_multi_infobox {
color: #586B49;
list-style-type:none;
background: #DFEBA7;
border: 1px solid #5D754F;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}
/* infobox size */
.wl_places_multi_infobox li {
list-style-type:none;
width: 160px;
color: 586B49;}
.selectable_title{
font-family:
'Della Respira', sans-serif;
font-weight:bold;
color: #586B49; };
Raw
geodb_search_include.html
<!-- the geodb cloud search dev accounts -->
<script src="../../js/wl_geodb_search.js"
type="text/javascript"></script>
Raw
google_docs_place.js
var placeWidget =
new WELOCALLY_PlaceWidget();
placeWidget.initCfg({
imagePath: 'images/marker_all_base.png',
});
jQuery('#wl_place_widget_wrapper').html(placeWidget.makeWrapper());
var loader = new WELOCALLY_GoogleDocsLoad({
row: 5,
key: '0Avb_MOw4lfVndDh2S0ZhTFdYa0Y3Qk9uNEhHZnFYVUE',
observers: [placeWidget]
}).init();
loader.load();
Raw
google_docs_places.js
//the selected display
var placeSelected = new WELOCALLY_PlaceWidget();
//the multi map
var placesMulti =
new WELOCALLY_PlacesMultiWidget({
id:'multi_googledocs_1',
imagePath: 'images/marker_all_base.png',
showSelection: false,
showLetters: true,
overrideSelectableStyle: 'width: 100px;',
observers:[placeSelected]
}).init();
//setup the selected area
placeSelected.initCfg(cfg);
placesMulti.getSelectedArea().append(placeSelected.makeWrapper());
//this is the cloud google search, shows all places in sheet
var placesSearch = new WELOCALLY_GoogleDocsSearch({
key: '0Avb_MOw4lfVndDh2S0ZhTFdYa0Y3Qk9uNEhHZnFYVUE',
observers: [placesMulti]
}).init();
//get places from the google spreadsheet
placesSearch.search();
Raw
header_include.html
<head>
<!--scripts, google maps V3 (no key), jquery, jquery-ui, and welocally places -->
<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../js/min/wl_places_dev_all.min.js" type="text/javascript"></script>
<!-- the style sheets, welocally, froggy, placehound our your own -->
<link rel="stylesheet" href="css/wl_places.css" type="text/css" />
<link rel="stylesheet" href="css/wl_places_place.css" type="text/css" />
<link rel="stylesheet" href="css/wl_places_multi.css" type="text/css" />
<!-- google web fonts -->
<link href='http://fonts.googleapis.com/css?family=Della+Respira|Oxygen' rel='stylesheet' type='text/css'>
</head>
Raw
ie_header.html
<!-- only done for welocally theme -->
<!--[if IE]>
<link rel="stylesheet" href="css/ie/wl_places.css" type="text/css" />
<link rel="stylesheet" href="css/ie/wl_places_place.css" type="text/css" />
<link rel="stylesheet" href="css/ie/wl_places_multi.css" type="text/css" />
<![endif]-->
Raw
multiplace_widget_basics.js
//used for the place display when selected (observed)
var placeSelected = new WELOCALLY_PlaceWidget();
//config the widget, use the places array
var cfg = {
id:'multi_map_1',
imagePath: 'images/marker_all_base.png',
observers:[placeSelected],
places: places
};
//it both objects
placeSelected.initCfg(cfg);
var placesMulti =
new WELOCALLY_PlacesMultiWidget(cfg)
.init();
//setup the selected area, display selected
placesMulti.getSelectedArea().append(
placeSelected.makeWrapper());
Raw
placehound_multi_search.js
var placesMulti =
new WELOCALLY_PlacesMultiWidget(cfg)
.init();
//setup the selected area
placeSelected.initCfg(cfg);
placesMulti.getSelectedArea()
.append(placeSelected.makeWrapper());
//this is the cloud geodb search dev accounts
//the multi widget observes the search
var placesSearch =
new WELOCALLY_GeoDbSearch({
endpoint: 'https://api.welocally.com',
q: "Pizza",
loc: [40.714353,-74.005973],
radiusKm: 10.0,
observers: [placesMulti]
}).init();
placesSearch.search();
Raw
placehound_place.js
var cfg = {
id:'WL_3bYr793qL19cj1NIMYYD3K_37.812803_-122.246720@1303263344',
imagePath: 'images/marker_all_base.png',
showShare: false,
endpoint:'https://api.welocally.com',
baseUrl:'http://placehound.com',
};
var placeWidget =
new WELOCALLY_PlaceWidget(cfg)
.init();
placeWidget.loadRemote();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment