Google Maps utility library comes with a full map canvas overlay[1] which is pretty useful to create canvas based visualizations or custom layers (instead of the tiled based ones)
The problem is that CanvasLayer is based on an OverlayView and it has to be on top of all the map layers. My questions are:
Is there a way to place an overlay in between two layers (i.e tiled layers) ?
Is there a better way to implement a full map canvas layer which can be managed in the same way other layers are? (using overlayMapTypes).
For sure there are nasty hacks that can be done changing the DOM to sort layers and overlays but I'd prefer to do in a way it won't break when the internal implementation was changed.
[1] https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/canvaslayer/src/CanvasLayer.js
I'm not sure what you mean by "map-layers" , but when you mean the mapPanes :
A CanvasLayer is not placed on top of all mapPanes, by default it's placed in the overlayLayer-pane(which is the 2nd lowest pane of the 7 mapPanes).
But it must not be placed there, you may place it where you want to by using the paneName-option of the canvasLayerOptions(set it to any valid mapPanes-name)
Related
I'm quite new to using Phaser and the Tiled map editor and I'm currently making a platformer game using a Tiled map I made. I haven't been able to find any information in the Tiled or Phaser documentation, or in tutorials or forums on how to select a layer in my Tiled map to be a collision layer. In some tutorials I've seen people set a Tiled layer property to collision:true but I think they were using a different Tiled version and I can't see any information on this in the Tiled documentation.
I have 3 layers plus one layer for objects. I've put all the collision tiles in one layer that includes things like the ground and platforms. I've read answers saying that you need to include the index of the collision tiles but I don't want to include individual tiles as there a lot of tiles used. I've included a screenshot of my Tiled map JSON file, the layer I want to make a collision layer is called "Tile Layer 2". I'm not sure if I need to mention this layer name in my Phaser code to make it a collision layer or if I need to set the layer to collision: true in Tiled. I'd really appreciate any suggestions on how to make this a collision layer either using Tiled or Phaser. Thanks.
Tiled map JSON file
I commented but thought id give a bit more of a complete answer. I use P2 physics, if your using Arcade this may not apply must most of the examples on Phaser's site assume the use of Arcade.
So once you've created your tilemap in Tiled you load in your JSON and the tileset image in the preload method:
game.load.tilemap('levelOneData', 'assets/levels/levelOne.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('levelOneImage', 'assets/pics/levelOne.png');
Then in your create method load your tileset image and set up your collisions with the layers.
levelMap = game.add.tilemap('levelOneData');
slowLayerBodies = game.physics.p2.convertCollisionObjects(levelMap, "collide", true);
//add background image and set world size
background = game.add.tileSprite(0, 0, 4040, 2880, 'levelOneImage');
I'm not an expert with Phaser, still learning it myself however this works. There most likely (as with most JavaScript built things) different way of doing it.
Another possibility is to use this Phaser plugin: https://www.npmjs.com/package/phaser-tilemap-plus
You can set up an object layer with polygonal and recyangular shapes and use that as a collision layer. The polygons can be any shape, allowing you to use sloped and curved tiles. You can also have one way shapes for jump through platforms or one way doors. It is also possible to set a rebound value for bouncy surfaces or springs a la Sonic.
Aside from advanced tile collision, you also get tile animations that you define in the Tiled map editor, collision and region event handling and access to meta data in the form of custom properties.
I'm writing a web-site to show different isochrone over city-map:
http://130.192.68.210:8080/citychrone/citychrone.html
I have several MultiPolygon GeoJSON layer in my Leafletjs library based project. I would like that when a layer overlap another only one of this can be visible in the overlapping region. Each of this layer has an opacity less than 1, so is not enough to set the ordering of the layer on the map. I'm wondering if it is possible to give a priority to layer, so when they overlap just one of them is visible.
Another possibility is to make one layer an "hole" of another layer, it is possible?
Turfjs is great for doing geometric operations like this in Javascript.
In your case, you can create holes in a polygon by "erasing" parts of it, using turf-erase: http://turfjs.org/static/docs/module-turf_erase.html. The example on that page shows something similar to what you want to do.
In my Meteor/Cordova/famo.us App I need a map that can be rotated with two fingers, zoomed in and out and (ideally) the names (street, city etc.) should stay horizontally aligned.
The reason is that I haven't found a (free) map like leaflet.js, Google Maps etc. that can rotate in JS. Google Maps SDK for Android and iOS respectively can do this, but the corresponding plugin (plugin.google.maps) led to trouble with famo.us.
The rotation could be done with a famo.us Surface, and I've been told that in leaflet one could pull separately the map tiles and the names (vector/jpeg?).
I apprechiate your help.
Map rotation isn't possible in Leaflet. Read this answer: https://stackoverflow.com/a/22938733/2019281. However, it is possible in openlayers but it would also rotate the labels since they are embedded in the maptiles. See this example: http://openlayers.org/en/master/examples/rotation.html. You could use a tilelayer without labels and add create your own separate layer with vectorlabels and counterrotate those. This would be a very complex solution and i guess will put an enormous strain on your performance since you're talking about a mobile solution. I would rethink the concept.
I am using google map v3 javascript api, and I try to create the custom map type according to the guide at google.develper.
However I found that the map type only provide one layer while my custom map type should provide two layers just like the google.maps.MapTypeId.HYBRID which contains two layers - the SATELLITE and the Placenames.
So I wonder if this is possible?
BWT,I have ask question about maptype and layers here.
It seems that the map type are made up by layers, is this true?
In fact, my first question is solved by Michael Geary.
However, I meet new problems now, since it is still related to the custom maptype, so I update this post instead of create a new question.
Q2:
How about the maptypecontrol if I have more than one layers?
As you can see, the google.maps.mapTypeId.HYBRID have two layers —— the satellite and the labels.
So in the maptype control you will find this:
Note the Labels checkbox.
Now I have two layers for my custom maptypes-- base and the labels, how to make the labels layer can be toggled?
A custom map type defines a DOM element for each tile, as described here. That DOM element isn't limited to just a single image. You can have a <div> with any number of images and other elements nested inside it.
The hybrid map type is implemented with this approach. Here is a screenshot of the Chrome DOM inspector showing a single map tile in the hybrid satellite view:
As you can see, the <div> has two <img> children. The first one, served from khms0.googleapis.com, is the base satellite tile image. The second one, served from mts0.googleapis.com, is the labels and borders overlay tile with a transparent background. This is all just a single map type as far as the Maps API is concerned: the API only knows about the container <div>, not the images inside it.
The base map example in the Base Map Types section of the documentation illustrates the use of <div> elements as map tiles. You could use that as a starting point and add your <img> tiles inside the <div>.
I am trying to overlay an ArcGISCache layer on top of another ArcGISCache base layer. I'm unable to get the overlay to show and I am not sure what is wrong. I modified this example to get my started: http://dev.openlayers.org/releases/OpenLayers-2.11/examples/arcgiscache_jsonp.html
I'm prototyping in http://jsfiddle.net/Sq9hE/15/
When I change the map constructor to instantiate with yorkLayer's resolutions, I can see the tiles from the York map but not the base layer. How can I create this map object so both the base layer and the overlay are shown?
I haven't used the javascript api before, but I encountered what sounds like a similar issue working with the ArcGIS api for Android. If you are using two cached tile layers it may be that they were not cached using transparency. It could be that they are both active but you only see the top layer's tiles.