Posted on

some postgresql snippets

making polygon from array of points:

if line is not closed:

turning geom_dump setof into array:

create empty array / truncate array:

append to array:

order array:

average of array:

uniq elements in array:

multiline comment

Posted on

Geocoding with python

There is a lot of services that provide geocoding or reverse geocoding. In this example I would like to show you an easy way how to implement one of this service, datasciencetoolkit (http://www.datasciencetoolkit.org/) in python script. Big advantage of this service is that you dont need to register to get a key.
Continue reading Geocoding with python

Posted on

My first html5 canvas game part2

This is the second part of my tutorial on building basic html5 canvas game (the firts part is here). Last time, we built some easy logic for spawning meteorits and their movement, control of ship and some collision events. Now we would like to add some counters for lives and points and some bonuses to make this game even more entertaining.

Continue reading My first html5 canvas game part2

Posted on

Creating custom control button in leaflet

custom control button

In this post, I would like to shortly describe how to easily create, style and use self-defined control button.

 

L.Control.extend

We should start with extending the original class:

 

onAdd

onAdd method should be now filled with definition of div, its styling and event handlers. For example:

 

map.addControl

Initialization is done by addControl method called on map object:

 

Working example:

See the Pen Leaflet custom control by Eidam (@eidam61) on CodePen.

Also,  I should mention that we can use existing plugins. For example http://cliffcloud.github.io/Leaflet.EasyButton/.

Posted on

My first html5 canvas game part1

In this post, I would like to present you my first attempt to code a javascript game based on canvas. As my experiences with this technology are limited, I had to improvise a bit. My goal was to create a game where a triangle shaped spaceship under the control of player tries to avoid all the asteroids around and pick randomly generated bonuses.

Continue reading My first html5 canvas game part1

Posted on

number to characters function

This is a short snippet for converting number to characters in alphabet. For example, 3 should be D, 7 is H. It should be a problem when trying to convert a number bigger than 25 (length of alphabet is 26, I am counting from 0). It that case, we got more than one character – for example 26 is AA, 150 is FU, 2222 is DHM.

This code should be used for example for converting number of column to its name in Excel.

Code in coffeescript:

 

In javascript:

 

In action:

See the Pen coffeescript function for converting number to string of characters by Eidam (@eidam61) on CodePen.

Posted on

Draggable and Resizable without jqueryUI

I was searching for possibilities to build “windows-like” div’s without the need of importing jquery UI. I found out, there are still not a lot of alternatives when comes to jquery UI and therefore I could find a way to do it by my own.

At the begginig, here is my html code:

 

RESIZABLE

Actually, making div resizable is very easy and you would need only two lines of css:

 

DRAGGABLE

The real problem should be to build your div’s interaction, so when holding .handler element, all .draggable is moving.For this task, I used jquery. To initialize action :

 

 

Inside the mousemove listener, I put code to change css rules for position, values from position of mouse. I also changed the class of dragged divs to be able to manipulate css:

 

window.getSelection().removeAllRanges() unselects all what was selected by moving the div, what should be sometimes a little bit annoying.

I am always moving dragged div to the position, so mouse is in the middle of handler. This is not the ideal case, but it is easy to write. The harder way should be to get relative position of mouse inside the handler and then trying to preserve that values.

 

At this point, I should add a function to stop dragging. Firstly, event listeners for this action:

 

…and now the function itself:

 

 

$(this).off(‘mousemove’) will turn off listener for mousemove. That means, our moving action will stop until one click on the handler again.

 

The another problem should be z-index of our dragged div. As we manipulate with “dragging” class, we should just add some css rules:

 

 

 

Working example of this is here:

 

See the Pen Draggable Resizable without jquery ui by Eidam (@eidam61) on CodePen.

Posted on

Converting svg to png with canvg

Canvg is a js library that parses svg and creates canvas. However I found out, it is also a nice way (and the only I have found so far) to convert svg to png on client. The trick is to draw a static parsed svg to hidden canvas and then take it as a url image and put inside <a> element. Then we click this element for example with jquery click().

This should be done with this code

html :

js:

 

This looks easy and nice. But the real problem came when I realized there is no possibility to include external css styles. Solution for this problem was strongly inspired by this discussion https://code.google.com/p/canvg/issues/detail?id=143 . As we are not able to include a real css files, we have to use CDATA construct inside svg structure to enabling us towrite various code. So here we could append  a <style> tag with all our implemented css rules. This rules are in my case obtained with iteration over document.styleSheets, but also ajax or another solution could be used. My iteration looks almost exactly like the one from that discussion I mentioned above. Assuming I have all my rules for this svg in one separated css file (svg.css) I use this code:

Then I appended this style string wrapped to <style> element and “![CDATA[]]” to svg container

 

And here is a “working” example on codepen (codepen doesnt support downloading files):

See the Pen Donwload svg as png by Eidam (@eidam61) on CodePen.

Posted on

Text labels in leaflet

Labels are fundamental part of cartography but when it comes to web map APIs, it’s not always easy to handle them. In leaflet we can use L.divIcon class and set “html” parameter.

This divIcon could be then assigned to marker this way:

 

Styling this label could be done

a) by specifying the className parameter:

 

and then the css rule, for example:

 

or b) by defining inline style in html  parameter

 

In case we want to use annotation for more object, we can write a function

and call it this way:

 

A working example:

See the Pen Labels in leaflet by Eidam (@eidam61) on CodePen.


Another way is to use an existing plugin, for example https://github.com/Leaflet/Leaflet.label

 

 

 

Posted on

Get average elevation of rectangle in google maps

One of the services providing earth elevation is “The Google Elevation API” <https://developers.google.com/maps/documentation/elevation/>. There are lot of tutorials describing the way to catch the z-value of point or line. In this text we would like to show one possibility to get average elevation of a rectangle.

We will start with html code

 

Then we would like to build a default map and some interaction for making our rectangle. We will also be able to specify the number of points on X and Y axis to calculate the average from.

For interaction we will use google maps API, that is initialized this way:

 

The rectangle will be created with mouseclick event:

 

…then makeRectangle(e) will look :

 

At this point we are able to create rectangle on click and change its position and size. With next function calculatePoints() we will cover this rectangle with number of points we defined in html- with two <input type=”number”> and their  xValue and yValue.

 

Function getElevation(mPosition, x, y, valX, valY) will be launched for all points. We pass all the arguments to be able to indicate last point to avoid callbacking.

As a result we will get something like this

elevationScreen

 

 

 

 

 

 

 

 

 

 

 

You can try this code on jsfiddle 

Posted on

Basic statistics in javascript 1

In this post I would like to talk a little bit about making statistics with javascript. I am not an expert neither in javascript nor math, but sometimes I need to recalculate, standardize or analyse some values. I have created some function, all of them will have input of array with values. Output will be a number or an array with numbers as a result of chosen statistic operation.

 

Sum

The first operation I would like to talk about is sum, because it is very simple. First option is to just iterate through all the values in array:

The second option is to use “Array.prototype.reduce” method:

 

Arithmetic mean

Most of people would just say “average”. But in statistics, there are lot of so called “measures of central tendency” that define center of the distribution. Arithmetic mean is very easy to calculate, it is just a sum divided by number of elements:

 

Median

Another “measure of central tendency” is median. It is the middle value that separates the higher half from the lower half of the data set. If the number of values is odd, we just pick the middle one after sorting the array. The problem is, when we have even number of values. In this case we just sum two “middle” values and divide them by two. Even number will return “0” after %2.

 

Mode 

Mode is the next central tendency value and shows the number that is in the set as most frequent one. If there are more values as most frequent and you need just one, this is one option:

all the values are saved in js object “modeMap” and variable “maxEl” is the most frequent value.

There is a possibility, more values are most frequent and in this case you would like to return an array of this values:

In our code we added lines for getting all the values and keys from object. Then we found maximal frequency and iterated all the values to found all the keys.

 

There are more “measure of central tendency” but really dont know why would one use them.