OpenLayers4 in Sencha Architect - extjs

Question

How can I add and use an openlayers4 map in sencha architect? I want to add openlayers map in a container but I have no idea how to do this in sencha architect, so any suggestions would be great!
Thanks in advance

Answer 1

Start with the OL guide https://openlayers.org/en/latest/doc/quickstart.html
We need to do 3 things according to the guide:
Include OpenLayers
map container
JavaScript to create a simple map
Include:
Click on plus button, select resource, add JS resource
Select the JS resource, set the URL, your own ID, set remote to true
Do the same steps for the CSS resource
You should see both resource loaded remotely, and you should see them inside SA. Or you can download the JS files. Put them into resources folder in your project folder and the url would look like resources/myOLm.js and the same goes for CSS.
Map container:
Add panel or container, select the html config and add custom div in there with the id.
You should see this:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
requires: [
'MyApp.view.MyPanelViewModel'
],
viewModel: {
type: 'mypanel'
},
height: 559,
html: ' <div id="map" stlye="width:100%; height:400px"></div>',
width: 728,
title: 'My Panel'
});
JS to create the map:
Now we need to execute the JS for the map. We will need to use some event, which is fired -> fires our function where we can write our own JS.
I have chosen the render event. Click on the panel, in the config window find basic event binding, select render, add it. And put the example JS code into the function.
Your code should look like this:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
requires: [
'MyApp.view.MyPanelViewModel'
],
viewModel: {
type: 'mypanel'
},
height: 559,
html: ' <div id="map" stlye="width:100%; height:400px"></div>',
width: 728,
title: 'My Panel',
defaultListenerScope: true,
listeners: {
render: 'onPanelRender'
},
onPanelRender: function(component, eOpts) {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
}
});
Save and preview your project:

Answer 2

I used OpenLayers4 in Architect the last week, and actually I did exactly as you did #pagep except that:
- I displayed the map directly into a component & without a div (I gave the component the id=map).
- I'm using the modern package and there's no "render" event, so I used the "painted" event.