ecwec · bbene · Apr 6, 2015 · Apr 6, 2015 · Jul 19, 2015
diff --git a/www/app/config/config.yml b/www/app/config/config.yml
@@ -29,6 +29,8 @@ framework:
 twig:
     debug:            "%kernel.debug%"
     strict_variables: "%kernel.debug%"
+    globals:
+        map_api_key: %google_maps_api_key%
 
 # Assetic Configuration
 assetic:

diff --git a/www/app/config/parameters.yml.dist b/www/app/config/parameters.yml.dist
@@ -21,3 +21,6 @@ parameters:
 
     # Api key for aprs.fi.  Sign up for an account there to get a key.
     aprs_fi_api_key: ReplaceThisWIthYourKey
+
+    # Api key for Google Maps
+    google_maps_api_key: ReplaceThisWithYourKey
diff --git a/www/src/Ecwec/Bundle/CoreBundle/Controller/DefaultController.php b/www/src/Ecwec/Bundle/CoreBundle/Controller/DefaultController.php
@@ -46,7 +46,6 @@ public function indexAction()
                 'name' => $station['name'],
                 'temp' => $temp
             ];
-            ///var_dump($station['temp']);
         }
 
         return $this->render('CoreBundle::index.html.twig', array('stations' => $stations));

diff --git a/www/src/Ecwec/Bundle/CoreBundle/Menu/Builder.php b/www/src/Ecwec/Bundle/CoreBundle/Menu/Builder.php
@@ -14,6 +14,8 @@ public function mainMenu(FactoryInterface $factory, array $options)
 
         $menu->addChild('Home', array('route' => 'core_homepage'));
         $menu->addChild('Stations', array('route' => 'station'));
+        $menu['Stations']->addChild('All', array('route' => 'station'));
+        $menu['Stations']->addChild('Map', array('route' => 'station_map'));
 
         // access services from the container!
         $em = $this->container->get('doctrine')->getManager();

diff --git a/www/src/Ecwec/Bundle/CoreBundle/Resources/views/layout.html.twig b/www/src/Ecwec/Bundle/CoreBundle/Resources/views/layout.html.twig
@@ -14,6 +14,9 @@
     <!-- HTML5 Shim and Respond.js add IE8 support of HTML5 elements and media queries -->
     {% include 'BraincraftedBootstrapBundle::ie8-support.html.twig' %}
 
+    {% block topjs %}
+    {% endblock %}
+
 </head>
 
 <body>
@@ -44,5 +47,7 @@
 <script src="{{ asset('js/jquery.js') }}"></script>
 <!-- Include all JavaScripts, compiled by Assetic -->
 <script src="{{ asset('js/bootstrap.js') }}"></script>
+{% block bottomjs %}
+{% endblock %}
 </body>
 </html>
diff --git a/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Controller/StationController.php b/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Controller/StationController.php
@@ -29,6 +29,21 @@ public function indexAction()
             'entities' => $entities,
         ));
     }
+
+    /**
+     * List all Stations on a map.
+     */
+    public function mapAction()
+    {
+        $em = $this->getDoctrine()->getManager();
+
+        $entities = $em->getRepository('WeatherDataProviderBundle:Station')->findAll();
+
+        return $this->render('WeatherDataProviderBundle:Station:map.html.twig', array(
+            'entities' => $entities,
+        ));
+    }
+
     /**
      * Creates a new Station entity.
      *

diff --git a/www/src/Ecwec/Bundle/WeatherDataProviderBundle/DataFixtures/ORM/LoadStationData.php b/www/src/Ecwec/Bundle/WeatherDataProviderBundle/DataFixtures/ORM/LoadStationData.php
@@ -15,15 +15,27 @@ class LoadStationData implements FixtureInterface
     public function load(ObjectManager $manager)
     {
         $station = new Station();
-        $station->setObjectId('AJ4NR');
-        $station->setName('AJ4NR');
-        $station->setDescription('AJ4NR');
+        $station->setObjectId('WIWIWXOMR');
+        $station->setName('WIWIWXOMR');
+        $station->setDescription('WIWIWXOMR');
+        $station->setLatitude(44.045);
+        $station->setLongitude(-88.704);
         $manager->persist($station);
 
         $station = new Station();
-        $station->setObjectId('EW3427');
-        $station->setName('EW3427');
-        $station->setDescription('EW3427');
+        $station->setObjectId('WIWIWXERK');
+        $station->setName('WIWIWXERK');
+        $station->setDescription('WIWIWXERK');
+        $station->setLatitude(44.004);
+        $station->setLongitude(-88.842);
+        $manager->persist($station);
+
+        $station = new Station();
+        $station->setObjectId('WIWIWXWLF');
+        $station->setName('WIWIWXWLF');
+        $station->setDescription('WIWIWXWLF');
+        $station->setLatitude(44.213);
+        $station->setLongitude(-88.846);
         $manager->persist($station);
 
         $manager->flush();

diff --git a/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Entity/Station.php b/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Entity/Station.php
@@ -29,6 +29,16 @@ class Station
      */
     private $description;
 
+    /**
+     * @var number
+     */
+    private $latitude;
+
+    /**
+     * @var number
+     */
+    private $longitude;
+
 
     /**
      * Get id
@@ -108,4 +118,36 @@ public function getDescription()
     {
         return $this->description;
     }
+
+    /**
+     * @return float
+     */
+    public function getLatitude()
+    {
+        return $this->latitude;
+    }
+
+    /**
+     * @param float $latitude
+     */
+    public function setLatitude($latitude)
+    {
+        $this->latitude = $latitude;
+    }
+
+    /**
+     * @return float
+     */
+    public function getLongitude()
+    {
+        return $this->longitude;
+    }
+
+    /**
+     * @param float $longitude
+     */
+    public function setLongitude($longitude)
+    {
+        $this->longitude = $longitude;
+    }
 }
diff --git a/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Form/StationType.php b/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Form/StationType.php
@@ -18,6 +18,8 @@ public function buildForm(FormBuilderInterface $builder, array $options)
             ->add('objectId')
             ->add('name')
             ->add('description')
+            ->add('latitude')
+            ->add('longitude')
         ;
     }
 

diff --git a/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Resources/config/doctrine/Station.orm.yml b/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Resources/config/doctrine/Station.orm.yml
@@ -18,4 +18,10 @@ Ecwec\Bundle\WeatherDataProviderBundle\Entity\Station:
             length: 255
         description:
             type: text
+        latitude:
+            type: float
+            length: 255
+        longitude:
+            type: float
+            length: 255
     lifecycleCallbacks: {  }
diff --git a/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Resources/config/routing/station.yml b/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Resources/config/routing/station.yml
@@ -2,6 +2,10 @@ station:
     path:     /
     defaults: { _controller: "WeatherDataProviderBundle:Station:index" }
 
+station_map:
+    path:     /map
+    defaults: { _controller: "WeatherDataProviderBundle:Station:map" }
+
 station_show:
     path:     /{id}/show
     defaults: { _controller: "WeatherDataProviderBundle:Station:show" }

diff --git a/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Resources/views/Station/map.html.twig b/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Resources/views/Station/map.html.twig
@@ -0,0 +1,58 @@
+{% extends 'CoreBundle::layout.html.twig' %}
+{% set firstStation = entities|first %}
+{% block topjs %}
+    <style type="text/css">
+        #map-canvas { height: 400px; width: 400px; margin: 10px 0; padding: 0;}
+    </style>
+
+    <script type="text/javascript"
+            src="https://maps.googleapis.com/maps/api/js?key={{ map_api_key }}">
+    </script>
+    <script type="text/javascript">
+        function initialize() {
+            var mapOptions = {
+                center: { lat: {{ firstStation.latitude }}, lng: {{firstStation.longitude }}},
+                zoom: 10
+            };
+            var map = new google.maps.Map(document.getElementById('map-canvas'),
+                    mapOptions);
+
+            {% for entity in entities %}
+            var marker = new google.maps.Marker({
+                position: { lat: {{ entity.latitude }}, lng: {{entity.longitude }}},
+                map: map,
+                title:"{{ entity.objectId }}",
+                url: "{{ path('station_show', {'id' : entity.id}) }}"
+            });
+            google.maps.event.addListener(marker, 'click', function() {
+                window.location.href = this.url;
+            });
+            {% endfor %}
+
+
+        }
+        google.maps.event.addDomListener(window, 'load', initialize);
+    </script>
+{% endblock %}
+
+{% block title %}Stations{% endblock %}
+{% block content -%}
+    <a class="btn btn-primary" href="{{ path('station_new') }}">New</a>
+    <div id="map-canvas"></div>
+{% endblock %}
+
+{% block bottomjs %}
+    <script type="application/javascript">
+        function resizeBootstrapMap() {
+            var mapParentWidth = $('.container').width();
+            var mapContainer = $('#map-canvas');
+            mapContainer.width(mapParentWidth);
+            mapContainer.height(3 * mapParentWidth / 4);
+            google.maps.event.trigger(mapContainer, 'resize');
+        }
+
+        // resize the map whenever the window is resized and set the initial size.
+        $(window).resize(resizeBootstrapMap);
+        $(window).ready(resizeBootstrapMap);
+    </script>
+{% endblock %}
diff --git a/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Resources/views/Station/show.html.twig b/www/src/Ecwec/Bundle/WeatherDataProviderBundle/Resources/views/Station/show.html.twig
@@ -1,5 +1,32 @@
 {% extends 'CoreBundle::layout.html.twig' %}
 
+{% block topjs %}
+    <style type="text/css">
+        #map-canvas { height: 400px; width: 400px; margin: 10px 0; padding: 0;}
+    </style>
+
+    <script type="text/javascript"
+            src="https://maps.googleapis.com/maps/api/js?key={{ map_api_key }}">
+    </script>
+    <script type="text/javascript">
+        function initialize() {
+            var mapOptions = {
+                center: { lat: {{ entity.latitude }}, lng: {{entity.longitude }}},
+                zoom: 14
+            };
+            var map = new google.maps.Map(document.getElementById('map-canvas'),
+                    mapOptions);
+
+            var marker = new google.maps.Marker({
+                position: { lat: {{ entity.latitude }}, lng: {{entity.longitude }}},
+                map: map,
+                title:"{{ entity.objectId }}"
+            });
+        }
+        google.maps.event.addDomListener(window, 'load', initialize);
+    </script>
+{% endblock %}
+
 {% block title %}Station{% endblock %}
 
 {% block content -%}
@@ -21,10 +48,32 @@
                 <th>Description</th>
                 <td>{{ entity.description }}</td>
             </tr>
+            <tr>
+                <th>Coordinates</th>
+                <td>{{ entity.latitude }}, {{ entity.longitude }}</td>
+            </tr>
         </tbody>
     </table>
 
+    <div id="map-canvas"></div>
+
     <a class="btn btn-sml btn-info" href="{{ path('station') }}">Back to the list</a><br/><br/>
 
     {{ form(delete_form) }}
 {% endblock %}
+
+{% block bottomjs %}
+    <script type="application/javascript">
+        function resizeBootstrapMap() {
+            var mapParentWidth = $('.container').width();
+            var mapContainer = $('#map-canvas');
+            mapContainer.width(mapParentWidth);
+            mapContainer.height(3 * mapParentWidth / 4);
+            google.maps.event.trigger(mapContainer, 'resize');
+        }
+
+        // resize the map whenever the window is resized and set the initial size.
+        $(window).resize(resizeBootstrapMap);
+        $(window).ready(resizeBootstrapMap);
+    </script>
+{% endblock %}