gaborfarkas / mastering_openlayers3 Goto Github PK

In the css, the buttons are:

button.active {}
button.active:hover {}

Should they be colons instead of periods?

button:active {}
button:active:hover {}

After loading in a (preexisting) vector layer, all the draw controls are disabled. This is only true when adding layers with the addVectorLayer control. Drawing works with newVectorLayer because the geometry type is an input to the form. The only way I know to get the geometry type of the layer is to loop through all features after the source is loaded and check it with some fancy logic. That method might not be desirable especially for large files. Do you have any suggestions for a possibly better solution?

Thanks,

I noticed that the following line appears in the code, but not in the book.

var layerTree = function (options) {
    ...
    this.createRegistry = function (layer, buffer) {
        ...
        layerDiv.addEventListener('drop', function (evt) {
            ...
            if (sourceLayerDiv !== this) {
                ...
                _this.map.getLayers().changed();

Is this line necessary? Can it be safely removed?

Thanks

I noticed that the strategy is being set on the ol.layer.vector.

var layer = new ol.layer.Vector({
    source: source,
    name: form.displayname.value,
    strategy: ol.loadingstrategy.bbox
});

According to the ol3 website, this is an attribute of ol.source.vector.

Does this matter?

p9 of the printed book states that API is available for v3.11.0. As far as I can tell the closest version of the API available is v.3.20.1. https://openlayers.org/en/v3.20.1/apidoc/. I'm just starting the book so can't guess what the impact will be. This is probably Errata.

layerTree.prototype.styleGraduated = function (layer, attribute) {
    if (layer.get('headers')[attribute] === 'string') {
        ...
    }
};

should be,

layerTree.prototype.styleGraduated = function (layer, attribute) {
    if (typeof layer.get('headers')[attribute] === 'string') {
        ...
    }
};

Your book mentions (p.41) that the createRegistry method is privileged. Would this still be the case if I were to define the createRegistry function as a prototype outside of the constructor? For example,

var layerTree = function (options) {
    ...
    var idCounter = 0;
    this.createRegistry = function (layer, buffer) {
        layer.set('id', 'layer_' + idCounter);
        idCounter += 1;
        ....
    }
};

would become,

var layerTree = function (options) {
    ...
    this.idCounter = 0;
};
layerTree.prototype.createRegistry = function (layer, buffer) {
    layer.set('id', 'layer_' + this.idCounter);
    this.idCounter += 1;
    ...
};

The idCounter is obviously no longer private, but I'm not sure how much that matters. Are there any issues I should be aware of (security or otherwise)? It seems to me that the layerTree would be somewhat cleaner if the createRegistry function could exist outside the constructor. I come across this kind of decision often, "Do I put a particular piece of code (usually a function) in the constructor, in its own prototype method, or somewhere else." I think if I understood better your logic, it might make things clearer.

Thanks,

Hello,

I was playing around with your example "ch04_thematic" and noticed that the drop down menu displays the properties (e.g. pop_est, name, etc.) correctly with ol v3.11.0 or older, but is empty when using ol v3.12.0 or newer. The problem seems to be related to the buildHeaders function not calling the line, this.set('headers', headers). Or maybe the headers are getting set but the propertychange event isn't firing. I've isolated it down that far, but am running out of debugging ideas.

I compared the ol.layer.Vector documentation between v3.11.0 and v3.12.0. There is no noticeable difference that I can see between the two versions which makes me think it's a problem on my end. I've been at this for hours and still cannot find the source of the error. Are you aware of anything that might be causing this?

Thanks,

When clicking on the categorized button repeatedly, I notice that on occasion the colors for a particular property are incorrect. For example, when looking at the continents property of the world_countries.geojson, sometimes the colors of the countries are different. This happens quite infrequently and the continent that it happens on seems completely random. The issue is in the randomHexColor method. If a small number is generated, the leading zeros get lobbed off and you end up with a hex string that is less than 6 chars. The following method is pseudorandom, but it guarantees a 6 digit hex and is superfast.

layerTree.prototype.randomHexColor = function() {
    return '#' + Math.random().toString(16).slice(2,6);
};

Just thought I'd share.

Mr. Farkas,

At the bottom of page 44 there is a note:

"Note that forms and form-related events should be generated
dynamically by the object in the production code."

Do you mean eliminating the HTML altogether and replacing it with javascript? For example, the first few lines of the "new vector" form might look something like this:

var $dialog = $('<div>');
var $form = $('<form class="addlayer">');
var $fieldset = $('<fieldset>');
$fieldset.append($('<label for="open-displayname">Display Name</label>'));
$fieldset.append($('<input type="text" id="open-displayname" name="displayname" class="displayname">'));
$fieldset.append($('<label for="open-geomtype">Geometry Type</label>'));
var $selectNode = $('<select id="open-geomtype" name="geomtype" class="geomtype ui-selectmenu">');
$selectNode.append(this.createMenuOption("geomcollection", "Geometry Collection"));
$selectNode.append(this.createMenuOption("polygon", "Polygon"));
$selectNode.append(this.createMenuOption("line", "Line"));
$selectNode.append(this.createMenuOption("point", "Point"));
$fieldset.append($selectNode);
$fieldset.append($('<input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>'));
$form.append($fieldset);
$dialog.append($form);
$('body').append($dialog);
// Events go here. Removed for brevety.

I pieced this together from some code I've been working on just for illustration. Should I be using var and append to build up the form? I can't think of how else you would do it. Am I on the right track?

Thanks,

-WM

Hello,

In your book, on page 56, you say that dynamic loading should be avoided. Could you explain why in more detail? Maybe provide a few examples?

Thanks,

WM

Hello Gábor,

I'm new to web mapping and web development, it might be my bad, sorry for that in advance if that's the case(and as you can imagine your book is very precious to me.)

I'm trying to add WMS 1.1.1 from my local GeoServer via link: http://localhost:8080/geoserver/ows?service=wms&version=1.1.1&request=GetCapabilities. However the button 'check for layers' does not operate, nothing happens when I click it. What should I do to get it working ?

It seems to me like the logic in selectEventEmitter actually prevents the var error in handleEvents from evaluating to anything other than false.

For example,

error = (layerType !== type && layerType !== 'geomcollection') ? true : false;

should never be true. The emitter control guarantees it. Also,

var selectedLayer = this.layertree.getLayerById(this.layertree.selectedLayer.id);
error = selectedLayer instanceof ol.layer.Vector ? '' : 'Please select a valid vector layer.';

In what situations might I encounter a vector layer that would be considered invalid?
From what I can tell, the only way you can fire drawend is to call handleEvents. The only way to call handleEvents is to select a draw control. And the only way to select a draw control is if a vector layer that supports that draw control is selected a priori. According to the book, Page 119,

If the layer has a vector type, we use a permissive logic. We enable every editing control, check for the type of the layer, and disable the inappropriate drawing controls. We also deactivate them; therefore, they do not get stuck if we change the selected layer during an editing session. If the layer is not a vector, we use a restrictive logic and disable every editing control.

And according to Page 120, paragraph 1,

If we are working with a draw line or draw polygon tool, we check for the active layer. If it is not a vector, we simply call the interaction's finishDrawing method.

So, checking to see if the active layer is indeed a vector seems unnecessary?

The book does however say,

On the other hand, the disabled property of a DOM element can be overridden from the browser; thus, we should make the drawing process completely foolproof.

Maybe this is why all the error checking is needed? If so, how exactly could I go about "overriding a DOM element from the browser" to force the error?

I just noticed that I get this error when editing a layer name.

layerSpan.addEventListener('blur', function () {
    if (this.contentEditable) {
        this.contentEditable = false;
        layerDiv.draggable = true;
        layer.set('name', this.textContent);
        layerDiv.classList.add('ol-unselectable');
        layerDiv.title = this.textContent;
        this.scrollTo(0, 0);
    }
});

The error occurs on the this.scrollTo(0, 0) line.

I tried googling but everything I'm seeing is related to jquery. Do you have any suggestions for a fix?