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.

Mapbox GL JS cannot load GeoJson from path

I'm writing the app in Ruby on Rails and I have the application set to serve GeoJson from a specific path. What I would like to do have Mapbox grab the GeoJson from the specified path, and add it to the map. Here is my javascript code to create the map
$(document).on 'turbolinks:load', ->
map = new (mapboxgl.Map)(
container: 'map'
style: 'mapbox://styles/mapbox/streets-v9'
zoom: 6
)
map.on 'load', ->
map.addSource 'shapes',
type: 'geojson'
data: '/regions.json'
When I navigate to /regions.json I get the following response.
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[8.66990129597281, 50.1242808292475],
[8.6629978834745, 50.1232734203388],
[8.66073109130571, 50.1231247844397],
[8.65846429911693, 50.1231743297949],
[8.65887644316587, 50.1218035561855],
[8.65993256224607, 50.1193096384939],
[8.65980376723581, 50.1190949242805],
[8.66297212445633, 50.1181699904754],
[8.66451766457959, 50.1175093125293],
[8.6669905287728, 50.1165843480906],
[8.66910276691314, 50.1158080248614],
[8.67085437906084, 50.1154611529673],
[8.67098317407113, 50.1174597613236],
[8.67077710204663, 50.1200363564073],
[8.67015888599337, 50.1224806902187],
[8.66979825998064, 50.1237358401687],
[8.66990129597281, 50.1242808292475]
]
],
"type": "Polygon"
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[8.69901780003497, 50.1216735191773],
[8.69820854586041, 50.1210834384206],
[8.69762143988481, 50.1207476995652],
[8.69625681516334, 50.1199134291953],
[8.6948921904667, 50.1181736234834],
[8.69597119603273, 50.1173698322427],
[8.69612987332479, 50.1173291335912],
[8.69676458249296, 50.1181736234834],
[8.69744689485361, 50.1188553092786],
[8.69879565183601, 50.1200558666313],
[8.70008093788664, 50.121042742926],
[8.69901780003497, 50.1216735191773]
]
],
"type": "Polygon"
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[8.67778012178596, 50.105440710563],
[8.67960973428302, 50.103294069223],
[8.67505801538456, 50.1017054926895],
[8.67414320915341, 50.1013763215998],
[8.66892211982668, 50.0993583102266],
[8.66816350002185, 50.1000882390455],
[8.6691229309412, 50.1009755885121],
[8.67238053367137, 50.1029076635563],
[8.67427708321821, 50.1039953159691],
[8.67778012178596, 50.105440710563]
]
],
"type": "Polygon"
}
}]
}
The map loads just fine, but there are no shapes. The frustrating part is that there are no errors in the browser, and that the GeoJson checks out on geojson.io.
What am I doing wrong here?

Ok so it turns out what I actually wanted to do was create a layer and assign the remote GeoJson file as the source:
map.addLayer
id: 'territory-map'
type: 'fill'
source:
type: 'geojson'
data: '/regions.json'
I was able to find an example of this process here

Ajax not firing after I added a GeoJson 'data'

I have an HTML page where a button click will fire an ajax function showDetail():
<a href="#" class="list-group-item" onclick="showDetail({{ test.id }});">
<strong>{{ test.test_name }}</strong></a>
The ajax function works well if it's like this on its own:
function showDetail(id){
$.ajax({
url : "/test/" + id,
type: 'GET',
success: function(data){
map.removeLayer(tests);
$('#pane-content-edit').html(data);
$('.tests_display').animate({right:0});
}
});
}
I would like to modify it having the current HTML page containing a Geojson. And I'd like to pass it to my ajax to pass it to the url my ajax is pointing at. So I did this:
function showDetail(id){
$.ajax({
url : "/test/" + id,
type: 'GET',
data: {'tests_geojson' : {{ tests_geojson | safe}}},
success: function(data){
map.removeLayer(tests);
$('#pane-content-edit').html(data);
$('.tests_display').animate({right:0});
}
});
}
After adding that, it would not fire. I tried opening up the web console, nothing is happening. Can someone help? or tell me how to debug this?
Thank you!
Edit:
Additional info - Django Framework templating
Contents of test_geojson showing on Leaflet map so it's most likely validated: Big geojson feature but would look generally like so:
alert(JSON.stringify(geojsonFeature));
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
]
},
"properties": {
"prop0": "value0",
"prop1": 0.0
}
}
]
}
Edit: Temporary Solution
This looks like on the right direction. Serializing the JSON data to string, adding csrf, then modify things at views.py. However an error occurs, saying that it has exceeded Data Upload Max Memory Size so I had to set DATA_UPLOAD_MAX_MEMORY_SIZE = None which is a security no-no. If someone has a better workaround it'll be helpful!
var geojsonFeature = {{tests_geojson|safe}};
function showDetail(id){
$.ajax({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
url : "/test/" + id,
type: 'POST',
data: {'tests_geojson' : JSON.stringify(geojsonFeature)},
success: function(data){
map.removeLayer(tests);
$('#pane-content-edit').html(data);
$('.tests_display').animate({right:0});
}
});
}

mapbox GL not able to have more than 5 markers

I'm trying to incorporate markers on a map using Mapbox GL on my rails app.
In my controller file i have:
#boatramps = Boatramp.all.limit(6)
#geojson = {"type" => "FeatureCollection", "features" => []}
#boatramps.each do |boatramp|
#geojson["features"] << {
geometry: {
type: 'Point',
coordinates: [boatramp.long, boatramp.lat]
},
properties: {
title: boatramp.id,
:'marker-symbol' => 'monument'
}
}
end
respond_to do |format|
format.html
format.json{render json: #geojson}
end
for my ajax call I have
style.layers.push({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-12",
"text-field": "{title}",
"text-font": "Open Sans Semibold, Arial Unicode MS Bold",
"text-offset": [0, 0.6],
"text-anchor": "top"
},
"paint": {
"text-size": 12
}
});
$.ajax({
type: 'GET',
url: '/virginia',
dataType: 'json',
success: function(response){
console.log(response)
var markers = new mapboxgl.GeoJSONSource({ data: response});
map.addSource('markers', markers);
},
error: function(){
}
})
When I have 5 markers the call works fine and i get the boatramp id to show.(Also having issues with the "icon image" to show) As soon as I increase the limit to 6 or more. I get an error:
Uncaught TypeError: Cannot read property 'leaf' of undefined
As I zoom in and out on the map it executes the same error. Additionally, once I Have a considerable amount of objects 40 +, some of them don't show. Any ideas?

This is a known issue. https://github.com/mapbox/mapbox-gl-js/issues/987
I also asked aboutit on Github yesterday and I was told it would be fixed in the next release, in about a week.

Zoom in not working on Highmaps

I took a Highmaps example from the demo section and zooming in was working fine. Then I replaced the data object with my own data and changed the world map with my own GeoJSON data.
Now the zoom doesn't work anymore.
Please see this JSFiddle.
I managed to simplify the code up to this point:
var geoJson = { ... }
var data = [...]
// Initiate the chart
$('#container').highcharts('Map', {
mapNavigation: {
enabled: true,
navigationButtons: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series: [{
data: data,
mapData: geoJson,
joinBy: ['name', 'name'],
}]
});
What can I do to make the zoom work?

This must be a bug, it works if you change your coordinate data. jsFiddle:
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "a"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[3125, 6250],
[5625, 6250],
[5624, 8750],
[3125, 8750],
[3125, 6250]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "b"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[6875, 6250],
[9375, 6250],
[9375, 8750],
[6875, 8750],
[6875, 6250]
]
]
}
}]
};
// Initiate the chart
$('#container').highcharts('Map', {
mapNavigation: {
enabled: true,
},
series: [{
mapData: geoJson
}]
});
I suggest filing an issue on GitHub, and we'll look into it in detail.