I want to create a geo map with a specific state region, and individual metro area regions colored by intensity of the value. I have looked at the documentation but haven't been able to achieve this. Here is an example of what I am targeting for.
Does anyone has any idea what options to use for just showing e.g., CA state, and then marking the regions by zip code.
The map is showing metro regions which is not the same as zip code. If you want the metro regions for California you would call chart.draw() with the following:
var options = {
displayMode:'regions',
region:'US-CA',
resolution:'metros'
};
But you will need to map your data to the appropriate IDs from here: https://developers.google.com/adwords/api/docs/appendix/cities-DMAregions
Here is a fiddle: http://jsfiddle.net/5he4p5k9/1/ [Change region to just 'US' to zoom out]
Related
I have a LeafletJS map with a GeoJSON layer that contains multiple polygons. If a user enters a latitude/longitude coordinate that falls within the GeoJSON layer, the script should retrieve the feature that contains that point and log some information about it to the console.
I can't simply use Leaflet's built-in event handling because the latitude and longitude coordinates are generated by a separate input field, not by direct interaction with the map. So my question is not a duplicate of this.
I'm looking for something similar to getFeatureContainingLatLng() in the example below:
var map = L.map('map');
var geojson = L.geoJson(myGeojson);
geojson.addTo(map);
$.on('address input changed event', function(lat, lng) {
var myFeature = geojson.getFeatureContainingLatLng(lat, lng);
console.log(myFeature.properties);
});
The plugins Leaflet.CheapLayerAt or Leaflet-pip should help. Both approaches will solve your problem, albeit they have different advantages and disadvantages specially in terms of algorithmic complexity.
I have a map with a few base layers. Users can choose the base layer and then save the map. After saving the map, the system loads it with the new base layer. That base layer should be selected in the L.Control.Layers control. However, there's no way in the API to select a base layer.
Anyone knows a way around this, or a different plug in?
UPDATE: Here is the code I use. MapConfigs has the ids in MapBox, and can create the map that L.control.layers requires.
var map = L.mapbox.map( components.mapDivId , MapConfigs.idFor(baseLayerName) );
map.addControl( L.control.layers(
MapConfigs.toBaseLayersControlMap(map)
).setPosition("topright"));
Thanks!
Why not store references to all the base layers available in a hash, then use addLayer or removeLayer (http://leafletjs.com/reference.html#map-addlayer) as needed to programmatically select base layers?. Something like below.
var tileLayers = {light: L.tileLayer('lightUrl'),dark: L.tileLayer('darkUrl')}
I'm trying to render Antarctica geojson shape on a map using the HERE maps api.
The geojson is found here: https://github.com/johan/world.geo.json/blob/master/countries/ATA.geo.json
You can see github renders it nicely.
Using the same geojson on geojson.io also renders it nicely.
But somehow it seems to render the 'inverse' of Antarctica when using it in HERE maps.
It colors everything except antarctica.
see: http://imagebin.ca/v/1dZIn5vsEuFx
(I've tried making an expample using jsfiddle, but it's not able to load external json. And the HERE maps api doesn't allow you to load geoJSON from a string)
Is there an issue with the geoJSON? Is there an issue with the HERE maps api?
The API doesn't quite understand what to do with the open polygon. Because the polygon is basically just a line around the globe the API doesn't know if you shape closes over the north pole or the south pole. By default it assumes that open polygons close over the north pole. You can change this by using this flag (setNorthPoleCovering):
http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-polygon.html#h-map-polygon__setnorthpolecovering
However, actually getting to that point in the code where this can be done is a bit complicated:
// When you instantiate the geojson.Reader you can specify a function that
// receives all objects the reader parsed. It is called when objects are
// being rendered on the map. At that point we can look into the object and
// check whether it is Antarctica
var reader = new H.data.geojson.Reader('...ATA.geo.json', {
style: function(obj) {
if (obj.getData().properties.name === "Antarctica") {
//AHA! We found Antarctica!
// Since this is a multi-polygon we have a group here which contains
// all polygons. We apply the north-pole-covering flag to each of the
// polygons
obj.forEach(function(polygon) {
polygon.setNorthPoleCovering(false);
});
}
}
});
reader.parse();
map.addLayer(reader.getLayer());
Depending on what you want to accomplish in terms of dynamic behavior, if you are just looking to display or share a map with cards and other metadata about a country with some basic styling -- HERE XYZ can be used to render GeoJSON on a HERE map.
If you want to do it with JavaScript rather than an embedded iframe, the other answer may be what you are looking for.
There is an there an issue with the GeoJSON, and other mapping APIs would have the same problem. It needs to be closed at the 180th meridian, so
[178.277212,-84.472518],[180,-84.71338],[-179.942499,-84.721443]
becomes
[178.277212,-84.472518],[180,-84.71338],[180,-90],[-180,-90],[-180,-84.71338],[-179.942499,-84.721443]
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?
In my database I have set of zip codes and number of orders for specific zip code
zip | count
--------------
12-456 | 23
12-100 | 120
12-220 | 93
10-300 | 2
I need a way to show that data as heat map using GoogleMaps.
I found basic example at https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap
It is a nice start, but it requires me to add all the points to my page.
Is there an option to show page and then do request to server to get all the points?
I know that I can make ajax request to server, get json as result and then in loop add those point to taxiData (code from example), but maybe this can be done easier?
In Poland are almost 23 thousands zip codes, so I can have very large dataset from server.
Is it possible to load data as latitude, longitude, count?
I can convert zip codes to locations (GPS coordinates) but I would like to send number of orders in that location.
How can I show heat map for specific region? Like in this sample: http://maps.forum.nu/v3/gm_customTiles.html heat map is only presented for United States.
Any ideas on how to start (links, examples) are big help.
First question:
Well just a thought, you could sample the zip codes and let the user choose the detail. If he wants more detail it will take a little more to load. In low map zooms you don't need that many points. If the user wants more detail in higher map zooms you fetch more. But don't underestimate ajax, I had a web site page that loaded around 9000 database entries and it was ready in around 3 secs, maybe less. Just don't block the page and don't forget to use a loader :)
Second question:
In SQL you could do
SELECT latitude, longitude, COUNT(*) count FROM Table GROUP BY latitude, longitude
This will give you the unique pairs of latitude and longitude and their count. If you want you could play with the decimal points to get more or less accuracy.
Third question:
That map uses MCustomTileLayer. You can see and download the source code here http://code.google.com/p/biodiversity-imageserver/source/browse/trunk/unittest/gmap3/MCustomTileLayer.js?r=49
That site's example:
var hMap = new MCustomTileLayer(map,theme);
var oDiv = document.getElementById('controlsDiv');
var tlcOptions = {
parent: oDiv,
overlay: hMap,
caption: theme.toUpperCase()
}
var tlc = new MTileLayerControl(tlcOptions);
To be honest I prefer a lot more the standard google API, its simpler and prettier. They just produce an image and place it on the map. You can play with the heatmap radius to fill just the zones you want.
Hope it helps :)