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
Related
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.
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.
By default map viewer responds to map click with dragging map around viewer. I'd like to create functionality wher user can click, draw rectangle and map zooms into this rectangle.
Is this supported by map or is there any way to achieve such behavior?
Adding Shapes to bing map
and after adding the shape you can change the zoom level of the map
I'm building an application with an interactive map (using the ArcGIS API for WPF) that runs on the Microsoft Surface 2.0 (now known as PixelSense). In my application I have a librarycontainer containing elements that a user can drag out and place on a certain location on the map. I achieve this by placing a scatterview (that envelopes the entire map) in an elementlayer on the map, like this:
<esri:ElementLayer>
<esri:ElementLayer.Children>
<local:DragDropScatterView esri:ElementLayer.Envelope="-19949487.9573175,-20100080.1372686,20125528.7282505,20131479.5822274" x:Name="ScatterLayer" Background="Transparent" Height="Auto" Width="Auto" ItemContainerStyle="{StaticResource ScatterItemStyle}" />
</esri:ElementLayer.Children>
</esri:ElementLayer>
The problems occur when a user zooms in or out on the map, causing the elements that have been placed in the scatterview to change their position completely.
To fix this issue I tried placing the scatterview inside a viewbox. When I do this, the elements maintains the right positions in the map, but now a new problem occurs: The elements scale up and down when I zoom in and out of the map (e.g. when the map is shown in full extent, the elements are almost invisible), while the preferred behavior is that the elements maintain their size when a user zooms in or out on the map (e.g. like the markers in Google Maps).
Does anyone have a suggestion as to how I can solve this problem?
Cheers
Instead of putting the ScatterView in a Viewbox, you should do the following:
After a ScatterViewItem is placed on the map, transform its Center point (which is in viewport coordinates) to a location in world coordinates (latitude and longitude). The ArcGIS API should provide such a transformation.
When the map is zoomed or otherwise transformed, transform each world location back to viewport coordinates and set each ScatterViewItem's Center property accordingly.
In order to store the world coordinates for each ScatterViewItem, you could create an attached property.
I'm looking for component, that would allow me to show and manipulate single image in a same way as native image browsing in Pictures hub.
I want:
Pinch to zoom image (with top and bottom limits)
Drag to move image around, but I don't want it to get out of bounds of screen. Spongy behavior is optional.
Double tap to toggle between original size and fit-to-screen size.
Does such component exist? Preferably free. If it doesn't, then I need to implement everything myself.