Getting viewport bounding box for United Kingdoms - javascript

I'm using Google Maps Geocode to get the recommended viewport bounding box when displaying countries on a map.
This works really well for almost all countries, and it used to work well for the UK as well.
In the geocoding response, there's the geometry property that includes a viewport property. For the UK this viewport used to include the Great Britain and Northern Ireland, recently, however, it also includes the Akrotiri and Dhekelia territory which is on the island of Cyprus. Fitting the map bounds to this area will display most of Europe.
The solution I've found thus far is to fit the map bounds to the bounding box of Great Britain, this, however, excludes the Northern Ireland which I also want to have visible.
How can I get a bounding box that contains both the Great Britain island Northern Ireland?
I know I can hard code it, it's unlikely to change (unless Scotland decides to go independent). But I would like to find another solution.

The best i could get is this https://jsfiddle.net/7tc0rv2p/1/ (will need to add API key)
You can use:
resultsMap.fitBounds(results[0].geometry.bounds);
resultsMap.panToBounds(results[0].geometry.bounds);
And instead of GB or UK, use England and i found apart from a very minute amount of Scotland it shown the entire part you need, but that should be able to be adjusted if the top of Scotland is absolutely needed.

Related

Get center of geojson Continent/Country/State with leaflet

Is there a way of finding a center for countries/continents which consist of more than one polygon object(ex. USA, Canada, which have an islands besides main land part)? I was trying to use leaflet's Layer.getCenter() or even Layer.getBounds().getCenter(), but those methods certainly don't work for this type of countries and return a "no-go" results.
Example can be seen by the following link (leaflet playground). Just scroll and click on US or Canada and see where circleMarker will appear. Then try clicking on smaller entities, like some islands on south of US, they shall place this marker precisely on center of'em:
http://playground-leaflet.rhcloud.com/voyi/1/edit?html,output
Leaflet can only calculate the center of the bounding box of a feature. With a bit of help from other libraries (such as Turf.js) you can calculate the centroid of the polygon or (multipolygon).
In any case, you are getting confused because sometimes the centroid is not within the polygon (or multipolygon):
(source: postgis.net)
(Figure 1. Centroid of a polygon as per PostGIS's ST_Centroid documentation)
So I guess that what you really wanted to ask is:
Given a polygon or multipolygon, how can I calculate a center (or center-like point) which is guaranteed to be within the polygon and looks visually in the center of it, in order to add symbolizers to that point with Leaflet?
And for that, the answer is "pole of inaccessibility" as implemented by polylabel: «the most distant internal point from the polygon outline».

How do I attach events to Natural Earth map data created in TileMill?

I realize there are some conceptual gaps in my knowledge—I'm not 100% clear on how everything fits together in Mapbox. Hopefully someone can set me straight and help me achieve what I'm trying to do.
Our client is a multinational corporation with locations divided into global regions: North America, South America, Europe & Africa, Asia Pacific, etc.
What they want is for the initial map view to be a zoomed-out world map. When each of these individual regions are moused over, the countries belonging to that region will be highlighted, a label will be displayed with the name of the region, and clicking will zoom the viewport to center/display the region.
The problem is that there is no concept of a region in the map, and I'm not sure how to add one programatically.
The underlying country map was created and styled by a designer using TileMill. It uses the Natural Earth country map. When I look at the project in TileMill and inspect the layer "features", it appears that the shapefile has a list of the individual countries with some associated metadata. So far so good.
Ideally, on the client side, I would have a list of countries belonging to each region. When the user mouses over an individual country, I'll figure out what region it belongs to, iterate through the country list and apply an effect (like opacity) to highlight the region.
The problem is, I can't figure out how to get the country metadata in the TileMill file for whatever country is currently being moused over. Is it even possible to attach events and access the features added in TileMill?
FYI: an alternate approach I tried was adding this map data at runtime. I was able to attach events to GeoJSON features, but the granularity of the map is WAY lower than the underlying map, so it doesn't line up correctly at higher zoom levels.
The problem is that there is no concept of a region in the map, and I'm not sure how to add one programatically.
Okay, so the fundamental thing to understand here is the difference between interactivity you add in TileMill and interactivity via GeoJSON, in Mapbox.js.
TileMill supports raster interactivity based on UTFGrid, and exports tiles. It can handle high levels of detail and thousands of features, but since the geo data itself is not transferred to your browser, you can't do hover interactions like highlighting data - you can only open tooltips and popups
Mapbox.js/Leaflet support vector interactivity. They can handle much lower levels of detail and amounts of data. But the geo data is transferred to your browser, so you can do hover interactions as well as adding tooltips.

Save the whole location area in Gmap/Bing

My requirement is to save the specific are from the GMap. For example, I want to save the location are of NewYork city and once any vehicle entered in this area then we will get an alert. Vehicle updating his information through GPS.
Please suggest me if anyone having some experience about it.
I'm not sure what you mean exactly by "save the specific are from the GMap".
If you mean that you'd like to save a 'viewport' then you could retrieve the viewport coordinates for a particular search and use that as a defined area. Viewports are just large squares though, so this will include areas that are not 'New York City'
If you want to be more precise - i.e. to flag a car as it enters Manhattan, you would need a more detailed KMZ for the Manhattan New York City area.
The New York City Department of City Planning (DCP) provide KMZ's of all the boroughs which could be used to achieve a more accurate view of the area of interest. You could stitch them together to create an 'official' NYC city limits polygon.
https://www.google.com/fusiontables/DataSource?dsrcid=1767628
To determine if a vehicle has entered any of these areas you would need to perform a 'Point-in-Polygon' test against the KML polygon(s).
There are previous discussions on how to do that Here and Here
Hope that helps

Display own places on custom Google Map

I'd like to create a map of a space system from a computer game.
I understand that you can use the Google Maps API to render your own map with custom tiles and placemarks etc (which I've done successfully), but I'd really like to be able to see hierarchical place names in the same way that you see New York, Brooklyn, Manhatten, Queens etc when viewing New York from this zoom level, and Chinatown, East Village, Hudson Square when viewing New York from this zoom level.
I've also had a look at Google Fusion tables, but they appear to be restricted to Earth locations only.
I suppose ideally I'd like a modified version of the google.map.Marker object that displays the name of the marker next to the marker itself and allows specification of the text-size and at what zoom level the marker text appears. But that feels like a hack.
Is this possible using the Google Maps API, or another browser-based mapping system?
EDIT:
D'oh, should have kept Googling. Someone's basically done what I was looking for here.
Self-answering the question so it doesn't keep coming up as unanswered.
I've used the code from Uncle Tomm's blog to solve the problem.
I just need a good algorithm for displaying nearby placenames without them overlapping... but that's another question!

Google map divided in regions with color and in subregions

I need to divide USA map into political boundaries. i.e. states and in seven Regional boundaries on Google map. Each region will have its own color. Example, California, Hawaii, Nevada, Utah, Arizona and Colorado (Southwestern US) will all be same color. Political boundaries will also be on map along with regional boundaries. On national view only regional names should be visible and no state name. On zooming in to region state names will be shown, no city name should be visible either I zoom in or out.
Can you please help me understanding that from where should I start? Links? Tutorial?
Do I need an Image to put on map as overlay.
I am really not getting it.
If you want to close this question then please help me that what is the forum to ask this so I put it there?
I need to divide USA map into political boundaries. i.e. states and in seven Regional boundaries on Google map. Each region will have its own color.
You can do this with a relatively simple polygon overlay. You'll need to obtain polygon data for each region of interest from a third party since the API does not provide any.
On zooming in to region state names will be shown, no city name should be visible either I zoom in or out.
This starts to get more complicated. Probably best done using a custom map type (see image map types) if you don't want to see features like city names.
See also
Google Maps w/ counties overlay?
http://maps.forum.nu
State polygon overlay example (for API v2)
MapTiler - Map Tile Cutter
Polymaps - a personal favorite alternative to Google Maps, with a really slick API

Categories

Resources