So i'm making this application with leafet.js.
This application requires that i have to manually draw grids onto the screen,
that i've taken care in a draw_grid() function that draws a bunch of polygons to the screen.
i have this function that i'm calling to trigger the change of the leaflet map.
zoom - the zoom integer and size is a dict like {x:1,y:1} that controls the size of the tiles drawn onto the map. (they need to change as the units the tiles are being drawn under are lat,long points on the map.
function changeZoom(zoom,size){
map.setZoom(zoom);
setSize(size);
setTimeout(drawGrid,500)s;
}
the reason i have to use the setTimeout is because the leaflet ignores any drawing commands onto the map (which i'm doing as a layer) until the map has finished animating.
how to do this asynchronously instead?
You can use the map.zoomend event, described in the API here
map.on('zoomend', function() {
drawGrid();
});
Once the map finishes the zooming animation, it will then call the drawGrid function.
In newer version of Leaflet, "zoomed" is no longer an event. There are now "zoomstart" and "zoomend" events:
map.on("zoomstart", function (e) { console.log("ZOOMSTART", e); });
map.on("zoomend", function (e) { console.log("ZOOMEND", e); });
This is best way to managed leflet Zoom control clicked
/*Zoom Control Click Managed*/
var bZoomControlClick = false;
mymap.on('zoomend',function(e){
var currZoom = mymap.getZoom();
if(bZoomControlClick){
console.log("Clicked "+currZoom);
}
bZoomControlClick = false;
});
var element = document.querySelector('a.leaflet-control-zoom-in');
L.DomEvent.addListener(element, 'click', function (e) {
bZoomControlClick = true;
$(mymap).trigger("zoomend");
});
var element1 = document.querySelector('a.leaflet-control-zoom-out');
L.DomEvent.addListener(element1, 'click', function (e) {
bZoomControlClick = true;
$(mymap).trigger("zoomend");
});
Related
im using OpenLayers 5 to display two different layers on the same map. I can see both Markers on the Map with different icons. The code below writes in the popup of one layer. Now my question is: how can i display different Infos on the Popup for each specific layer. For example when the mouse is over the first icon the popup should contain the name of the first layer and when it is over the second different icon it shows the name of the second layer.
I assume i should use map.getFeaturesAtPixel(event.pixel, function (layer1)) or something like this but im facing problems right there
//display the pop with on mouse over event
map.on('pointermove', function (event) {
const features = map.getFeaturesAtPixel(event.pixel);
if (features.length > 0 ) {
var coordinate = event.coordinate;
//get the infos that are going to be displayed in the Pop-up window;
const layerOneName = features[0].get('vehName');
// text written inside the popup
content.innerHTML = '<b>'+layerOneName +'</b>';
overlay.setPosition(coordinate);
}
});
If you use forEachFeatureAtPixel use can add a layer filter function and use that to set the layer
map.on('pointermove', function (event) {
let layer;
const feature = map.forEachFeatureAtPixel(
event.pixel,
function (feature) {
return feature;
},
{
layerFilter: function (candidate) {
layer = candidate;
return true;
}
}
);
if (feature) {
var coordinate = event.coordinate;
//get the infos that are going to be displayed in the Pop-up window;
const layerOneName = feature.get('vehName');
// text written inside the popup
content.innerHTML = '<b>'+layerOneName +'</b>';
overlay.setPosition(coordinate);
}
});
I am trying to add a draw interaction to my map. The user should click a button, add one point and then add attribute information about the point. I'm still stuck in the drawing part: After I draw a point in the map, the cursor position remains the same and mouse movements change the map in the background (like when panning). When I click again this stops. No idea why it's doing this. In the console in Chrome I get an error in the draw.js file from openlayers (this.source_.addFeature is not a function).
Grateful for any help!
Here's my code:
function addFeature() {
var btn_cancel = document.getElementById('buttonCancel');
btn_cancel.style.display = 'block';
var btn_add = document.getElementById('buttonAdd');
btn_add.classList.add("button_clicked");
var draw;
function addInteraction() {
draw = new ol.interaction.Draw({
source: lunchvec,
type: "Point",
});
map.addInteraction(draw);
draw.on('drawend', function(evt) {
console.log(evt.feature.getGeometry().getCoordinates());
map.removeInteraction(draw);
});
};
addInteraction();
}
Using Leaflet, I linked to a L.easyButton a function which adds a geoJson polygon layer to a map, and that activates different functions "onEachFeature" of this layer. Among them, a function when clicking on a feature which creates a separate geoJson polygon layer with this feature and add it to a specific LayerGroup. What I would like is that after clicking on a feature, the different functions "onEachFeature" would not be activated anymore and that the user would need to push the L.easyButton again if he/she wants to do that another time. Everything works fine, except the fact to deactivate the "onEachFeature" functions. I tried to use map.removeControl(), map.removeLayer() and delete the variable directly, but none of these options work.
My code is:
L.easyButton( '<strong>Sélectionner une commune</strong>', function(){
var communes_geojson = $.getJSON("data/Adm/Adm_Communes_4326.geojson",function(communes){
var communes_new = L.geoJson(communes, {
style: stylelayer.communes,
onEachFeature: function addMyData (feature,layer){
layer.on({
click: selectcommune
});
}
});
map.addControl(communes_new);
});
info.addTo(map);
},
{position: 'topright'}).addTo(map);
function selectcommune(e) {
var layer=e.target;
var feature = e.target.feature;
var selectcommune1 = L.geoJson(feature, {
style: stylelayer.highlight
}).addTo(map);
control_map2.addOverlay({
name:feature.properties.NameFRE,
layer:selectcommune1
});
// don't work
// map.removeControl(communes_geojson);
// map.removeControl(communes_new);
// map.removeControl(layer);
// map.removeLayer(communes_geojson);
// map.removeLayer(communes_new);
// map.removeLayer(layer);
// delete communes_geojson;
// delete communes_new;
// delete layer;
Tahnk you for your help.
In selectcommune, once you do what you want (style your feature and add your overlay), you then need to go back and void out the onEachFeature function that you had added with the L.easyButton:
L.easyButton( '<strong>Sélectionner une commune</strong>', function(){
var communes_geojson = $.getJSON("data/Adm/Adm_Communes_4326.geojson",function(communes){
var communes_new = L.geoJson(communes, {
style: stylelayer.communes,
onEachFeature: function addMyData (feature,layer){
layer.on({
click: e => selectcommune(e, communes_new)
});
}
});
map.addControl(communes_new);
});
info.addTo(map);
},
function selectcommune(e, data) {
var layer=e.target;
var feature = e.target.feature;
var selectcommune1 = L.geoJson(feature, {
style: stylelayer.highlight
}).addTo(map);
control_map2.addOverlay({
name:feature.properties.NameFRE,
layer:selectcommune1
});
data.eachLayer( layer => layer.on = () => {} )
}
So you hit the easybutton, and layer.on is set for each feature to fire the selectcommune. When it fires, it removes the layer.on function (or overwrites it to do nothing), until you hit the easybutton again.
I have a custom built fabric.js bundle with touch support. Now I can scale any object with the pinch-zoom gesture. The problem is the zoom is really really sensitive, I barely move my fingers and the object is hugely scaled.
I couldn't find much information in the documents about how I can change the sensitivity. I know Event.js is used to handle the touch events within fabric.js. Is there any way I can change this sensitivity?
Ok, I ended up implementing touch controls myself, this is the code I made. This code was placed on the added event of my custom fabric.js object.
////////////////////////////// Touch event handlers
// Add listener event for pinch-zoom
var bbScope = this;
var hammer = new Hammer.Manager(this.canvas.upperCanvasEl);
var pinch = new Hammer.Pinch();
hammer.add([pinch]);
hammer.on('pinch', function (ev) {
// Set the scale and render only if we have a valid pinch (inside the object)
if (bbScope._validPinch) {
bbScope.set('scaleX', ev.scale);
bbScope.set('scaleY', ev.scale);
bbScope.canvas.renderAll();
}
});
hammer.on('pinchend', function (ev) {
bbScope._validPinch = false;
});
hammer.on('pinchcancel', function (ev) {
bbScope._validPinch = false;
});
hammer.on('pinchstart', function (ev) {
// Convert mouse coordinates to canvas coordinates
ev.clientX = ev.center.x;
ev.clientY = ev.center.y;
// Check if the pinch was started inside this object
if (bbScope.canvas) {
var p = bbScope.canvas.getPointer(ev);
bbScope._validPinch = bbScope.containsPoint(p);
}
else {
bbScope._validPinch = false;
}
});
I have a single page application, using reactjs and react-router. I developed a maps component, and of course with google maps have a memory leak going from screen to screen if I try and cleanup the map on component did mount and rebuild it on component did mount. so I tried this approach:
What is the proper way to destroy a map instance
and re-using the map instance and the node combined with excessive measures to clean things up works well and stabilizes things. For cleanup, I
call clearInstanceListeners on every marker, map, window and document
set map to null on any markers
delete this.map on the component then set it to null
delete this.markers then set it to empty array
The issue i'm having at this point is that when I trigger resize, it's not resizing. after reading several other posts, and making sure i'm triggering after the div is shown, it doesn't resize. However, I have a resize function bound to window.onresize, and have noticed that after resizing the window, and the second time the function is called, the map does resize and center. here's that function:
sizeMapToContainer: function () {
google.maps.event.trigger(this.map, 'resize');
if (this.props.fitBounds) {
this.zoomInOnMarkers();
} else {
this.map.setCenter(new google.maps.LatLng(this.props.center[1], this.props.center[0]));
this.map.setZoom(this.props.zoom);
}
},
and the function for window resize:
window.onresize = function onResize () {
if (this.map) {
this.sizeMapToContainer();
}
}.bind(this);
My render call for react just returns a div, where later on in did mount I append the map div myself.
buildMap: function (nextProps) {
var mapProps;
if (nextProps) {
mapProps = nextProps;
} else {
mapProps = this.props;
}
var centerpoint = mapProps.center;
var zoom = mapProps.zoom || 8;
var center = new google.maps.LatLng(centerpoint[1], centerpoint[0]);
var mapNode = this.refs.map.getDOMNode();
var mapOptions = {
center: center,
zoom: zoom
};
if (mapInstance.map) {
window.tmMap = this.map = mapInstance.map;
//check if the nodes are already there
if (!mapNode.hasChildNodes()) {
mapNode.appendChild(mapInstance.node);
}
this.map.setOptions(mapOptions);
} else {
mapInstance.node = document.createElement('div');
mapInstance.node.classList.add('full-height');
mapInstance.map = new google.maps.Map(mapInstance.node, mapOptions);
window.tmMap = this.map = mapInstance.map;
mapNode.appendChild(mapInstance.node);
this.map.setOptions(mapOptions);
}
this.buildMarkers();
this.setMarkers();
this.bindMarkers();
google.maps.event.addListener(this.map, 'idle', this.onIdle);
},
This component is a nested component.
Please let me know if there is any other code that will help. I am of course using the latest google maps api, using it directly.