JavaScript - Bing Maps - WellKnownText - javascript

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

Related

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.

Setting a Max Boundary is not working Leaflet

I seem to be unable to set a Max Boundary, so that the map bounces back after the user has reached a certain point. Also every time I've tired to change the fitbounds() code the map disappears from my Website.
I've looked at the Leaflet documentation over and over again, with very little luck and been looking through Google for any answers and all the code I have tried has not work. I believe I'm missing or not seeing something really simple.
Any ideas?
If all you want is to restrict the view to a given geographical boundary, the simplest solution is to set the maxBounds option. Unless you want to do it dynamically, in which case the option to use is setMaxBounds. The fitBounds method seems redundant and may actually be the reason why you aren't getting the desired outcome.
var southWest = L.latLng(52.456009,-10.685582);
var northEast = L.latLng(51.699800,5.215615);
var maxBoundArea = L.latLngBounds(southWest, northEast);
var map = L.map('map', {
zoomControl:true,
maxNativeZoom:28,
minZoom:8,
maxBounds: maxBoundArea
});
I would suggest writing a constrain function
function constrain(n,low,high){
return Math.max(Math.min(n, high), low);
}
* Note: I did not think of this myself, it is a function in p5 and thought it might work*
Documentation:
https://github.com/processing/p5.js/blob/0.7.3/src/math/calculation.js#L76

OpenLayers map wraps. Repeated map areas give invalid coordinates

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.

Getting a central point from an esri multipoint with javascript

I have created a webpage displaying markers on an ersi map using javasvipt.
Data:
MapNorth MapEast
439624 504743
439622 504736
439722 504775
439738 504739
439715 504774
439734 504739
The javascript code:
var points = data.map(function(x){
return [x.MapEast, x.MapNorth];
});
var myMultiPoint = {"geometry":{"points":points,"spatialReference":27700},"symbol":{"color":[255,255,255,64],
"size":6,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle",
"outline":{"color":[0,0,0,255],"width":6,"type":"esriSLS","style":"esriSLSSolid"}}};
var gra = new esri.Graphic(myMultiPoint);
myMap.graphics.add(gra);
var graExtent = esri.graphicsExtent(myMap.graphics.graphics);
myMap.setExtent(graExtent);
What the above code does is plot markers on the map and then zooms into the extent. What my employers want now is for me to find the central point of all of those points and display one marker in the center.
Can this be done? If so and you tell me how?
Thanks
Paul
Couple of things.
Did you know about gis.stackexchange.com? They might better solve your problem.
What you're trying to do is find the centre of a polygon assuming those points aren't all in a line.
Here's a link with an answer to the question I think you're asking https://gis.stackexchange.com/questions/7998/how-can-i-calculate-the-center-point-inside-a-polygon-in-arcgis-9-3
The solution posted there uses getExtent().getCenter() as seen here
var myPolygonCenterLatLon = myPolygon.getExtent().getCenter();
I think what you want to be doing here is instead of creating a Multipoint, create a Polygon from your array of points. Once you have a polygon defined, you can do something like
var myPolygon = new Polygon(points);
var centroid = myPolygon.getCentroid();
This should get you the centroid of the points making up the Polygon.
https://developers.arcgis.com/javascript/jsapi/polygon-amd.html
Note that this requires at least version 3.7 of the JS API, though.
One thing to point out to those trying to using .getCentriod() , make sure your polygon is closed. Your 1st point and Last Point need to be in the same spot. Otherwise it wont work right. ( I ran into this a year ago, not sure if they changed this)

syntax of javascript in creating circle

I'm new of javascript language and I'm trying to create a circle using setOptions method and writing this code, but unfortunately it didn't work.there is some mistake in my code?
circle_0.setOptions({
center: new google.maps.LatLng(mapCentre.lat(), mapCentre.lng()),
radius: 2000
});
The code looks ok. Maybe this contain wrong values? mapCentre.lat(), mapCentre.lng()

Categories