OpenLayers4 in Sencha Architect

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

pagep pagep · Accepted Answer · 2017-11-22T14:08:45

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:

OpenLayers4 in Sencha Architect

2 Answers