show maps!

controllers/controllers.php

@@ -50,7 +50,16 @@ $app->get('/new', function() use($app) {
   }
 });
 
-$app->get('/new/options.json', function() use($app) {
+$app->get('/pebble/settings', function() use($app) {
+  if($user=require_login($app)) {
+    $html = render('pebble-settings', array(
+      'title' => 'Pebble Settings'
+    ));
+    $app->response()->body($html);
+  }
+});
+
+$app->get('/pebble/options.json', function() use($app) {
   $app->response()['Content-Type'] = 'application/json';
   $app->response()->body(json_encode(array(
     'sections' => array(
@@ -207,6 +216,18 @@ $app->post('/post', function() use($app) {
   }
 });
 
+
+$app->get('/map.png', function() use($app) {
+  $params = $app->request()->params();
+  $url = static_map($params['latitude'], $params['longitude']);
+  $ch = curl_init($url);
+  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+  $img = curl_exec($ch);
+  $app->response()['Content-type'] = 'image/png';
+  $app->response()->body($img);
+});
+
+
 $app->get('/:domain', function($domain) use($app) {
   $params = $app->request()->params();
 
@@ -271,3 +292,6 @@ $app->get('/:domain/:entry', function($domain, $entry_id) use($app) {
   $app->response()->body($html);
 });
 
+
+
+

lib/helpers.php

@@ -169,8 +169,8 @@ function get_syndication_targets(&$user) {
   );
 }
 
-function static_map($latitude, $longitude, $height=180, $width=700, $zoom=14) {
-  return 'http://static-maps.pdx.esri.com/img.php?marker[]=lat:' . $latitude . ';lng:' . $longitude . ';icon:small-blue-cutout&basemap=gray&width=' . $width . '&height=' . $height . '&zoom=' . $zoom;
+function static_map($latitude, $longitude, $height=174, $width=300, $zoom=14) {
+  return 'http://static-maps.pdx.esri.com/img.php?marker[]=lat:' . $latitude . ';lng:' . $longitude . ';icon:small-green-cutout&basemap=topo&width=' . $width . '&height=' . $height . '&zoom=' . $zoom;
 }
 
 function relative_time($date) {

public/css/style.css

@@ -301,12 +301,17 @@ ul.entries {
   padding-left: 0;
 }
 ul.entries li {
+  position: relative;
   margin-left: 0;
   margin-bottom: 20px;
   -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
   -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
   box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
 }
+ul.entries .map-img {
+  position: absolute;
+  right: 0;
+}
 
 ul.entries .author {
   background-color: #e3f0d0;

views/partials/entry.php

@@ -1,5 +1,9 @@
 <li class="h-entry">
 
+  <?php if($this->entry->latitude): ?>
+    <img src="/map.png?latitude=<?= $this->entry->latitude ?>&amp;longitude=<?= $this->entry->longitude ?>" class="map-img">
+  <?php endif; ?>
+
   <div class="author h-card p-author">
     <a class="photo" href="http://<?= $this->user->url ?>"><img src="<?= $this->user->photo_url ?>" class="u-photo" height="50" width="50" alt="<?= $this->user->url ?>"></a> 
     <a class="name p-name" href="http://<?= $this->user->url ?>"><?= $this->user->name ?></a>