On the client Im getting a bunch of polygons from a postgres database and then I am adding them as an overlay into a layers control. At the moment this is happening via say a menu click, and each time it adds another 'Polygon' checkbox in the control. I need to obviously clear first any old overlays and refresh with a new set of 'Polygon' overlays. How can I remove it programmatically before adding a new overlay?
var controlLayers = L.control.layers(baseMaps).addTo(map);
$.getJSON('/db/getPolys', function (geojsonFeatures) {
console.log('returned polys...',geojsonFeatures.features);
if(geojsonFeatures.features == null){
alert('No polygons where found');
}else{
geojsonLayer = L.geoJson(geojsonFeatures,{
onEachFeature: drawStep1Polys
});
// need to remove before adding anything
// if (geojsonLayer exists){
// controlLayers.removeLayer(geojsonLayer);
// }
controlLayers.addOverlay(geojsonLayer, 'Polygons');
}
});
controlLayers.removeLayer(geojsonLayer)
Remove the given layer from the control.
(note that you will have to keep reference of your previous layers)
Thanks, btw, this was the final code:
var group;
$.getJSON('/FIMS/getPolys', function (geojsonFeatures) {
console.log('returned polys...',geojsonFeatures.features);
if(geojsonFeatures.features == null){
var message = 'No polygons where found';
alert(message);
}else{
if (group) {
controlLayers.removeLayer(group);
}
group = L.geoJson(geojsonFeatures, {
onEachFeature: drawStep1Polys
}).addTo(map);
controlLayers.addOverlay(group, 'Polygons');
map.fitBounds(step1Bounds);
}
});
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);
}
});
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 am trying to add custom results to autocomplete and am having some luck, but I cannot make the results clickable. A left or right click does absolutely nothing. Consider the following code:
<input type="text" name="query" id="query">
<script>
var input = (document.getElementById('query'));
var options = [];
city = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(city, 'place_changed', function () {
place = city.getPlace();
});
$("#query").on('input', function()
{
append_places($("#query").val());
});
var new_pac = false;
function append_places(input)
{
if (!new_pac)
{
setTimeout(function()
{
$(".pac-container").append('<div id="new-pac""></div>');
}, 1);
new_pac = true;
}
else
{
$('#new-pac').empty();
}
$("#new-pac").append('<div class="pac-item areasearch">Foo<span class="pac-icon pac-icon-areas"></span><a class="pac-item-query" href="http://www.wherever.com">test</a></div>');
}
</script>
The new entry shows up, looks like a link, but doesn't react when clicked. Any ideas on how to make this happen?
Looking at the Google Maps JS Demo it seems that you are lacking a method to define the preferred viewport on the map to view the place. You need to add code where it will do something wether or not it was able to retrieve a place.
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
}
Here's another example for reference.
I am using the Geolocation Marker Script from the Google Maps Utilities Library V3 in order to display the position of a user.
What I want to achieve (I am a newbie to the Google Maps API!) is:
have the users current coordinates displayed (e.g. in a simple CSS container somewhere on the page)
connect an event to a marker. I should be triggered when the user is close.
Appreciate your help!
To display coordinates to the user, you would need a reference to a DOM Element. Then it's a simple matter of updating the content.
HTML On the Page
<div id="UserCoordinates">Waiting on GPS Position ...</div>
In Script
google.maps.event.addListener(GeoMarker, 'position_changed', function() {
var UserPosition = this.getPosition();
var DisplayElement = document.getElementById('UserCoordinates');
if(UserPosition === null) {
DisplayElement.innerHTML = 'Waiting on GPS Position...';
} else {
DisplayElement.innerHTML =
'Current Position: ' + UserPosition.toUrlValue();
}
});
This will show the user their current position as it changes. If you are going to continue using a full screen map, you'll probably want to implement the UserCoordinates div as a map control. The API Reference has a good overview and multiple examples on this.
Display an info window when the user is within X meters of a location
This is a little tricky because there are multiple scenarios to handle and you don't want the infowindow opening repeatedly as they move within your radius.
Distance calculation
I see you have a distance function in your code, but I recommend using the one in the Spherical Geometry library of the API. You just have to specifically load the library with your api script tag:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true_or_false">
</script>
Then you need to add to the position_changed event handler:
var IsWithinRadius = false; //assume they start outside of the circle
var RadiusInMeters = 1000; //within 1 km
var LocationOfInterest = map.getCenter();
google.maps.event.addListener(GeoMarker, 'position_changed', function() {
var UserPosition = this.getPosition();
var DisplayElement = document.getElementById('UserCoordinates');
if(UserPosition === null) {
DisplayElement.innerHTML = 'Waiting on GPS Position...';
IsWithinRadius = false; //you don't know where they are
} else {
DisplayElement.innerHTML =
'Current Position: ' + UserPosition.toUrlValue();
var IsCurrentPositionInRadius =
Math.abs(google.maps.geometry.spherical.computeDistanceBetween(
UserPosition, LocationOfInterest)) <= RadiusInMeters;
var JustEnteredRadius = !IsWithinRadius && IsCurrentPositionInRadius;
IsWithinRadius = IsCurrentPositionInRadius;
if(JustEnteredRadius) {
//trigger action here.
alert("Within raidus");
}
}
});
When I break on the first line in the call back function and do this
this.active --> true
this.deactivate() --> true
this.activate() --> true
this.deactivate() --> false
HOW CAN THIS HAPPEN?
Let me explain where this occurs.
This map has two layers and each layer has an EditingToolbar associated with it.
When the user pressed polygon draw (in the EditingToolbar), its being draw on the "polygon_layer".
When the user presses line draw or point draw the layer is switched and the user now draws on the "vectors" layer.
When I switch layers, I need to activate the correct button in the EditingToolbar, example:
The user draws polygons in the "polygon_layer" and now he want to draw lines. He presses draw lines button (in the EditingToolbar associated with the polygon_layer).
I switch layers and activate draw lines button on the EditingToolbar for that layer.
After a while, the user now wants to draw polygons again, so i deactivate all buttons in this layer, switch layers and activate the draw polygon button in the
EditingToolbar for the polygon_layer. and so on.
Now when I do this enough times (3 switches) I notice that the buttons don't get deactivate anymore.
So I tried to debug and got this totally unexpected error described above ( at the very top).
Please tell me what am I doing wrong.
I've appended my code and I'll put ERROR HERE where this occurs. This code is ready to run.
You can use the HTML code below, just change the reference to the JavaScript file that I've provided ( I've provided the contents of the JavaScript file)
JS FILE:
var map;
var editing_toolbar_polygon=null;
var editing_toolbar_vector=null;
var drag_control=null;
var vectors;
var polygon_layer=null;
var epsg900913 = new OpenLayers.Projection('EPSG:900913');
var epsg4326 = new OpenLayers.Projection('EPSG:4326');
//var epsg900913 = new OpenLayers.Projection('EPSG:900913');
// var epsg4326 = new OpenLayers.Projection('EPSG:4326');
var line_control;
var polygon_control;
var renderer;
function initialize() {
line_control, renderer=OpenLayers.Util.getParameters(window.location.href).renderer;
renderer= (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
// Create the map object
map = new OpenLayers.Map('map');
//Create a Google layer
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{
numZoomLevels: 20,
projection: new OpenLayers.Projection("EPSG:900913")
}
);
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic',
projection: new OpenLayers.Projection("EPSG:4326")});
var mystyle=new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
fillColor: "#66ccff",
strokeColor: "#3399ff",
graphicZIndex: 2,
strokeWidth: 5,
}),
"temporary": new OpenLayers.Style({
fillColor:"#3399ff",
strokeColor: "#3399ff",
strokeWidth:5,
pointRadius:10
})
});
polygon_layer=new OpenLayers.Layer.Vector(
"Polygon Layer",
{
//renderers:renderer,
}
);
vectors= new OpenLayers.Layer.Vector(
"Vector Layer",
{
//renderers:renderer,
}
);
editing_toolbar_polygon=new OpenLayers.Control.EditingToolbar(polygon_layer);
editing_toolbar_vector=new OpenLayers.Control.EditingToolbar(vectors);
map.addLayers([gmap,wms,vectors,polygon_layer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(editing_toolbar_polygon);
map.addControl(editing_toolbar_vector);
editing_toolbar_vector.deactivate();
//for the drag control to work you need to activate it
drag_control=new OpenLayers.Control.DragFeature(vectors);
map.addControl(drag_control);
find_control(editing_toolbar_polygon.getControlsByClass(new RegExp(".*DrawFeature")),"Point").events.register("activate",null,function(e){
//ERROR HERE
this.deactivate();
var picked_button=find_same_control(editing_toolbar_vector.controls,e.object);
change_layer(polygon_layer,vectors);
change_control(editing_toolbar_polygon,editing_toolbar_vector);
picked_button.activate();
});
find_control(editing_toolbar_polygon.getControlsByClass(new RegExp(".*DrawFeature")),"Path").events.register("activate",null,function(e){
//ERROR HERE
this.deactivate();
var picked_button=find_same_control(editing_toolbar_vector.controls,e.object);
change_layer(polygon_layer,vectors);
change_control(editing_toolbar_polygon,editing_toolbar_vector);
picked_button.activate();
});
find_control(editing_toolbar_vector.getControlsByClass(new RegExp(".*DrawFeature")),"Polygon").events.register("activate",null,function(e){
//ERROR HERE
this.deactivate();
var picked_button=find_same_control(editing_toolbar_polygon.controls,e.object);
change_layer(vectors,polygon_layer);
change_control(editing_toolbar_vector,editing_toolbar_polygon);
picked_button.activate();
});
polygon_layer.events.register("beforefeatureadded",null,function(e){
polygon_layer.removeAllFeatures();
});
// line_control=new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Path);
//polygon_control=new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.RegularPolygon);
//map.addControl(line_control);
//line_control.activate();
//map.addControl(polygon_control);
//polygon_control.activate();
// Zoom to Vancouver, BC
map.setCenter(new OpenLayers.LonLat(-123.12, 49.28).transform(epsg4326, epsg900913), 13);
}
function change_layer(current_layer,next_layer){
current_layer.setVisibility(false);
next_layer.setVisibility(true);
}
function change_control(current_control,next_control){
current_control.deactivate();
map.addControl(next_control);
}
//use this when you want to find a specific control type:
// DrawFeature cntrol has many types, Line, Polygon, Point.
// So what you do is pass an array of DrawFeature controls and a type(string), lets say "Point",
// then this function will return a DrawFeature thats specifically for drawing points
function find_control(controls,type){
var control;
for(var x in controls){
if(controls[x].displayClass.search(new RegExp(type+"$"))>0){
return controls[x];
}
}
return -1;
}
I just tried with a simple test.
When you desactivate a controller, you just remove the events of the controller.
So for OpenLayers.Control.LayerSwitcher, desactivate this controller is useless because nothing change and you can still choose a layer.
I think the best way is to remove the controller for your polygon and to add that for the lines.
When you select the "polygon_layer" :
map.addControl(editing_toolbar_polygon);
map.removeControl(editing_toolbar_vector);
When you select the "vectors" :
map.addControl(editing_toolbar_vector);
map.removeControl(editing_toolbar_polygon);