DB

package.json

@@ -29,6 +29,7 @@
     "leaflet.markercluster": "^0.5.0",
     "lodash": "^4.13.1",
     "marko": "^3.7.2",
+    "minimongo": "^3.8.2",
     "mongoose": "^4.5.4",
     "mongopot": "github:lohfu/mongopot",
     "morgan": "^1.7.0",

src/app.js

@@ -7,12 +7,12 @@ require('leaflet.markercluster');
 L.Icon.Default.imagePath = './img';
 
 const Map = L.map('map');
+const GeoLet = require('./geolet')(L, Map);
 
 navigator.geolocation.getCurrentPosition((position) => {
-  console.log();
   const InitialPosition = [position.coords.latitude, position.coords.longitude];
   Map.setView(InitialPosition, 11);
-  makeDummyLayer(InitialPosition);
+  new GeoLet({pos: InitialPosition, popup: "hej", _id: "dummy" });
 });
 
 //Tiles
@@ -26,24 +26,6 @@ Map.on('moveend', function (e) {
   console.log('Moveend triggered. Bounding box (request all geolets in this box from API endpoint):', Map.getBounds());
 });
 
-
-function makeDummyLayer(markerPos) {
-  //All layers will have to be initialized like this
-  const dummyLayer = L.markerClusterGroup({
-    spiderfyOnMaxZoom: false,
-    showCoverageOnHover: false,
-    zoomToBoundsOnClick: false,
-    removeOutsideVisibleBounds: true,
-    maxClusterRadius: 0 //Essentially disables clustering, we just want performance gains from this plugin
-  }).addTo(Map);
-
-  //Add a dummy geolet to the dummy layer
-  const dummyMarker = L.marker(markerPos).addTo(Map);
-  dummyMarker.bindPopup("Hejhej! <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'>HTML fungerar i popupen. Template här?</a>.").openPopup();
-
-  return [dummyLayer, dummyMarker];
-}
-
 $(function () {
   $('button').addEventListener('click', function () {
     console.log('click');

src/geolet.js

@@ -0,0 +1,56 @@
+'use strict';
+const db = require('./index-backend');
+console.log("db", db)
+module.exports = function (L, Map) {
+  //Create the geolet layer
+  const rootLayer = L.markerClusterGroup({
+    spiderfyOnMaxZoom: false,
+    showCoverageOnHover: false,
+    zoomToBoundsOnClick: false,
+    removeOutsideVisibleBounds: true,
+    maxClusterRadius: 1 //Essentially disables clustering, we just want performance gains from this plugin
+  }).addTo(Map);
+
+
+
+
+
+//The let constructor
+  function GeoLet(data) {
+    if (!data._id || !data.pos)
+      throw "No position or no id given for marker";
+
+    const geolet = this;
+    //Create the let
+    this.marker = L.marker(data.pos);
+    console.log(this.marker, rootLayer)
+    rootLayer.addLayer(this.marker);
+
+    //Insert into db. In future data change should trigger marker change.
+    db.markers.upsert(data, function(dataDoc) {
+      geolet.data = dataDoc;
+    });
+
+    //Add popup
+    if(data.popup)
+      this.marker.bindPopup(data.popup);
+
+    this.element = this.marker._icon;
+  }
+
+  GeoLet.prototype = {
+    remove() {
+      Map.removeLayer(this.marker);
+      db.markers.remove({_id: data._id}, function(dataDoc) {
+      });
+    },
+    hide() {
+      this._icon.classList.add('hidden')
+    },
+    unhide() {
+      this._icon.classList.remove('hidden')
+    }
+  }
+
+  return GeoLet;
+}

src/index-backend.js

@@ -0,0 +1,13 @@
+var minimongo = require("minimongo");
+
+var IndexedDb = minimongo.IndexedDb;
+
+// Create IndexedDb
+const db = new IndexedDb({namespace: "mydb"}, function() {
+    // Add a collection to the database
+    db.addCollection("markers", function() {
+        // Always use upsert for both inserts and modifies
+    });
+}, function() { throw "DB fail!"; });
+
+module.exports = db;