Commit 9cdb7749 authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Shapes are now rendered according to zoom

parent 20569ccb
......@@ -10,6 +10,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
### Added
- If no map position is provided when loading an existing sketch, it zooms automatically to existing shapes
### Changed
- Drawn shapes are now more or less wide according to zoom level
## 0.1.1
......
......@@ -31,6 +31,56 @@ const domSearchAddress = document.getElementById("searchbar");
/***********************************************************************************
* Leaflet rendering customization
*/
L.CircleMarkerZ = L.CircleMarker.extend({
_update: function() {
if(this._map) {
// Compute actual radius
if(this.options.z) {
const z = this._map.getZoom();
let newRadius = this.options.radius;
if(z > this.options.z) {
newRadius = newRadius * Math.pow(2, z - this.options.z);
}
else if(z < this.options.z) {
newRadius = newRadius / Math.pow(2, this.options.z - z);
}
this._radius = Math.max(1, Math.round(newRadius));
}
this._updatePath();
}
}
});
L.Polyline.include({
_update: function() {
if (!this._map) { return; }
// Compute actual weight
if(this.options.z) {
if(!this.options.originalWeight) { this.options.originalWeight = this.options.weight; }
const z = this._map.getZoom();
let newWeight = this.options.originalWeight;
if(z > this.options.z) {
newWeight = newWeight * Math.pow(2, z - this.options.z);
}
else if(z < this.options.z) {
newWeight = newWeight / Math.pow(2, this.options.z - z);
}
this.options.weight = Math.max(1, Math.round(newWeight));
}
this._clipPoints();
this._simplifyPoints();
this._updatePath();
}
});
/***********************************************************************************
* API communication
*/
......@@ -248,11 +298,11 @@ function finishShapeDrawing(e) {
let layer;
let layerOpts;
if(cleanNodes.length === 1) {
layerOpts = { stroke: false, fillColor: drawOpts.color, radius: drawOpts.penSize / 2, fillOpacity: drawOpts.opacity };
layer = L.circleMarker(cleanNodes[0], layerOpts);
layerOpts = { stroke: false, fillColor: drawOpts.color, radius: drawOpts.penSize / 2, fillOpacity: drawOpts.opacity, z: map.getZoom() };
layer = new L.CircleMarkerZ(cleanNodes[0], layerOpts);
}
else {
layerOpts = { color: drawOpts.color, weight: drawOpts.penSize, opacity: drawOpts.opacity };
layerOpts = { color: drawOpts.color, weight: drawOpts.penSize, opacity: drawOpts.opacity, z: map.getZoom() };
layer = L.polyline(cleanNodes, layerOpts);
}
shapesLayer.addLayer(layer);
......@@ -357,7 +407,7 @@ function changeMode(mode) {
function showShapes(geojson) {
const layer = L.geoJSON(geojson, {
style: feature => feature.properties,
pointToLayer: (feature, latlng) => L.circleMarker(latlng, feature.properties)
pointToLayer: (feature, latlng) => new L.CircleMarkerZ(latlng, feature.properties)
});
shapesLayer.addLayer(layer);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment