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

Angular.js in WordPress?

As web designers / programmers want to create sites loaded with user friendly access, the (still) favorized way is to utilize ajax functionality to some degree. But let’s say I want to use Ajax with Php,WordPress. This way is rather straightforward in WP – just copy code from Codex, that means create callback function, and ajax call using jQuery. It’ easy, we love it….but…

 

What if I have large / more complicated application to code? Perhaps I don’t like jQuery for this usage and I want to use something more convenient for current situation – for example Angular.js. I don’t want to create outstanding tutorial for creating Angular.js applications, here are just few ideas and options.

 

And one thing – many people could tell you, that using angular in WordPress is overkill. I agree.

Second thing – many people could tell you, that mixing angular and jQuery is bad idea(which you can’t avoid in WordPress completely). I agree.

The thing is – if you use it correctly and won’t mix it without thinking, then it is ok.

 

 

First of all, let’s assume that we have controllers, directives… set. Now we should create some Http provider service. Nothing much, just so it can be of use.

I have inline-injected core http service, which is now wrapped in my service named httpService. Http service is based on – or rather is dependent – $q service, which in return causes, that I can expect promise object returned. I utilize this in controller( .then(…)). Call from controller or something:

Okay, run it. You should get the page you have requested. This was easy…nothing too much hard. Now what about post method? Again call from controller or something:

Well, if i were to evaluate data received, i would receive ‘0’, or false.  The data which were sent could be in JSON format, that means in my case {action:get_group_product, product_id:xxx}. Why is that?

 

Answer lies in method, how wordpress accepts ajax calls and how jQuery packs data for transfer. In this case, angular isn’t doing anything bad, it just envelopes data in JSON container. So we need to do two things:

  • tell WordPress, that these datas are really in its favorized form, that means as form(html element) data
  • give angular, or better – http service, data encoded exactly how jQuery does

In practical example, it means changing and adding lines of code like this:

If you wonder why I used jQuery like this and tells you not to mix it without thinking – it’s just an example for you to see, that this line could be replaced by angular thing – you could use also

instead of that line.

With this, your sending request will be in correct form for WordPress ajax functionality.

 

Next we need backend ajax callback, that is if I use post method. In my case I want to call get_group_product action with one parameter and I want to get data in JSON format – why not. This step is covered on WordPress codex, but for completion:

With this, our Ajax call will be send right into get_group_product() function. You can see that I am using json_encode, which will cause, that http service will return data as Object. This object contains config data, and also my awaited data, so for access be prepared to use data.data.some_var

That’s it, you now have the basics, but there is always place for experimenting with angular.js in wordpress .

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.