I am creating a project in CreateJS (specifically, EaselJS) where I have a draggable map. There are several wrinkles to this that I'm trying to figure out my way around.
Basically, when the user drags the map to certain points, the map is supposed to automatically zoom in or out (i.e. the scaleX and scaleY of the map container change), in order to focus on areas of interest.
This would be fairly simple and I in fact already have a prototype that does this— there's just one problem.
The map has a layer of map markers (pins on the map) floating above it. When the map zooms in, these map markers need to stay stuck to their underlying places on the map.
Making markers children of the map's Container is the logical step, but there's a further problem with that: The markers are in the correct places, but when the map zooms in, the markers get larger. When it zooms out, the markers get smaller.
Is there an efficient way I can prevent these markers' containers from being scaled themselves, only moved in step with the parent Container's scaling?
Instead of putting everything in the same Container, use multiple Containers, and use localToGlobal to position labels. It will be more work, but its really the only way.
You could counter-scale the labels, but Container's main purpose is to translate and transform a group of display objects together.
Related
I have some geoJSON polygons that I render via layers on top of my map. Depending on the shape itself and the zoom level, sometimes the rendered shapes are too small and it doesn't make sense to even show them.
Is there a way to hide shapes that have rendered area less than some number?
So, as Babis.amas suggested, first I calculate the area of the feature with help of turf.area. It gives the value in square meters. Then I convert this value to pixels using the function mentioned here. And then it really depends on the shape type I'm dealing with. If the shape considered to be too small to be rendered, I just don't add it to the layer data feature collection.
I have a Leaflet.js map consisting of Marker and GeoJSON objects. Is there a simple way to wrap these so they appear periodically every 360 degrees? Basically, I want the entire map to become periodic.
Here is an illustration of the sort of objects I have (excluding the background TileLayer, which I don't have):
How can I periodically repeat this data so the great circles aren't broken, but appear intact every 360 degrees as the map is scrolled left or right?
One approach is to leverage Leaflet.VectorGrid. As you can see in the Leaflet.VectorGrid GeoJSON example, the data will wrap. (Architecturally, this happens because VectorGrid loads a vector tile with the same coordinates when wrapping around). Be advised that some artifacts might appear.
Another approach is to simply duplicate your data (adding 360 to each longitude). Do it a couple of times per side, and use the WorldCopyJump option to prevent users from scrolling too far.
I'm trying to create a circular masked overlay using Leaflet 0.8 that is positioned over the users currently location, extending a radius of 1000 meters. Essentially making the map visible around the user (as a circle), and grayed out beyond 1000 meters
Mockup:
As the user zooms in/out on the map, the circle should resize accordingly.
I tried using leaflet-maskcanvas, a plugin for Leaflet that looks like it would do exactly what I need, unfortunately with all refactoring done in Leaflet 0.8-dev, this plugin isn't compatible.
Has anyone been able to achieve this effect successfully with Leaflet 0.8?
I'm thinking of one hacky way of doing this is using Turf.js to take the map's current center point(map.getCenter()), buffer it 1000 meters with Turf, take that result, and then grab the map viewport's current bounds(map.getBounds()), and use turf erase on it. Then draw the resulting polygon on the map(which is the difference), and then update this on any move events.
http://turfjs.org/static/docs/module-turf_buffer.html
http://turfjs.org/static/docs/module-turf_intersect.html
http://turfjs.org/static/docs/module-turf_erase.html
I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.
I am creating a google map with some specific requirements.
The map is lets say 800x600 pixels wide.
I need all the markers to show in an area of 400x600px on the left hand side of the map.
The other half is covered with navigation panels (but the map must be visible in the margins behind the panels).
I've been able to set the zoom level according to all the markers using LatLngBounds and fitBounds, but that still fills the entire area.
How do I create a sub bounding area inside the viewport to contain all the markers and adjust zoom accordingly. I show only markers for a specific city.
This is what I need to achieve visually:
+------------------------------------------------+
|..+-----+..+-------+.....+---------------------+|
|..|.nav.|....|..nav..|......|...marker area......||
|..+-----+...+------+.....+---------------------+|
+------------------------------------------------+
The outer block represents the google map, and the spaces between the sub blocks show the map panes. So I need a sub-viewport inside the main viewport somehow.
Any ideas?
(suggestions to enhance the question are welcome as well, use comments for that pls.)
Interesting problem.
My suggestion:
Start with your bounds
Using the Projection, find out what coordinates would extend the bounds to the left by 400px.
Call fitBounds with these new coordinates.