I am switching over from react-leaflet to mapbox-gl and have a question about a propriety tile service I am using for spatial data. The api has little documentation. They offer 4 different ways of requesting the tiles.
DRAW MAP TILE -
PNG map tiles with a transparent background are created according to image size in pixels, a lat lon bounding box in decimal degrees, selected layer(s) and default styling. See the individual feature for a full list of style names.
DRAW STATIC MAP TILE -
PNG map tiles with a transparent background are created according to image size in pixels, lat lon coordinates in decimal degrees, zoom level, selected layer(s) and default styling. See the individual feature for a full list of style names.
BING NON CACHE -
PNG map tiles with a transparent background are created according to the Bing Maps API Quadkey, selected layer(s) and default styling. See the individual feature for a full list of style names.
GOOGLE NON CACHE -
PNG map tiles with a transparent background are created according to the Google Maps API X, Y, and Zoom values, selected layer(s) and default styling. See the individual feature for a full list of style names.
For leaflet I used the google endpoint with the plugin "react-leaflet-google"
_coreLogic = () => {
const {authKey} = this.props
const baseUrl = 'http://sws.corelogic.com/api/v3.0.0/tile/gmap?'
const zoom = this._map.getZoom()
const type = 'layers=fass%3Aparcel&styles=parcelpolygonorange'
this.setState({coreLogicUrl: `${baseUrl}x={x}&y={y}&zoom=${zoom}&${type}&authKey=${authKey}`})
}
<LayersControl.Overlay checked name='CoreLogic Parcel'>
<LayerGroup>
<TileLayer url={coreLogicUrl} />
</LayerGroup>
</LayersControl.Overlay>
Works great. Switching over to mapbox-gl is a bit confusing. I am not sure if it is a raster, vector or image layer. I blindly tried different ways with no luck what so ever. The api has a demo of using the apis.
Here is what the
DRAW MAP TILE
looks like.
http://sws.corelogic.com/api/v3.0.0/map?width=500&height=500&layers=fass%3Aparcel&styles=parcelpolygonorange&bbox=-74.025879%2C40.705628%2C-74.014893%2C40.713956&authKey=0x7Y0z3K8dnC79y0HwAAtXNUNHHit
And the second option
DRAW STATIC MAP TILE
looks like
http://sws.corelogic.com/api/v3.0.0/map?width=600&height=600&layers=fass%3Aparcel&styles=parcelpolygonorange&lat=40.709792&lon=-74.020386&zoom=15&authKey=0x7Y0z3K8dn
You probably want a raster tile source. Mapbox only supports raster tiles given by x/y/z tile coordinates (not lat-longs or Bing quadkeys), so that rules out the first three options, leaving the Google NON CACHE PNG API endpoint only.
Your code will look something like:
map.addSource('tiles', {
type: 'raster',
tiles: ['BASEURL/x={x}&y={y}&zoom=${z}&TYPEANDAUTHKEYANDSTUFF']
});
The API you're using doesn't seem to be findable on the web, so I can't be more specific than that.
Related
In my design page, the user will be creating/drawing new shapes, in addition to adding image overlays. I'm finding that any shapes drawn using the drawing manager are rendering underneath any image overlays added to the map, see below:
I'd like to know how to achieve a couple of tasks:
1 - How to set the drawing manager so any shape (rectangle/point/circle etc be default is always added as an upper/top layer when the drawingcomplete event has fired, that way the shapes will always appear above any images added to the map.
2 - How to programatically change the order of the various layers created during design, given the user may want to adjust the z-index of the various layers to suit their own endering requirements.
The MS docs here is not really helping me understand how to achieve the above, but also doesnt mention anything about shapes/layers that currently reside within the drawing manager.
Partial answer but along the right tracks...
We can retrieve the shapes (drawing manager layers) from the drawing manager so we have a reference to them.
When i add an image overlay, before actually adding/rendering it to the map, i would first get the shape layers from the drawing manager, then remove them from the map.
Next we add the image overlay to the map and add the shape layers back in as well, its the order that we add/remove the layers that seems to be relevant here.
Once i had added all layers back to the map in the chosen order, i was still able to put the drawing manager into edit mode and select the shape for editing, so i beleive this will work as my solution going forwards.
// Create the image layer
var imageLayer = new atlas.layer.ImageLayer({
url: 'myImageUrl,
coordinates: coordinates
})
// Then get the existing shapes (layers) from the DM
var layers = drawingManager.getLayers();
console.log(layers);
// Remove the shapes.
map.layers.remove(layers.polygonLayer); // polygonLayer as an example...
// Add new image overlay, then the shapes
map.layers.add([imageLayer, layers.polygonLayer]);
Here I am trying to achieve centering a MapBox map in a given area:
The area can be defined ideally by a (sub) set of annotations
Alternatively it can just be an a rectangle for simplicity
From what I know from its documentation, MapBox only allows centering in a single centerCoordinate and setting zoomLevel. By setting zoomLevel there seems to be no guarantee that the rectangle will be contained inside the MapBox.
How to achieve a whole area being displayed at once and the map being centered around it?
<Mapbox
accessToken={'ACCESS_TOKEN'}
centerCoordinate={this.state.currentView.coordinates}
zoomLevel={this.state.currentView.zoomLevel}
/>
The Map#fitBounds method seems to do exactly what you're looking for. I'm not sure if / how to use it with the react wrapper, however.
I am trying to use the Bing Maps WPF control to render custom map tiles from an image of a fictional game world map, but I also need to plot X,Y values on the map from the original world image (sort of like an in-world GPS).
The image is 5720x5720 and I already have working (in a different application) a function that manually crops, scales and redraws sections of the image and plots the pixelX and pixelY coordinates in a PictureBox. I would like to get the same functionality working using the map control.
I used this Photoshop plugin to cut the tiles from the original custom image (works like maptiler for google mapes)
https://github.com/bramus/photoshop-google-maps-tile-cutter/
The problem is I know the X,Y values to plot from the original image, but I'm not not quite sure how to calculate Lat/Long for drawing a point in the custom tile system.
<m:Map Name="Map">
<m:Map.Mode>
<!-- set empty map mode, i.e. remove default map layer -->
<m:MercatorMode/>
</m:Map.Mode>
<local:MyTileLayer UriFormat="file:///C:/map_tiles/{z}_{x}_{y}.jpg"/>
</m:Map>
The map is displaying great and everything looks fine using the custom map tiles. I found this link that provides a class for converting PixelXY to LatLong in the TileSystem, but they are all for realistic world points.
https://msdn.microsoft.com/en-us/library/bb259689.aspx
My custom map tiles are actually for a fictional map for a game so I don't believe the projection and earth-curvature calculations are needed in my situation.
How might I go about plotting a point accurately in the Bing Maps WPF control if I only know the X,Y pixel coordinates from the original untiled image?
Given that your 5720x5720px map image covers the standard Bing Maps (or Google Maps or OpenStreetMap) coordinate range of longitude = -180..180 and latitude = -85.0511..85.0511, the following method would convert from image pixel coordinates to lat/lon according to the Mercator projection:
public static void PixelXYToLatLon(
double pixelX, double pixelY, out double latitude, out double longitude)
{
var imageSize = 5720d;
var maxLatitude = 85.05112878; // = Math.Atan(Math.Sinh(Math.PI)) / Math.PI * 180d;
var y = (0.5 - pixelY / imageSize) * (2d * maxLatitude);
latitude = Math.Atan(Math.Sinh(y * Math.PI / 180d)) / Math.PI * 180d;
longitude = (pixelX / imageSize - 0.5) * 360d;
}
The imageSize variable might of course also be a method parameter.
If you use MapTiler (http://www.maptiler.com) to create the tiles you have two ways how to achieve what you want:
A) Map your game map to the artificial world with Lat/Lon coordinates
In this case you will map the world coordinates to your pixel coordinates. The tiles must be prepared in a correct way, same as those for real world maps.
To create the tiles with MapTiler you should follow this steps:
Choose "Mercator tiles" in the first step
Drop in your image file
Choose "Web mercator (EPSG:3857)" in the dropdown in the "Coordinate system" dialog - it is a square image of the whole world and you don't want to deform it.
Choose "Bounding box (West South East North)" in the dialog "Geographical location" and copy&paste in the input the world coordinates: "-20037508.342789244 -20037508.342789244 20037508.342789244 20037508.342789244"
Render the tiles
With this approach you can load the tiles in your Bing Maps WPF control and position the markers or other data by using Lat/Lon coordinates.
The point [0,0] is going to be center of the image, and you can calculate the other lat/lon coordinates appropriately.
See this page and source code down on the page:
http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/
The globalmaptiles.py code embedded in the page is available in different languages including C# (.cs) if you need it. It has been ported by other people from our code.
B) Stay in raster coordinates
A different approach - where you create the map tiles in the original raster coordinates of the input file. There are no Lat/Lon involved, coordinate system is in pixels and you can draw markers and polygons in pixel coordinates as well. MapTiler gives you sample JavaScript viewer in Leaflet and in OpenLayers. Other viewers you have to patch yourself for using with pixel coordinates. To generate the tiles just choose "Raster tiles" - as in this tutorial: http://youtu.be/9iYKmRsGoxg?list=PLGHe6Moaz52PiQd1mO-S9QrCjqSn1v-ay
I expect the tiles made with your Photoshop plugin are going to be similar to the raster coordinates made with MapTiler.
Is it possible to set the opacity of the tiles in google maps v3?
I have see in done for overlays but I want to make the actual map tiles slightly transparent.
Why would you make the tiles transparent, if they'll always be base "layer" for the map? Are you trying to somehow add an overlay behind the map tiles?
You can adjust the map tiles using the style feature of the Google Maps API:
http://goo.gl/3q4ex
I have custom map image with specific height and width.
i need to map x-y coordinates of image to latitude longitude from four corner latitude longitude available.
this requirement is for fulfill current location of user into custom image map.
more on this on image i have specific few points on image, based on current position of user, i need to find near by point on image in Windows Phone Application.
Thanks in advance.
If you are using the Bing Maps Silverlight Control for WP7, there are APIs for want you want to achieve.
The Map class for example provides methods LocationToViewportPoint and ViewportPointToLocation for converting coordinates.
There is also the class MercatorUtility which provides helpful methods like LocationToLogicalPoint and LogicalPointToLocation.
However, depending on what you mean with custom map image, nobody except you would possibly know how it maps to view coordinates.