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
Related
I need to retrieve pin codes (Zip Codes) from a given radius using google maps api. Is it possible?
I have researched quite a bit online but cant seem to find relevant answers. I am able to draw the radius but cannot figure how to retrieve pin codes (Zip Codes) from that radius
var circle = new google.maps.Circle({
map:map,
fillColor: '#FF0000',
fillOpacity: 0.35,
radius: 5000,
});
circle.bindTo('center', marker, 'position');
Google maps has an api for "address lookup" based on a specific location. Take a look at Reverse geocoding. But this api is expensive #$5 per 1000 lookups and you have no idea where to probe. If you are looking for zip code regions then you can buy these areas online for example US zip codes database but its expensive. A more important question is what are you trying to do with your code? What are you going to do with the zipcodes when you get them from your Circle 10km in diameter?
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
so, i'm working on a project that uses maps a lot, and a job was passed to me,
I have to make all this google maps Markers.
And put NUMBERS MANUALLY:
I asked if its possible to put the numbers by code, they say that is not, this need to be done this way.
So, i need to know, there is a way of changing this numbers by javascript or css or anything that could automatize this process.
It is indeed very possible - simply use the label attribute :
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.43, 10.3),
map: map,
label: '6' //<-- 6 will be the text inside the marker
});
demo with different numbers -> http://jsfiddle.net/ec2cr0jw/
But you can only add labels with one character, so your range of numbers is limited to 0..9. If you want more complex text or longer numbers in the markers, you can create the markers yourself from scratch, like in the answer to this question -> How to add values in google map v3
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]]
In the documentation for Leaflet here: http://leafletjs.com/reference-1.2.0.html#circlemarker it says that CircleMaker extends Circle, and that it is the same thing, except the radius is specified in pixels rather than in meters, so that the circles stay constant size even if you zoom the map.
I do however need Circles, because I am trying to draw 100m radius circles on a map. To do this, I use the following code:
var geojsonLayer = new L.GeoJSON(null,{
pointToLayer: function (latlng){
return new L.CircleMarker(latlng, {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
});
}});
map.addLayer(osm);
map.addLayer(geojsonLayer);
geojsonLayer.addGeoJSON(jsonExample);
This works perfectly, however, if I change the code to use "Circle" instead of CircleMaker the entire map fails to load, and I get a javascript error:
Error: Error: Invalid LatLng object: (56.229917, NaN)
I can fix this by pre-filtering the geojson to remove those points which lack both latitude and longitude, but I'm confused: Circle and CircleMaker both specify that they take a LatLng-object as the specification of the center-point, I don't get how a certain LatLng object can be valid as centre-point for a CircleMarker, but invalid if used as the centerpoint for a Circle.
Am I overlooking something obvious, or is this just a weakness and/or bug in Leaflet that I'll just have to work around ?
There is no problem with the code anymore. Though this same issue can arise easily because of the different constructors:
L.CircleMarker( <LatLng> latlng, <Path options> options? )
and
L.Circle( <LatLng> latlng, <Number> radius, <Path options> options? )
Be sure to pass the radius to your new circles.
I fixed this by changing the _getLngRadius() method of leaflet.js in L.circle. In leaflet version 0.4.4, it's around line 4913.
This method differs from the one in circleMarker, as it computes the radius of the circle dynamically. If you change the line that has
this._mRadius/hLength
to
this._mRadius.radius/hLength
it should be ok.
You can add if(latlng && latlng.lat && latlng.lng) at the begining of your function (latlng)
that will ignore the faulty datas.