A Curious Animal

Born to be curious, born to be animal!

Releasing code samples for The Book of OpenLayers 3

22 August, 2014
- 2 min read

Writing a book is hard, requires constance and motivation and, more important, be strong to keep them both. Least but not last you need time. Time to see the source code and learn. Time to see the examples and learn. Time to understand all the concepts and learn. Time to explain in your words what you have learnt. Today, I announced the links where you can find the online samples and code repository for The book of OpenLayers3. Code repository is open, so don't hesitate to download and contribute with new samples. The work is not complete, I need to finish the theory part of a chapter related to vector information and write two more chapters I have in mind and, of course, create some samples to see the theory in practice. I will write another post introducing the book with a more in depth chapter description. This post is only about the code samples. Your feedback is really valuable for me !!! About the code samples For those interested in contribute, the project for the code samples is built using the Yeoman tool, which combines Grunt and Bower, and the generator for web application , which offers a project skeleton with a bunch of good practices. In addition to the default plugins used by the generator, I made use of the Grunt's plugin  (see here) that implement like PHP include directive. This way, I can create a page layout (with headers, footers, etc) reusable for all the pages. See the file for more details about plugins. For the implementation I made use of the Bootstrap framework, the nice Yeti theme from Bootswatch project and the highlight.js project to highlight the samples code. See more details of project dependencies in the file.

Leaflet and how avoid map panning on mouseout

12 May, 2014
- 3 min read

A couple of days ago , a friend asked this simple question in a Spanish forum. The scenario is simple, you have a map and when dragging it you would like to stop the action when the mouse goes beyond the limits of the map, really beyond the (or any other DOM element that) contains the map. The first try anyone can try could be something like: {% highlight javascript %} // create a map in the "map" div, set the view to a given place and zoom var map = L.map('map').setView(51.505, -0.09, 13); // add an OpenStreetMap tile layer L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // Register event to enable/disable dragging on mouse out. map.on('mouseout', function() { map.dragging.disable(); }); map.on('mouseover', function() { map.dragging.enable(); }); {% endhighlight %} but that has no effect. (See here) Now, remove the listener and try again: {% highlight javascript %} // create a map and add the layer var map = ... // Register event to enable/disable dragging on mouse out. map.on('mouseout', function() { map.dragging.disable(); }); {% endhighlight %} surprisingly, when the mouse goes out the map the dragging action continues active and once you finish dragging the method seems to take place and you can't drag the map again. (See here). After some time looking at Leaflet source code (we aware I have done it for Leaflet 0.7.2) I found a possible solution but, first, let me do some explanation. The class has attached hooks, like drag, or zoom actions, which provides the map with some behavior. The  class is responsible to control the dragging action. It has / methods and, more important, it uses internally a  instance, which is responsible to detect and catch mouse events on the map. This way: the  catches mouse events on  the map panel (also for mouse move), makes some process and triggers some new events that are catch by the  instance the  instance makes some process and triggers the know map events and . In addition, invoking implies a call to too but (I don't understand yet why), it seems not takes effect until you release the mouse button. The  instance continues catching mouse event and informing  All this say, a possible solution to stop the dragging action when the mouse goes out the map panel is to freeze the work of  Please, note the next code violates almost all the SOLID(http://en.wikipedia.org/wiki/SOLID_(object-oriented_design) principles, so don't fire me. {% highlight javascript %} L.Draggable.prototype.freeze=false; L.Draggable.prototype.updatePosition= function () { if(this._freeze) { return; } }; {% endhighlight %} The code adds a new property to the  class and redefines the method to check the property. Now, you can freeze the mouse dragging action as: {% highlight javascript %} map.on('mouseout', function() { map.dragging.draggable.freeze=true; }); map.on('mouseover', function() { map.dragging.draggable.freeze=false; }); {% endhighlight %} You can see it in action here.

The book of OpenLayers3 is coming !!!

15 February, 2014
- 1 min read

This week the beta2 version of OpenLayers3 has been released (see the OpenLayers3 is comming from Boundlessgeo blog) with great improvements on vector layers rendering and image manipulation. Similarly, The book of OpenLayers3 follows a similar progress, always one or two steps after the project evolution. Currently, you can found a sample chapter about the Map and View, both theory and practice, and I have almost finished the next chapter focused on how to work with Layers. After explaining layers the natural flow is explain the Sources and Formats, which allows to load content from a great number of data sources. They are very related to layers, but I preferred to differentiate the concepts in two separated chapters. This is what I'm currently working on. What else requires to be in the book? I need to make a chapter focused on vector data, explain how to work with geometries, features and styles. Events are also important, we can listen for changes in objects and react accordingly. As you can see there are many work to be done yet and your feedback is the most valuable thing I can get at this moment.

Sample chapter for The book of OpenLayers3 is out !!!

25 January, 2014
- 1 min read

A couple of days ago I release the sample chapter for The book of OpenLayers3. I will appreciate all your feedback, comments, ideas, ... The chapter is dedicated to two of the main concepts within the OpenLayers3, the map and the view. While in previous versions the map was the central piece that controls from layers or controls to the way the map is visualized, that is, the extension and projection to be used, in OpenLayers3 these responsibilities has been decouples. The map continues being responsible to contain layers, controls or (the new) overlays, but there is a new concept, the view, responsible to determine how the map is visualize. So the view is who determines the visible map extent, center location or projection. Take into account OpenLayers3 is in active development so things can vary slightly until the final release of OpenLayers3 and this book. Help me promoting the book and remember I'm waiting for your comments.