When I draw / edit circles manually on a leaflet map using the draw plugin, their radius is shown in km even though I have the below settings which should show the radius in miles.
What am I doing wrong and what can I do to get the radius to show in miles?
map.addControl(new L.Control.Draw({
position: 'topright',
edit: {
featureGroup: drawnItems,
circle: {
metric: true,
feet: false
}
},
draw: {
circle: {
metric: true,
feet: false
}
}
}));
You need to set metric: false and feet: false
map.addControl(new L.Control.Draw({
position: 'topright',
edit: {
featureGroup: drawnItems,
circle: {
metric: false,
feet: false
}
},
draw: {
circle: {
metric: false,
feet: false
}
}
}));
Related
I want to hide map's labels when the zoom is increased above a certain level.
For this example, I want to hide all labels related to the collection1, after the zoom level of 5:
https://codepen.io/ollazarev/pen/XBWEEq
let viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
timeline: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
});
let collection1 = new Cesium.LabelCollection();
collection1.add({
position: Cesium.Cartesian3.fromDegrees(-101.678, 57.7833),
text: 'Canada',
});
collection1.add({
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
text: 'Philadelphia',
});
viewer.scene.primitives.add(collection1);
let collection2 = new Cesium.LabelCollection();
collection2.add({
position: Cesium.Cartesian3.fromDegrees(-74.0059728, 40.7127753),
text: 'New York',
});
collection2.add({
position : Cesium.Cartesian3.fromDegrees(-79.38318429999998, 43.653226),
text: 'Toronto',
});
viewer.scene.primitives.add(collection2);
Cesium's 3D camera isn't aware of "zoom levels" as such, but you can turn off labels after a certain distance away using translucencyByDistance.
For example, here's your demo again with translucencyByDistance added to each of the labels:
let viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
timeline: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
});
let collection1 = new Cesium.LabelCollection();
collection1.add({
position: Cesium.Cartesian3.fromDegrees(-101.678, 57.7833),
text: 'Canada',
translucencyByDistance : new Cesium.NearFarScalar(6.0e7, 1.0, 7.0e7, 0.0)
});
collection1.add({
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
text: 'Philadelphia',
translucencyByDistance : new Cesium.NearFarScalar(4.0e7, 1.0, 7.0e7, 0.0)
});
viewer.scene.primitives.add(collection1);
let collection2 = new Cesium.LabelCollection();
collection2.add({
position: Cesium.Cartesian3.fromDegrees(-74.0059728, 40.7127753),
text: 'New York',
translucencyByDistance : new Cesium.NearFarScalar(1.0e7, 1.0, 3.0e7, 0.0)
});
collection2.add({
position : Cesium.Cartesian3.fromDegrees(-79.38318429999998, 43.653226),
text: 'Toronto',
translucencyByDistance : new Cesium.NearFarScalar(3.0e7, 1.0, 5.0e7, 0.0)
});
viewer.scene.primitives.add(collection2);
I am able to draw multiple polygon by using Google Draw manager. Now I am not able to select specific polygon from multiple polygon and delete and edit it. Also not able to get new array after edit or delete.
My demo.js code is as follows :
$scope.map = {
center: { latitude: 19.997454, longitude: 73.789803 },
zoom: 10,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
//radius: 15000,
stroke: {
color: '#08B21F',
weight: 2,
opacity: 1
},
fill: {
color: '#08B21F',
opacity: 0.5
},
geodesic: true, // optional: defaults to false
draggable: false, // optional: defaults to false
clickable: false, // optional: defaults to true
editable: false, // optional: defaults to false
visible: true, // optional: defaults to true
control: {},
refresh: "refreshMap",
options: { scrollwheel: true },
Polygon: {
visible: true,
editable: true,
draggable: true,
geodesic: true,
stroke: {
weight: 3,
color: 'red'
}
},
source: {
id: 'source',
coords: {
'latitude': 19.9989551,
'longitude': 73.75095599999997
},
options: {
draggable: false,
icon: 'assets/img/person.png'
}
},
isDrawingModeEnabled: true
};
$scope.drawingManagerOptions = {
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
]
},
circleOptions: {
fillColor: '#BCDCF9',
fillOpacity:0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
},
polygonOptions: {
fillColor: '#BCDCF9',
strokeColor: '#57ACF9',
fillOpacity: 0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
}
};
var coords = [];
var polygon;
$scope.eventHandler = {
polygoncomplete: function (drawingManager, eventName, scope, args) {
polygon = args[0];
var path = polygon.getPath();
for (var i = 0 ; i < path.length ; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
},
};
$scope.removeShape = function () {
google.maps.event.clearListeners(polygon, 'click');
google.maps.event.clearListeners(polygon, 'drag_handler_name');
polygon.setMap(null);
}
And My HTML code is as follows :
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control">
<ui-gmap-marker coords="map.source.coords"
options="map.source.options"
idkey="map.source.id">
</ui-gmap-marker>
<ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" events="eventHandler"></ui-gmap-drawing-manager>
</ui-gmap-google-map>
You can find polygon image for reference:
Now I want to select one of polygon from following image and want to delete or update it.
Some help will be really appreciable.
By the ui-google-map plugin's drawing manager doc, you could get the google.maps.drawing.DrawingManager object by the control attributes (putting there an object)
<ui-gmap-drawing-manager control="drawingManagerControl" options="drawingManagerOptions"></ui-gmap-drawing-manager>
and
$scope.drawingManagerControl = {};
//Now get the drawingManager object
var drawingManager = $scope.drawingManagerControl.getDrawingManager();
Having this object is the main work.
Now you can look on everything you need. For your case you need the overlaycomplete events, it will listen for every time you have drawn a shape (=> polygon , circle, polyline)
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
});
newShape is the new shape drawn, polygon in your case, so you can use it like a Polygon object and can use all you need in this reference.
Now I want to select one of polygon from following image and want to
delete or update it.
For it, we'll distinct the polygon selected, by assigning it in a global variable: eg var selectedShape;
And now, Add a click event listener for this drawn polygon and update it as the selectedShape, and now to delete or update, you can use the selectedShape variable.
var selectedShape;
... ...
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
});
Finally you can delete the selected shape by setting his map to null selectedShape.setMap(null); and update the shape by setting it editable to true shape.setEditable(true);
And finally to make these click event possible you need to add clickable options to true for all shape.
PS: Use the IsReady Service to have map ready before working on it
Working plunker: https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/
Update:
But how to get all co-ordinates of multiple polygon after edit or
draw.
you already have this in your script, in polygonecomplete ($scope.eventHandler). Now you can add it in overlaycomplete events listener, and for everytime you updated the shape (see code bellow)
But challenge is how to identify which polygon is edited on the
map and how to update that specific polygon from my array
You can push in an array for each shape created and could manage it:
...
var allShapes = []; //the array contains all shape, to save in end
....
//get path coords: I use your code there
function getShapeCoords(shape) {
var path = shape.getPath();
var coords = [];
for (var i = 0; i < path.length; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
return coords;
}
....
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
...
// get coordinate of the polygon
var shapeCoords = getShapeCoords(newShape);
// pushing this shape to allShapes array
allShapes.push(newShape);
});
in the delete function you can delete id by the index of the selectedShape
//delete selected shape
function deleteSelectedShape() {
if (!selectedShape) {
alert("There are no shape selected");
return;
}
var index = allShapes.indexOf(selectedShape);
allShapes.splice(index, 1);
selectedShape.setMap(null);
}
Now you have the allShapes array, and in the end you can loop it then get for each coordinates and save in your db.
I updated the plunker and added some debug log do show you.
This snipet from github could help:
https://github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html
I am now visualizing the polylines like below:
geojson = L.vectorGrid.slicer(lines, {
vectorTileLayerStyles: {
sliced: style},
maxZoom: 24, // max zoom to preserve detail on
interactive: true,
getFeatureId: function(f) {
return f.properties.id;
}
}).on('mouseover', mouseover_function).addTo(map);
searchCtrl.indexFeatures(lines.features, ['id']);
info.addTo(map);
The lines are the geoJSON file of all the poly lines.Sow now I divided My lines into 3 parts of geoJSON and have
lines_1
lines_2
lines_3
So I create three layers with the above three layers
geojson1 = L.vectorGrid.slicer(lines1, {
vectorTileLayerStyles: {
sliced: style},
maxZoom: 24, // max zoom to preserve detail on
interactive: true,
getFeatureId: function(f) {
return f.properties.id;
}
}).on('mouseover', mouseover_function).addTo(map);
geojson2 = L.vectorGrid.slicer(lines2, {
vectorTileLayerStyles: {
sliced: style},
maxZoom: 24, // max zoom to preserve detail on
interactive: true,
getFeatureId: function(f) {
return f.properties.id;
}
})
geojson3 = L.vectorGrid.slicer(lines3, {
vectorTileLayerStyles: {
sliced: style},
maxZoom: 24, // max zoom to preserve detail on
interactive: true,
getFeatureId: function(f) {
return f.properties.id;
}
})
So this is the three layers and I want to show geojson1 at all levels of zoom and geojson2 in zoom level 20 and geojson3 at zoom level 22.
How can i show these layers on different zoom levels.
any help is appreciated.
var drawnItems = new L.FeatureGroup();
leafletMap.addLayer(drawnItems);
L.drawLocal.draw.toolbar.buttons.polygon = 'Draw polygon!';
var drawControl = new L.Control.Draw({
position: 'topright',
draw: {
polyline: {
metric: true
},
polygon: {
allowIntersection: false,
showArea: true,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
}
},
circle: {
shapeOptions: {
color: '#662d91'
}
},
circle:false,
marker: false
},
edit: {
featureGroup: drawnItems,
remove: true
}
});
Hello friends,
i am using leaflet draw to draw polygon ,but after polygon is draw i want to show text inside that polygon, does that is possible.
thank you
I use a [bootbox] 1 dialog to ask for the text and [bindTooltip] 2 to put the text.
map.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
bootbox.prompt({title: "Any comment?", closeButton: false, callback: putTooltip});
function putTooltip(result) {
layer.bindTooltip(result, {'permanent': true, 'interactive': true});
}
});
Try using L.Tooltip with permanent set to true.
From the Leaflet.Draw github, this code snippet works with a popup:
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
editableLayers.addLayer(layer);
});
You can modify that code snippet to add a tooltip instead.
Is there a way to make the viewport of the map locked (not draggable)? I've got a map on my page but I can still scroll it up and down when I click and drag with the mouse...
<div class="map-container">
<div id="nz-map" style="width: 600px; height: 400px"></div>
</div>
and the js using to create map
/* map parameters */
var wrld = {
map: 'nz_mill_en',
backgroundColor: '#fff',
regionStyle: {
initial: {
fill: '#012051'
},
hover: {
"fill-opacity" : 1
}},
onMarkerClick: function(events, index) {
$(location).attr('href', markers[index].weburl);
},
onRegionLabelShow: function(e, el, code){
e.preventDefault();
},
colors:{
"Northern": '#012051',
"East Coast": '#012051',
"Central": '#012051',
"Upper South Island": '#012051',
"South Canterbury": '#012051',
"Otago": '#012051',
"Southland": '#012051'
},
series: {
regions:
[{
attribute: 'fill'
}]
},
zoomButtons: false,
zoomOnScroll: false,
focusOn: {
x: 0.3,
y: 0.7,
scale: 3
},
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
markers: markers,
};
$('#nz-map').vectorMap(wrld);
You set the panOnDrag parameter on false to disable panning of the map
var wrld = {
map: 'nz_mill_en',
backgroundColor: '#fff',
panOnDrag: false, // disable panning of the map
...
}