I read and format my feature collection with:
function onEachFeature(feature, layer) {
if (feature.properties.popupContent == null)
{return null}
else
{return layer.bindPopup(feature.properties.popupContent)};
};
function MarkerStyle (feature,latlng) {
if (feature.properties.markerSymbol == null)
{return L.marker(latlng);}
else
{return L.marker(latlng, {icon: L.icon({iconUrl:
feature.properties.markerSymbol})});}
};
var daten = $.ajax(overlay).done(function(data) {
data = JSON.parse(data);
daten = L.geoJson(data,
{pointToLayer: MarkerStyle,
onEachFeature: onEachFeature}).addTo(map);
return daten});
L.control.layers(baseLayers, overlayMaps).addTo(map);
There are points and polygons in my feature collection.
How can I add an overlay control ONLY for the polygons? I tried with filter, but nothing worked. Thanks for reading the code!
Gruss, wonk
Thank you,
I now understand, that the filter function is only used, to reduce the features, which are displayed on the map. Right?
This is not my intention.
I want a control for EACH polygon in the feature collection. I now tried:
var polygons = L.geoJSON();
var overlayLayers = null;
var controls = L.control.layers(baseLayers,overlayLayers).addTo(map);
function onEachFeature(feature, layer) {
if(feature.properties.control != null)
{polygons.addData(feature)
.bindPopup(feature.properties.popupContent);
polygons.addTo(map);
polygon = polygons;
controls.addOverlay(polygon,feature.properties.control);
polygon = null;
};
if (feature.properties.popupContent == null)
{return null}
};
This works so far, I get a control for each polygon. But the polygons only disappear, if I deactivate ALL polygon-controls. I want to deactivate single polygons!
Gruss, wonk
I have now found a solution for the task:
var overlayLayers = null;
var controls = L.control.layers(baseLayers, overlayLayers).addTo(map);
function onEachFeature(feature, layer) {
var ObjektLayer = L.geoJSON();
ObjektLayer.addData(feature);
if (feature.geometry.type == "Polygon" )
{if (feature.properties.control != null)
{controls.addOverlay(ObjektLayer,feature.properties.control);
};
if (feature.properties.popupContent != null)
{ObjektLayer.bindPopup(feature.properties.popupContent);
};
ObjektLayer.addTo(map);
};
};
Gruss, wonk
Related
I'm able to correctly query data from the OSM api.
I can also show highways and trunks correctly on the map.
However, the query gives me back always results for a fixed zoom even if my current zoom is higher.
this is how i do my call:
var opl = new L.OverPassLayer({
minZoom: 14,
query: '(way({{bbox}})["highway"~"^(' + query + ')$"];);(._;>;);out geom;',
onSuccess: function (data) {
console.log(data);
urlxml = data.urlxml;
data = data.result;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
//document.getElementById("demo").innerHTML = xhttp.responseText;
$("#fileData").text(xhttp.responseText);
console.log(xhttp.responseText);
}
};
xhttp.open("GET", urlxml, true);
console.log(urlxml);
xhttp.send();
console.log(urlxml);
for (let i = 0; i < data.elements.length; i++) {
let pos;
let marker;
const e = data.elements[i];
if (e.id in this._ids) {
continue;
}
this._ids[e.id] = true;
if (e.type === "way") {
let posWay = [];
for (let j = 0; j < e.geometry.length; j++) {
pos = L.latLng(e.geometry[j].lat, e.geometry[j].lon);
posWay.push(pos);
}
var polyline = L.polyline(posWay, { color: "blue" }).addTo(map);
}
console.log("DATA: " + JSON.stringify(data.elements));
}
},
});
How can i get results from the current view only?
Thank you.
I created a map and added markers on it in salesforce lightning component ,
issue is:
click on marker >> click on map (this close the popup) >> zoom in and out >> this error displayed for each zoom step:
Uncaught TypeError: Cannot read property '_latLngToNewLayerPoint' of
null throws at /resource/1498411629000/leaflet/leaflet.js:9:10763
this is the code in component javascript helper:
({
drawMap: function(component,map){
var mapElement = component.find("map").getElement();
map = L.map(mapElement).setView([35.232, 40.5656], 12);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles © Esri'
}).addTo(map);
var markers = L.marker([35.232, 40.5656]).addTo(map);
component.set("v.map", map);
component.set("v.markers", markers);
},
putMarkers: function(component) {
var map = component.get('v.map');
var markers = component.get('v.markers');
var projects = component.get('v.projects');
var projectsAction = component.get("c.getProjectsList");
var markerArray = [];
var symbol;
var symbol1 = 'symbolURl';
var symbol2 = 'symbolURl';
projectsAction.setCallback(this, function(response) {
var state = response.getState();
if( state == "SUCCESS"){
projects = response.getReturnValue();
if (markers) {
markers.remove();
}
// Add Markers
if (map && projects && projects.length> 0) {
for (var i=0; i<projects.length; i++) {
var project = projects[i];
if (project.Latitude && project.Longitude) {
var latLng = [project.Latitude, project.Longitude];
var currentStatus = project.status;
if(currentStatus=="status1")
symbol = symbol1;
else if(currentStatus=="status2")
symbol = symbol2;
var popupTemplate = '<b style="color:black; font-size:11px;">Project Name:</b><span style="float:right;margin-right:10px;color:#800000;font-size:11px;width:110px;text-align:right; white-space:normal;" > '+project.name;
var icon = new L.DivIcon({
className:'',
html: '<img style="width:34px;height:37px;" src="'+symbol+'"/>'+
'<span style="font-weight:bold;font-size:9pt;">text</span>'
});
var marker = L.marker(latLng, {project: project,icon:icon,title:project.name}).bindPopup(popupTemplate,{minWidth:200});
markerArray.push(marker);
}
}
L.layerGroup(markerArray).addTo(map);
component.set("v.map", map);
}}
else if(state == "ERROR"){
console.log('Error in calling server side action');
}
});
$A.enqueueAction(projectsAction);
}
and in javascript controller:
jsLoaded: function(component, event, helper) {
var map = component.get("v.map");
if (!map) {
helper.drawMap(component,map);
helper.putMarkers(component);
}
},
projectsChangeHandler: function(component, event, helper) {
helper.putMarkers(component);
}
where is the problem? please help
this is a new bug for Vue3,I've solved it:
change Proxy'map to toRaw(map),like this:
L.geoJSON(geoJson, {
style: {
color: '#ff0000',
fillColor: "#ff000000",
weight: 1
},
onEachFeature: myonEachFeature,
}).addTo(toRaw(map))
I solved it by editing the leaflet.js file:
search for the word ( _latLngToNewLayerPoint )
and wrap the code with the condition:
if(this._map)
so if _map is null, skip
I don't know why this bug is only presented in salesforce
In my case it was related to the framework variable wrappers (vue.js).
When I use observable variable like this:
data() {
return {
map: null,
};
},
mounted() {
// here it's required to use a global variable
// or a variable without framework handlers
// map = L.map(...);
this.map = L.map('map', { preferCanvas: true }).setView([51.505, -0.09], 13);
}
I get error:
Popup.js:231 Uncaught TypeError: Cannot read property '_latLngToNewLayerPoint' of null
at NewClass._animateZoom (Popup.js:231)
at NewClass.fire (Events.js:190)
at NewClass._animateZoom (Map.js:1689)
at NewClass.<anonymous> (Map.js:1667)
The solution is just to define the map variable outside of framework, in other words use a global variable for leaflet structures.
Is there a way to add an icon/img before the input checkbox inside the layer control?
And is there a way to add a value(or id) prop to the checkbox?
For now I can add an icon with this, but that is not exacltly what I want. Thanks.
L.control.layers({
null
}, {
'<img src="/img/fish.png">Some text':new L.layerGroup(),
}).addTo(map);
This will add an img after the checkbox. Maybe somehow override the _addItem method in the Control.Layers.js, but I don't know how.
Update: Is there a way to add a value prop to the checkbox on this stage?
var layers = L.control.layers({}, {
'name':new L.layerGroup(), // how to add val?
}).addTo(map);
So I can add a value and name(span, label) to the checkbox to get the
<div>
<input type="checkbox" value="some val" class="leaflet-control-layers-selector"><span>name</span>
</div>
Might want to do this with custom JavaScript. I don't believe there is any built-in way to accomplish this. Try something like this:
Save the control layers to a variable:
var layers = L.control.layers({}, {'name' : new L.layerGroup()}).addTo(map);
Get the _overlaysList property (unless you're altering a base map):
var list = layers._overlaysList;
Iterate the input tags:
var inputs = list.getElementsByTagName('input');
Find the one you want to alter, and prepend an image to it.
Well, here is my solution, if someone is interested
//---------------- OVERRIDING THE LAYERS -------------------
L.Control.IconLayers = L.Control.Layers.extend({
initialize: function (baseLayers, overlays, options) {
L.Control.Layers.prototype.initialize.call(this, baseLayers, overlays, options);
},
_addItem: function (obj) {
//console.log("Layer Control:",obj)
var label = document.createElement('label'),
input, icon = false,
checked = this._map.hasLayer(obj.layer);
if (obj.overlay) {
input = document.createElement('input');
input.type = 'checkbox';
input.className = 'leaflet-control-layers-selector';
input.defaultChecked = checked;
input.value = obj.name; // add
console.log(obj)
if ('getIcon' in obj.layer) {
icon = obj.layer.getIcon();
}
} else {
input = this._createRadioElement('leaflet-base-layers', checked);
}
var layer_name = obj.name
if (obj.layer.hasOwnProperty('_options')){
layer_name = obj.layer._options.name
input.id = obj.layer._options.id
}
input.layerId = L.stamp(obj.layer);
L.DomEvent.on(input, 'click', this._onInputClick, this);
var name = document.createElement('span');
name.innerHTML = ' ' + layer_name;
label.appendChild(input);
if (icon) {
var i = document.createElement('span');
i.innerHTML = icon;
label.appendChild(i);
}
label.appendChild(name);
var container = obj.overlay ? this._overlaysList : this._baseLayersList;
container.appendChild(label);
return label;
}
});
L.control.iconLayers = function(baseLayers, overlays, options) {
return new L.Control.IconLayers(baseLayers, overlays, options);
}
L.customLayerGroup = L.LayerGroup.extend({
initialize: function (layers) {
console.log("LAYERS:",layers)
L.LayerGroup.prototype.initialize.call(this, layers);
this._options = layers;
},
});
//---------------- OVERRIDING THE LAYERS -------------------
var layers = L.control.iconLayers({
'Mapbox Streets': L.mapbox.tileLayer('mapbox.streets').addTo(map),
'Mapbox Light': L.mapbox.tileLayer('mapbox.light')
}, {
'1':new L.layerGroup(),
'2':new L.layerGroup(),
'3':new L.customLayerGroup({name:"Boats",id:"3", value:"3"}),
}).addTo(map);
I want to add multiple layergroup or featuregroup objects or something else if there's a better way on a map that can contain multiple polygons in each. I want these groups to be distinguishable so they can be used in conjunction with datatables and the leaflet draw tool so that when I select a row within datatables, only the polygons within the related group can be edited or deleted using the draw tool and any new polygons are only added to that group.
I've done this before with only a single polygon and one featuregroup, but how do I handle multiple groups?
featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
},
draw: {
marker: false,
polygon: true,
polyline: false,
rectangle: false,
circle: false
},
locate: {
marker: true
}
}).addTo(map);
$('.leaflet-control-zoom').css('margin-top', '45px');
L.drawLocal.draw.toolbar.buttons.polygon = 'Draw damage area';
L.drawLocal.edit.toolbar.buttons.edit = 'Edit damage area';
L.drawLocal.edit.toolbar.buttons.remove = 'Delete damage area';
if (jsModel.polygonpoints)
{
var polygonPoints = jsModel.polygonpoints.split(';');
if (polygonPoints.length > 0) {
var polyPoints = [];
for (var i = 0; i < polygonPoints.length; i++) {
var point = polygonPoints[i].split(',');
polyPoints.push([parseFloat(point[0]), parseFloat(point[1])]);
}
var points = polyPoints;
var polyOptions = {
color: '#f06eaa'
};
var polygon;
if (typeof featureGroup !== "undefined") {
polygon = L.polygon(points, polyOptions).addTo(self.featureGroup);
self.polygon = polygon;
}
}
}
I'm trying to add the polygons during a render of my datatable columns. Here is what I have so far. I saw a post somewhere that talked about adding multiple draw tools and then only make the current one available. Not sure if this is a good way to do it, but if it is, what can I use in my button's "data-draw-control" to be able to point to the one I want to be current?
"columns": [
{
"render": function (data, type, row) {
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
},
draw: {
marker: false,
polygon: true,
polyline: false,
rectangle: false,
circle: false
}
}).addTo(map);
for (var al = 0; al < row.areaList.length; al++)
{
var polyPoints = [];
for (var ap = 0; ap < row.areaList[al].areaPointList.length; ap++)
{
if (row.areaList[al].areaPointList[ap].x == 0 && row.areaList[al].areaPointList[ap].y == 0)
{
if (polyPoints.length != 0)
{
//add polygon to map
L.polygon(polyPoints).addTo(featureGroup);
polyPoints.length = 0;
}
}
else
{
polyPoints.push([parseFloat(row.areaList[al].areaPointList[ap].x), parseFloat(row.areaList[al].areaPointList[ap].y)]);
}
}
}
return "<button type='button' class='btn-zoom' data-draw-control='" + drawControl + "'><i class='fa fa-search'></i></button";
}
}
First create two featuregroups and a layercontrol so you can toggle between them:
var layerControl = new L.Control.Layers({
'FeatureGroup 1': new L.FeatureGroup(),
'FeatureGroup 2': new L.FeatureGroup()
}).addTo(map);
Now then you toggle between those, the map fires a basemapchanged event which contains the currently selected featuregroup, store that in a variable:
var currentFeatureGroup;
map.on('baselayerchange', function (e) {
currentFeatureGroup = e.layer;
});
When you draw something, the map fires another event where you can process the drawn feature. Create a function that returns the currently selected featuregroup and store it into that:
function getCurrentFeatureGroup () {
return currentFeatureGroup;
}
map.on('draw:created', function (e) {
var featureGroup = getCurrentFeatureGroup();
if (featureGroup instanceof L.FeatureGroup) {
featureGroup.addLayer(e.layer);
} else {
alert('Please select a featuregroup');
}
});
Here's an example of the concept on Plunker: http://plnkr.co/edit/9ZEjuP?p=preview
I am creating overlays in my mapping application that I need to refresh every 5 seconds. I am only having difficulties removing the stale overlay from my map using the code below. The map.removeOverlay method does not seem to be working correctly. The stacking of the overlays is visibly apparent after only a few iterations.
Using map.getOVerlays().clear() removes the stale overlay, however, this removes all overlays which is not desired. Any assistance with this is appreciated.
window.setInterval(function() {
$.ajaxSetup({ mimeType: "text/plain" });
$.getJSON('json/DATA.json', function(data) {
$.each(data.item, function(key, val) {
var storeName = this.name;
var storeLocation = this.location;
var storeLatitude = this.latitude;
var storeLongitude = this.longitude;
$.each(val.tasks, function(i, j){
var taskName = this.name;
var taskState = this.state;
if (taskState == "Open") {
var taskGeometry = ol.proj.transform([storeLongitude,storeLatitude], 'EPSG:4326', 'EPSG:3857');
function createCircleOutOverlay(position) {
var elem = document.createElement('div');
elem.setAttribute('class', 'circleOut');
return new ol.Overlay({
element: elem,
position: position,
positioning: 'center-center'
});
}
var taskOverlay = createCircleOutOverlay(taskGeometry);
map.removeOverlay(taskOverlay);
map.addOverlay(taskOverlay);
}
});
});
});
}, 5000);
var taskOverlay = createCircleOutOverlay(taskGeometry);
map.removeOverlay(taskOverlay);
The problem is that you are trying to remove the new overlay and not the old one. You would have to store a reference to the overlay so that OpenLayers can remove it from the map. Something like:
var currentOverlay = null;
window.setInterval(function() {
$.ajaxSetup({ mimeType: "text/plain" });
// ...
if (currentOverlay === null) {
map.removeOverlay(currentOverlay);
}
currentOverlay = createCircleOutOverlay(taskGeometry);
map.addOverlay(currentOverlay);
// ...