Improve default map bounds selection. Close #23

app/Resources/SonataAdminBundle/views/layout.html.twig

@@ -53,7 +53,9 @@
     <script src="{{ asset('bundles/sonataformatter/markitup/sets/markdown/set.js') }}" type="text/javascript"></script>
     <script src="{{ asset('bundles/sonataformatter/markitup/sets/html/set.js') }}" type="text/javascript"></script>
     <script src="{{ asset('bundles/sonataformatter/markitup/sets/textile/set.js') }}" type="text/javascript"></script>
-
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
+    <script src="{{ asset('js/external-pages.js') }}"></script>
     <script>
     // bootstrap-ckeditor-modal-fix.js
     // hack to fix ckeditor/bootstrap compatiability bug when ckeditor appears in a bootstrap modal dialog
@@ -78,6 +80,8 @@
     window.SONATA_CONFIG.CONFIRM_EXIT = false;
     </script>
 
+
+
 {% endblock %}
 
 {% block sonata_sidebar_search %}

src/Biopen/CoreBundle/Admin/ConfigurationMapAdmin.php

@@ -26,20 +26,29 @@ protected function configureFormFields(FormMapper $formMapper)
         $mailStyle = array('class' => 'col-md-12 col-lg-6');
         $featureFormOption = ['delete' => false, 'required'=> false, 'label_attr'=> ['style'=> 'display:none']];
         $featureFormTypeOption = ['edit' => 'inline'];
+        $container = $this->getConfigurationPool()->getContainer(); 
+        $em = $container->get('doctrine_mongodb')->getManager();
+        $config = $em->getRepository('BiopenCoreBundle:Configuration')->findConfiguration();  
+
         $formMapper
             ->tab('Paramètres de la carte')  
-                ->with('Map', array('class' => 'col-md-6'))
+                ->with('Map')
                     ->add('defaultTileLayer', 'sonata_type_model', array(
                             'class'=> 'Biopen\CoreBundle\Document\TileLayer', 
                             'required' => true, 
                             'choices_as_values' => true,
-                            'label' => 'Fond de carte par défaut'))
-                    ->add('defaultNorthEastBoundsLat')
-                    ->add('defaultNorthEastBoundsLng')
-                    ->add('defaultSouthWestBoundsLat')
-                    ->add('defaultSouthWestBoundsLng')
+                            'label' => 'Fond de carte par défaut (enregistez pour voir apparaitre le fond délectionné sur la carte ci-dessous)'))
+                    ->add('defaultViewPicker', 'hidden', array('mapped' => false, 'attr' => [
+                                                        'class' => 'gogo-viewport-picker', 
+                                                        'data-title-layer' => $config->getDefaultTileLayer()->getUrl(),
+                                                        'data-default-bounds' => json_encode($config->getDefaultBounds())
+                                                    ]))
+                    ->add('defaultNorthEastBoundsLat', 'hidden', ['attr' => ['class' => 'bounds NELat']])
+                    ->add('defaultNorthEastBoundsLng', 'hidden', ['attr' => ['class' => 'bounds NELng']])
+                    ->add('defaultSouthWestBoundsLat', 'hidden', ['attr' => ['class' => 'bounds SWLat']])
+                    ->add('defaultSouthWestBoundsLng', 'hidden', ['attr' => ['class' => 'bounds SWLng']])
                 ->end()
-                ->with('Cookies', array('class' => 'col-md-6'))
+                ->with('Cookies')
                     ->add('saveViewportInCookies', 'checkbox', array('label' => "Sauvegarder la position courante de la carte dans les cookies", 'required' => false))
                     ->add('saveTileLayerInCookies', 'checkbox', array('label' => "Sauvegarder le choix du fond de carte dans les cookies", 'required' => false))
                 ->end()

src/Biopen/GeoDirectoryBundle/Resources/views/admin/core_custom/custom-fields/viewport-picker.html.twig

@@ -0,0 +1,59 @@
+<label>Vue par défault de la carte (dessinez un rectangle sur la carte)</label>
+<div id="map-bounds-select"></div>
+
+<script>
+  jQuery(document).ready(function() {
+
+
+    map = L.map('map-bounds-select', {editable: true});
+    L.tileLayer("{{ form.vars.attr['data-title-layer'] }}").addTo(map);
+    map.fitBounds({{ form.vars.attr['data-default-bounds'] | raw }});
+
+    // Start drawing rectangle
+    map.editTools.startRectangle();
+
+    shades = new L.LeafletShades();
+    shades.addTo(map); 
+
+    shades.on('shades:bounds-changed', function(event) {
+      bounds = event.bounds;
+      console.log("bounds changed");
+      var digits = 5;
+      
+      $('.bounds.SWLat').val(L.Util.formatNum(bounds.getSouthWest().lat, digits));
+      $('.bounds.SWLng').val(L.Util.formatNum(bounds.getSouthWest().lng, digits));
+      $('.bounds.NELat').val(L.Util.formatNum(bounds.getNorthEast().lat, digits));
+      $('.bounds.NELng').val(L.Util.formatNum(bounds.getNorthEast().lng, digits));
+    });
+  });
+</script>
+<style>
+  .leaflet-areaselect-shade {
+    position: absolute;
+    background: rgba(0,0,0,0.4);
+    z-index: 400;
+  }
+
+  .leaflet-interactive.leaflet-path-draggable {
+    fill: transparent !important;
+  }
+
+  #map-bounds-select {
+    height: 400px;
+    margin-top: 1.5rem;
+    border-radius: 2px;
+    z-index: 500;
+  }
+
+  a.leaflet-control-zoom-in {
+      font-size: 18px !important;
+      color: #3d3d3d;
+  }
+
+  a.leaflet-control-zoom-out {
+      font-size: 25px! important;
+      font-weight: normal;
+      color: #3d3d3d;
+      text-indent: 0;
+  }
+</style>

src/Biopen/GeoDirectoryBundle/Resources/views/admin/core_custom/form_admin_fields.html.twig

@@ -18,6 +18,8 @@
       {% include '@BiopenAdmin/core_custom/custom-fields/form-builder.html.twig' %}
     {% elseif attr.class == "gogo-form-fields" %}
       {% include '@BiopenAdmin/partials/show_element_form_fields.html.twig' %}
+    {% elseif attr.class == "gogo-viewport-picker" %}
+      {% include '@BiopenAdmin/core_custom/custom-fields/viewport-picker.html.twig' %}
     {% else %}      
       {% set attr = attr|merge({'class': attr.class|default('') ~ ' form-control'}) %}
       {{ parent() }}