I am currently upgrading my OpenLayers 2 Mapview to OpenLayers 3. I really like the new OpenLayers client, but i wanted to deactivate the ability to rotate the map on mobile devices (rotating with 2 fingers).
But I can't find any settings for this. Is this not possible or am I only to dumb to find the setting?
I am using the current release version (3.0.0) of the openlayers javascript client. (https://github.com/openlayers/ol3/releases/tag/v3.0.0)
Yes there is a way to deactivate the ability to rotate the map.
You need to customize the interactions of the ol.Map object. Either you use the ol.interaction.defaults function to create an ol.Collection with interactions or you create an array with only the interactions you want. Then you can pass it to the constructor of ol.Map.
Using the ol.interaction.defaults function (http://openlayers.org/en/master/apidoc/ol.interaction.html#defaults):
var interactions = ol.interaction.defaults({altShiftDragRotate:false, pinchRotate:false});
var map = new ol.Map {
interactions: interactions
};
The first line creates all default interactions but the ability to rotate via keyboard+mouse and using fingers on a mobile device.
You maybe want to remove the ol.control.Rotate then, too. (This is the needle in the upper right which is used to reset the rotation and only appears if the map is rotated). Works the same way.
Creating controls without compass via ol.control.defaults (http://openlayers.org/en/master/apidoc/ol.control.html#defaults)
var controls = ol.control.defaults({rotate: false});
'Full' code:
var controls = ol.control.defaults({rotate: false});
var interactions = ol.interaction.defaults({altShiftDragRotate:false, pinchRotate:false});
var map = new ol.Map {
controls: controls,
interactions: interactions
};
In the current version of OpenLayers 3 you can simply disable the enableRotation flag of the view object:
view: new ol.View({
...
enableRotation: false
})
Related
Following the query here:
Openlayers can't modify drawn features
I have built some code, which allowes me to edit nodes of my drawn features:
var modifyInteraction = new ol.interaction.Modify({
features: selectInteraction.getFeatures(),
deleteCondition: function(event) {
return ol.events.condition.shiftKeyOnly(event) &&
ol.events.condition.singleClick(event);
}
});
map.addInteraction(modifyInteraction);
However I have lost the option for dragging my features, which is defined by this code:
var translateInteraction = new ol.interaction.Translate({
features: selectInteraction.getFeatures(),
});
map.addInteraction(translateInteraction);
The new ol.interaction.Translate({ has been switched off, otherwise I am not able to edit my features, but I can only drag them.
Is there any chance to make my features draggable when I can edit them like defined in the code new ol.interaction.Modify({ above?
My full JSfiddle is here:
https://jsfiddle.net/g196cqoa/
You can add a condition option to the translate interaction to only interact when ctrl key is pressed.
var modifyInteraction = new ol.interaction.Modify({
features: selectInteraction.getFeatures(),
deleteCondition: function(event) {
return ol.events.condition.shiftKeyOnly(event) &&
ol.events.condition.singleClick(event);
},
});
map.addInteraction(modifyInteraction);
const translate = new ol.interaction.Translate({
features: selectInteraction.getFeatures(),
condition: function (event) {
return ol.events.condition.platformModifierKeyOnly(event) &&
ol.events.condition.primaryAction(event);
},
});
map.addInteraction(translate);
Alternatively, if you add the translate interaction before the modify interaction it should allow you to drag polygons as long as you stay away from the edges. This won't work with lines and points. as there is no area where the geometry cannot be modified.
The order in which the interactions are added to the maps interaction collection determines whether the modify interaction is allowed see and handle the events before the translate interaction handles them
I have been reviewing the documentation for the heatmap renderer but I would like to tag it to my feature layer without visualising based on the "field" but based on the number of points and their locality between each other. Could anyone advise me how to?
var earthquakeLayer = new FeatureLayer({
// url to a point dataset
});
// visualization based on field
var heatmapParams = {
layer: earthquakeLayer,
view: view,
field: "magnitude"
};
// when the promise resolves, apply the renderer to the layer
heatmapRendererCreator.createRenderer(heatmapParams)
.then(function(response){
earthquakeLayer.renderer = response.renderer;
});
I think what you are actually looking for clustering features (ArcGIS API Doc - FeatureReductionCluster). There are several examples there, take a look if it fits your needs.
I've created a Joomla Component and i have a Leaflet map in the component window.
I've used Leaflet with Omnivore plugin to add GPX and KML to my map and I used the Leaflet controls to allow to add and remove the layers.
I've tested the controls in a clean joomla development installation and the controls are OK, as seen in the first image
enter image description here
When I use the component in my Joomla site che controls are not OK, there are some dirty entry as seen in the second figures
enter image description here
I think this is because of the templates and some script that interfere with Leaflet but I can't fix it.
The joomla versions are the same, the template no, the joomla site use gantry.
This is the function I used to populate the map:
function showRouteTracks(tracce, baseURI, popup=false, enableLayers=true, enableElevation=false){
var layerControl = new Array();
for (var i = 0; i < tracce.length; i++) {
var customLayer = L.geoJson(null, {
style: getStyle(i)
});
if(tracce[i][3]=='GPX'){
var layer = omnivore.gpx(baseURI+tracce[i][2], null, customLayer).on('ready', function() {
elevation(enableElevation,layer);
});
if(popup){
link=''+tracce[i][5]+''
layer.bindPopup(tracce[i][0]+"➝"+tracce[i][1]+"<br/>"+link);
}
lvrtMap.addLayer(layer);
layerControl[tracce[i][0]+"➝"+tracce[i][1]]=layer;
}
if(tracce[i][3]=='KML'){
var layer = omnivore.kml(baseURI+tracce[i][2], null, customLayer).on('ready', function() {
elevation(enableElevation,layer);
});
if(popup){
link=''+tracce[i][5]+''
layer.bindPopup(tracce[i][0]+"➝"+tracce[i][1]+"<br/>"+link);
}
lvrtMap.addLayer(layer);
layerControl[tracce[i][0]+"➝"+tracce[i][1]]=layer;
}
}
if(!enableLayers)
layerControl=null;
if(enableElevation)
L.control.layers(lvrtMapLayers,layerControl,{'position':'bottomright'}).addTo(lvrtMap);
else
L.control.layers(lvrtMapLayers,layerControl).addTo(lvrtMap);
}
Currently you're creating an array to store the title/layer items:
var layerControl = new Array();
But L.Control.Layers takes object literals as baselayer/overlay parameters:
var baseLayers = {
"Mapbox": mapbox,
"OpenStreetMap": osm
};
var overlays = {
"Marker": marker,
"Roads": roadsLayer
};
L.control.layers(baseLayers, overlays).addTo(map);
So you should use an object literal:
var layerControl = {};
You can add items the same way as you did before:
layerControl['MyTitle'] = myLayerInstance;
I'll bet you'll have no problem then. What happening now is that your trying to assign string keys to items in an array, which isn't supported (even supposed to work but that aside). A javascript array can only have numeric keys and nothing else.
That it works for you with a clean install and not in your production setup is that probably in production you have a javascript library/framework loaded which adds methods/properties to javascript's native array prototype and they are enumerable. Thus when the layercontrol instance iterates the array it also finds these extra methods/properties and tries to add them to the layercontrol.
Just use a object literal: {} not an Array, you'll be fine, good luck.
EDIT: Got curious and did some digging. As it turns out this is caused by Mootools and then i ran into this question: Looping through empty javascript array returns array object functions which gives some explanation and some other solutions but it's best if you just use a object literal because at the moment you're kind of abusing Array.
I am working with the lealflet api, where user can draw shapes to
map(image)...
Initially the layer control(handling 1 layer) is added for base map
using imageoverlay......
I have added a button of id 'newLyer' to page where click event
handles the creation of new layer.....i.e user can create new layer
and update layer control(which is now handling 2 layers)....
I have used several methods to create the layers and adding to control
but failed....
Adding new layer to layerGroup
var layerGroup = new L.LayerGroup(),
imageOverlayUrl = 'aa.jpg',
// New imageoverlay added to the layergroup
imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
// New featuregroup added to the layergroup
featureGroup = new L.FeatureGroup().addTo(layerGroup);
LayerControl where i needed to add the control(if i am correct)
var layerControl = new L.control.layers({
'Main': layerGroup,
//here i need to add new layer control
}, null, { collapsed: false }).addTo(map);
OnClick function with so far static code, this will be executed on click
$('#newLayer').click(function addNewLayer() {
// Second layergroup not added to the map yet
var layerGroupNew = new L.LayerGroup(),
imageOverlayUrlNew = 'bb.png',
// New imageoverlay added to the second layergroup
imageOverlayNew = new L.imageOverlay(imageOverlayUrlNew, bounds).addTo(layerGroup2),
// New featuregroup added to the second layergroup
featureGroupNew = new L.FeatureGroup().addTo(layerGroupNew);
});
In Short
Initially, i have one layer with its control, now onclick function
creates the new layer which will be added to the map but how i can add
this layer into layerControl....
If someone has idea about how to do this sort of thing, please do help,,,, any kind of help or reference will be appreciated....
Thanks for your time
If you look at the documentation for L.Control.Layers:
http://leafletjs.com/reference.html#control-layers
You'll see that L.Control.Layers has a addBaseLayer method:
http://leafletjs.com/reference.html#control-layers-addbaselayer
Adds a base layer (radio button entry) with the given name to the control.
Thus you can do:
layerControl.addBaseLayer(newBaseLayer, 'My New BaseLayer');
And you're good to go. As you see, you could have spared yourself the trouble of posting this question if you would have taken a look at the reference. Leaflet is very well documented. I've personally learned most that i know about Leaflet by reading the docs completely once of twice. Good luck with your project, cheers!
I want to interact with a leaflet powered map's GeoJson overlay (polygons) from outside of L.'s realm, but I don't seem to be able to access objects created by L..
Interaction would include:
getBounds(myFeature)
fitBounds(myFeature)
setStyle
etc
I can see Leaflet exposing L.GeoJSON.getFeature(), but I don't seem to be able to squeeze anything out of it. No documentation, and the inspector seems to suggest it does not take arguments... :\
Is this just there for future development?
You may use getLayer to get the feature by its id.
http://leafletjs.com/reference.html#layergroup-getlayer
var geojsonLayer = L.geoJson(data,{
onEachFeature: function(feature, layer) {
layer._leaflet_id = feature.id;
}});
geojsonLayer.addTo(map);
feature = geojsonLayer.getLayer(12345); //your feature id here
alert(feature.feature.id);