map: locate user and show marker

This commit is contained in:
Nils Schneider 2015-04-04 19:08:28 +02:00
parent 6f546bf823
commit 2c944224e3
6 changed files with 161 additions and 6 deletions

View file

@ -11,6 +11,7 @@
- Improved performance on Firefox
- Labels in graph view
- infobox: link to geouri with node's coordinates
- map: locate user
### Fixed bugs:

59
lib/locationmarker.js Normal file
View file

@ -0,0 +1,59 @@
define(["leaflet"], function (L) {
return L.CircleMarker.extend({
outerCircle: {
stroke: false,
color: "#4285F4",
opacity: 1,
fillOpacity: 0.3,
clickable: false,
radius: 16
},
innerCircle: {
stroke: true,
color: "#ffffff",
fillColor: "#4285F4",
weight: 1.5,
clickable: false,
opacity: 1,
fillOpacity: 1,
radius: 7
},
accuracyCircle: {
stroke: true,
color: "#4285F4",
weight: 1,
clickable: false,
opacity: 0.7,
fillOpacity: 0.2
},
initialize: function(latlng) {
this.accuracyCircle = L.circle(latlng, 0, this.accuracyCircle)
this.outerCircle = L.circleMarker(latlng, this.outerCircle)
L.CircleMarker.prototype.initialize.call(this, latlng, this.innerCircle)
this.on("remove", function() {
this._map.removeLayer(this.accuracyCircle)
this._map.removeLayer(this.outerCircle)
})
},
setLatLng: function(latlng) {
this.accuracyCircle.setLatLng(latlng)
this.outerCircle.setLatLng(latlng)
L.CircleMarker.prototype.setLatLng.call(this, latlng)
},
setAccuracy: function(accuracy) {
this.accuracyCircle.setRadius(accuracy)
},
onAdd: function(map) {
this.accuracyCircle.addTo(map).bringToBack()
this.outerCircle.addTo(map)
L.CircleMarker.prototype.onAdd.call(this, map)
}
})
})

View file

@ -1,7 +1,47 @@
define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
var options = { worldCopyJump: true,
zoomControl: false
}
define(["d3", "leaflet", "moment", "locationmarker", "leaflet.label"],
function (d3, L, moment, LocationMarker) {
var options = { worldCopyJump: true,
zoomControl: false
}
var LocateButton = L.Control.extend({
options: {
position: "bottomright"
},
active: false,
button: undefined,
initialize: function (f, options) {
L.Util.setOptions(this, options)
this.f = f
},
onAdd: function () {
var button = L.DomUtil.create("button", "locate-user")
L.DomEvent.disableClickPropagation(button)
L.DomEvent.addListener(button, "click", this.onClick, this)
this.button = button
return button
},
update: function() {
this.button.classList.toggle("active", this.active)
},
set: function(v) {
this.active = v
this.update()
},
onClick: function () {
this.f(!this.active)
}
})
function mkMarker(dict, iconFunc, router) {
return function (d) {
var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d))
@ -59,11 +99,49 @@ define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
var barycenter
var groupOnline, groupOffline, groupNew, groupLost, groupLines
var map, userLocation
var locateUserButton = new LocateButton(function (d) {
if (d)
enableTracking()
else
disableTracking()
})
function enableTracking() {
map.locate({watch: true,
enableHighAccuracy: true,
setView: true
})
locateUserButton.set(true)
}
function disableTracking() {
map.stopLocate()
locationError()
locateUserButton.set(false)
}
function locationFound(e) {
if (!userLocation)
userLocation = new LocationMarker(e.latlng).addTo(map)
userLocation.setLatLng(e.latlng)
userLocation.setAccuracy(e.accuracy)
}
function locationError() {
if (userLocation) {
map.removeLayer(userLocation)
userLocation = null
}
}
var el = document.createElement("div")
el.classList.add("map")
self.div = el
var map = L.map(el, options)
map = L.map(el, options)
L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", {
subdomains: "1234",
@ -72,6 +150,11 @@ define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
maxZoom: 18
}).addTo(map)
map.on("locationfound", locationFound)
map.on("locationerror", locationError)
map.addControl(locateUserButton)
var nodeDict = {}
var linkDict = {}
var highlight
@ -200,16 +283,19 @@ define(["d3", "leaflet", "moment", "leaflet.label"], function (d3, L, moment) {
}
self.resetView = function () {
disableTracking()
highlight = undefined
updateView()
}
self.gotoNode = function (d) {
disableTracking()
highlight = {type: "node", o: d}
updateView()
}
self.gotoLink = function (d) {
disableTracking()
highlight = {type: "link", o: d}
updateView()
}

View file

@ -6,6 +6,10 @@
width: 100%;
height: 100%;
button.locate-user:after {
content: '\f2a7';
}
.node-alert {
-webkit-animation: blink 2s linear;
-webkit-animation-iteration-count: infinite;

View file

@ -158,6 +158,10 @@ button {
outline: none;
}
button.active {
color: #dc0067 !important;
}
button:hover {
background: white;
color: #dc0067;

View file

@ -20,7 +20,8 @@ module.exports = function (grunt) {
"no-multi-spaces": 0,
"no-new": 0,
"no-shadow": 0,
"no-use-before-define": [1, "nofunc"]
"no-use-before-define": [1, "nofunc"],
"no-underscore-dangle": 0
}
},
sources: {