Respected sir/ma'am I want to implement offline osm map in my project. but i don't found any proper documentation for how to download tiles for offline usage. i am currently using react-native-maps package for implementing custom Tile Overlay
import { LocalTile } from 'react-native-maps';
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
>
<LocalTile
/**
* The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime
* For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png
*/
pathTemplate={this.state.pathTemplate}
/**
* The size of provided local tiles (usually 256 or 512).
*/
tileSize={256}
/>
</MapView>
There is no straightforward approach for downloading offline raster tiles for OSM. Rendering these tiles is very resource intensive and depending on the zoom level the download and storage size of raster tiles will become huge. In other words: raster tiles should be avoided for offline use. You should consider using vector tiles instead.
Possible solutions:
Render your own raster tiles, for example by using Maperitive
Switch to a library supporting vector tiles and download them, for example from OpenMapTiles.com
Related
I am trying to do something I feel is very simple, yet seems that I am clearly misunderstanding a crucial piece of the mapbox addlayer feature.
The Goal
Create dynamically identified icons, based on a features data value (e.g. geojson feature data vale title: "walmart"). Essentially just adding dynamic store icons from the sprite image when those locations are queried via tilequery. picture representation here
The problem
I keep getting an error when trying to use the sprite values from the style. Error: util.js:349 Image "airport-11" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
I see tons of resources talking about sprites, but none discuss how to exactly implement them in this fashion. I have even tried querying the sprite and then adding the values using dot notation to access sprite values. This gives an error of "undefined" and invalid value.
Example code:
map.addLayer({
id: "tilequery-points",
type: "symbol",
source: "tilequery", // Set the layer source
layout: {
"icon-image": [
"match",
["get", "title"],
["HEB"],
"H-E-B_logo",
["Pilot Flying j"],
sprite.Pilot_Travel_Centers_logo,
// "Pilot_Travel_Centers_logo",
["Dollar General"],
"Dollar_General_logo",
["Cumberland Farms Corp"],
"Cumberland_Farms_logo (1)",
["CEFCO"],
"CEFCO-convenience-stores-Logo_510px",
["BJs Wholesale Inc"],
The Question
How do I access the sprite values and not get an error?!!!
Thanks for the help! I Wouldn't ask if I didn't need it!
UPDATE
I have figured out that to use sprite images inside of any layer, the images will automatically be available if you have them in your Mapbox studio sprite image collection. The confusion was that previously, I was not able to use them from link. However, it should work automatically.
Hope it helps!
It's true the documentation about sprites is not super clear. I'll try to summarise (simplifying a bit).
A Mapbox GL style has one sprite. That's a PNG containing all the icons, plus a JSON file specifying what each icon is called (its icon ID), and where it located within the PNG. The sprite is specified by giving a URL as the sprite property: https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/
You can also add images to the sprite dynamically after the map loads, with map.loadImage and map.addImage, specifying the icon ID.
To display an icon, you use that same ID in a symbol layer: "icon-image": "myicon".
You can run into trouble when you try to combine your own icons with those in a Mapbox basemap (which are Maki icons with names like `airport-11').
To combine them, you can do one of these three things:
upload your icons to a style in Mapbox Studio
load your icons dynamically
generate a new sprite sheet offline, using something like mbsprite
I don't know what you meant about "dot notation", but no, that's not the right path.
running on macbook iOs X(yosemite) and chrome browser,
i try to view an archilogic model:
Model Used
in https://appcreator.3d.io/
but the result doesn't seem to display the same lightmaps mapping on interiors:
https://app.3d.io/lLOkYR
This might be due to the fact that the lighting system in spaces editor is a different one than the lighting system in aframe. I recommend you to adjust the lighting in your aframe scene using the following parameters (search for these values inside your html code in the app creator):
lightMapIntensity: 1.887; lightMapExposure: 0.55
also you can adjust overall lighting intensity by modifying:
<a-scene io3d-lighting="intensity:0.9">
According to the documentation (https://developer.garmin.com/connect-iq/programmers-guide/resource-compiler/) the resource compiler supports GIF as Bitmap. However, when I display a GIF file, I just get a still picture, and the GIF doesn't move.
The GIF I have been testing with is this: http://bestanimations.com/Animals/Mammals/Cats/cats/cute-kitty-animated-gif-2.gif
and I have saved the gif in the drawables folder (I use the ConnectIQ-plugin for Eclipse).
I have tried to include the Bitmap in the layouts resources as:
<layout id="MainLayout">
<bitmap id="MotivatorCat" x="center" y="center" filename="../drawables/motivatorcat.gif"/>
</layout>
and I have tried to include it in the drawables resources as:
<drawables>
<bitmap id="MotivatorCat" filename="motivatorcat.gif" />
</drawables>
and then loading it in initialize() by:
catgif = Ui.loadResource(Rez.Drawables.MotivatorCat);
and drawing it in onUpdate():
dc.drawBitmap(50, 50, catgif);
But nothing works.
What am I doing wrong?
The Connect IQ does not currently (as of SDK 2.1.x) support rendering of animated GIF images.
Here is my adventure. On this page I would like to display our bicycle route.
I am using in drupal 7:
Openlayers 7.x-2.0-beta3
OpenLayers KML Layer 7.x-1.0-beta1 (I'm not sure if I need this module as well)
layer: openlayers_kml_example with the source a url to a file.
map : example_kml Example KML Map
The result is that the layer is displayed very very small on the big map. So if you zoom in to the airplane eventually you can see the track.
Map Projection set to 3857
Display Map Projection set to 4326 (the KML is made with Google earth. I think not important as there is no interaction only displaying.
LAYER SPECIFIC OPTIONS FOR KM extract styles and attributes ON.
If I put tracks on then I will miss the nice airplane icon.
I keep getting the same logs and of course no display on the page:
MESSAGE The layer cannot be reprojected to the map projection: EPSG:
MESSAGE Notice: Undefined variable: map in openlayers_layer_sanity_check() (line 399
MESSAGE Notice: Undefined property: stdClass::$name in openlayers_layer_sanity_check()
As it is not nice for people to think that I'm cycling constantly in water I would like to solve it :-)
Any suggestions?
John is correct in describing the issues but here is the solution :-)
Update drupal module openlayers to the latest version, currently 7.x-2.0-beta9.
Take care of the needed dependencies.
I reset all my layers and maps to the orginial and then adjusted the source of the kml layer to a file.
My game is designed with cocos2d-x, the picture resource size is 320x480, which is adapted to iphone4, now I want my game adapt to iphone5, what should I do?, thanks!
It actually depends on your current cocos2d-x version and the resolutions you're planning to support. But basically if you're running the latest stable release (2.0.4) and you only want to support iPhone4 and iphone5 resolutions then you have to:
create the art for both resolutions (this is not mandatory but the graphics might be scaled too much and lose quality).
define at runtime the DesignResolutionSize and ContentScaleFactor based on the actual device's resolution
select the correct resource path
Here a simple example on how it can be implemented:
// Get the real screen size
CCDirector* pDirector = CCDirector::sharedDirector();
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
pDirector->setOpenGLView(pEGLView);
// Set the design resolution. Please see the doc for the different modes
pEGLView->setDesignResolutionSize(480, 320, kResolutionNoBorder);
// Here you have to chose between width or height depending your game's design
if (frameSize.width > 480) {
// iphone5
pDirector->setContentScaleFactor(1136/480);
CCFileUtils::sharedFileUtils()->setResourceDirectory("hd");
} else {
// iphone4
pDirector->setContentScaleFactor(1);
CCFileUtils::sharedFileUtils()->setResourceDirectory("sd");
}
/// Now load the sprites....
If you're want to support more iOS/android resolutions please refer to the following links for fullscreen multi-resolution solutions offered by cocos2d-x:
http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support
http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Mechanism_of_loading_resources
Hope it helped.
Cocos2D-x 2.0.4+ have very easy solution for multi-resolution problem. ( either iDevices or Android devices.)
In fact you just need to set your DesignResolution and then just imagine your target device will has this resolution.
If target device really has this resolution ( or some other but with same ratio) cocos2d will handle to fix screen and your game looks same in all devices.
And when ratio of target device is different, you have many option ( as cocos2d language, policy) to manage that.
For example if you use Exact fit policy, cocos2d will force your game ( and design) to fit target device screen (without that black boarder).
Exact fit
The entire application is visible in the specified area without trying
to preserve the original aspect ratio. Distortion can occur, and the
application may appear stretched or compressed.
For more detail just take a look at this link : http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support