componentDidMount() {
this.timer = setInterval(this.handleInterval.bind(this), 3000);
this.map = L.map('MapView').setView([51.5050362, -0.0900202], 13);
this.marker = L.marker([51.5050362, -0.0900202], {
icon: L.icon({
iconUrl: marker,
iconAnchor: [12, 35]
})
});
this.polyline = L.polyline = L.polyline([],
{ color: 'red' }
);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18,
minZoom: 8
}).addTo(this.map);
this.marker.addTo(this.map);
this.polyline.addTo(this.map);
/* eslint-disable */
this.map.on('click', (e) => {
console.log(e);
});
/* eslint-enable */
}
function drawActivityPolylineOnMap(activity) {
if (!activity.map.summary_polyline) {
console.log(activity.name);
return null;
} else {
var decodedPath = L.Polyline.fromEncoded(activity.map.summary_polyline);
var osmPath = L.polyline(decodedPath.getLatLngs(), {color: '#FF0000', weight: 2}).addTo(internalMap);
osmPath.bindPopup(activityPopup);
osmPath.addEventListener('mouseover',
function (event) {
osmPath.setStyle({color: 'blue', weight: 7});
});
osmPath.addEventListener('mouseout',
function () {
osmPath.setStyle({color: '#FF0000', weight: 2});
});
osmPath.addEventListener('click',
function (event) {
if (onSelectActivity) {
onSelectActivity(activity);
}
activityPopup.setContent(infoWindowCompiler());
activityPopup.setLatLng(event.latlng);
});
return osmPath;
}
}
createPolyline(locations, settings) {
var polyline = L.polyline(locations,
{
color: settings.color,
opacity: settings.strokeOpacity,
weight: settings.strokeWeight
}
).addTo(this.map);
return polyline;
}
buildSymbol: function(dirPoint, latLngs, map, index, total) {
const opts = this.options;
const d2r = Math.PI / 180;
// for a dot, nothing more to compute
if(opts.pixelSize <= 1) {
return L.polyline([dirPoint.latLng, dirPoint.latLng], opts.pathOptions);
}
const midPoint = map.project(dirPoint.latLng);
const angle = (-(dirPoint.heading - 90)) * d2r;
const a = L.point(
midPoint.x + opts.pixelSize * Math.cos(angle + Math.PI) / 2,
midPoint.y + opts.pixelSize * Math.sin(angle) / 2
);
// compute second point by central symmetry to avoid unecessary cos/sin
const b = midPoint.add(midPoint.subtract(a));
return L.polyline([map.unproject(a), map.unproject(b)], opts.pathOptions);
}
_addSegment: function(coords, styles, mouselistener) {
var i,
pl;
for (i = 0; i < styles.length; i++) {
pl = L.polyline(coords, styles[i]);
this.addLayer(pl);
if (mouselistener) {
pl.on('mousedown', this._onLineTouched, this);
}
}
},
_addMeasureBoundary: function (latlngs) {
if (latlngs.length < 2) {
if (this._measureBoundary) {
this._layer.removeLayer(this._measureBoundary);
this._measureBoundary = null;
}
return;
}
if (!this._measureBoundary) {
this._measureBoundary = L.polyline(latlngs, this._symbols.getSymbol('measureBoundary')).addTo(this._layer);
} else {
this._measureBoundary.setLatLngs(latlngs);
}
}
createLineGuide: function () {
var options = L.extend({dashArray: '5,10', weight: 1}, this.options.lineGuideOptions);
return L.polyline([], options);
},
const startAngle = Math.PI / 6;
const legLength = circumference / _2PI;
const angleStep = _2PI / count;
this._spiderLegs = L.featureGroup();
this._spiderMarkers = L.featureGroup();
this._spiderMarkers.on('click', this.onSpiderMarkerClick, this);
for (let i = count - 1, angle, point, id, newPos; i >= 0; i--) {
angle = startAngle + i * angleStep;
point = L.point(center.x + legLength * Math.cos(angle), center.y + legLength * Math.sin(angle))._round();
id = ids[i];
newPos = map.layerPointToLatLng(point);
this._spiderLegs.addLayer(L.polyline([latlng, newPos], legOptions));
this._spiderMarkers.addLayer(circleMarker({
type: 'Feature',
id: id,
geometry: {
type: 'Point',
coordinates: [newPos.lng, newPos.lat],
},
}, this.options));
}
this._spiderLegs.addTo(map);
this._spiderMarkers.addTo(map);
this._originalOpacity = options.opacity;
} else if (typeof center === 'array') {
center = L.latLng(oldPoints[0][0], oldPoints[0][1]);
}
var newPoints = [];
oldPoints.forEach(function (p) {
var newPoint = L.latLng(p.lat, p.lng);
newPoint.rotateLongitudeAround(10, oldPoints[0]);
newPoint.rotateLatitudeAround(10, oldPoints[0]);
newPoints.push(newPoint);
});
this.setLatLngs(newPoints);
};
var arrowPolyline = L.polyline([], {color: 'purple'}).addTo(map);
arrowPolyline.dragging = false;
function addArrowSegment(mouseEvent) {
// console.log('LatLng Clicked:', mouseEvent.latlng);
var newPoint = mouseEvent.latlng;
newPoint.setPrecision(4);
arrowPolyline.addLatLng(newPoint);
arrowPolyline.redraw();
}
arrowPolyline.on('mousedown', function (mouseEvent) {
arrowPolyline.dragging = true;
console.log('Mouse down on polyline');
});
map.on('mouseup', function (mouseEvent) {
_handleMeasureDoubleClick: function () {
var latlngs = this._latlngs, calced, resultFeature, popupContainer, popupContent, zoomLink, deleteLink;
this._finishMeasure();
if (!latlngs.length) {
return;
}
if (latlngs.length > 2) {
latlngs.push(_.first(latlngs)); // close path to get full perimeter measurement for areas
}
calced = calc.measure(latlngs);
if (latlngs.length === 1) {
resultFeature = L.circleMarker(latlngs[0], this._symbols.getSymbol('resultPoint'));
popupContent = pointPopupTemplate({
model: calced,
humanize: humanize,
i18n: i18n
});
} else if (latlngs.length === 2) {
resultFeature = L.polyline(latlngs, this._symbols.getSymbol('resultLine'));
popupContent = linePopupTemplate({
model: _.extend({}, calced, this._getMeasurementDisplayStrings(calced)),
humanize: humanize,
i18n: i18n
});
} else {
resultFeature = L.polygon(latlngs, this._symbols.getSymbol('resultArea'));
popupContent = areaPopupTemplate({
model: _.extend({}, calced, this._getMeasurementDisplayStrings(calced)),
humanize: humanize,
i18n: i18n
});
}
popupContainer = L.DomUtil.create('div', '');
popupContainer.innerHTML = popupContent;
zoomLink = $('.js-zoomto', popupContainer);
if (zoomLink) {
L.DomEvent.on(zoomLink, 'click', L.DomEvent.stop);
L.DomEvent.on(zoomLink, 'click', function () {
this._map.fitBounds(resultFeature.getBounds(), {
padding: [20, 20],
maxZoom: 17
});
}, this);
}
deleteLink = $('.js-deletemarkup', popupContainer);
if (deleteLink) {
L.DomEvent.on(deleteLink, 'click', L.DomEvent.stop);
L.DomEvent.on(deleteLink, 'click', function () {
// TODO. maybe remove any event handlers on zoom and delete buttons?
this._layer.removeLayer(resultFeature);
}, this);
}
resultFeature.addTo(this._layer);
resultFeature.bindPopup(popupContainer, this.options.popupOptions);
resultFeature.openPopup(resultFeature.getBounds().getCenter());
},
create_obj: function () {
this.obj = L.polyline(
this.model.get('locations'),
this.get_options()
);
},
componentWillMount() {
super.componentWillMount();
const {map, positions, ...props} = this.props;
this.leafletElement = Leaflet.polyline(positions, props);
}
module.exports = function(itinerary, index){
console.log('Les plus proches: ', itinerary);
var rank = '';
var color = '#000000';
if (index === 2){
rank += 'first';
color = '#008200';
}
// Get route points
var destination = L.latLng(itinerary.mc.destination.k, itinerary.mc.destination.B);
var route = itinerary.routes[0];
var path = route.overview_path;
var routeLatLng = [];
for (var j = 0; j < path.length; j++)
routeLatLng[j] = {lat: path[j].k, lng: path[j].B};
// Create and add infos on the route
var itTime = route.legs[0].duration.value;
var minutes = Math.floor(itTime / 60);
var secondes = itTime % 60;
var time = minutes + "' " + secondes + "\" ";
var distance = route.legs[0].distance.value;
var myIcon, myAnchor;
if (itTime >= 600){ // if time to display is too long for regular bubble
myIcon = new L.Point(100, 70);
myAnchor = new L.Point(50, 108);
}
else {
myIcon = new L.Point(70, 70);
myAnchor = new L.Point(35, 108);
}
var infos = L.divIcon({
className: ['infos', rank].join(' '),
iconSize: myIcon,
iconAnchor: myAnchor,
html: time + '<div class="subInfos">' + distance + ' m </div>'
});
var marker = L.marker(destination, {icon: infos});
// Create route
var polyline = L.polyline(routeLatLng, {
className: ['route', rank].join(' '),
color: color,
smoothFactor: 3.0,
noClip: true,
opacity: 1
});
return {
polyline: polyline,
marker: marker
};
};
LeafletGeomVisualizer.prototype._updatePolyline = function(entity, time, entityHash, entityDetails) {
var polylineGraphics = entity._polyline;
var featureGroup = this._featureGroup;
var positions, polyline;
var details = entityDetails.polyline;
if (!defined(details)) {
details = entityDetails.polyline = {
layer: undefined
};
}
var geomLayer = details.layer;
var show = entity.isAvailable(time) && Property.getValueOrDefault(polylineGraphics._show, time, true);
if (show) {
positions = Property.getValueOrUndefined(polylineGraphics._positions, time);
show = defined(positions);
}
if (!show) {
cleanPolyline(entity, featureGroup, entityDetails);
return;
}
var carts = Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions);
var latlngs = [];
for (var p = 0; p < carts.length; p++) {
latlngs.push(L.latLng( CesiumMath.toDegrees(carts[p].latitude), CesiumMath.toDegrees(carts[p].longitude)));
}
var color;
var width;
if (polylineGraphics._material instanceof PolylineGlowMaterialProperty) {
color = defaultColor;
width = defaultWidth;
} else {
color = Property.getValueOrDefault(polylineGraphics._material.color, time, defaultColor);
width = Property.getValueOrDefault(polylineGraphics._width, time, defaultWidth);
}
var polylineOptions = {
color: color.toCssColorString(),
weight: width,
opacity: color.alpha
};
if (!defined(geomLayer)) {
if (latlngs.length > 0) {
polyline = L.polyline(latlngs, polylineOptions);
polyline.on('click', featureClicked.bind(undefined, this, entity));
polyline.on('mousedown', featureMousedown.bind(undefined, this, entity));
featureGroup.addLayer(polyline);
details.layer = polyline;
}
} else {
polyline = geomLayer;
var curLatLngs = polyline.getLatLngs();
var bPosChange = (latlngs.length !== curLatLngs.length);
for (var i = 0; i < curLatLngs.length && !bPosChange; i++) {
if (!curLatLngs[i].equals(latlngs[i])) {
bPosChange = true;
}
}
if (bPosChange) {
polyline.setLatLngs(latlngs);
}
for (var prop in polylineOptions) {
if (polylineOptions[prop] !== polyline.options[prop]) {
polyline.setStyle(polylineOptions);
break;
}
}
}
};
var map = L.map('map');
map.setView([47.63, -122.32], 11);
L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', {
maxZoom: 18,
minZoom: 5,
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}).addTo(map);
var marker = L.marker([47.63, -122.32]);
marker.addTo(map);
var polylinePath = [
[47.607204675859045, -122.3298454284668],
[47.60182268729636, -122.32521057128906],
[47.60095457276622, -122.32349395751952],
[47.5998260023411, -122.32237815856934],
[47.59842248977284, -122.32124090194701],
[47.59655590441905, -122.32023239135741],
[47.59175167310035, -122.32126235961914],
[47.588278460128734, -122.32057571411133],
[47.58329978624572, -122.31997489929199],
[47.579478622338286, -122.3192024230957],
[47.57756793579513, -122.3196315765381]
];
var polyline = L.polyline(polylinePath);
polyline.addTo(map);
var mongo = require('mongo');
where() {
const w = this._where;
if (w !== undefined)
return w; //cached value
const bounds = this['@'];
if (bounds) {
//Leaflet uses (lat,lon) ordering but SpimeDB uses (lon,lat) ordering
//when = bounds[0]
var lon = bounds[1];
var lat = bounds[2];
//alt = bounds[3]
var label = this.N || this.I || "?";
var m;
var linePath, polygon;
if (linePath = this['g-']) {
//TODO f.lineWidth
m = L.polyline(linePath, {color: this.color || 'gray', data: this, title: label});
} else if (polygon = this['g*']) {
m = L.polygon(polygon, {color: this.polyColor || this.color || 'gray', data: this, title: label});
} else {
//default point or bounding rect marker:
var mm = {
data: this,
title: label,
stroke: false,
fillColor: "#0078ff",
fillOpacity: 0.5,
weight: 1
};
if (!(Array.isArray(lat) || Array.isArray(lon))) {
mm.zIndexOffset = 100;
//f.iconUrl
m = L.circleMarker([lat, lon], mm);
//.addTo(map);
} else {
const latMin = lat[0], latMax = lat[1];
const lonMin = lon[0], lonMax = lon[1];
mm.fillOpacity = 0.3; //TODO decrease this by the bounds area
m = L.rectangle([[latMin, lonMin], [latMax, lonMax]], mm);
}
}
if (m) {
//m.on('click', clickHandler);
//m.on('mouseover', overHandler);
//m.on('mouseout', outHandler);
return this._where = m;
}
} else {
return this._where = false;
}
}
buildSymbol: function(dirPoint, latLngs, map, index, total) {
return this.options.polygon
? L.polygon(this._buildArrowPath(dirPoint, map), this.options.pathOptions)
: L.polyline(this._buildArrowPath(dirPoint, map), this.options.pathOptions);
},
componentWillMount:function() {
var $__0= this.props,map=$__0.map,positions=$__0.positions,props=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{map:1,positions:1});
this._leafletElement = Leaflet.polyline(positions, props);
},