Dynamic OpenStreetMap - javascript

I have an Openstreet map which Ive programmed two selection options to narrow down on the map. Everything works beautifully but when in option is selected on one of the drop down menus the map viewpoint changes so the user has to manually click and drag back into the selected points on the
map. I would like the viewpoint to remain on the state of Oklahoma or where the user last adjusted the zoom or pan.
See
https://www.tcokchallenge.com/admin_cp/openmap/openstreet.php?

You can restrict the view using an extent on the view.
var map = new ol.Map({
view: new ol.View({ extent: [...] })
});
According to the doc
The extent that constrains the center, in other words, center cannot be set outside this extent.

Related

How do you configure HERE Maps Javascript to automatically set the required zoom value?

I'm using HERE Maps for Javascript in my Angular application.
I have a search functionality implemented, where the user can type in a location, the search API would provide suggestions and once the user selects a location, the map would automatically focus/center the selected location.
All works fine, except the zoom.
I want the map to zoom the map dynamically, based on the selection. For example, if the user selects a country like 'India', the zoom value would be much lesser to show the whole of India, or if the user selects an airport, say 'New Delhi Airport', the zoom value would be higher, to focus just the airport.
How do we do this with HERE Maps Javascript? Any ideas?
Take a look at the method setLookAtData that applies on the map viewmodel:
map.getViewModel().setLookAtData({
bounds: userSelectedGeometry
});
When you use setLookAtData with only the bounds property specified, it sets the center of the bounds as a the map center, and automatically calculate the required zoom that fits the bounds of the selected geometry (e.g. India, New Delhi Airport, ...) within the map viewport.
See the API Reference

Google map multiple markers mapped to an area without coordinates

I have a very strange requirement from my client and I am not sure if it is achievable.
Here's the requirement:
The client wants to display a Map zoomed to a country level having 4 filters:
1. Drop down based state filter which should populate the cities in the city filter and the map should zoom to state level
2. Drop down based city filter which should populate the area filter and the map should zoom to city level
3. Drop down based area filter which would zoom the map to the area level.
This is where it gets tricky:
Once the map is zoomed at area level, it should display all the markers in that area and none of the markers have coordinates or address. They are only attributed to that area boundaries and are randomly/evenly spread out in that area so that all the markers are visible.
A marker clustering should be fine here but I don't know how the markers themselves can be placed in that area without coordinates or addresses, just based on area boundary coordinates.
Now comes the fourth filter:
4. A search box filter which will search the data only within those area markers and whichever matches, is shown and the rest are hidden
I believe I can still take care of the 4th filter, but it's the 3rd filter which is driving me crazy.
Is there any mechanism by which we can place multiple markers (with no coordinates or address, only associated to an area boundary), inside a highlighted area boundary and randomly/evenly distributed within that area so that all the markers are visible?
Thanks in advance.
One way of solving this comes to mind is using the getCenter from LatLngBounds class from google maps. This does require getting the polygon coordinates from somewhere else.
let coords = [{lat: -34, lng: 151},{lat: -34.5, lng: 151.5},etc]
let bounds = new google.maps.LatLngBounds();
coords.forEach(LatLng => bounds.extend(LatLng));
let center = bounds.getCenter(); //returns LatLng variable
This can also be used to center your google maps on an area with the function fitBounds:
map.fitBounds(bounds);
Using this would solve 2 of your challanges, the zoom and center

Custom overlay in google maps area clicked then zoom in

So I tried to draw grid line on my map and I found a good example on google api documentation here : https://developers.google.com/maps/documentation/javascript/examples/maptype-base
it works , now I have another problem in every area or rectangle which built by grid line, I want them to have a listener on click event and then zoom to area that has been clicked. I have tried like this
google.maps.event.addListener(map, "click", function (e) {
var latLng = e.latLng;
map.setCenter(new google.maps.LatLng(latLng.lat(), latLng.lng()));
map.setZoom(17);
});
it works either, but as you can see the latitude and longitude are the exact location where the cursor / pointer clicked, it's not in the middle of the rectangle or area it means the map after zoomed in is wrong. Could anyone help me with this?
I think the problem is because you are using the overlay(as your grid line), when using the tile overlay Google Maps API breaks up the imagery at each zoom level into a set of square map tiles arranged in a grid. When a map moves to a new location, or to a new zoom level, the Maps API determines which tiles are needed and translates that information into a set of tiles to retrieve.
For example each zoom level increases the magnification by a factor of two. So, at zoom level 1 the map will be rendered as a 2x2 grid of tiles. At zoom level 2, it's a 4x4 grid. At zoom level 3, it's an 8x8 grid, and so on.
So when you zoom in, the coordinates that you click is not always in the middle because tile overlay is not set because of your coordinate.
Check this page for more information about overlay.
You can also check this SO question for more information.

google map with multiple routes - auto zoom and center map

I have managed to modify a script I found to suite my needs.
my only current issue is that I have to set the center of the map manually in the code and the zoom level.
how can I modify this so the api automatically selects the correct zoom level and center point for the map.
fiddle is here
I need to remove this manual code:
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-30.559, 22.937),
zoom: 4
}),
and configure it to zoom and center automatically based on the routes given (routes array)
you will see in the fiddle that the costa rica route is off the map so zoom needs to go out. if it was a short trip then zoom in to fit all contents into the map
Thanks as always:
You cannot get rid of that code. Option center and zoom are the only required parameters of google.maps.MapOptions object. See docs of MapOptions.
You can get rid of option preserveViewport or set it to false instead of true so your map will be centered and properly zoomed.

with openlayers , how do i make sure a list of points are all displayed?

I have an OpenLayers map object, and I have added markers to a layer, and added it to the map.
But how do I make sure all the markers are in the display area?
Thanks,
Gil
In order to display all markers on the map
Firstly,make sure you have all markers in one layer.
Secondly,you need to zoom to bound where all markers in marker layer are extended.
To do that,simply
var bounds = markerLayer.getDataExtent();
map.zoomToExtent(bounds);
//has a second parameter that decides to find closest zoom level
//default is false
Please check OpenLayers Document for Marker Layer
Best Regards
Myra

Categories

Resources