SpatialBB

Spatial Hipster Javascript

Gis-faggruppemøte Bouvet

Atle Frenvik Sveen, Bouvet ASA 54°23'55"S 3°24'5"E

Agenda

• Backbone.js
• Leaflet
• SpatialBB
• Eksempel

Som betyr?

• MVC: Model, View og Collection
• Strukturert Javascript
• Separasjon av data og presentasjon
• Enkelt å snakke med fornuftig API

Hvorfor backbone?

• Lite (58kb)
• Mye brukt
• Stabilt
• Ikke masete
• Legger seg ikke opp i HTMLen din

Slutt på rot?

                        


var MyListView = Backbone.View.extend({
    initialize: function () {
        this.collection.on("add", this.modelAdded, this);
    },

    modelAdded: function (model) {
        this.$el.append(
            new MyModelView({"model": model}).render().$el
        );
    }
});

var MyModelView = Backbone.View.extend({
    tagName: "li",
    render: function () {
        this.$el.html(this.model.get("name"));
        return this;
    }
});

/*Create a collection*/
var markerCollection = new Backbone.Collection();

/*Create a listview*/
var view = new MyListView({
                            "el": $("#view"),
                            "collection": collection
});

collection.add([
                {"name": "Item 1},
                {"name": "Item 2}
]);
                        
                    

Andre alternativer

• Ember.js
• Angular.js
• Knockout.js
• Twitter Flight
• HTML9 Responsive Boilerstrap JS
• +++

Se også

Jaha?

• Tenk Google Maps
• ..eller OpenLayers

Kart med Popup

                        
var map = L.map('map').fitWorld();

L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © OpenStreetMap contributors.',
        maxZoom: 18
    }
).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.  Easily customizable.')
    .openPopup();
                        
                    

Hvordan funker det?

• Map-objekt lever i en div
• Legger til layere (bakgrunnskart)
• Legge til Markers
  • ... som har eventer

Under panseret

• Oversette skjerm-koordinater til "verdenskoordinater"
• Oversette verdenskoordinater til lengde-/breddegrad
• Hente kart-tiles
• Posisjonere markere

Du får ikke bakgrunnskart

.. men det er mange tile-tilbydere

• Cloudmade
• OpenStreetMap
• kartverket
• Lage egne (TileMill)

Tanke..

Er ikke .. Markers på kart .. mye av det samme som..Models i en collection?

Enter SpatialBB!

• Microbibliotek som kombinerer Backbone.js og Leaflet
• Påbegynnt på lørdag (!)
• Startet for å teste javascript-testing
• github.com/atlefren/SpatialBB

MarkerModel

                        
var model = new SpatialBB.MarkerModel({
                            "name": "Model 1",
                            "position": {"lon": 10, "lat": 60}
});

model.getMarker(); //returnerer en Leaflet-marker
                        
                    

MarkerCollection

                        
var model1 = new ns.MarkerModel({"position": {"lon": 10, "lat": 60}});
var model2 = new ns.MarkerModel({"position": {"lon": 11, "lat": 60}});
var collection = new ns.MarkerCollection();
collection.add([model1, model2]);
collection.getLayerGroup(); //en L.MarkerGroup som oppdateres når collection oppdateres
                        
                    

Eksempel

Mer avansert

Fikse http://www.bouvet.no/BouvetWEB/Om_Oss_Vaare_Kontorer.aspx

• Hente modeller over REST
• Templates med underscore
• Forskjellige kart-tiles
• interaksjon mellom view og kart

HTML

                        
<div class="main">
    <div id="map">map</div>
    <div id="offices"></div>
</div>

<script type="text/template" id="office_template">
    <strong><%=name%></strong><br />
    <%= street %><br />
    <% if(line2) {%> <%= line2 %><br /> <% } %>
    <%= zip %> <%= place %><br />
    Tlf: <%= tlf %><br />
    <% if(!line2) {%> <br /> <% } %>
</script>
                        
                    

JSON-data

Javascript - Objekter

Javascript - Init

Kart

• Sette opp kart
• Flere bakgrunnskart

Javascript

Bruke SpatialBB

• Konvertere model og collection
• Legge layerGroup til kart

Javascript - Spatial Objekter

Javascript - lasting

Interaktivitet

• Zoom kart til det kontoret vi trykker på

Javascript - Views