We Keep Coding

How to show buildings from selected area in Mapbox

I am a beginner in mapbox, so please be understanding :)
I'm trying to show 3D buildings only from the selected area (in red area). Unfortunately, I did not find any answer in the documentation or on the Internet, so I decided to ask here if there is such a possibility?
I was thinking about copying Tilesets and somehow extracting buildings but I do not know how.
Do you have any ideas?
Link to codepen:
https://codepen.io/Mativve/pen/RzORMo
mapboxgl.accessToken = '--MY-TOKEN--';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mativve/cjxzva0f6042a1cm7710cofya',
center: [21.005950, 52.231034],
zoom: 15,
bearing: 20.80,
pitch: 53.50
});

There's no direct support for area-based filtering, but you could achieve something similar (with some caveats), as follows:
Call map.queryRenderedFeatures() to get all buildings in the current view port.
Use Turf's booleanContains function to create an array of buildings that are within the designated polygon.
Construct a filter that matches only those filters, using some other property, such as a building identifier.
Call map.setFilter() on the buildings layer so that only those buildings are visible.

JavaScript - Bing Maps - WellKnownText

I have the follow code:
var area = new Microsoft.Maps.WellKnownText.read(x, { strokeColor: stroke, strokeThickness: 10 });
$scope.map.setView({ center: new Microsoft.Maps.Location(lat, lng), zoom: 17 });
$scope.map.entities.push(area);
Which should map a Well Known Text (wkt) string. This works fine if I have a POINT() but for any other WKT String, it shows nothing. I've looked at the MSDN example, but it only demonstrates POINT(), and no matter what I try, I can't get the other shapes to show up.
Has anyone been able to map shapes through the wkt handler?
Thanks
Docmur

I use the WKT module regularly with all sorts of shapes and haven't had any issues. Here is a larger sample that uses this module to load a large polygon: http://bingmapsv8samples.azurewebsites.net/#North%20Carolina%20Map
Note that your code is incorrectly specifying styles. It should be using a StyleOptions object, also you shouldn't be using the "new" keyword as this is a static function:
var area = Microsoft.Maps.WellKnownText.read(x, { polygonOptions: { strokeColor: stroke, strokeThickness: 10 }});
Documentation can be found here: https://msdn.microsoft.com/en-us/library/mt712880.aspx

Sorry, to be honest, I forgot about this post. We solved this problem a while ago and I can't remember what the issue was. We were having massive problems with CORS errors and 500 error codes from Bing Maps, which have disappeared. Something was wrong with our key, at least that was the best guess they ever came up with.
We currently have the WKT mapping working like a treat.
Thanks
Docmur

Add circle to map with carto.js and leaflet libraries

I have to show a circle on feature click on my layer.
When I try to create the circle I have this error: Error: Invalid LatLng object: (41.961124103390674, NaN).
If I print the object before this error I can read: Array [ 41.84664960937685, 12.008056640625 ].
I tried to write values separated but it doesn't work.
How is it possible?
Someone can help me? Thanks and sorry for my english
EDIT
I tried this solution:
layer.getSubLayer(1).on('featureClick', function (event, latlon, pos, data, index) {
var coord = {lat:data.lat, lng:data.lon};
console.log(coord)
L.circle(coord, {radius: data.distance}).addTo(map);
Error and log are the same...
EDIT 2
With this code
var coord = L.latLng(42,21);
var cerchio = L.circle(coord,{radius: data.distance});
console.log(cerchio);
cerchio.addTo(map);
I noticed that circle Object is correctly created, so the problem is on addTo(map) method.

According to the Carto Docs, the latlon argument in your featureClick callback contains:
Array with the LatLng ([lat,lng]) where the layer was clicked.
Is that where you want the circle to be placed? If so, use this line:
L.circle(latlon, {radius: data.distance}).addTo(map);

SOLVED
The correct way is
L.circle([data.lat, data.lon], data.distance, {}).addTo(map);
where data.distance is the radius of circle. Official doc's example L.circle([50.5, 30.5], {radius: 200}).addTo(map); seems to be wrong.

Add 1609*3
var coord = L.latLng(42,21,1609*3);

map.setZoom() is not working but map.setCenter() is working

Part of my code looks like this, I am able to center the map using
map.setCenter(myLatlng);
but after that I am trying to zoom the map
marker_id = id;
marker_id = new google.maps.Marker();
marker_id.setIcon(image);
myLatlng = new google.maps.LatLng(loctionupdateobj[id].lat, loctionupdateobj[id].lang);
marker_id.setPosition(myLatlng);
marker_id.setMap(map);
map.setCenter(myLatlng);
alert(map.getZoom());
map.setZoom(10);
alert("game again " + map.getZoom())
You can see the
alert("game again " + map.getZoom())
in the code it is giving me an alert like game again 10 but the zoom level is never going to 10.
But the first alert is 4 (which I set during initialsation).
As I am not able to setZoom, I am creating a new map instance each time when I am adding new markers.

Finally found !!!
The previous programmer who coded my project wrote a line
google.maps.event.clearListeners(map);

So the second alert is retuning 10, what is the first alert returning, is this 10 too?
If so you're zoom is already 10 (sorry if it's a stupid question, but no mention of this).

My map works with the places api and is looking for a location.
I first initialize my map with zoom : 23.
Once I search and submit my location the map defaults to its original zoom. So i had to use map.setZoom(23), It was working at first then just stopped.
It's strange because map.fitBounds() works perfectly.
setTimeout(function(){
map.setZoom(23);
console.log('zoomed');
},1);
My dirty solution for the time being. ¯\_(ツ)_/¯

To solve this issue, you can try calling the setZoom method after all the markers have been plotted on the map and all the other methods such as setCenter, bounds.extend are called. So u have to call setZoom method in the last marker function.

custom google maps icons

Is there any way to create custom dynamic icons for the markers?
What I want to create is a list of points and put a number "n" within markers specifying it's the n-th element.

Yes. You can either use custom icons with Numeric Markers or the built-in numbering system on Google has for markers.
Assuming the last option (not using custom markers), your marker definition code would look like:
var NUMBER_SHOWN='34';
var ICON_COLOR = 'ff6600';
var ICON_TEXT_COLOR = '000000';
var marker = new google.maps.Marker({
position: [LatLong Obj],
map: [Map Obj],
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+NUMBER_SHOWN+'|'+ICON_COLOR+'|'+ICON_TEXT_COLOR
});
I believe this only works for two-digit number, though I'm not sure.
EDIT
Geocodezip has correctly pointed out that the second approach has now been deprecated, so it looks like you're stuck using the first approach (using google's custom numbered-icons). Have a look at Daniel Vassallo's answer here on how to use it. If none of the markers fit your needs (colors, look, etc) you can create your own custom markers for each of the numbers (if you know how, you can write a server-side script that you can pass GET vars to and have it build the icon for you using GD etc, but you can also just build all the icons by hand)