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.
Related
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
Is it possible to have multiple data layers using Google Maps API? The only existing related question I could find was this.
Here's my problem.
I want to have a data layer for showcasing polygons on map that are being drawn by the user. At the same time I want to have another data layer that displays polygons that already exist in a database.
I figured I would do this by creating 2 data layers:
drawLayer = new google.maps.Data();
savedLayer = new google.maps.Data();
But when I initialize the drawing tools using drawLayer.setControls(['Polygon']), it doesn't work. If I replace the drawLayer with map.data, then the drawing tools works fine. Why is that?
JSFiddle: http://jsfiddle.net/pjaLdz6w/
In your fiddle you aren't declaring drawLayer as a google.maps.Data object. But even if you do, you still need to give it a map attribute:
drawLayer = new google.maps.Data({map:map});
JSFiddle: http://jsfiddle.net/jbyd815y/
I just want to clarify whether my way of understanding is correct. In my Google Maps app I would like to show to my users markers from particular continents.
Question: Am I right that a bound in Google Map API is an area made from NOT MORE AND NOT LESS than two points (markers)?
From math lessons, to draw 2D area I just need two points. Right? So to show to my users all markers from Europe should I just find two coordinates, one from Iceland (top, left) and second from let's say south-east Turkey? (For USA I would pick Seattle and Miami).
So, below JS code works perfectly. My question is - could you confirm that my way of understanding and the approach I've chosen is correct? Does it make any sense?
var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng('66.057878', '-22.579047')); // Iceland
bounds.extend(new google.maps.LatLng('37.961952', '43.878878')); // Turkey
this.map.fitBounds(bounds);
Yes, you are mostly correct. Except a 'bound' in Google maps case can include multiple points, for example if you had a point to the far right in the middle of the square in your image above and another at the bottom of the square in the middle you would still get an area the same as you have drawn above but with 3 points as in the edited map.
Obligatory link to the docs :)
https://developers.google.com/maps/documentation/javascript/reference?hl=en
You should not think about "top-left" and "bottom-right" but as south-west and north-east (so bottom-left and top-right if you like), as these are the coordinates used to create and/or retrieve the bounds object.
See the documentation and the getNorthEast and getSouthWest methods.
These two points are LatLng objects, and not markers. As an example, a marker is positioned on the map using a LatLng object.
I don't know your use case and your way of storing the data, but there might be a more precise way to display "Europe" markers. You could for example save the region along with each marker so that you can just query for "EU" markers and not others...
I'm using OpenLayers to display a world map on my site. The map wraps to either side, and, in the repeated sections, the coordinates are bonkers.
The pins on the map can be moved. If we move them over to a repeated section, instead of getting the actual coordinates of that spot on the globe, we get an invalid coordinate set which makes that pin disappear from the map altogether.
Here's the code I'm using for the map:
this.maps.vectorSource = new ol.source.Vector({
});
this.maps.vectorLayer = new ol.layer.Vector({
source: self.maps.vectorSource
});
this.maps.rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM({wrapDateLine: false})
});
this.maps.map = new ol.Map({
target: 'map',
interactions: ol.interaction.defaults({mouseWheelZoom:false}),
layers: [self.maps.rasterLayer, self.maps.vectorLayer],
view: new ol.View({
center: ol.proj.transform([-98.583333, 37.833333], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
You can see I've tried setting the wrapDateLine option to false, but this doesn't have any effect best I can tell.
I'd like to solve this either by preventing the map from repeating or by ensuring the repeating sections report proper coordinates. At this point, I don't much care which. Any ideas how I can achieve one of these two results?
Depending on your version of OpenLayers, you may need to use different options to disable the horizonal repeat. Try adding the following options to your OSM source:
wrapX: false,
noWrap: true
I've made a jsFiddle with a slightly modified version of your code to illustrate:
https://jsfiddle.net/fg1oxpu0/
Anthony got me going in the right direction with his answer. We were using OL 3.1.1 which doesn't support wrapX. I updated to 3.2.0 and was able to turn off wrapping. However, this created a both a UX problem (the map now ends on either side and the user needs to manually move back to the other side) and a UI problem (our wide area for map display is now mostly empty).
I tried moving up to the latest version (3.7.0) which, I noticed, began wrapping the vector layer. (Vector wrapping was lost in the move to OL 3 but was restored later.) This allowed me to turn my map wrapping back on, and the pins are drawn on each repeat of the map. It also now reports the correct coordinates even on the repeated maps.
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)