Merge pull request #1 from obisconcept/1.0

1.0.2
obisconcept · Aug 5, 2016 · 9e3448d · 9e3448d
2 parents ceb0d85 + 27eb524
commit 9e3448d
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 16 deletions.
diff --git a/Configuration/NodeTypes.GoogleMap.yaml b/Configuration/NodeTypes.GoogleMap.yaml
@@ -7,15 +7,17 @@
   ui:
     label: i18n
     icon: 'fa fa-globe'
+    inlineEditable: TRUE
     inspector:
       groups:
         'properties':
           label: i18n
           position: 10
+          icon: 'fa fa-cog'
         'coordinates':
           label: i18n
           position: 10
-          collapsed: TRUE
+          icon: 'fa fa-location-arrow'
   properties:
     height:
       type: integer
@@ -27,6 +29,65 @@
           group: 'properties'
       validation:
         'TYPO3.Neos/Validation/IntegerValidator':
+    type:
+      type: string
+      defaultValue: 'ROADMAP'
+      ui:
+        label: 'Type'
+        reloadIfChanged: TRUE
+        inspector:
+          group: 'properties'
+          editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
+          editorOptions:
+            values:
+              ROADMAP:
+                label: i18n
+              SATELLITE:
+                label: i18n
+              HYBRID:
+                label: i18n
+              TERRAIN:
+                label: i18n
+    draggable:
+      type: boolean
+      defaultValue: TRUE
+      ui:
+        label: i18n
+        reloadIfChanged: TRUE
+        inspector:
+          group: 'properties'
+    scrollwheel:
+      type: boolean
+      defaultValue: TRUE
+      ui:
+        label: i18n
+        reloadIfChanged: TRUE
+        inspector:
+          group: 'properties'
+    mapTypeControl:
+      type: boolean
+      defaultValue: TRUE
+      ui:
+        label: i18n
+        reloadIfChanged: TRUE
+        inspector:
+          group: 'properties'
+    zoomControl:
+      type: boolean
+      defaultValue: TRUE
+      ui:
+        label: i18n
+        reloadIfChanged: TRUE
+        inspector:
+          group: 'properties'
+    streetViewControl:
+      type: boolean
+      defaultValue: TRUE
+      ui:
+        label: i18n
+        reloadIfChanged: TRUE
+        inspector:
+          group: 'properties'
     lat:
       type: string
       defaultValue: '51.163375'
@@ -95,6 +156,14 @@
                 label: '19'
               '20':
                 label: '20'
+    fitBounds:
+      type: boolean
+      defaultValue: FALSE
+      ui:
+        label: i18n
+        reloadIfChanged: TRUE
+        inspector:
+          group: 'coordinates'
 
 'ObisConcept.NeosGmaps:MarkerCollection':
   superTypes:
@@ -115,9 +184,11 @@
         'address':
           label: i18n
           position: 10
+          icon: 'fa fa-map-marker'
         'info':
           label: i18n
           position: 20
+          icon: 'fa fa-info'
   properties:
     street:
       type: string

diff --git a/README.md b/README.md
@@ -1,2 +1,17 @@
 # neos-gmaps
 A Neos CMS package to add Google Maps as node
+
+## Installation
+Add the package in your site package composer.json
+
+`"require": {
+     "obisconcept/neos-gmaps": "~1.0"
+ }`
+
+## Usage
+
+Add your API key to the `Settings.yaml` of your site package
+
+`ObisConcept:
+  NeosGmaps:
+    apiKey: '...'`
diff --git a/Resources/Private/Assets/JavaScript/main.js b/Resources/Private/Assets/JavaScript/main.js
@@ -16,7 +16,13 @@ window.initGoogleMaps = function() {
 
         var map = new google.maps.Map($(this).get(0), {
             center: {lat: 0, lng: 0},
-            zoom: 10
+            zoom: 10,
+            mapTypeId: google.maps.MapTypeId[$(this).data('type')],
+            draggable: $(this).data('draggable'),
+            scrollwheel: $(this).data('scrollwheel'),
+            mapTypeControl: $(this).data('map-type-control'),
+            zoomControl: $(this).data('zoom-control'),
+            streetViewControl: $(this).data('street-view-control')
         });
 
         var infowindow = new google.maps.InfoWindow({
@@ -65,8 +71,12 @@ window.initGoogleMaps = function() {
 
                         }
 
+                    }
+
+                    if ($('.google-map-canvas[data-map-id='+id+']').data('fit-bounds') == 1) {
+
                         var bounds = new google.maps.LatLngBounds();
-
+                        
                         for (var i = 0; i < mapMarkers.length; i++) {
 
                             bounds.extend(mapMarkers[i].getPosition());
@@ -90,7 +100,7 @@ window.initGoogleMaps = function() {
 
         });
 
-        if (markers.markers.length === 0) {
+        if ($(this).data('fit-bounds') == 0) {
 
             map.setCenter({lat: $(this).data('lat'), lng: $(this).data('lng')});
             map.setZoom($(this).data('zoom'));

diff --git a/Resources/Private/Templates/NodeTypes/GoogleMap.html b/Resources/Private/Templates/NodeTypes/GoogleMap.html
@@ -1,5 +1,7 @@
 {namespace neos=TYPO3\Neos\ViewHelpers}
 
-<div class="google-map-canvas" data-map-id="{node.identifier}" data-lat="{lat}" data-lng="{lng}" data-zoom="{zoom}" data-markers="<f:format.raw>{</f:format.raw>'markers':[<f:for each="{markers}" as="marker" iteration="iterator"><f:format.raw>{</f:format.raw>'m{iterator.index}':[<f:format.raw>{</f:format.raw>'street':'{marker.properties.street}','zip':'{marker.properties.zip}','city':'{marker.properties.city}','country':'{marker.properties.country}','title':'{marker.properties.title}','text':'<f:format.nl2br>{marker.properties.text}</f:format.nl2br>'<f:format.raw>}</f:format.raw>]<f:format.raw>}</f:format.raw><f:if condition="{iterator.isLast}"><f:then></f:then><f:else>,</f:else></f:if></f:for>]<f:format.raw>}</f:format.raw>" style="height: {height}px;"></div>
+<div class="google-map-canvas" data-map-id="{node.identifier}" data-type="{type}" data-draggable="{draggable}" data-scrollwheel="{scrollwheel}" data-map-type-control="{mapTypeControl}" data-zoom-control="{zoomControl}" data-street-view-control="{streetViewControl}" data-lat="{lat}" data-lng="{lng}" data-zoom="{zoom}" data-fit-bounds="{fitBounds}" data-markers="<f:format.raw>{</f:format.raw>'markers':[<f:for each="{markers}" as="marker" iteration="iterator"><f:format.raw>{</f:format.raw>'m{iterator.index}':[<f:format.raw>{</f:format.raw>'street':'{marker.properties.street}','zip':'{marker.properties.zip}','city':'{marker.properties.city}','country':'{marker.properties.country}','title':'{marker.properties.title}','text':'<f:format.nl2br>{marker.properties.text}</f:format.nl2br>'<f:format.raw>}</f:format.raw>]<f:format.raw>}</f:format.raw><f:if condition="{iterator.isLast}"><f:then></f:then><f:else>,</f:else></f:if></f:for>]<f:format.raw>}</f:format.raw>" style="height: {height}px;"></div>
 
-<div class="hidden">{markerCollection -> f:format.raw()}</div>
+<f:security.ifAuthenticated>
+    <div class="hidden">{markerCollection -> f:format.raw()}</div>
+</f:security.ifAuthenticated>
diff --git a/Resources/Private/Translations/de/NodeTypes/GoogleMap.xlf b/Resources/Private/Translations/de/NodeTypes/GoogleMap.xlf
@@ -11,13 +11,53 @@
                 <target xml:lang="de" state="translated">Eigenschaften</target>
             </trans-unit>
             <trans-unit id="groups.coordinates" xml:space="preserve">
-                <source>Coordinates (ignored when marker set)</source>
-                <target xml:lang="de" state="translated">Koordinaten (ignoriert, wenn Marker gesetzt)</target>
+                <source>Coordinates</source>
+                <target xml:lang="de" state="translated">Koordinaten</target>
             </trans-unit>
             <trans-unit id="properties.height" xml:space="preserve">
                 <source>Height in pixels</source>
                 <target xml:lang="de" state="translated">Höhe in Pixeln</target>
             </trans-unit>
+            <trans-unit id="properties.type" xml:space="preserve">
+                <source>Map type</source>
+                <target xml:lang="de" state="translated">Kartentyp</target>
+            </trans-unit>
+            <trans-unit id="properties.type.selectBoxEditor.values.ROADMAP" xml:space="preserve">
+                <source>Roadmap</source>
+                <target xml:lang="de" state="translated">Straßenkarte</target>
+            </trans-unit>
+            <trans-unit id="properties.type.selectBoxEditor.values.SATELLITE" xml:space="preserve">
+                <source>Satellite</source>
+                <target xml:lang="de" state="translated">Satellit</target>
+            </trans-unit>
+            <trans-unit id="properties.type.selectBoxEditor.values.HYBRID" xml:space="preserve">
+                <source>Hybrid</source>
+                <target xml:lang="de" state="translated">Hybrid</target>
+            </trans-unit>
+            <trans-unit id="properties.type.selectBoxEditor.values.TERRAIN" xml:space="preserve">
+                <source>Terrain</source>
+                <target xml:lang="de" state="translated">Gelände</target>
+            </trans-unit>
+            <trans-unit id="properties.draggable" xml:space="preserve">
+                <source>Draggable</source>
+                <target xml:lang="de" state="translated">Verschiebbar</target>
+            </trans-unit>
+            <trans-unit id="properties.scrollwheel" xml:space="preserve">
+                <source>Scrollwheel zooming</source>
+                <target xml:lang="de" state="translated">Mausradzoomen</target>
+            </trans-unit>
+            <trans-unit id="properties.mapTypeControl" xml:space="preserve">
+                <source>Map type control</source>
+                <target xml:lang="de" state="translated">Kartentypsteuerung</target>
+            </trans-unit>
+            <trans-unit id="properties.zoomControl" xml:space="preserve">
+                <source>Zoom control</source>
+                <target xml:lang="de" state="translated">Zoomsteuerung</target>
+            </trans-unit>
+            <trans-unit id="properties.streetViewControl" xml:space="preserve">
+                <source>StreetView control</source>
+                <target xml:lang="de" state="translated">StreetView-Steuerung</target>
+            </trans-unit>
             <trans-unit id="properties.lat" xml:space="preserve">
                 <source>Latitude</source>
                 <target xml:lang="de" state="translated">Breitengrad</target>
@@ -29,6 +69,10 @@
             <trans-unit id="properties.zoom" xml:space="preserve">
                 <source>Zoom</source>
                 <target xml:lang="de" state="translated">Zoom</target>
+            </trans-unit>
+            <trans-unit id="properties.fitBounds" xml:space="preserve">
+                <source>Fit to markers (ignores options above)</source>
+                <target xml:lang="de" state="translated">An Markern ausrichten (ignoriert vorherige Angaben)</target>
             </trans-unit>
 		</body>
 	</file>

diff --git a/Resources/Private/Translations/en/NodeTypes/GoogleMap.xlf b/Resources/Private/Translations/en/NodeTypes/GoogleMap.xlf
@@ -12,11 +12,41 @@
                 <source>Height in pixels</source>
             </trans-unit>
             <trans-unit id="groups.coordinates" xml:space="preserve">
-                <source>Coordinates (ignored when marker set)</source>
+                <source>Coordinates</source>
             </trans-unit>
             <trans-unit id="properties.height" xml:space="preserve">
                 <source>Height in pixels</source>
             </trans-unit>
+            <trans-unit id="properties.type" xml:space="preserve">
+                <source>Map type</source>
+            </trans-unit>
+            <trans-unit id="properties.type.selectBoxEditor.values.ROADMAP" xml:space="preserve">
+                <source>Roadmap</source>
+            </trans-unit>
+            <trans-unit id="properties.type.selectBoxEditor.values.SATELLITE" xml:space="preserve">
+                <source>Satellite</source>
+            </trans-unit>
+            <trans-unit id="properties.type.selectBoxEditor.values.HYBRID" xml:space="preserve">
+                <source>Hybrid</source>
+            </trans-unit>
+            <trans-unit id="properties.type.selectBoxEditor.values.TERRAIN" xml:space="preserve">
+                <source>Terrain</source>
+            </trans-unit>
+            <trans-unit id="properties.draggable" xml:space="preserve">
+                <source>Draggable</source>
+            </trans-unit>
+            <trans-unit id="properties.scrollwheel" xml:space="preserve">
+                <source>Scrollwheel zooming</source>
+            </trans-unit>
+            <trans-unit id="properties.mapTypeControl" xml:space="preserve">
+                <source>Map type control</source>
+            </trans-unit>
+            <trans-unit id="properties.zoomControl" xml:space="preserve">
+                <source>Zoom control</source>
+            </trans-unit>
+            <trans-unit id="properties.streetViewControl" xml:space="preserve">
+                <source>StreetView control</source>
+            </trans-unit>
             <trans-unit id="properties.lat" xml:space="preserve">
                 <source>Latitude</source>
             </trans-unit>
@@ -25,6 +55,9 @@
             </trans-unit>
             <trans-unit id="properties.zoom" xml:space="preserve">
                 <source>Zoom</source>
+            </trans-unit>
+            <trans-unit id="properties.fitBounds" xml:space="preserve">
+                <source>Fit to markers (ignores options above)</source>
             </trans-unit>
 		</body>
 	</file>

diff --git a/Resources/Private/TypoScript/ProtoTypes/Page.ts2 b/Resources/Private/TypoScript/ProtoTypes/Page.ts2
@@ -7,12 +7,12 @@ prototype(TYPO3.Neos:Page) {
             tagName = 'script'
             attributes {
                 type = 'text/javascript'
-                src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCRl_zHBMgffWGCK06upoVEmqnTWdX-uvA'
+                src = ${'https://maps.googleapis.com/maps/api/js?key='+Configuration.settings('ObisConcept.NeosGmaps.apiKey')}
             }
         }
 
         gmapsJs = TYPO3.TypoScript:Tag {
-            @position = 'after gmapsApiJs'
+            @position = 'after javascripts'
             tagName = 'script'
             attributes {
                 id = 'bootstrap-js'

diff --git a/Resources/Public/JavaScript/main.js b/Resources/Public/JavaScript/main.js
@@ -16,7 +16,13 @@ window.initGoogleMaps = function() {
 
         var map = new google.maps.Map($(this).get(0), {
             center: {lat: 0, lng: 0},
-            zoom: 10
+            zoom: 10,
+            mapTypeId: google.maps.MapTypeId[$(this).data('type')],
+            draggable: $(this).data('draggable'),
+            scrollwheel: $(this).data('scrollwheel'),
+            mapTypeControl: $(this).data('map-type-control'),
+            zoomControl: $(this).data('zoom-control'),
+            streetViewControl: $(this).data('street-view-control')
         });
 
         var infowindow = new google.maps.InfoWindow({
@@ -65,8 +71,12 @@ window.initGoogleMaps = function() {
 
                         }
 
+                    }
+
+                    if ($('.google-map-canvas[data-map-id='+id+']').data('fit-bounds') == 1) {
+
                         var bounds = new google.maps.LatLngBounds();
-
+                        
                         for (var i = 0; i < mapMarkers.length; i++) {
 
                             bounds.extend(mapMarkers[i].getPosition());
@@ -90,7 +100,7 @@ window.initGoogleMaps = function() {
 
         });
 
-        if (markers.markers.length === 0) {
+        if ($(this).data('fit-bounds') == 0) {
 
             map.setCenter({lat: $(this).data('lat'), lng: $(this).data('lng')});
             map.setZoom($(this).data('zoom'));