adding Javascript after the map definition

[gursel58]

I am trying to implement the on.click functionality you pointed out in the previous issue and am having difficulty with defining it. Other then the on.click the map is working.

Here is the yii2 openlayer map definition:

echo OpenLayers::widget([
'id' => 'alertsite',
'options' => [],
// 'mapOptionScript' => 'olclick.js',
'mapOptions' => [
'layers' => [
new OL('layer.Tile', [ // Generates "new ol.layer.Tile()" JS. See below for an explanation of the OL class.
'name' => 'base',
'source' => new OL('source.MapQuest', [
'layer' => 'sat',
]),
]),

        ],
   'view' => [ // No OL() is required here because of simplified option support (see below)
      'center' => new JsExpression('ol.proj.transform([-114.0, 51.0], "EPSG:4326", "EPSG:3857")'),
        'zoom' => 8,
        'projection' => 'EPSG:3857'
    ],
],

]);

I used the sibilino.olwidget.mapOptions to define the Overlay layer

$this->registerJs("
sibilino.olwidget.mapOptions['alertsite'] = {
overlay : new ol.Overlay({
name:'popup'
}) };
");

I then added the javascript for the on.click event

$this->registerJs("
alertsite.on('click', function(evt) {
var element = popup.getElement();
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));

$(element).popover('destroy');
popup.setPosition(coordinate);
// the keys are quoted to prevent renaming in ADVANCED mode.
$(element).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '

The location you clicked was:

' + hdms + ''
});
$(element).popover('show');
});
");

I also tried changing the first line of the on.click to
sibilino.olwidget.mapOptions['alertsite'].on('click', function(evt) {

but got the same javascript error both times saying alertsite.on is not a function.

My thought is it is my confusion on how to name the function the same as the map.

Any thoughts ?
Thanks
Greg

[gursel58]

Just an update. I copied from a backup the old yii2-openlayers code, made a few changes to add the overlay layer using the typical javascript way of adding the layer, and everything worked ok. I then recopied in the new yii2-openlayer code and it didnt work (just wanted to make sure the changes I made didnt fix the issue).
For now I will continue with the old code so I can continue with my project.
Greg

[Sibilino]

The map objects are no longer accessible as a plain javascript variable, so
"alertsite" is undefined. You would need to define it as var alertsite = sibilino.olwidget.getMapById("alertsite"). The goal was to put everything
under the sibilino global namespace so that there are no collisions with
existing variables.

Seems that I forgot to explain all this in the documentation, so I will
update it soon.

However, I don't really understand what you are doing with that popup
overlay. Isn't it better to define it in PHP? Looks like a single OL()
would suffice.

2016-01-02 3:55 GMT+01:00 gursel58 notifications@github.com:

Reopened #7 #7.

—
Reply to this email directly or view it on GitHub
#7 (comment).

[gursel58]

I did try using the new OL(.. to define the Overlay layer and I got a JavaScript error
TypeError: b.nf is not a function in ol.js(line 206,col 81)
here is the code I had to define the map with Overlay

echo OpenLayers::widget([
'id' => 'alertsite',
'options' => [],
'mapOptions' => [
'layers' => [
new OL('layer.Tile', [ // Generates "new ol.layer.Tile()" JS. See below for an explanation of the OL class.
'name' => 'base',
'source' => new OL('source.MapQuest', [
'layer' => 'sat',
]),
]),
new OL('Overlay' ,[
'name' => 'popup',
'element' => "document.getElementById('popup')",
]),
],
'view' => [ // No OL() is required here because of simplified option support (see below)
'center' => new JsExpression('ol.proj.transform([-114.0, 51.0], "EPSG:4326", "EPSG:3857")'),
'zoom' => 8,
'projection' => 'EPSG:3857'
],
],
]);

I did try and use
var alertsite=sibilino.olwidget.getMapById("alertsite");
and I got a
ReferenceError:maps is not defined in olwidget.js (line 27,col 13)

Thanks
Greg

[Sibilino]

Ok, the getMapById function is bugged then. I will release a fix as soon as
I can.

For the moment you can use var
alertsite=sibilino.olwidget.maps["alertsite"].

Regarding your overlay, you are defining it inside the "layers" array. It
should be in a separate array with the key "overlays". In addition, you are
passing JavaScript as its "element" configuration, but you are giving a
simple string, while you should be using a JsExpression: "element" => new
JsExpression("document.getElementById('popup')"),

2016-01-06 1:32 GMT+01:00 gursel58 notifications@github.com:

I did try using the new OL(.. to define the Overlay layer and I got a
JavaScript error

TypeError: b.nf is not a function in ol.js(line 206,col 81)
here is the code I had to define the map with Overlay

echo OpenLayers::widget([
'id' => 'alertsite',
'options' => [],

'mapOptions' => [
'layers' => [
new OL('layer.Tile', [ // Generates "new ol.layer.Tile()" JS. See below
for an explanation of the OL class.
'name' => 'base',
'source' => new OL('source.MapQuest', [
'layer' => 'sat',
]),
]),
new OL('Overlay' ,[
'name' => 'popup',
'element' => "document.getElementById('popup')",
]),
],
'view' => [ // No OL() is required here because of simplified option
support (see below)
'center' => new JsExpression('ol.proj.transform([-114.0, 51.0],
"EPSG:4326", "EPSG:3857")'),
'zoom' => 8,
'projection' => 'EPSG:3857'
],
],
]);

I did try and use

var alertsite=sibilino.olwidget.getMapById("alertsite");
and I got a
ReferenceError:maps is not defined in olwidget.js (line 27,col 13)

Thanks
Greg

—
Reply to this email directly or view it on GitHub
#7 (comment)
.

[gursel58]

getMapById works
Thanks