10 Open-Source Projects Every JavaScript Geo Dev Should Know About

3 Replies

That is not tied to a proprietary platform

An article flew by in my Twitter stream, with the title “10 Open-Source Projects Every #JavaScript Geo Dev Should Know About”. As I consider myself a Javascript Geo Dev i thought that there might be som OpenSource gems I’ve missed and clicked the link. The link brought me to esri.com and what I was presented with was this article, listing 10 open source javascripts projects that I’ve never heard of.

Why? Most of them (or all, no links, and I can’t bother to google them all) are ESRIs own libraries, and although OpenSource they are tied to the ESRI platform. In fact, from what I understand, 4 or 5 of them are directly tied to ArcGIS Online.

This made me feel a bit tricked. Not that there are anything wrong with ESRI releasing OpenSource code, but where there is an implicit requirement that you use their paid services, what is the use for others?

But, instead of complaining I’ll present a list of my own, that should be of a wider use to all Javascript Geo devs (although I’m rather certain that most of you’ve heard about most of them already!)

1. OpenLayers 3

We all know OpenLayers 2 (don’t we?) and most of you probably know that the brand new OpenLayers 3 is in the making (beta 4 now!). Lots of features, a complete rewrite and heavy use of the Closure compiler.

2. Leaflet

The web-friendly, lightweight, hipster no-frills mapping library that excels in beeing un-bloated and easy to use. Just try it, seriously!

3. Proj4js

A JavaScript port of proj.4, meaning that you can do all your coordinate re-projections right in the browser!

4. jsts

A JavaScript port of JTS Topology Suite, a library of spatial predicates and functions for processing geometry objects. It works, but is a rather straight Java-port, which leads me to the next entry:

5. Njord.js

Njord.js is a vanilla JS, client side lib for lightweight geoprocessing, envisioned to compete with jsts and heavily inspired by Shapely. It’s written by yours truly and is under development.

6. D3

A JavaScript visualization library for HTML and SVG. I personally know next to nothing about it and haven’t used it, but if you need to add some visualisations to your map app D3 seems to be the way to go.

7. Three.js

Three.js simplifies the task of working with WebGL from Javascript. We all know that 3d is the future, so why not start learning it. If you don’t think that mapping and 3d can be united, take a look at this lib.

8. KuGIS

KuGIS is a browser-driven GIS-application with support for a lot of spatial analysis. Driven by Leaflet and JSTS. Really shows what you can do in the browser these days.

9. Bootleaf

Although I haven’t used it myself I’ve heard some good things about this lib, actually just a “simple, responsive template for building web mapping applications with Bootstrap 3, Leaflet and typeahead.js”.

10. SpatialBB

Also written by yours truly, SpatialBB (or “spatially enabeled Backbone”) is an attempt to merge the MVC-capabilities of Backbone.js with the spatial capabilities of Leaflet. Also a work in (some state of) progress, but I kinda like the idea.

So, that was my list. What did I forget? Are there any gems that’s useful? Please point me in their direction!

Nerdebøker

4 Replies

Etter at jeg fikk meg en Kindle (for en stund siden) og virkelig har tatt den i bruk (ikke fullt så lenge siden) har Amazon sine algoritmer begynnt å kjenne meg. Det er alltid litt skummelt med den ensrettingen man får av slike algoritmer, men nå har jeg vært gjennom endel bøker som dreier seg om tidlig IT-utvikling på en eller annen måte.

Tenkte jeg skulle dele lista her hvis andre skulle være interesserte.

Noen bøker du føler burde vært med på lista? Amazon tar jo ikke alt, så jeg tar gjerne imot tips (gjerne med en begrunnelse).

Polet på alternaiv-tripp?

5 Replies

Vinmonopolet har et magasin de gir ut månedlig eller noe slikt, vinbladet. Som regel mye spennende lesning, men i mars-utgaven, klarer de (og det under headingen “fagprat”) å lire av seg en solid dose vås.

La meg begynne med å sitere innledningen:

Personlig synes jeg det er litt fint med alt det man ikke helt forstår. Alt det som ikke kan forklares med ord eller formler. I større eller mindre grad vil de fleste som lager vin støtte seg til noe mer enn vitenskap. Kall det gjerne overtro eller overbevisning. Eller erfaring. Denne gangen har fagavdelingen sett nærmere på fenomener og metoder som ikke nødvendigvis har naturvitenskapens velsignelse. Det vil ikke dermed si at det er fullstendig galskap av den grunn. Dette er erfaringsbasert kunnskap som begrunnes med gode resultater og nedarvet kunnskap.

Ringer det noen bjeller? Her er vi godt over i tra-la-la-land allerede. “Mer enn vitenskap”? Hva mener de med det? “naturvitenskapens velsignelse”? Hæ?

Er det ikke bare du som er i overkant skeptisk nå, Atle? Er det ikke sånn at vinmakeri har tusenårige tradisjoner og ikke helt er forstått av forskere? Joda, det er nok noe i det. Man har ikke forsket på alt. Men, det er mer:

Det biodynamiske baserer seg på et holistisk verdenssyn der vinmarken dyrkes etter naturens rytmer, og solens, månens og planetenes faser blir tatt hensyn til. Jorden og plantene behandles med egne og naturlige preparater som skal gi sterke og harmoniske planter.

I.dont.even. Holistisk? Naturens rytmer? Harmoniske planter??

Svaret biodynamikerne gir er tredelt. Først og fremst handler det om at de er mer fornøyde med vinene etter omlegging til biodynami. Dessuten melder de om at plantene blir sunnere og mer motstandsdyktige mot sopp og sykdommer. Til slutt er det et etisk valg som handler om respekt for naturen og omgivelsene våre.

En ting er økologisk jordbruk. En annen ting er å støffe innvoller med preparater, grave de ned over vinteren og spre dem i homeopatiske doser ut over åkeren. Og dette skriver Vinmonopolet i sitt fagblad? Herre min hatt.

Rudolf Steiner pekte på forbindelsen mellom de kosmiske kreftene og plantenes vekst. Ved å studere astrologiske kalendere og eksperimentere med å dyrke forskjellige grønnsaker, utviklet Maria Thun en av biodynamiens viktigste redskaper – Maria Thuns såkalender. Kalenderen bygger på at planetenes stilling påvirker hvordan de forskjellige vekstene på jorda vokser. Basert på hennes observasjoner delte hun månens bevegelse gjennom zodiacen, himmelens koordinatsystem, i fire: bladdag, rotdag, blomsterdag og fruktdag.

Zodiacen? Jeg gir opp. Jeg hadde håpet av Vinmonopolet under headingen “fagprat” hadde klart noe mer enn å gulpe opp svada fra biodynamikerens lærebøker. Dette blir like tynt som Meinklang, det eneste (og siste) “biodynamiske” ølet jeg har smakt.

Nå er det faktisk utrolig synd at Vinmonopolet er akkurat dette, et monopol, for jeg føler VELDIG på lysten til å boikotte folk som farer med denne typen fjas. Det finnes mye vi ikke forstår, men det betyr ikke at det har noe for seg å servere vrøvlet til Rudolf Steiner som fakta, for der er det på ingen måte.

På slutten et stalltips: Hvis du synes de “biodynamiske prinsippene” høres like skrudde ut som jeg gjør anbefaler jeg deg å se etter “Debio“-merket Demeter-merket neste gang du er i butikken: Har et produkt et slikt merke lar du produktet ligge igjen, dette er nemlig en sertifisering på at maten er produsert med en solid dose svadatenking.

Ninjatriks i JavaScript, del 2

Leave a reply

Jeg var ikke sikker på om det kom til å skje, men når jeg øynet muligheten til å kombinere mine to favoritthobbyer, koding og øl, måtte jeg jo bare. Dermed blir det del 2 av ninjatriks i JavaScript, denne gang med fokus på funksjonell programmering og underscore.js.

Ifølge Douglas Crockford er JavaScript “Lisp in C’s Clothing”. Dvs, det er et funksjonelt språk utkledd som et prosedyrespråk. De fleste som har skrevet litt JavaScript har funnet ut at det går fint å skrive prosedyre (og kanskje også objekt)-orientert i JavaScript.

Men, hvis det nå er sånn at JavaScript er funksjonelt så burde det kanskje være noe å hente? Jeg snakker ikke helt nazi no-sideeffects, everything is a function, men noen gode ideer her og der?

Det har ihvertfall jeg funnet ut de senere år, etter at jeg tok i bruk Backbone.js og dermed Underscore.js. Underscore.js er et lite utility-bibliotek som beskriver seg som “It’s the tie to go along with jQuery’s tux, and Backbone.js’s suspenders.”. Ja, mange av de funksjonene underscore.js tilbyr finnes som “native”-javascript funksjoner i nyere implementasjoner. Dog, jeg har lært meg underscore og trives med det, dermed så vil jeg fokusere på det.

Men, hva er det å hente? Hva gir underscore og en funksjonell tankegang meg? Jeg tenkte å ta noen eksempler, så kan du se selv.

Eksempel 1 er ganske greit. Du har ei liste med objekter (la oss si øl-objekter). Du vil finne alle objekter (dvs øl) som er produsert av Haandbryggeriet. Gitt lista (som tilfeldigvis er fra en juleølsmaking jeg deltok på):

    var beers = [
       {"brewery": "Austmann", "name": "Jingle Beer", "score": 6.49, "abv": 7},
        {"brewery": "Binding-Brauerei", "name": "Santa Clausthaler", "score": 2.14, "abv": 0},
        {"brewery": "Brasserie St-Feuillien", "name": "Cuvée de Noël", "score": 6.43, "abv": 9},
        {"brewery": "Dahls", "name": "Julebrygg", "score": 5.19, "abv": 4.5},
        {"brewery": "Fanø Bryghus", "name": "Julebryg", "score": 5.74, "abv": 7.2},
        {"brewery": "Grans Bryggeri", "name": "Lade Gaards Brygghus Juleøl", "score": 5.92, "abv": 6.5},
        {"brewery": "Hansa", "name": "Ekstra Vellagret Julebrygg", "score": 6.39, "abv": 6.5},
        {"brewery": "Haandbryggeriet", "name": "Nissefar", "score": 6.07, "abv": 7},
        {"brewery": "Haandbryggeriet", "name": "Nissegodt", "score": 6.26, "abv": 4.5},
        {"brewery": "Inderøy", "name": "Nisseøl", "score": 6.06, "abv": 4.5},
        {"brewery": "Nøgne Ø", "name": "God Jul", "score": 5.89, "abv": 8.5},
        {"brewery": "Nøgne Ø", "name": "Julesnadder", "score": 7.19, "abv": 4.5},
        {"brewery": "Nøgne Ø", "name": "Special Holiday Ale", "score": 6.71, "abv": 9},
        {"brewery": "Ægir", "name": "Julebrygg", "score": 6.21, "abv": 4.7}
    ];

Hvis vi nå vil finne ut hvilke som var butikkøl (dvs abv <= 4.7) kan du gjøre dette med en for-løkke: 

    var pol_limit = 4.7;
    var shop_beers = [];
    for (var i = 0; i< beers.length; i++) {
        var beer = beers[i];
        if (beer.abv <= pol_limit) {
            shop_beers.push(beer);
        }
    }
    console.log(shop_beers);

Ganske standard, men mye boilerplate og unødvendige temporær-variabler. Hva med Underscore.js? Vi kan bruke _.filter():

var isShopBeer = function (beer) {
    return (beer.abv <= 4.7);
};
console.log(_.filter(beers, isShopBeer));

Det som skjer her er at _.filter() looper gjennom lista beers og returnerer en ny liste over de ølene som returnerer true i funksjonen isShopBeer. Ganske fiffig, færre linjer og lettere utbyttbart.

En annen artig ting, er at siden vi nå har en funksjon for å bestemme om et øl er butikkøl, vet vi at alle øl som returnerer false i denne er poløl. Dermed kan vi finne antall poløl ved å bruke _.reject():

console.log(_.reject(beers, isShopBeer));

Så, dermed kan vi finne ut at vi hadde:

var shopBeers = _.filter(beers, isShopBeer);
var polBeers = _.reject(beers, isShopBeer);

console.log("Antall øl: " + beers.length);
console.log("Antall butikkøl: " + shopBeers.length);
console.log("Antall poløl: " + polBeers.length);

eller:

  • Antall øl: 14
  • Antall butikkøl: 6
  • Antall poløl: 8

Hva om vi vil finne ut hvilket øl som gjorde det best? Og dårligst? Med en for-løkke kunne vi gjort dette som 

var max = beers[0];
for(var i = 1; i max.score) {
        max = beer;
    }
}
console.log(max.name) //Julesnadder

Med underscore kan vi bruke _.max():

var getBeerScore = function(beer) {
    return beer.score;
}

console.log(_.max(beers, getBeerScore)); //Julesnadder

og tilsvarende har vi såklart _.min():

console.log(_.min(beers, getBeerScore).name); //Santa Clausthaler

Altså: 

var best = _.max(beers, getBeerScore);
var worst = _.min(beers, getBeerScore);

console.log("Best: ", best.brewery + " " + best.name + " (" + best.score + "/10)");
console.log("Værst: ", worst.brewery + " " + worst.name + " (" + worst.score + "/10)");

eller:

  • Best: Nøgne Ø Julesnadder (7.19/10)
  • Værst: Binding-Brauerei Santa Clausthaler (2.14/10)

Best av polølene da? Typisk ville vi gjort noe sånt som:

var pol_limit = 4.7;
    var max = 0.0;
    var best;
    for (var i = 0; i< beers.length; i++) {
        var beer = beers[i];
        if (beer.abv > pol_limit && beer.score > max) {
            console.log(beer.name)
            best = beer;
            max = beer.score;
        }
    }
    console.log(best.name); //Special Holiday Ale

Men, vi kan kombinere underscore-funksjoner:

console.log(_.max(_.reject(beers, isShopBeer), getBeerScore)); //Special Holiday Ale

Hvor mange øl var det med fra hvert bryggeri?

Vel, en måte å løse det på er følgende:

var result = {};
for (var i = 0; i< beers.length; i++) {
    var beer = beers[i];
    if (result.hasOwnProperty(beer.brewery)) {
        result[beer.brewery] += 1;
    } else {
            result[beer.brewery] = 1;
    }
} 
console.log(result);

Med underscore kan vi bruke _.groupBy():

var getBrewery = function (beer) {
    return beer.brewery;
}
console.log(_.groupBy(beers, getBrewery))

denne gir oss riktignok en liste med øl-objekter på hver key, ikke bare antallet. Det kan vi dog få til med en _.reduce():

console.log(_.reduce(_.groupBy(beers, getBrewery), function (memo, beers, brewery) {
    memo[brewery] = beers.length;
    return memo;
},{}));

Men, det spørs om det er det vi egentlig vil? Med resultatet av groupBy'en kan vi spytte ut endel statistikk:

_.each(_.groupBy(beers, getBrewery), function (beers, brewery) {
    var avg_score = _.reduce(beers, function(sum, beer){ return sum + beer.score; }, 0) / beers.length;
    console.log(brewery + ": " + beers.length + " øl, " + avg_score + " i gj.snitt");
});

Vel, det var det for denne gang. Håper du lærte noe nytt, hvis du har spørsmål eller kommentarer er det bare å mase (jeg har sikkert gjort noen feil, jeg er på ingen måte noen mester, men jeg lærer stadig!)