Develop Reference

QuerySourceFeature is not working as expected - Mapbox GL

I am looking for a answer that will solve my problem. I am highlighting an address based on geocoder searched coordinates. This same functionality is working perfect on the click on building but I do not want to click on building rather just highlight the building based on searched coordinates. I am providing code below:
map.addLayer(
{
id: "3d-buildings",
source: "composite",
"source-layer": "building",
type: "fill",
minzoom: 10,
paint: {
"fill-color": "#aaa",
},
},
labelLayerId
);
map.addSource("currentBuildings", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [],
},
});
map.addLayer(
{
id: "highlight",
source: "currentBuildings",
type: "fill",
minzoom: 15,
paint: {
"fill-color": "#f00",
},
},
labelLayerId
);
This below click working perfect
map.on("click","3d-buildings", (e) => {
map.getSource("currentBuildings").setData({
type: "FeatureCollection",
features: e.features,
});
});
I want the same features but not on click rather than on geocoder result coordinates:
geocoder.on("result", (e) => {
var coordinates = e.result.geometry.coordinates;
const selectedFeatures = map.querySourceFeatures(coordinates, {
layers: ["3d-buildings"],
});
console.log(selectedFeatures); //giving blank array, how can I get the features same as the onclick function is providing with additional parameter which is 3d-buildings
map.getSource("currentBuildings").setData({
type: "FeatureCollection",
features: e.features,
});
});
Maybe I am wrong at some point in using querySourceFeature. Please direct me in right direction.

Creating point, popup, circle, convert coordinates issues (Arcgis JS 4.6 API)

I want to do some simple things on a basemap project.
Such as creating a circle.
Creating a popup when click on created point.
Converting lat long to x y
How can I do these things?

var pt = new Point({
longitude: 99.909550,
latitude: 99.751906
});
var lineAtt = {
Name: "fill",
Owner: "fill",
Length: "999 km"
};
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: pt,
symbol: markerSymbol,
attributes: lineAtt,
popupTemplate: { // autocasts as new PopupTemplate()
title: "{Name}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Name"
}, {
fieldName: "Owner"
}, {
fieldName: "Length"
}]
}]
}
});
I found the solution that open popup while clicking the created point.

GeoJSON feature coordinates not displaying on OpenLayers map

I'm trying to display a GeoJSON polygon on a map. I've used the example provided by OpenLayers with the following data, but only the second polygon is displayed:
var geojsonObject = {
"type": "FeatureCollection",
"crs": {
"type": "name",
},
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[103.92240800000013,21.69931],[100.93664,21.66959500000013],[108.031899,18.67076]]]
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
}
}
]
};
The code I'm using to parse and add the GeoJSON to the map is as follows:
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
I noticed different kinds of coordinates. In the second set the coordinates are represented like [-5e6, -1e6] with the e which I don't understand and in the first set - that don't work - they look like [103.92240800000013, 21.69931].
Is this a possible reason why my polygon is not displayed?

The problem is your two polygons are specified using different coordinate spaces and you need to determine which map projection you are going to use. By default OpenLayers uses something they call a "spherical mercator" and without delving into the detail the geometry coordinates are represented by pixels on a 2D plane.
Ideally, you would fix your GeoJSON to provide all coordinates in the same projection. If you can't do that, here is a working solution:
The set that you say aren't working look like longitude and latitude (GIS) coordinates and need to be transformed if they are to be displayed on the same layer - in the following example I've tagged the features that require transform using the GeoJSON properties like so:
var geojsonObject = {
type: 'FeatureCollection',
// ...
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [/* ... */],
properties: {
requiresTransform: true // <- custom property
}
}
},
// ...
]
};
Before adding features to the layer source you could then do something like the following:
var features = (new ol.format.GeoJSON()).readFeatures(geojsonObject);
features.forEach(function(feature){
if(!feature.get('requiresTransform'))
return; // ignore
var geometry = feature.getGeometry(),
coords = geometry.getCoordinates();
if(geometry instanceof ol.geom.Polygon)
geometry.setCoordinates(transformPolyCoords(coords));
});
function transformPolyCoords(/* Array */ a){
return a.map(function(aa){
return aa.map(function(coords){
return ol.proj.transform(coords, 'EPSG:4326', 'EPSG:3857');
});
});
}
There may be a cleaner way of managing this and I'd imagine it involves keeping the separate formats in separate GeoJSON objects and I don't know how close it is to what you were expecting, but this is what I came up with using what you provided » working example.

Google maps : pan to a center of a geojson route clicking on it

i´m new in google maps and after reading here and there I can´t make this work.
I´m doing a google map where Im showing bike forest routes using geojson ( linestring type, are given by coordinates points).
"type": "Feature",
"properties": {
"name": "larouco",
"color":"red"
},
"geometry": {
"type": "LineString",
"coordinates": [ [ -7.634432, 41.955357, 981.6 ], [ -7.635379, 41.954641, 896.1 ], [ -7.635824, 41.953955, 900.9 ] ................ ] }
All fine at the moment.
I need to pan the map to the center of the road when you clicks it.
map.data.loadGeoJson('http://myroutes.json');
map.data.setStyle(function(feature) {
var color = feature.getProperty('color');
return {
strokeColor: color,
strokeWeight: 3
};
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 8});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
here is where the problems starts
map.data.addListener('click', function(event) {
var center_rute = getCenter(new google.maps.LatLngBounds());
map.panTo(center_container);
//map.setZoom(13);
});
Thinks that LatLngBounds is the way but i´m running in circles...
Thanks,
Jul

You must access the geometry of the feature and create the LatLngBounds on your own by iterating over the points of the path(geometry)

Properly Remove LoadMask Once GeoExt MapPanel is Completely Loaded

I would like to have a mask over the whole page which does not get removed until the entire page has completely loaded. More specifically, I have a map created with OpenLayers and GeoExt and I am trying to use an ExtJS loadMask. However, I have not been able to find any other way of doing this other than using a manual setTimeout which I do not want to use. I'd much rather have the mask removed only if the page is completely loaded. I have tried to use the 'loadend' event on the openLayers map as well as windows.onload etc:
My map and loadMask config:
var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
mask.show();
Ext.onReady(function() {
var options = {
controls: [new OpenLayers.Control.Navigation()],
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
units: 'm',
allOverlays: false
}
var map = new OpenLayers.Map(options);
map.events.register("loadend", map , function() {
mask.hide(); alert('howdy');
});
var mapPanel = new GeoExt.MapPanel({
title: "Map",
map: map,
id: 'mapPanel',
layerStore: map.layers,
//Set the map to be centered at specified longitude/latitude, transform our layers (SRID=4326) to display properly on Google
//base layers (SRID=900913)
center: new OpenLayers.LonLat(95.20, 30.34).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
zoom: 7,
region: "center",
tbar: [measureLength, '-', measureArea, '-'],
bbar: [
{
xtype: "label",
text: "Scale = 1 : "
}
],
items: [{
xtype: "gx_zoomslider",
vertical: true,
height: 300,
aggressive: true,
x: 10,
y: 20,
plugins: new GeoExt.ZoomSliderTip()
}]
});
It seems this event never happens as I never get an alert message. I really really want to get this working, other attempts were:
window.onload = mask.hide();
after the Ext.onReady and at the end of the </body> tag, but then the mask is hidden way before the map is done loading. Could anyone share some insight, I'd really appreciate it!

Add the event 'onMapReady' just after the items like so:
onMapReady: function() {
Ext.getBody().unmask();
}