I am using leaflet to show my geometry locations on the map. Now I have the popups working fine but when you hover over them, the location of the popup is in the middle of the line/string for example and not on the location of the mouse. Is it possible to change it to the location of the mouse so the map doesn't just suddenly move to a different location?
The code that I am using to open the popups in leaflet is as follows:
function addPopup(feature, layer) {
var popupContent = feature.properties.name;
layer.bindPopup(popupContent);
layer.on('mouseover', function (e) {
this.openPopup();
});
layer.on('mouseout', function (e) {
this.closePopup();
});
}
After #Falke Design pointed out that you could give the latlng coordinates to the openPopup function I made a cleaner version of the code:
function addPopup(feature, layer) {
var popupContent = feature.properties.name;
layer.bindPopup(popupContent);
layer.on('mouseover', function (e) {
this.openPopup(e.latlng);
});
layer.on('mouseout', function (e) {
this.closePopup();
});
}
You can convert the mousepoint to latlng and set the popup there.
layer.on('mouseover', function (e) {
var p = L.point([e.originalEvent.clientX,e.originalEvent.clientY])
var latlng = mymap.containerPointToLatLng(p);
this.openPopup(latlng)
});
layer.on('mousemove', function(e){
var p = L.point([e.originalEvent.clientX,e.originalEvent.clientY])
var latlng = mymap.containerPointToLatLng(p);
this.openPopup(latlng)
})
layer.on('mouseout', function (e) {
I am working on my first leaflet map and am running into an issue when trying to reset the style onMouseOut. it correctly changes style on mouse over but on mouse out, i keep getting: Object doesn't support property or method 'resetStyle'
This is what i have and what I have tried:
var MAP_ID = 'DISTRICT_MAP';
var map = L.map(MAP_ID).setView([37.71, -99.88], 4);
function showMap() {
var layerConfig = {
....
onEachFeature: onEachFeature,
style: style
};
var districtLayer;
//Add base map layer
L.esri.basemapLayer('Gray').addTo(map);
//Add the District layer
districtLayer = L.esri.featureLayer(layerConfig);
map.addLayer(districtLayer);
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7,
});
if (!L.Browser.ie && !L.Browser.opera12 && L.Browser.edge) {
layer.bringToFront();
}
}
// Can't get this to work!
function resetHighlight(e) {
//L.esri.featureLayer.resetStyle(e.target);
//e.target.resetStyle(e.target);
//e.layer.resetStyle();
}
function onEachFeature(feature, layer) {
layer.on("mouseover", function (e) {
highlightFeature(e);
});
layer.on("mouseout", function (e) {
if (e.target && e.target.feature && e.target.feature.properties) {
resetHighlight(e);
}
});
layer.on("click", function (e) {
....
}
});
}
function style(feature, layer) {
...
}
as per the API reference, that is a method on FeatureLayer itself, and expects you to pass the id of a specific feature.
// because the individual feature is GeoJSON, it has an id, along with properties and geometry
districtLayer.resetStyle(e.layer.feature.id);
I created a custom toggle to init the DrawingManager, and I'm able to delete the current shape (if there is one) when I initialise it using currentShape.setMap(null).
But how to delete a shape created with the DrawingManager at the precise moment the user starts do draw a new one?
As far as I know there's no "drawingstart" event (not in their documentation), for example, that could fire at the moment when the user starts drawing a shape.
I tried using this...
google.maps.event.addListener(map, 'dragstart', function(e) {
if (drawingManager.getDrawingMode() == "circle"){
currentShape.setMap(null);
}
});
...and also using the 'click' event, but those events don't fire when drawingManager.getDrawingMode() == "circle".
function initMap(){
map = new google.maps.Map(mapCanvas, mapOptions);
$toggleDrawing.on('click', function(){
toggleDrawing();
});
}
function toggleDrawing(){
if (!isDrawing){
if (!selectedArea){
// enable drawing mode
isDrawing = true;
$toggleDrawing.addClass('active');
initDrawing();
}else{
// delete selected area
deleteSelectedArea();
}
}else{
// disable drawing mode after drawing a shape
isDrawing = false;
$toggleDrawing.removeClass('active');
drawingManager.setDrawingMode(null);
}
}
function initDrawing(){
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
drawingControl: false
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
selectedArea = e.overlay;
toggleDrawing(false); // will set to false
});
// 'click' or 'dragstart' event are not fired if `drawingManager.getDrawingMode() == "circle"` (or any other shape)
// google.maps.event.addListener(map, 'click', function(e) {
// if (drawingManager.getDrawingMode() == "circle"){
// selectedArea.setMap(null);
// }
// });
// google.maps.event.addListener(map, 'dragstart', function(e) {
// if (drawingManager.getDrawingMode() == "circle"){
// selectedArea.setMap(null);
// }
// });
}
function deleteSelectedArea() {
if (selectedArea) {
selectedArea.setMap(null);
selectedArea = null;
}
}
Too easy. Attach event to the map-canvas instead of map:
// If it's drawing mode, delete the selected area (if there is one)
$('#map-canvas').on('click', function() {
if (drawingManager.getDrawingMode() == "circle"){
deleteSelectedArea();
}
});
Nice tips here.
Using javascript, how can I alter the leaflet.draw "Trash" button to delete all polygons that have been drawn and automatically save. Below is the code I've implemented but it is a complete hack. It removes the active polygon, but after I delete an object once I begin to get errors in the console when I click the "Trash" icon like NotFoundError: Node was not found and TypeError: this._deletedLayers is null
map.on('draw:editstart', function (e) {
if(e.handler == 'remove' && typeof drawnItem != 'undefined' && drawnItem !== null){
if(window.console) window.console.log('Drawing deleted...');
if(typeof drawnItem != 'undefined' && drawnItem !== null){
drawnItems.removeLayer(drawnItem);
}
$('.leaflet-draw.leaflet-control .leaflet-draw-actions').hide();
$('.leaflet-popup-pane .leaflet-draw-tooltip').remove();
}
});
Solved my own problem with a custom control (thanks to stackexchange - https://gis.stackexchange.com/questions/60576/custom-leaflet-controls):
UPDATED! added #SpiderWan suggestions (thanks!) so no need for custom CSS. Also, the event was previously attached to the entire control bar. Instead attached to just the controlUI button itself.
Javascript:
L.Control.RemoveAll = L.Control.extend({
options: {
position: 'topleft',
},
onAdd: function (map) {
var controlDiv = L.DomUtil.create('div', 'leaflet-control leaflet-bar');
var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
controlUI.title = 'Remove all drawn items';
controlUI.setAttribute('href', '#');
L.DomEvent
.addListener(controlUI, 'click', L.DomEvent.stopPropagation)
.addListener(controlUI, 'click', L.DomEvent.preventDefault)
.addListener(controlUI, 'click', function () {
drawnItems.clearLayers();
if(window.console) window.console.log('Drawings deleted...');
});
return controlDiv;
}
});
removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);
Like jduhls's answer but using Leaflet.draw CSS classes :
L.Control.RemoveAll = L.Control.extend(
{
options:
{
position: 'topleft',
},
onAdd: function (map) {
var controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
L.DomEvent
.addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
.addListener(controlDiv, 'click', L.DomEvent.preventDefault)
.addListener(controlDiv, 'click', function () {
drawnItems.clearLayers();
});
var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
controlUI.title = 'Remove All Polygons';
controlUI.href = '#';
return controlDiv;
}
});
var removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);
You can also overwrite the delete tool's enable method to simply delete all layers instead of opening the delete menu:
L.EditToolbar.Delete.include({
enable: function () {
this.options.featureGroup.clearLayers()
}
})
I made a mapping application that uses the drawing manager (and implements selectable shapes). The program works as follows: when finishing drawing the polygon after clicking a button a path, is mapped on the polygon.
When the polygon is edited after this process I want the mapping function to be called again. However I can't get this part working:
I tried using following code, but I always get an error because no shape is selected yet when this listener is added. What can I do?
google.maps.event.addListener(selectedShape, 'set_at', function() {
console.log("test");
});
google.maps.event.addListener(selectedShape, 'insert_at', function() {
console.log("test");
});
Important pieces of code:
function showDrawingManager(){
var managerOptions = {
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.POLYGON]
},
markerOptions: {
editable: true,
icon: '/largeTDGreenIcons/blank.png'
},
polygonOptions: {
fillColor: "#1E90FF",
strokeColor: "#1E90FF",
},
polylineOptions: {
strokeColor: "#FF273A"
}
}
var drawingManager = new google.maps.drawing.DrawingManager(managerOptions);
drawingManager.setMap(map);
return drawingManager;
}
function clearSelection() {
if (selectedShape) {
console.log("clearSelection");
selectedShape.setEditable(false);
selectedShape = null;
numberOfShapes--;
}
}
function setSelection(shape) {
console.log("setSelection");
clearSelection();
selectedShape = shape;
shape.setEditable(true);
numberOfShapes++;
//getInformation(shape);
}
function initialize(){
//....
var drawingManager = showDrawingManager();
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
I solved it by calling .getPath() and putting the listener inside the listener which is called every time a shape is clicked. I think the Google API documentation is not very clear on how to use the set_at so it may be useful for other people too.
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
google.maps.event.addListener(newShape.getPath(), 'set_at', function() {
console.log("test");
});
google.maps.event.addListener(newShape.getPath(), 'insert_at', function() {
console.log("test");
});
setSelection(newShape);
});
google.maps.event.addListener(yourPolygon.getPath(), 'insert_at', function(index, obj) {
//polygon object: yourPolygon
});
google.maps.event.addListener(yourPolygon.getPath(), 'set_at', function(index, obj) {
//polygon object: yourPolygon
});
The above code is working for me. Where set_at is fired when we modify a polygon area from a highlighted dot (edges) and insert_at is fired when we drag point that is between highlighted edges.
I used them in the polygoncomplete event and after loading a polygon from the database. It is working fine for them.
To avoid the problems mentioned with set_at and dragging, I added the following, which disables event broadcasting for set_at when the drawing is being dragged. I created a class that extends the polygon class, and added this method:
ExtDrawingPolygon.prototype.enableCoordinatesChangedEvent = function(){
var me = this,
superClass = me.superClass,
isBeingDragged = false,
triggerCoordinatesChanged = function(){
//broadcast normalized event
google.maps.event.trigger(superClass, 'coordinates_changed');
};
// If the overlay is being dragged, set_at gets called repeatedly,
// so either we can debounce that or ignore while dragging,
// ignoring is more efficient.
google.maps.event.addListener(superClass, 'dragstart', function(){
isBeingDragged = true;
});
// If the overlay is dragged
google.maps.event.addListener(superClass, 'dragend', function(){
triggerCoordinatesChanged();
isBeingDragged = false;
});
// Or vertices are added to any of the possible paths, or deleted
var paths = superClass.getPaths();
paths.forEach(function(path, i){
google.maps.event.addListener(path, "insert_at", function(){
triggerCoordinatesChanged();
});
google.maps.event.addListener(path, "set_at", function(){
if(!isBeingDragged){
triggerCoordinatesChanged();
}
});
google.maps.event.addListener(path, "remove_at", function(){
triggerCoordinatesChanged();
});
});
};
It added a "coordinates_changed" event to the polygon itself, so other code can just listen for a nice, single, simplified event.
Starting from chrismarx's answer, below is an example of using a new event in TypeScript. I have done a small change of removing superclass and changing references to "me", because there was a problem with undefined reference.
At the top of your file or global configuration file, etc., use:
declare global {
module google.maps {
interface Polygon {
enableCoordinatesChangedEvent();
}
}
}
Then define extension:
google.maps.Polygon.prototype.enableCoordinatesChangedEvent = function () {
var me = this,
isBeingDragged = false,
triggerCoordinatesChanged = function () {
// Broadcast normalized event
google.maps.event.trigger(me, 'coordinates_changed');
};
// If the overlay is being dragged, set_at gets called repeatedly,
// so either we can debounce that or igore while dragging,
// ignoring is more efficient
google.maps.event.addListener(me, 'dragstart', function () {
isBeingDragged = true;
});
// If the overlay is dragged
google.maps.event.addListener(me, 'dragend', function () {
triggerCoordinatesChanged();
isBeingDragged = false;
});
// Or vertices are added to any of the possible paths, or deleted
var paths = me.getPaths();
paths.forEach(function (path, i) {
google.maps.event.addListener(path, "insert_at", function () {
triggerCoordinatesChanged();
});
google.maps.event.addListener(path, "set_at", function () {
if (!isBeingDragged) {
triggerCoordinatesChanged();
}
});
google.maps.event.addListener(path, "remove_at", function () {
triggerCoordinatesChanged();
});
});
};
Finally call extension and add listener:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
event.overlay.enableCoordinatesChangedEvent();
google.maps.event.addListener(event.overlay, 'coordinates_changed', function (index, obj) {
// Polygon object: yourPolygon
console.log('coordinates_changed');
});
});
Starting from Thomas' answer, here is an implementation that enables edits to overlays created with DrawingManager, as well as to Features added from GeoJSON.
The main struggle for me was using the google.maps-prefixed overlay types created by DrawingManager alongside similarly named google.maps.Data Feature types created by addFromGeoJson(). Ultimately I ignored the built-in Data object in favor storing everything as a re-created overlay, setting edit event listeners, and then calling setMap() on them individually as they were drawn. The originally drawn overlays and loaded features are discarded.
The process looks something like this:
Initialize the map.
Add an addfeature event listener to detect whenever a feature is added. This will get fired during addGeoJson() for each Feature, getting its corresponding overlay type and geometry and passing them to a utility function addFeature() to create the overlay.
Load any GeoJSON. This will fire the event listener above for every object loaded in.
Initialize the DrawingManager.
Add {overlay}complete event listeners for each type of overlay (polygon, polyline, and marker). When fired, these events first determine if the overlay is valid (e.g. polygons have >= 3 vertices) and then call addFeature(), passing in the overlay type and geometry.
When called, addFeature() re-creates the overlay and sets all applicable event listeners. Finally, the overlay is stored in the array and displayed on the map.
// GeoJSON containing previously stored data (optional)
var imported = {
type: "FeatureCollection",
features: [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.985603, 40.748429
],
},
properties: {
activity: "Entry",
}
}, ]
};
// this will fill with map data as you import it from geojson or draw
var features = {
polygons: [],
lines: [],
markers: []
};
// set default drawing styles
var styles = {
polygon: {
fillColor: '#00ff80',
fillOpacity: 0.3,
strokeColor: '#008840',
strokeWeight: 1,
clickable: true,
editable: true,
zIndex: 1
},
polyline: {
strokeColor: '#ffff00',
strokeWeight: 3,
clickable: true,
editable: true,
zIndex: 2
},
marker: {
clickable: true,
draggable: true,
zIndex: 3
}
}
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 40.748429,
lng: -73.985603
},
zoom: 18,
noClear: true,
mapTypeId: 'satellite',
navigationControl: true,
mapTypeControl: false,
streetViewControl: false,
tilt: 0
});
// add this listener BEFORE loading from GeoJSON
map.data.addListener('addfeature', featureAdded);
// load map features from geojson
map.data.addGeoJson(imported);
// initialize drawing tools
var drawingManager = new google.maps.drawing.DrawingManager({
// uncomment below line to set default drawing mode
// drawingMode: 'marker',
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon', 'polyline', 'marker']
},
polygonOptions: styles.polygon,
polylineOptions: styles.polyline,
markerOptions: styles.marker
});
drawingManager.setMap(map);
// for each drawing mode, set a listener for end of drawing
drawingManager.addListener('polygoncomplete', function(polygon) {
// delete drawing if doesn't have enough points
if (polygon.getPath().getLength() < 3) {
alert('Polygons must have 3 or more points.');
polygon.getPath().clear();
}
// otherwise create new feature and delete drawing
else {
addFeature('Polygon', polygon.getPath());
polygon.setMap(null);
}
});
drawingManager.addListener('polylinecomplete', function(line) {
// delete drawing if doesn't have enough points
if (line.getPath().getLength() < 2) {
alert('Lines must have 2 or more points.');
line.getPath().clear();
}
// otherwise create new feature and delete drawing
else {
addFeature('Polyline', line.getPath());
line.setMap(null);
}
});
drawingManager.addListener('markercomplete', function(marker) {
// point geometries have only one point by definition,
// so create new feature and delete drawing
addFeature('Point', marker.getPosition());
marker.setMap(null);
updateGeoJSON();
});
}
// this function gets called when GeoJSON gets loaded
function featureAdded(e) {
switch (e.feature.getGeometry().getType()) {
case 'Polygon':
addFeature('Polygon', e.feature.getGeometry().getAt(0).getArray());
break;
case 'LineString':
addFeature('Polyline', e.feature.getGeometry().getArray());
break;
case 'Point':
addFeature('Point', e.feature.getGeometry().get());
}
map.data.remove(e.feature);
}
function addFeature(type, path) {
switch (type) {
case 'Polygon':
var polygon = new google.maps.Polygon(styles.polygon);
polygon.setPath(path);
// listeners for detecting geometry changes
polygon.getPath().addListener('insert_at', someFunction)
polygon.getPath().addListener('set_at', someFunction);
polygon.getPath().addListener('remove_at', someFunction);
polygon.getPath().addListener('dragend', someFunction);
// delete vertex using right click
polygon.addListener('rightclick', function(e) {
if (e.vertex == undefined) return;
if (polygon.getPath().getLength() == 3) {
polygon.setMap(null);
features.polygons = features.polygons.filter(isValid);
} else {
polygon.getPath().removeAt(e.vertex);
outputAsGeoJSON();
}
});
// add it to our list of features
features.polygons.push(polygon);
// and display it on the map
polygon.setMap(map);
break;
case 'Polyline':
var line = new google.maps.Polyline(styles.polyline);
line.setPath(path);
line.getPath().addListener('insert_at', someOtherFunction);
line.getPath().addListener('set_at', someOtherFunction);
line.getPath().addListener('remove_at', someOtherFunction);
line.getPath().addListener('dragend', someOtherFunction);
// allow right-click vertex deletion
line.addListener('rightclick', function(e) {
if (e.vertex == undefined) return;
if (line.getPath().getLength() == 2) {
line.setMap(null);
features.lines = features.lines.filter(isValid);
} else {
line.getPath().removeAt(e.vertex);
outputAsGeoJSON();
}
});
// add it to our list of features
features.lines.push(line);
// and display it on the map
line.setMap(map);
break;
case 'Point':
var marker = new google.maps.Marker(styles.marker);
marker.setPosition(path);
// make a splashy entrance
marker.setAnimation(google.maps.Animation.DROP);
// detect modifications
marker.addListener('drag', function(e) {
// unnecessary bouncing just to throw you off
marker.setAnimation(google.maps.Animation.BOUNCE);
});
marker.addListener('dragend', function(e) {
// make the bouncing stop
marker.setAnimation(null);
})
// allow right-click deletion
marker.addListener('rightclick', function(e) {
marker.setMap(null);
features.markers = features.markers.filter(isValid);
outputAsGeoJSON();
});
// add it to our list of features
features.markers.push(marker);
// and display it on the map
marker.setMap(map);
break;
}
outputAsGeoJSON();
}
function someFunction() {
// do stuff
}
function someOtherFunction() {
// do other stuff
}
// utility function for reuse any time someone right clicks
function isValid(f) {
return f.getMap() != null;
}
function outputAsGeoJSON() {
// we're only using the Data type here because it can export as GeoJSON
var data = new google.maps.Data;
// add all the polygons in our list of features
features.polygons.forEach(function(polygon, i) {
data.add({
geometry: new google.maps.Data.Polygon([polygon.getPath().getArray()]),
properties: {
description: 'I am a polygon'
}
});
});
// and add all the lines
features.lines.forEach(function(line, i) {
data.add({
geometry: new google.maps.Data.LineString(line.getPath().getArray()),
properties: {
description: 'I am a line'
}
});
});
// and finally any markers
features.markers.forEach(function(marker, i) {
data.add({
geometry: new google.maps.Data.Point(marker.getPosition()),
properties: {
description: 'I am a marker'
}
});
});
// GeoJSONify it
data.toGeoJson(function(json) {
document.getElementById('geojson').value = JSON.stringify(json);
});
}
https://jsfiddle.net/pqdu05s9/1/