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.
Related
I want to control which types of roads show from this OSM highways list at various zoom levels.
I could not find the answer in the Leaflet docs. If you do, please link me.
edit:
Maybe i need to go one step back in the making stack and use one of these frameworks? http://wiki.openstreetmap.org/wiki/Frameworks#Generating_map_images
It is not possible to alter displayed map style in Leaflet.
Probably the fastest way to achieve your goal is:
Create your map style in Mabox Studio, where you will specify the road types to be displayed at various zoom levels. Mapbox will render the map tiles for you and expose them via URL.
then display the tiles created in Mapbox Studio in Leaflet (or Mapbox.js which is build above leaflet) simply by altering the map tiles URL you use when you initialize leaflet.
I have made a map with a lot of clickable markers (with popups) in WebGLEarth (http://www.webglearth.org/api) and I would like to have three satellite tracks around my globe. It is important that you clearly see that it is a satellite hovering somewhere (where doesn't really matter and it doesn't have to move). So, something like https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML.html&label=Showcases
However, WebGLEarth does not include a tool to do this. Adding a polygon won't work (guess it's a bug) and lines are not included yet. Also changing the marker into another icon does not work as there is only one standard marker (as far as I know). There is a request to make webglearth a proper leafletjs plugin, but of course, I would like to make my map now.
Someone has an idea on how to do this? Maybe a hint on how to combine WebGLEarth with Cesiumjs or Leafletjs ? Thanks in advance!
Disclaimer: I'm a core Cesium developer.
WebGLEarth is simply a light wrapper around Cesium to mimic a subset of the Leaflet API. It's maintained by an independent third-party and not officially supported by anyone from the Cesium or Leaflet teams. My recommendation would be to drop WebGLEarth and switch to using Cesium directly (or Leaflet, but I assume you want 3D). Anything you are currently doing with WebGLEarth should be easy to port to the native Cesium API.
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)
Using the google maps v3 javascript API, it's possible to add 'GroundOverlays' as a picture. Have a look here:
http://jsfiddle.net/9YYJB/1/
However, I'm working on a project where I'm trying to add a texture to the whole world map. Obviously I can add a single, absolutely massive gif/png overlay but I'd rather add a tiling texture. I've been digging around in the API and can't find any way to do this.
Anyone have any ideas on how this could be done?
Thanks very much
Yes, what you want to use is an image map type. This allows you to add tiles on top of the regular Google Base Map. If you want to completely replace the Google tiles, you would need to implement a Custom Map Type. My favorite example of that is the Liberty City Map.
I have an extremely large picture of a map. Now I want to create a Map UI where the user can click to highlight regions and also have the functionality to zoom into the map.
Is the AREA tag the only way to go at this problem? My only problem is when I zoom in the map, the will be enlarged and so will the image that it contains, but how would I expand the AREA coordinates according to my zoom level? Is there a good approach for going at this problem?
AREA is the only way to represent polygons, unfortunately. You can read your coordinates from the AREA tag, scale them, and write them back. Rounding overlaps are a pain to deal with though.
One alternative is to use the BING maps API, which allows custom overlays. You need to create an overlay for each zoom level though.
Apply css to AREA MAP
I suggest SVG there, which would also solve your zoom problem. The only complication is that IE8 and below won't support it, and IE9 isn't being pushed through Windows Update to non-beta users yet.
Simple option: ImageMapster figures out most image area map things for you on the fly. IE6+, needs jQuery.
More complex, more powerful option: Raphael.js enables you to create fully controllable fully scalable SVG vector graphics in everything from IE6+ (doesn't need Flash). Bit of a steep learning curve, but it's very powerful.