workshop-ol's People
workshop-ol's Issues
Replace function prototypes with javascript classes within examples
It has been the most used method historically, but nowadays it is easier for learners to use javascript classes directly rather than introducing more complex concepts such as prototypes.
For example:
/* lession 13 */
const CustomControl = function(options={}) { // <-- it can be completely rewritten using modern javascript classes
const button = document.createElement('button');
button.className = 'far fa-map'
const element = document.createElement('div');
element.className = 'custom-control ol-control';
element.appendChild(button);
ol.control.Control.call(this, {
element: element,
target: options.target || document.getElementById('contenitore_controllo_esterno'),
});
this.onClick = function(evt) {
const map = this.getMap();
map.getView().setZoom(4);
}
button.addEventListener('click',this.onClick.bind(this));
}
CustomControl.prototype = Object.create(ol.control.Control.prototype);
CustomControl.prototype.constructor = CustomControl;
const control = new CustomControl({})
Avoid using too much syntatic sugars within examples
For those who are starting to learn new concepts it would always be better to avoid syntax sugar or too advanced control logics.
For example:
- https://github.com/gis3w/workshop-ol/blob/fd78a97c7beb4ec2518946733853456816f4d7a7/_lessons/l12.md
- https://github.com/gis3w/workshop-ol/blob/fd78a97c7beb4ec2518946733853456816f4d7a7/_lessons/l13.md
/* lession 12 */
closer.addEventListener('click', () => { // <-- avoid arrow functions if unnecessary
popup && popup.setPosition(undefined); // <-- avoid shortcircuiting logic if unnecessary
closer.blur();
return false;
});
const interaction = new ol.interaction.Interaction({
handleEvent(evt){ // <-- avoid object shorthand property / methods names if unnecessary
if (evt.type === 'dblclick'){
const coordinate = evt.coordinate;
content.innerHTML = '<h3>Coordinate:</h3><div>' + coordinate + '</div>';
popup.setPosition(coordinate);
}
return true;
}
})
/* lession 13 */
const options = {
element, // <-- avoid object shorthand property assignment if unnecessary
render, // <-- avoid object shorthand property assignment if unnecessary
target, // <-- avoid object shorthand property assignment if unnecessary
}
In general, with due caution, some of these concepts can also be introduced gradually, but it should still be indicated that and / or why you are using a particular syntax that deviates from a recommended standard (for example: as you can imagine the question of the assignment of the properties of an object can be a non-trivial topic for those approaching development or a new language).
Duplicated `toggleCondition` option within lesson 15
In the punctual selection chapter the toggleCondition
parameter is listed twice with two different descriptions, perhaps we were referring to another option?
/*lession 15*/
const singlePointSelection = new ol.interaction.Select({
layers: [poi],
style: selectionStyle,
// toggleCondition: come aggiungere le features alla corrente selezione
// features: Collezione su cui limitarela selezione
// filter: se volissimo filtare la feature (cattura una feature alla volta) in base ad una proprietà specifica
// toggleCondition: // nel caso customizzare il tipo di selezione
// addCondition: funzione che permette di agire sull'aggiunte di nuove features selezionate
// removeCondition: come sopra ma per la rimozione
multi: false // dafault. Nel caso volessimo selezionare più features quando sono in overlay bisogna settarlo a true
});
Reference: _lessons/l15.md#selezione-puntuale
Remove useless jquery dependency within examples
For such simple examples it is not necessary to introduce more complexity to students.
For example:
- https://github.com/gis3w/workshop-ol/blob/c7ed798ccac3285c18666e00478e9fbeb5adfec4/_lessons/l11.md
- https://github.com/gis3w/workshop-ol/blob/c7ed798ccac3285c18666e00478e9fbeb5adfec4/_lessons/l12.md
/* lession 11 */
const gbw_coords_el = $("#gbw_coords"); // same as: document.querySelector("#gbw_coords");
const wgs84_coords_el = $("#wgs84_coords"); // same as: document.querySelector("#wgs84_coords");
/* lession 12 */
$("#extent").html(extent.join(", ")); // same as: document.querySelector("#extent").innerHTML = extent.join(", ");
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.