I'm attempting to integrate heatmap.js with Google maps to do some visualization work. I referred to this:
http://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html
As such, my code in my local sample looks nearly identical:
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<div id="heatmapArea" style="width:1024px;padding:0;height:768px;cursor:pointer;position:relative;"></div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/heatmap.js"></script>
<script type="text/javascript" src="js/heatmap-gmaps.js"></script>
<script type="text/javascript">
window.onload = function(){
// standard gmaps initialization
var myLatlng = new google.maps.LatLng(48.3333, 16.35);
// define map properties
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
scrollwheel: true,
draggable: true,
navigationControl: true,
mapTypeControl: false,
scaleControl: true,
disableDoubleClickZoom: false
};
// we'll use the heatmapArea
var map = new google.maps.Map($("#heatmapArea")[0], myOptions);
// let's create a heatmap-overlay
// with heatmap config properties
var heatmap = new HeatmapOverlay(map, {
"radius":20,
"visible":true,
"opacity":60
});
// here is our dataset
// important: a datapoint now contains lat, lng and count property!
var testData={
max: 46,
data: [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1}]
};
// now we can set the data
google.maps.event.addListenerOnce(map, "idle", function(){
// this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
heatmap.setDataSet(testData);
});
};
</script>
</html>
I'm getting the google map rendering in my div as I expect, but the heatmap itself isn't rendering on the lat-long data points provided by testData.
No errors in the browser console....
Someone see that I'm doing something foolish here?
Update
As heatmap.js v1 has now been retired I have also included an example based on the current version, v2, here:
http://jsfiddle.net/Fresh/pz4usuLe/
This is based on the Google Maps example found on the heatmap website.
Original Answer
I looked at this and it is definitely confusing. I took your code and got it to work here:
http://jsfiddle.net/Fresh/nRQbd/
(Note that the original example above no longer works as v1 has been retired, to see this working with v2 see this http://jsfiddle.net/Fresh/pz4usuLe/)
Note how I modified the datapoints within testData to get a result drawn on the map:
var testData = {
max: 3,
data: [{
lat: 48.3333,
lng: 16.35,
count: 100
}, {
lat: 51.465558,
lng: 0.010986,
count: 100
}, {
lat: 33.5363,
lng: -5.044,
count: 100
}]
};
I also increased the count value for each of these points; a point value of 1 is not visible, but increasing it's value (e.g. to 100) increases the intensity of the colour of the rendered point (thereby making it visible!).
The problem appears to occur when points are drawn outside of the visible map boundary. I deduced this by debugging:
heatmap.setDataSet(testData);
(uncomment "debugger;" in the fiddle to debug the code in the web console)
The code within heatmap-gmaps.js which is causing the datapoints to not be rendered is here:
while(dlen--){
latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
if(!currentBounds.contains(latlng)) {
continue;
}
me.latlngs.push({latlng: latlng, c: d[dlen].count});
point = me.pixelTransform(projection.fromLatLngToDivPixel(latlng));
mapdata.data.push({x: point.x, y: point.y, count: d[dlen].count});
}
It appears that none of the datapoints in your example are contained within the current bounds of the rendered map area. Hence "!currentBounds.contains(latlng)" is always true, causing no points to be added to the mapdata object.
This assumption seems to be true because the first point in your dataSet (i.e. lat: 33.5363, lng:-117.044) is in fact in San Diego (use this to confirm http://itouchmap.com/latlong.html), which is not visible on the rendered map.
Related
I am working with google maps. I have some lat longs and I display them on map using my use cases. Now I have implemented kml but the kml is loading after the map thus my pop-up is not working. I am attaching code below for the the reference.
var base = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});
//=========================
var map = L.map('leafletmap', {
layers: [base],
tap: true,
center: new L.LatLng(30.864111, 72.355499), // alternative of - map.setView([31.582045, 74.329376], 15);
zoom: 7,
});
// Above is just Map
var kmlLayer = new L.KML("/assets/tehsil_punjab.kml",{async:true});
map.addLayer(kmlLayer);
// Here I loaded KML file
unction initialize() {
map.on('enterFullscreen', function () { // detect fullscreen toggling
if (window.console) window.console.log('enterFullscreen');
});
map.on('exitFullscreen', function () {
if (window.console) window.console.log('exitFullscreen');
});
// layerControl = new L.control.layers(baseMaps, overlayMaps).addTo(map);
L.control.scale({ position: "bottomleft", metric: true, imperial: true }).addTo(map);
drawSimpleActivities();
}
// Here I my initializer function
This drawSimpleActivities function is basically drawing polygons on different cities. Here My problem is I want to load my kml first then load this polygons so that my polygons gets on top of kml to work perfectly. I have tried async await and promises But I did not worked for me.I cannot use settimeout as time here is dependent on server.
I have setup a map to the current location as shown below.
var mymap = L.map('mapid', {doubleClickZoom: false}).locate({setView: true, maxZoom: 22});
But sometimes the map does not load to current location. It shows a map of the world. For example:
Why is this happening?
This happens if the user blocks the browser from accessing his/her location. Set a default center so that users who block location access do not see the world view. For example:
var mymap = L.map('mapid', {
minZoom: 9,
maxZoom: 18,
zoom: 12,
center: [40.423494,-3.682068],
doubleClickZoom: false,
}).locate({setView: true});
See my Codepen for an example: https://codepen.io/amapolauditiva/pen/XWmdMaw
I want to insert google maps into my wordpress site.
Because I want circles on my map I can't use plugins which insert the map for me.
So I want to use the code from this site Maps JavaScript API which should work I think.
I copied the code and inserted it on my page into an editor which can show js and html.
I also get a browser key, replaced the code at the specified place and confirmed my domain.
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&signed_in=true&callback=initMap">
But nothing show up at the page. No error, no maps, no empty space.
Now I thought that the reason could be that I don't add any version.
(If no version is added usually automatically the experimental version is used)
But nevertheless I tried it with v=3 which should be the release version.
src="https://maps.googleapis.com/maps/api/js?v=3key=MY_KEY&signed_in=true&callback=initMap">
And now I get the errors NoApiKeys, InvalidVersion and MissingKeyMapError.
But why ? The version should be valid and my key as well.
I made many different tutorials and stuff like that but nothing works.
Did anyone knows what to change to get this work?
Here is the whole code, but it is the same like that on the google page.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// First, create an object containing LatLng and population for each city.
var citymap = {
chicago: {
center: {lat: 41.878, lng: -87.629},
population: 2714856
},
newyork: {
center: {lat: 40.714, lng: -74.005},
population: 8405837
},
losangeles: {
center: {lat: 34.052, lng: -118.243},
population: 3857799
},
vancouver: {
center: {lat: 49.25, lng: -123.1},
population: 603502
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.090, lng: -95.712},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3key=MY_KEY&signed_in=true&callback=initMap">
</script>
I would be happy if everyone who "dislikes" this will write a short comment why.
I tried to ask good questions and if something is missing or wrong I will change it.
i would debug probably by first listing only simple map thus skipping all this code below
// Construct the circle for each value in citymap.
it will help me to pinpoint which code is creating issue and then will take on from there.
Please assist. Ive googled and gone through stack overflow but am unable to find this information anywhere. Is there a way to show only a specific continent, in my case Africa and hide all other unwanted continents in google maps. These maps shouldn't show at all. I came across this article -> Can i hide land masses with Google Maps API
But there is no specific example.
I am using Google Maps API 3.
Currently I have:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
//Implement map styling
var styles = [
{
"stylers": [
{"visibility": "simplified"}
]
}
];
var styledMap = new google.maps.StyledMapType(styles, {name: "MyMap"});
var mapOptions = {
center: new google.maps.LatLng(0.972198, 23.994141),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
draggable: false,
scrollwheel: false,
panControl: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
//Load kml of africa
var kmlMap = new google.maps.KmlLayer('http://myOverLay.kmz',
{
//suppressInfoWindows: false,
//map: map,
preserveViewport: true
});
kmlMap.setMap(map);
//map.mapTypes.set();
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
One option:
Cover the whole world except for a hole over your continent of choice. example of concept (US state of Virginia)
Limit the zoom and the bounds to prevent the map from going too far from showing that continent. description of how to limit the viewable area
Doesnt seem possible. Ended up using image mapster
Hey friends i m new to Sencha Touch platform.
And I want to find user current location with marker please help me out. i stuck in this condition.
Is there any new good tutorial for me then please share with me..
Thanks in Advance for your time.
Ravi Patel
Nice question. I faced a similar problem before. But, later, I figured out the solution.
Here's how you can solve it.
Either use Phonegap's Geolocation API or ..
Use Ext.util.Geolocation from Sencha Touch API
Demo with Phonegap's Geolocation API
Get the geolocation via the geolocation api.
vat lat, lng;
var geoLocationOptions = { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
navigator.geolocation.getCurrentPosition(geoLocationSuccess,geoLocationError,geoLocationOptions);
function geoLocationSuccess(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
Ext.Msg.alert("Geolocation","Latitude:"+ lat +", Longitude:"+ lng);
}
function geoLocationError() {
Ext.Msg.alert('Error','Error while getting geolocation');
}
Then use the values of lat and lng to set the map's center to it as well as set the marker's position to that value.
...
...
var position = new google.maps.LatLng(lat,lng);
map = this.add({
xtype: 'map',
getLocation: true,
autoLoad: true,
mapOptions: {
zoom: 15,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
zoomControl: true,
mapTypeControl: true,
scrollwheel: true,
scaleControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
}
});
marker = new google.maps.Marker({
id: 'geoLocMarker',
position: position,
map: map.getMap(),
visible: true
});
...
...
It's a lot simpler if you just use Ext.Map.getGeo() as follows:
var geo = extmap.down("#Map").getGeo();
var currentPosition = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
As long as you have your map instantiated, it should get the current location if the browser client allows for you to obtain that.
HTH!
I have also work for simillar app using sencha touch 2.3.1
Using Ext.util.Geolocation class for get current location and automatically update the currentPosition using the following code.
Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
allowHighAccuracy: true,
frequency: '5000', // set the milliseconds for the location update
listeners: {
locationupdate: function(geo) {
latitude=Global.currentUserLocations.currentLat;
longitude=Global.currentUserLocations.currentLong;
if(Global.currentUserPositionMarker)
{
latlng1=new google.maps.LatLng(latitude, longitude);
Global.currentUserPositionMarker.setPosition(latlng1);
}
}
}
});
The above code worked for me and i have already used in my app for getting currentLocation and moved the marker into currentPosition.