diff --git a/package.json b/package.json index 96e4cc3..be47128 100644 --- a/package.json +++ b/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", diff --git a/src/app.js b/src/app.js index 8808d5d..7dd0b48 100644 --- a/src/app.js +++ b/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! HTML fungerar i popupen. Template här?.").openPopup(); - - return [dummyLayer, dummyMarker]; -} - $(function () { $('button').addEventListener('click', function () { console.log('click'); diff --git a/src/geolet.js b/src/geolet.js new file mode 100644 index 0000000..e47ccf6 --- /dev/null +++ b/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; +} diff --git a/src/index-backend.js b/src/index-backend.js new file mode 100644 index 0000000..9a67de3 --- /dev/null +++ b/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;