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
Related
I have a map created in My Maps, and I wand to embed it in a website, however I'd like to have InfoWindows on marker click instead of the default side panel, and change the description a bit.
From what I found, the only way to do so is to use a regular Google Maps API and add my data onto it with a KML layer. This is working, however, the icons (the pins) are highly pixelated and look terrible. When using the same map via embed (or simply opening it) they are OK.
Would really appreciate any help with the issue. Probably there is another way of adding a custom map to an API-powered map?
The answer I've come up with is: no way to achieve what I'm looking for.
When exporting KML layers, Google scales all icons to 32X32 px, and then scales them up (kml file contains scale 1.1 directive). Even if you change the scale, the files remain 32X32, so it does not help; you need to create another files, in other words: the kml exported from Google is not usable if you have custom png icons.
I ended up using regular markers instead of KML layer.
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
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.
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 have data corresponding to user events with (location, time). I would like to visualize these on an animated map. Maybe with points of light appearing when an event happens (with multiple events in the same place making a brighter dot). Double points for animating the day/night regions on the map at the same time. Is there a javascript library good for visualizing such data?
The map on the right side of this visualization written in processing doesn't quite fit my description, but would also work well.
I found that d3.js worked really well for the project. The geo module made it easy to draw a world map (with data from data/world-countries.json and a mercator projection) in an svg element. First, I pre-processed the data to put the users in "buckets" of gps locations. I added a circle for every location, and changed its radius for how many users were in that bucket.