Disclaimer: I'm new to Stackoverflow so if I'm not following protocols just let me know!
Over the last couple of days I've started to learn Leaflet JS, its really cool. I've put together an interactive map, following the tutorials, and its not to bad. However, I'm having an issue with centring the popups for a select few countries.
In the highlightFeature function I've stored the centre point using centrePoint = e.target.getCenter(); This seems to work for all countries except Russia, China, Australia, Canada and the USA. If anyone can point me in the right direction and shed some light as to why this might be happening I would be very grateful.
You can find the project here http://codepen.io/CucumberCoolie/pen/yMyrWq?editors=0010
// highlight interaction on mouseover
function highlightFeature(e) {
var layer = e.target,
popup = L.popup(),
name = layer.feature.properties.name,
centrePoint = e.target.getCenter();
layer.setStyle({
weight: 1,
color: '#666',
fillColor: '#fff7bc',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
countryName.textContent = name;
facts.update(layer.feature.properties);
// Add popup on mouseover
popup.setLatLng(centrePoint)
.setContent(name)
.openOn(map);
}
Thanks in advance!
Unfortunately the countries that you mention (you forgot UK, but there are also many other small countries for which this effect is not obvious) are made of several distinct polygons (i.e. multipolygon).
L.Polygon.getCenter() computes a rough centroid using only 1 of these polygons. E.g. in the case of USA, it is one of the Hawaii islands.
A simple, but not error-free, workaround would be first to get the polygon (country) bounds, then to get the center of those bounds:
centrePoint = e.target.getBounds().getCenter();
It works for countries with several polygons that are close enough (e.g. Canada, China, Australia, UK) or for which the "main land" is much bigger than the other parts (e.g. USA).
Updated Pen: http://codepen.io/anon/pen/dvPxqy?editors=0010
But it gives a totally off position for countries with many parts all over the world (e.g. France), or which are spread apart because of the antimeridian (e.g. Russia).
You could try to refine the polygon centroid computation, in particular taking into account the multipolygon case.
You might also be interested in that post: Get center of geojson Continent/Country/State with leaflet
Related
In the Google Maps API it allows you to set the bounds of a map given a list of coordinates. That's awesome. My issue is that it gives a little bit of breathing room on the sides. I'm trying to get the bounding box I'm looking at to be barely containing the bounds.
For example, I want to view California so I set the bounds to be the Northeast and Southwest corners. Instead of showing just California though, I get all of Oregon and half of Mexico.
Here's what I'm currently doing:
var geo_region = {
northeast: {
lat: 42.0095169
lng: -114.131211
}
southwest: {
lat: 32.528832
lng: -124.482003
}
}
var map_bounds = new google.maps.LatLngBounds();
map_bounds.extend(new google.maps.LatLng(geo_region.northeast.lat, geo_region.northeast.lng));
map_bounds.extend(new google.maps.LatLng(geo_region.southwest.lat, geo_region.southwest.lng));
var plot_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
plot_map.fitBounds(map_bounds);
EDIT:
A clearer example might be Wyoming since it's such a nice rectangle. If my map dimensions are the same ratio as Wyoming, I only want it to show me Wyoming.
EDIT:
Somebody suggested that I offset the bounds manually so I grabbed some data on the offsets that Google is using but I can't figure out what their formula is for deciding those offsets so I'm a long ways away from being able to do that. I even used the viewport coordinates from Google's Geocoding API but those didn't help much either.
Here's my data: https://docs.google.com/a/dovidev.com/spreadsheets/d/1HZLdDt5uiGwEtY0NbX0pfkmYVuUDndptm_-kzq0vh_w/edit?usp=sharing
This cannot be done EXACTLY because of the way google's zoom level's work. Google sets the bounds of the area but zooms in as closely as possible without cutting anything out. Because the zoom levels are incremental and their increments are so large, this often means that you'll end up with a lot of extra space.
When I tried to zoom in even once from what I thought was grossly oversized, I found that parts of the bounds had been cut off.
And thus we see that Google is already getting it as tight as it can be.
This question already has an answer here:
Google Maps API Polygon with "Hole" In Center
(1 answer)
Closed 7 years ago.
First of all, for the issue you're going to read, I used this snippet of code to highlight my polygon :
Highlight polygon and tint rest of map using Google Maps
Here is my code (it's Angular) :
var boundaries = [];
// big area
var overlay = [
new $rootScope.googleApi.LatLng(80.0, -90.0),
new $rootScope.googleApi.LatLng(-60.0, -90.0),
new $rootScope.googleApi.LatLng(-60.0, 90.0),
new $rootScope.googleApi.LatLng(80.0, 90.0)
];
// my polygon
angular.forEach(settings_boundaries, function(val, key) {
boundaries.push(new $rootScope.googleApi.LatLng(val[1], val[0]));
});
// create a polygon with overlay first
var poly = new $rootScope.googleApi.Polygon({
paths: [overlay, boundaries],
strokeColor: "blue",
strokeWeight: "1",
fillColor: "black",
fillOpacity: 0.4,
clickable: false
});
poly.setMap(interactiveMap);
Now, the real problem is,
If I use these coordinates (which I don't remember how I got them in the first place) :
[[1.6101837158203125,49.00274483644452],
[1.6294097900390625,49.01175312475694],
[1.5947341918945312,48.98787759766659],
[1.6101837158203125,49.00274483644452]]
Everything works fine (as you can see here).
But if I use these ones :
[[1.6809940338134766,48.98337149775796],
[1.6791915893554688,48.96849847697763],
[1.7185020446777344,48.995199140974066],
[1.6809940338134766,48.98337149775796]]
This is not working anymore.
As you can see here.
I used this website to generate the coordinates :
http://www.the-di-lab.com/polygon/ (view screenshot)
I searched for a long time what the issue could be, but I have really no idea. It's approximately the same coordinates. The first lat,lon values are the same than the last ones, for both of them.
If you have any idea (I guess there's something special in the coordinates), I would like to know !
Thanks !
Structurally, the coordinates of the triangle are correct. Only a geometrical difference the first triangle (the one functioning) is drawn in a clockwise direction while the latter is drawn counterclockwise. I have already met a situation like this but I do not remember which site. Then try to reverse the direction of drawing of the triangle in this way:
[[1.6809940338134766,48.98337149775796],
[1.7185020446777344,48.995199140974066]
[1.6791915893554688,48.96849847697763]
[1.6809940338134766,48.98337149775796]]
I'm currently developing an application as a page of a college project to display information about house price costs and am looking to implement a colour-coded map for different years. The idea would be that there would be a dot where each house sold was located on a map (Google Maps for example), and colour-coded green to red depending on how expensive it was.
I'm looking for a way to implement this using the Google Maps API, but have been unable to find a solution that doesn't seriously slow up the application as I would be loading in ~30k datapoints for each year and the application currently had 5 years worth of data.
Would anyone have any suggestions on what to use. I've looked at Google's Geocharts and they don't really offer what I am looking for. I've also looked at Heatmaps, and though they get the colouring effect I'm looking for, the points are weighted so the colour is dependent on proximity rather than my specified variable, price.
30K points * 5 years = 150K markers. That might be too much. You should be looking for a way to show only one year of history at a time and/or use marker clustering.
Regarding the color markers, you could use SVG markers for that. You can easily change the color of your SVG path. With a little bit of calculation, you should be able to process all your points and define the color in which to draw the markers.
Example round SVG marker:
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: // your marker color,
fillOpacity: .8,
anchor: new google.maps.Point(0, 0),
strokeWeight: 0
}
var marker = new google.maps.Marker({
position: // your marker position,
map: map,
draggable: false,
icon: icon,
title: 'some title'
});
Here is a quick example:
JSFiddle demo
I'm trying to find a way to center and zoom to a country using Mapbox. I am able to get a country its coordinates using the geocoder, however, the zoom levels differ per country. (E.g. the zoom level for Spain is not the same level for the U.S.A.)
function showMap(err, data) {
console.log(data);
console.log(err);
if (err == true) {
console.log("Couldn't find this place!");
} else {
map.fitBounds(data.lbounds);
}
}
var geocoder = L.mapbox.geocoder('x',map);
geocoder.query("Spain", showMap);
Would I need an additional layer with fusion tables to achieve this?
Thanks for any help!
Can you be much more specific with this question, and provide an example, preferably something you can link to, with full code?
I am able to get a country its coordinates using the geocoder, however, the zoom levels differ per country.
The usage of 'however' is confusing: large countries will have different zoom levels than small. Is this what you see happening? Or not? Is this something you desire, or not?
I'm trying to use the EPA's TRI database to get all the hazardous-materials factories in a certain area, such as Virginia. However, doing this requires converting the location from degrees-minutes-seconds to decimal latitude/longitude. I used this formula:
var long = deg + min/60 + sec/3600
However, when I plot the points on a map, most of them end up clustered near Afghanistan, with two in India and one lonely marker off in Denmark. I only used data from Virginia, and the database is only for the U.S. anyways.
Does anyone know why this is happening?
I'm using Javascript and Google Maps, and this is the link to the locations API
Never mind. Somehow, when I multiply the longitude by -1, it moves it to the right spot... oh well.