Develop Reference

Can I use raster jpg, png images for Mapbox

What I'm trying to achieve is to map icons, labels, polygons to raster images.
And to have an ability to zoom.
I.e. to map furniture to offices / buildings.
Also it's needed to be said that user should work with it through API (through web site interface).
Recently I've spot Mapbox.
While Mapbox is awesome and seems to be a good fit to achieve my goal, I find it hard to find docs for implementing it.
What I've found so far is:
I can use mapbox-gl-draw to draw polygons
I can upload datasets. Which consist of position, data. With that I can upload icons, labels and probably polygons.
The missing puzzle is: How I can work with raster images?
and
Should I position (edit) icons, labels on my own and later save to dataset? Or there already exist a functionality drag-drop out-of-box?
One idea is to use Mapbox with transparent background and to zoom raster image separately. Kind of synchronizing it with the map.
Any help would be appreciated

I believe this example from the mapboxGL examples shows what you're looking for: https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/.
Note that the radar layer, while it looks like a layer constructed in data, is simply a gif added as an image layer, with a bounding box of of four lngLat coordinates. https://www.mapbox.com/mapbox-gl-js/assets/radar.gif

move a whole featuregroup around (with all rectangles drawn) on the page map in leaflet

I am using leaflet.draw to draw rectangles on an image/map, as seen in the link below:
http://leafletjs.com/2013/02/20/guest-post-draw.html
I am able to use the edit button to move individual ones around. I am wanting to select all the rectangles on the page and move them all together at the same time.
I have looked at other plugins written to move polygons, but none move all of the shapes together at the same time.
Any suggestions?

drawing square icons with Google Image Charts

I'm using Google Image Charts (yes, I know it's deprecated :-)) to draw circular icons on a Google Map, i.e.:
http://chart.apis.google.com/chart?cht=it&chs=48x48&chco=33FF33,000000ff,ffffff01&chl=a&chx=000000,0&chf=bg,s,00000000&ext=.png
Is there a way to draw square icons instead? Unfortunately all references to "cht=it" chart type seems to be disappeared from the Net.
Is there an alternative to Google Image Charts for drawing dynamic icons on a Google Map? I need to control dimensions, color, shape and label.

Is there an alternative to Google Image Charts for drawing dynamic
icons on a Google Map? I need to control dimensions, color, shape and
label.
Yes there is. What you're looking for is Drawing on the Map. Here you can use your custom icons, whatever shape they maybe.
Some actual examples for the things you've mentioned:
-Labels example
-Square shapes
-Custom shapes
-Draw on the Map

Phaser - how to select a Tiled map layer and set it as collision layer

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.

JS library for image dragging, scrolling and zooming + markers on pictures like google maps

I'm looking for a google maps like js library just for a image. The features i need are simple: Drag, Scroll, Zoom and most important are markers (eventually vectors). But instead of a map I want to have one picture in the background.
Description of what the library should do: Think as it would be a map-similar situation. In this web app I want to have a image (e.g. a treasure map, map of a building) like the tiles in google maps. The image should be moveable and zoomable. Overlayed over the pictures should be markers. Markers can be as simple as letters (a,b,c), symbols, pointers, div elements... The markers are fixed to the image, positioned relative to its size (zoom) and position like on google maps. drag n drop support is needed for user interaction. While editing the resource a user may drop a new marker onto the map or move/delete an existing one. If the user is not in the editing mode the markers may funktion as tooltips or links. Also if clicking an link outside the "image", the image should scroll to the right position, to show the searched result on the "image"-map. The App should also work on mobile devices.
Has anyone already seen such a tool or is interessted in helping to develop it?
Regards Manuel

How about openlayers?
It has a similar interface to google maps but allows you to customize the tiles/map and markers and doesn't rely on google's servers.

You can use custom layers with Google Maps - so you could replace the entire map with your own tiles (image). Simple example is here: http://code.google.com/apis/maps/documentation/javascript/examples/groundoverlay-simple.html or something more complicated http://mapwow.com/