I have a main map landing page of the U.S. which shows my map and all the pins on it, then there are individual pages for each state with specific content related to them, that also show the map. I am wondering if it is possible to have the map zoom into the states location when that url is clicked. e.g. When you click to go to the Colorado page, the map zooms and centers on Colorado, instead of going to the default view on the main map landing page.
It would work like the geocoder, if you type Colorado, it zoom and centers on the state.
The initially position map with geocode example is probably close to what you're looking for.
Related
Fairly new to Mapbox and getting there (slowly).
I have a map initially loaded at zoom level 1 for use in a web browser. When a user clicks on a marker, it'll center and zoom to level 10.
When that marker loses focus, I'd like to zoom back out to level 1.
This page discussing web applications does it (link below), but there doesn't seem to be (that I can find - sorry!) any documentation on how to achieve this.
https://docs.mapbox.com/help/getting-started/web-apps/
Any and all help appreciated!
For the first event, to zoom in when clicking a marker, you could adapt this example to zoom in addition to panning when calling flyTo
https://docs.mapbox.com/mapbox-gl-js/example/center-on-feature/
For the second part, you'd need to add a listener for another event depending on what you have in mind by "losing focus".
https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events
I have this basic application where with a help of a REST API backend I fetch some custom locations(with lat long values).
I call this GET api, with a given boundary of NE and SW latlong values. So after the network call executes it gives me a list of custom markers where then I draw the google map on the screen and draw(overlay) these markers on top of the map.
The full set of markers will be fetched as explained above in init() method when Home Screen loads. so when user sees the map the custom markers are already there and visible.
This approach takes time when there are few hundred of markers coming from that GET api call.
Instead I want to modify the app so. when user sees the map view, it should inly load markers in that visible screen area(of the map) only. and when user moves from that area to another then the markers which should be in that new area comes to visible. and so on and so forth.
I am not sure of how to execute such a thing with flutter.
Can I get some guidance help on this?
UPD: Done. Look at this beautiful polygon.
UPD: In Flutter / openstreetmap, I want to let users draw a polygon by tapping a map and/or clicking a button. The polygon should be not filled. I need a very simple example just to get an idea of how it works.
The final task is:
I am making a flutter application that should give the user the ability to get information about markers located within a certain area on the map. I use osm. By pressing the button, the user initiates the construction of an arbitrary polygon, each corner of which is formed at the place of the next pressing of the button. When the construction of the polygon is completed, the objects inside the polygon are shown, the rest are hidden or not built. After that, the cycle ends by clearing the map.
I haven't found any solution for osm. I would appreciate any help. I don't have any code yet)
You can use the flutter_map library, I'm sure you can understand the documentation and how to set it up.
Then use PolygonLayerOptions(polygons: [Polygon(points: polygonList)]) as a layer on top of the OSM layer. Then set up the list polygonList and use the FlutterMap()'s onTap callback to get the position at which the user tapped and add the LatLng to the polygonList list. There are multiple other configuration options within the Polygon() constructor, and those can be found through IntelliSense or similar. To have no fill, just set the color to transparent.
I use this method (or a very similar one) for my app which lets users download areas of map. The user taps the top left and bottom right of a rectangular area they want to download, by code calculates the top right and bottom left, and a polygon is drawn to show the user exactly where they tapped. Make sure to use setState() or similar.
I am developing a weather radar viewer using Mapbox. In a certain mode, there are 2 Mapbox maps on the screen at the same time showing different modes of the radar. The maps are locked to each other. When one map moves, rotates, or pans - the other one does as well. I did this by simply passing the properties of one map to the other. In the below screenshot, you will see how they are showing identical locations.
What I want to do is - when the user is hovering the mouse over "map1", I would like an identical (ghost or false) cursor on "map2". Here is what I am looking to do:
(edit: What you are looking at is an actual screenshot. Each map is enclosed in a DIV with 50% width of the screen, if this helps to explain)
I don't know if this is even possible in Mapbox. Hopefully someone can give some guidance as I can't find any other questions related to this and I really have no code to show without knowing where to start.
If you attempt to do this inside Mapbox-GL-JS (for instance, by constantly updating the location of a GeoJSON feature layer), I think the performance will be pretty poor.
But since the two views are exactly locked (and presumably the exact same dimensions), you can just do this at an HTML/CSS level. Detect mouse movement on the first map, and update the location of an absolutely-positioned element hovering over the second map to match.
Another approach would be using a canvas element overlaid over the second map, similarly updated.
I was trying Leaflet, the display looks like Google Maps, but I find a lot of ways cannot meet my requirements. Is there any way in the web, the phone shows the following?
Bad display:
The first time it is entered, it can be dragged to the outside of the screen.
Good display:
The first time it enters it is highly full-screen and cannot be dragged.
Have a look at the Leaflet documentation for initialising the map. You can pass several options that will do what you want:
var world = new L.LatLngBounds([[90,-180],[-90,180]]);
var map = L.map('map', {
minZoom:2,
maxBounds: world,
maxBoundsViscosity: 1,
}).setView([0,0], 0);
Setting minZoom stops users being able to zoom out so far that the top and bottom of the map are both visible (and overrides the zoom value passed to setView()). You may need to calculate an appropriate value based on the height of the screen, and how much of the world it is useful to display in your application. On its own, this still lets users pan off the edge of the map.
Setting maxBounds limits the view to a specific set of coordinates (the whole world in the example above). You also have to set maxBoundsViscosity to stop users being able to pan the map beyond these limits.
If you really don't want users to be able to pan the map at all, you can also set dragging: false. This still lets you pan the map using the .panTo() method.