Use OpenStreetMap for map in incoming form. #270

src/Controller/JobOrderController.php

@@ -11,6 +11,7 @@ use App\Entity\Battery;
 
 use App\Service\InvoiceGeneratorInterface;
 use App\Service\JobOrderHandlerInterface;
+use App\Service\GISManagerInterface;
 use App\Service\MapTools;
 use App\Service\MQTTClient;
 use App\Service\APNSClient;
@@ -45,7 +46,8 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_in")
      */
-    public function incomingForm(JobOrderHandlerInterface $jo_handler)
+    public function incomingForm(JobOrderHandlerInterface $jo_handler,
+                                 GISManagerInterface $gis)
     {
         $this->denyAccessUnlessGranted('jo_in.list', null, 'No access.');
 
@@ -53,6 +55,7 @@ class JobOrderController extends Controller
 
         $params['submit_url'] = $this->generateUrl('jo_in_submit');
         $params['return_url'] = $this->generateUrl('jo_in');
+        $params['map_js_file'] = $gis->getJSJOFile();
 
         $template = $params['template'];
 

src/Service/GISManager/Bing.php

@@ -13,5 +13,9 @@ class Bing implements GISManagerInterface
         // return the bing map js file: initBingMap.js
         return self::JS_INIT_FILE;
     }
+
+    public function getJSJOFile()
+    {
+    }
 }
 

src/Service/GISManager/Google.php

@@ -13,5 +13,9 @@ class Google implements GISManagerInterface
         // return the google map js file: initGoogleMap.js
         return self::JS_INIT_FILE;
     }
+
+    public function getJSJOFile()
+    {
+    }
 }
 

src/Service/GISManager/OpenStreet.php

@@ -7,11 +7,17 @@ use App\Service\GISManagerInterface;
 class OpenStreet implements GISManagerInterface
 {
     const JS_INIT_FILE = 'initOpenStreetMap.js';
+    const JS_JO_FILE = 'joOpenStreetMap.js';
  
     public function getJSInitFile()
     {
         // return the openstreet map js file: initOpenStreetMap.js
         return self::JS_INIT_FILE;
     }
+
+    public function getJSJOFile()
+    {
+        return self::JS_JO_FILE;
+    }
 }
 

src/Service/GISManagerInterface.php

@@ -6,5 +6,8 @@ interface GISManagerInterface
 {
     // returns the actual JS file
     public function getJSInitFile();
+
+    // return the JS file for JO map
+    public function getJSJOFile();
 }
 

templates/job-order/cmb.form.html.twig

@@ -899,12 +899,24 @@
 {% endblock %}
 
 {% block scripts %}
+{{ include('map/' ~ map_js_file) }}
 <!-- <script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script> -->
 <script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}&libraries=places" type="text/javascript"></script>
 <script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
 
 <script>
 
+{% if 'OpenStreet' in map_js_file %}
+    initMap();
+{% endif %}
+
+function initMap() {
+    var default_lat = {% trans %}default_lat{% endtrans %};
+    var default_lng = {% trans %}default_long{% endtrans %};
+
+    var map = mapCreate('m_gmap', default_lat, default_lng, 'road', 13);
+}
+
 // location search autocomplete
 var input = document.getElementById('m_gmap_address');
 
@@ -931,6 +943,7 @@ $(function() {
     var form_in_process = false;
 
 	// BEGIN google maps stuff
+        /*
 	function selectPoint(map, latlng) {
 	    var lat = latlng.lat();
 	    var lng = latlng.lng();
@@ -959,6 +972,7 @@ $(function() {
 	        e.stop();
 	    }
 	});
+        */
 
         var handleAction = function() {
 	    var text = $.trim($('#m_gmap_address').val());

templates/map/joOpenStreetMap.js

@@ -0,0 +1,23 @@
+<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+    crossorigin="">
+</script>
+
+<script>
+
+function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
+    var map = L.map(div_id).setView(
+        [center_lat, center_lng],
+        zoom
+    );
+
+    // add tile layer
+    var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+        maxZoom: 18,
+        id: 'mapbox/streets-v11',
+        accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
+    }).addTo(map);
+}
+
+</script>