Working integration with OpenLayers

diff --git a/org.argeo.app.geo.js/.externalToolBuilders/npm run build.launch b/org.argeo.app.geo.js/.externalToolBuilders/npm run build.launch
new file mode 100644 (file)
index 0000000..18227db
--- /dev/null
+++ b/org.argeo.app.geo.js/.externalToolBuilders/npm run build.launch
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<launchConfiguration type="org.eclipse.ui.externaltools.ProgramBuilderLaunchConfigurationType">
+    <stringAttribute key="org.eclipse.debug.core.ATTR_REFRESH_SCOPE" value="${project}"/>
+    <booleanAttribute key="org.eclipse.debug.ui.ATTR_LAUNCH_IN_BACKGROUND" value="true"/>
+    <stringAttribute key="org.eclipse.ui.externaltools.ATTR_BUILD_SCOPE" value="${working_set:&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#10;&lt;resources&gt;&#10;&lt;item path=&quot;/org.argeo.app.geo.js&quot; type=&quot;4&quot;/&gt;&#10;&lt;/resources&gt;}"/>
+    <stringAttribute key="org.eclipse.ui.externaltools.ATTR_LOCATION" value="/usr/bin/npm"/>
+    <stringAttribute key="org.eclipse.ui.externaltools.ATTR_RUN_BUILD_KINDS" value="full,incremental,auto,"/>
+    <stringAttribute key="org.eclipse.ui.externaltools.ATTR_TOOL_ARGUMENTS" value="run build"/>
+    <booleanAttribute key="org.eclipse.ui.externaltools.ATTR_TRIGGERS_CONFIGURED" value="true"/>
+    <stringAttribute key="org.eclipse.ui.externaltools.ATTR_WORKING_DIRECTORY" value="${project_loc}"/>
+</launchConfiguration>

diff --git a/org.argeo.app.geo.js/.project b/org.argeo.app.geo.js/.project
index b4b787735d3b2100b79cbad0a0190857062cba0e..f3db5e6dbbdd74542a3742dc0c8331ee47dbf2bb 100644 (file)
--- a/org.argeo.app.geo.js/.project
+++ b/org.argeo.app.geo.js/.project
@@ -15,6 +15,16 @@
                        <arguments>
                        </arguments>
                </buildCommand>
+               <buildCommand>
+                       <name>org.eclipse.ui.externaltools.ExternalToolBuilder</name>
+                       <triggers>auto,full,incremental,</triggers>
+                       <arguments>
+                               <dictionary>
+                                       <key>LaunchConfigHandle</key>
+                                       <value>&lt;project&gt;/.externalToolBuilders/npm run build.launch</value>
+                               </dictionary>
+                       </arguments>
+               </buildCommand>
        </buildSpec>
        <natures>
                <nature>org.eclipse.pde.PluginNature</nature>

diff --git a/org.argeo.app.geo.js/bnd.bnd b/org.argeo.app.geo.js/bnd.bnd
index 9ac9b102533141bff0ed067141bcf7d58528fda2..818a44cbeb2b41fe44522619d604dcce89cc67e2 100644 (file)
--- a/org.argeo.app.geo.js/bnd.bnd
+++ b/org.argeo.app.geo.js/bnd.bnd
@@ -2,4 +2,4 @@ Export-Package: org.argeo.app.geo.js
 
 
 Provide-Capability:\
-cms.publish;pkg=org.argeo.app.geo.js;file="*.png,*.js,*.css,*.html"
+cms.publish;pkg=org.argeo.app.geo.js;file="*.png,*.js,*.map,*.css,*.html"

diff --git a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.js b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.js
index a6f3c81c50ff4e6cd89f30a3fae4ef5ed081e4a5..a665d9164c10df263ff721d0dd86ac34ab6d6e06 100644 (file)
--- a/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.js
+++ b/org.argeo.app.geo.js/src/org.argeo.app.geo.js/index.js
@@ -2,18 +2,94 @@ import Map from 'ol/Map.js';
 import OSM from 'ol/source/OSM.js';
 import TileLayer from 'ol/layer/Tile.js';
 import View from 'ol/View.js';
+import { fromLonLat, toLonLat } from 'ol/proj.js';
 
 import 'ol/ol.css';
 
-const map = new Map({
-  layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
-  ],
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    zoom: 2,
-  }),
-});
+//window.map = new Map({
+//     layers: [
+//             new TileLayer({
+//                     source: new OSM(),
+//             }),
+//     ],
+//     target: 'mapTarget',
+//     view: new View({
+//             center: [0, 0],
+//             zoom: 2,
+//     }),
+//});
+//window.map.on('rendercomplete', e => {
+//     console.log('Render completed.');
+//     onRenderComplete();
+//});
+//map.getView().setZoom(4);
+
+if (typeof window.argeo === 'undefined')
+       window.argeo = {};
+if (typeof window.argeo.app === 'undefined')
+       window.argeo.app = {};
+if (typeof window.argeo.app.geo === 'undefined')
+       window.argeo.app.geo = {};
+
+
+
+window.argeo.app.geo.ArgeoMap = {
+       map: new Map({
+               layers: [
+                       new TileLayer({
+                               source: new OSM(),
+                       }),
+               ],
+               target: 'map',
+       }),
+
+       setZoom: function(zoom) {
+               this.map.getView().setZoom(zoom);
+       },
+
+       setCenter: function(lng, lat) {
+               this.map.getView().setCenter(fromLonLat([lng, lat]));
+       },
+
+};
+//window.argeoMap = Object.create(argeo.app.geo.ArgeoMap);
+//window.argeoMap.map.on('rendercomplete', e => {
+//     console.log('Render completed.');
+//     onRenderComplete();
+//});
+
+
+//function argeo_app_geo_Map() {
+//     console.log('Entered constructor');
+//     this.map = new Map({
+//             layers: [
+//                     new TileLayer({
+//                             source: new OSM(),
+//                     }),
+//             ],
+//             target: 'map',
+//             view: new View({
+//                     center: [0, 0],
+//                     zoom: 2,
+//             }),
+//     });
+//     this.map.on('rendercomplete', e => {
+//             console.log('Render completed.');
+//             onRenderComplete();
+//     });
+//
+//     this.setCenter = function(lng, lat) {
+//             console.log('Center set ');
+//             //this.map.getView().setCenter(ol.proj.fromLonLat([lng, lat]));
+//     }
+//
+//     this.setZoom = function(zoom) {
+//             this.map.getView().setZoom(zoom);
+//     }
+//}
+//
+//window.argeoMap = new argeo_app_geo_Map();
+//argeoMap.setCenter(13.404954, 52.520008);
+//function setCenter(lng, lat) {
+//     map.getView().setCenter(lng, lat);
+//}
\ No newline at end of file

diff --git a/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/MapUiProvider.java b/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/MapUiProvider.java
index 58ad21e8bfeb57d4dec5d425dc59eb8b0622a775..2edd0f15ae2b40969913e330a1aaf07999e40473 100644 (file)
--- a/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/MapUiProvider.java
+++ b/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/MapUiProvider.java
@@ -12,6 +12,9 @@ public class MapUiProvider implements SwtUiProvider {
        @Override
        public Control createUiPart(Composite parent, Content context) {
                OLMap map = new OLMap(parent, 0);
+               // map.setCenter(13.404954, 52.520008); // Berlin
+               map.setCenter(-74.00597, 40.71427); // NYC
+               map.setZoom(6);
                return map;
        }
 

diff --git a/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/openlayers/OLMap.java b/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/openlayers/OLMap.java
index bd2a15d29e24e72b1e2043ef7f99f53d02fb7874..d045afd21d9aa3e6cd91ba2a359bfde54ac285e7 100644 (file)
--- a/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/openlayers/OLMap.java
+++ b/swt/org.argeo.app.geo.swt/src/org/argeo/app/geo/swt/openlayers/OLMap.java
@@ -1,78 +1,96 @@
 package org.argeo.app.geo.swt.openlayers;
 
+import java.util.concurrent.CompletableFuture;
+
 import org.argeo.app.geo.ux.MapPart;
 import org.argeo.cms.swt.CmsSwtUtils;
 import org.eclipse.swt.SWT;
 import org.eclipse.swt.browser.Browser;
+import org.eclipse.swt.browser.ProgressEvent;
+import org.eclipse.swt.browser.ProgressListener;
 import org.eclipse.swt.layout.GridData;
 import org.eclipse.swt.widgets.Composite;
-import org.eclipse.swt.widgets.Label;
 
 public class OLMap extends Composite implements MapPart {
        static final long serialVersionUID = 2713128477504858552L;
-       private Label div;
+       private Browser browser;
+
+       // private CompletableFuture<Boolean> renderCompleted = new
+       // CompletableFuture<>();
+       private CompletableFuture<Boolean> pageLoaded = new CompletableFuture<>();
+
+       private String mapVar = "window.argeoMap";
 
        public OLMap(Composite parent, int style) {
                super(parent, style);
                parent.setLayout(CmsSwtUtils.noSpaceGridLayout());
                setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
                setLayout(CmsSwtUtils.noSpaceGridLayout());
-//             div = new Label(this, SWT.NONE);
-//             CmsSwtUtils.markup(div);
-//             CmsSwtUtils.disableMarkupValidation(div);
-//             div.setText(html);
-//             div.setLayoutData(CmsSwtUtils.fillAll());
-               String html = """
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Simple Map</title>
-    <link rel="stylesheet" href="/pkg/org.argeo.app.geo.ux.web/main.css">
-    <style>
-      .map {
-        width: 100%;
-        height: 100vh;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="map" class="map"></div>
-    <script src="/pkg/org.argeo.app.geo.ux.web/main.bundle.js"></script>
-  </body>
-</html>                                
-                               """;
-               Browser browser = new Browser(this, SWT.BORDER);
+               browser = new Browser(this, SWT.BORDER);
                browser.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
-               //browser.setText(html);
+               // functions exposed to JavaScript
+//             new onRenderComplete();
                browser.setUrl("/pkg/org.argeo.app.geo.js/index.html");
-               
+               browser.addProgressListener(new ProgressListener() {
+                       static final long serialVersionUID = 1L;
+
+                       @Override
+                       public void completed(ProgressEvent event) {
+
+                               // create map
+                               browser.execute(mapVar + " = Object.create(window.argeo.app.geo.ArgeoMap);");
+                               pageLoaded.complete(true);
+                       }
+
+                       @Override
+                       public void changed(ProgressEvent event) {
+                       }
+               });
        }
 
        @Override
        public void addPoint(Double lng, Double lat) {
                // TODO Auto-generated method stub
-               
+
        }
 
        @Override
        public void addUrlLayer(String layer, Format format) {
                // TODO Auto-generated method stub
-               
+
        }
 
        @Override
        public void setZoom(int zoom) {
-               // TODO Auto-generated method stub
-               
+               pageLoaded.thenAccept((b) -> {
+                       browser.evaluate(mapVar + ".setZoom(" + zoom + ")");
+               });
        }
 
        @Override
        public void setCenter(Double lng, Double lat) {
-               // TODO Auto-generated method stub
-               
+               pageLoaded.thenAccept((b) -> {
+                       browser.evaluate(mapVar + ".setCenter(" + lng + ", " + lat + ")");
+               });
+
        }
 
-       
-       
+//     private void setRenderCompleted() {
+//             renderCompleted.complete(true);
+//     }
+//
+//     private class onRenderComplete extends BrowserFunction {
+//
+//             onRenderComplete() {
+//                     super(browser, onRenderComplete.class.getSimpleName());
+//             }
+//
+//             @Override
+//             public Object function(Object[] arguments) {
+//                     setRenderCompleted();
+//                     System.out.println("Render complete (Java)");
+//                     return null;
+//             }
+//
+//     }
 }