We Keep Coding

leaflet invert when there are multiple polygons

I'm using this library to invert leaflet layers.
https://github.com/ebrelsford/Leaflet.snogylop
This works perfectly when there is only one polygon. But when are there are multiple polygons, the invert applies for each and every polygon so it overlaps resulting invert feature applies on top of each polygon. Like the image attached below.
When trying on a single polygon it works perfectly.
How can i fix this issue when multiple polygons are there.
function handleJson(data) {
var selectedArea = L.geoJson(data, {
invert: true,
worldLatLngs: [
L.latLng([90, 360]),
L.latLng([90, -180]),
L.latLng([-90, -180]),
L.latLng([-90, 360])
]
});
selectedArea.addTo(lmap);
lmap.fitBounds(selectedArea.getBounds());
}
PS:
poly.toGeoJSON()
{"type":"Feature","properties":{},"geometry":{"type":"MultiPolygon","coordinates":[[[[null,null],[null,null]]],[[[null,null],[null,null]]],[[[null,null],[null,null]]],[[[null,null],[null,null]]],[[[null,null],[null,null]]],[[[null,null],[null,null]]],[[[null,null],[null,null]]]]}}
multipolyCoords
[[[[{"lat":35.41263883,"lng":63.02502113},{"lat":35.41251986,"lng":63.02571771},{"lat":35.41329411,"lng":63.02584793},{"lat":35.41378402,"lng":63.02643689},{"lat":35.41402821,"lng":63.02723164},{"lat":35.41342648,"lng":63.02885513},{"lat":35.41342962,"lng":63.02891854},{"lat":35.4100508,"lng":63.02941312},
.....................
]]]],"_initHooksCalled":true

You have to create a MultiPolygon out of the polygons.
Try this (I'm assuming that you only have polygons in data):
var layers = L.geoJSON(data);
var multipolyCoords = [];
layers.eachLayer((l)=>{
if(l instanceof L.Polygon){
multipolyCoords.push(l.getLatLngs())
}
})
var poly = L.polygon(multipolyCoords);
var selectedArea = L.geoJson(poly.toGeoJSON(), {
invert: true,
worldLatLngs: [
L.latLng([90, 360]),
L.latLng([90, -180]),
L.latLng([-90, -180]),
L.latLng([-90, 360])
]
});

Integration of Trajectories in OSM with Leaflet

I want to insert trajectories (feature collection of linestrings) in my OSM using Leaflet extracted by a Java application. Starting the server, I want to compute those trajectories and transmit them to my OSM. For using geo positions I am working with the GeoJson library from filosganga: https://github.com/filosganga/geogson
Currently, I need a hint how to do that as my following approach leads to an 404 error message saying:
http://localhost:8080/function (data) { linestrings = L.geoJSON([ data ], { style : function(feature) { //console.log(feature); return feature.properties && feature.properties.style; } }); linestrings.addTo(map); }
My html file looks like the following:
var linestrings;
function reqListener(){
// var url="/test";
$.getJSON(function(data) {
linestrings = L.geoJSON([ data ], {
style : function(feature) {
//console.log(feature);
return feature.properties && feature.properties.style;
}
});
linestrings.addTo(map);
});
}
reqListener();
My Java based server application is the following:
public void TestClass(){
get("/test", (request, responce) -> {return Trajectories.writeTestClass(request, responce);});
}
It already worked for applications where an OSM based event (mouse click or change of boundary) triggered the extraction and further transmission of geo data to OSM. But this time the Java application should trigger the transmission of those trajectories to OSM.
Any help or hint would be wonderful. Thanks

Cesium - TypeError : t is undefined when Focusing Camera on Object

I've loaded some JSon data outlining each country on a globe as a GeoJSonDataSource into my Cesium project. Each country is also copied as a separate entry into an array. In order to highlight a country, I use
viewer.entities.add(countryArray[countryID]);
which places a colored polygon over the selected country when the user clicks on it. However, when I click on the Camera icon in the info box that Cesium provides by default, nothing happens. In the console, the error message reads:
TypeError: t is undefined
and points to Cesium.js. If I don't add anything to the viewer.entities array, this error doesn't appear.

There may be a better way to highlight the selected country. Try capturing the selected entity, and change the material properties on the existing polygon, rather than creating a new one.
For example, give this a try: Load up the Cesium Sandcastle and paste in the following code into the code editor, then hit F8:
var viewer = new Cesium.Viewer('cesiumContainer', {
navigationHelpButton: false, animation: false, timeline: false,
selectionIndicator: false
});
var deselectColor = Cesium.Color.BLUE.withAlpha(0.3);
var selectedColor = Cesium.Color.LIME.withAlpha(0.5);
var deselectMaterial = new Cesium.ColorMaterialProperty(
new Cesium.ConstantProperty(deselectColor));
var selectedMaterial = new Cesium.ColorMaterialProperty(
new Cesium.ConstantProperty(selectedColor));
viewer.dataSources.add(Cesium.GeoJsonDataSource.load(
'../../SampleData/ne_10m_us_states.topojson', {
stroke: Cesium.Color.WHITE,
fill: deselectColor,
strokeWidth: 2
}));
//Set the camera to a US centered tilted view.
viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-98.0, 40.0),
new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
var previousEntity;
Cesium.knockout.getObservable(viewer, '_selectedEntity').subscribe(function(newEntity) {
if (Cesium.defined(previousEntity) && Cesium.defined(previousEntity.polygon)) {
previousEntity.polygon.material = deselectMaterial;
}
if (Cesium.defined(newEntity) && Cesium.defined(newEntity.polygon)) {
newEntity.polygon.material = selectedMaterial;
}
previousEntity = newEntity;
});

OpenLayers 3 - Several WMS layers, how to get Feature Info only from visible ones?

I have an Openlayers map with several WMS layers from which I want to request feature information through "getGetFeatureInfoUrl". Visibility of layers can be turned on/off in the layer tree. I'd like to, upon clicking somewhere in the map:
Get Feature Info ONLY for layers that are currently visible
and, if there are more than one layers at the chosen location, get the Feature Info for all of them.
I used the sample code from the OpenLayers website. I tried variants of this code bit
var url = layers[2].getSource().getGetFeatureInfoUrl(
evt1.coordinate, viewResolution, 'EPSG:3857', {
'INFO_FORMAT': 'text/html',
'FEATURE_COUNT': '300'
});
like
var url = layers[].getSource().getGetFeatureInfoUrl( or
var url = layers[1,2].getSource().getGetFeatureInfoUrl(, but either no Feature Info is delivered, or merely for the last layer - regardless of whether it is visible or not.
I created a JSFiddle with two sample layers here: http://jsfiddle.net/kidalex/j34xzaa3/5/
Similar questions were asked before, like here: https://gis.stackexchange.com/questions/114297/querying-multiple-wms-layers-in-ol3-and-adding-to-a-single-popup-window; but I cannot fathom how to apply the solutions (JS/OL newbie here).

You should iterate over your layers and only call getFeatureInfo if they are visible and not the base layer, try something like:
map.on('singleclick', function (evt1) {
document.getElementById('info').innerHTML = '';
var viewResolution = /** #type {number} */
(view.getResolution());
var url = '';
document.getElementById('info').innerHTML ='';
layers.forEach(function (layer, i, layers) {
if (layer.getVisible() && layer.get('name')!='Basemap') {
url = layer.getSource().getGetFeatureInfoUrl(evt1.coordinate, viewResolution, 'EPSG:3857', {
'INFO_FORMAT': 'text/html',
'FEATURE_COUNT': '300'
});
if (url) {
document.getElementById('info').innerHTML +=
'<iframe seamless src="' + url + '"></iframe>';
}
}
});
});
EDIT: grammar

Rendering Issue for Openstreet Maps with Yii

I have had issue previouslys with jquery and Yii and how it renders.
using the following code:
<div id="mapdiv" height="1000" width="1000"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
var mainLonLat = [0.166081 ,38.789011];
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
var lonLat = new OpenLayers.LonLat( 0.166081 ,38.789011 ).transform(epsg4326, projectTo);
var zoom=14;
map.setCenter (lonLat, zoom);
var mastsOneK = [new OpenLayers.LonLat(0.154539,38.738778)];
//Create the Circle
circleLayer = new OpenLayers.Layer.Vector("circleLayer");
circleLayer.addFeatures(createCircle());
function createCircle()
{
var x = 0;
var extent = map.getExtent();
var features = [];
while(x < mastsOneK.length)
{
var threeKStyle = {
strokeWidth: 1,
strokeColor: '#FF6600',
fill: 1,
fillColor: '#FF6600',
fillOpacity: 0.4,
strokeOpacity: 0.4,
};
var newThreeK = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(mastsOneK[x].lon,mastsOneK[x].lat).transform(
epsg4326, projectTo),
2000,
40),"",threeKStyle);
features.push(newThreeK);
x++;
}
return features;
}
map.addLayer(circleLayer);
</script>
I am able to get a map showing with a single circle using just a standard html page, this is the desired result. However, when using the same code and pasting this into a Yii view. The map does not appear. I get a blank white area where the map should be.
If I use chrome inspector and set a height and width to the element (I have set width and height to the element before and this does not make a difference), I can begin to see a slice of the map.
If I then zoom in on the page, the full map then appears as expected.
I have tried to do various workarounds such as resize, redraw, refresh the image etc. Using the codes below and many more for example:
$("#mapdiv").resize();
$.fn.redraw = function(){
$(this).each(function(){
var redraw = this.offsetHeight;
});
};
$('#mapdiv').redraw();
However the map still does not show. Strangely enough if I remove the DOCTYPE tag at the start of the document, then the map appears, but obviously this causes many other issues.
Could any one suggest why this is happening and any potential fixes they may have come across as I have used every snippet I have got my hands on to no avail.
Similarly when using the highcharts extensions and trying to render the charts in a tab I also get an issue where a zoom in/out is required to see the chart and I can't help but think that the solution to the above would be the solution to this also.
Any help is appreciated.

You may have to manually call map.updateSize() ( http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize ) when the containing element size has changed after initialisation.