Google Fusion Table Heatmap - javascript

I'm trying to create a Google Fusion table heatmap. I've copy and pasted the code from here and it works fine on localhost. I then change my API key and column name to loc and use my fusion table id AIzaSyAoiA3rVUoIRrsxje8JTWr599YqnHpHvCA but it just isn't rendering.
What am I missing? I'm guessing it's a setting my fusion table itself but I can't see any other configurable options. I've shared the table publically.
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'loc',
from: '1vtep10enWGFG1NBblFkycgjOiD6O-QKif3N3Ku9G'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoiA3rVUoIRrsxje8JTWr599YqnHpHvCA&callback=initMap">
My complete HTML code is
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables heatmaps</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.813215, lng: -0.407896},
zoom: 8
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'loc',
from: '1vtep10enWGFG1NBblFkycgjOiD6O-QKif3N3Ku9G'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoiA3rVUoIRrsxje8JTWr599YqnHpHvCA&callback=initMap">
</script>
</body>
</html>

Related

Vue Cli 3. Geolocation. I cannot update user's location in firebase database

I am using google map api, geolocation.
I want to update user's location, when user logs in or signs up.
But in my firebase database, user's location is null and I can not see a marker at all.
Here is my code. I changed getCurrentPosition to watchPosition once, but it did not work. And in my console, nothing shows up.
My firebase is the latest version. If you need some more codes to answer, please ask me.
When I log in, my place is correctly set, and my location is put center.
<template>
<div class="map">
<div class="google-map" id="map"></div>
</div>
</template>
<script>
import firebase from 'firebase'
import db from '#/firebase/init'
export default {
name: 'GMap',
data() {
return {
lat: 53,
lng: -2
}
},
methods: {
renderMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: this.lat , lng: this.lng },
zoom: 6,
maxZoom: 15,
minZoom: 3,
streetViewControl: false
})
db.collection('users').get().then(users => {
users.docs.forEach(doc => {
let data = doc.data()
if(data.geolocation) {
let marker = new google.maps.Marker({
position: {
lat: data.geolocation.lat,
lng: data.geolocation.lng
},
map
})
//add click event to marker
marker.addListener('click', () => {
//console.log(doc.id)
this.$router.push({ name: 'ViewProfile', params: { id: doc.id }} )
})
}
})
})
}
},
mounted() {
//get current user
let user = firebase.auth().currentUser
//get user geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(pos => {//pos=position
this.lat = pos.coords.latitude
this.lng = pos.coords.longitude
//find user record and then update geocoords
db.collection('users').where('user_id', '==', 'cred.user.uid').get()
.then(snapshot => {
snapshot.forEach((doc) => {
db.collection('users').doc(doc.id).update({
geolocation: {
lat: pos.coords.latitude,
lng: pos.coords.longitude,
}
})
})
}).then(() => {
this.renderMap()
})
}, (err) => {
console.log(err)
this.renderMap()
}, { enableHighAccuracy: true, maximumAge: 60000, timerout: 3000 })
} else {
//position centre by default values
this.renderMap()
}
}
}
</script>
<style lang="">
.google-map {
width: 100%;
height: 100%;
margin: 0 auto;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9n8HHOm0YVLwSf6tbuU3p69t8bqlUVSE"
type="text/javascript"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>geo-ninjas</title>
</head>
<body>
<noscript>
<strong>We're sorry but geo-ninjas doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

How to locate a user without clicking on the control button? (MapBox API, JavaScript)

I'm trying to locate the user when the website is fully loaded.
I'm using the newest MapBox API (JavaScript)
Is it possible to do that without requiring the user to click on the top right button on the map?
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [0,0],
zoom: 15 // starting zoom
});
// Add geolocate control to the map.
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
try with this example, it's work for me
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script >
var get_location = function() {
var geolocation = null;
var c_pos = null;
if (window.navigator && window.navigator.geolocation) {
geolocation = window.navigator.geolocation;
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000, // 10 seconds
maximumAge: 30 * 1000 // 30 seconds
};
function success(position) {
console.log(position);
c_pos = position.coords;
mapboxgl.accessToken = 'token'; ///////////////// put your token here
if (!mapboxgl.supported()) {
alert('Your browser does not support Mapbox GL');
} else {
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [c_pos.longitude, c_pos.latitude],
zoom: 12 // starting zoom
});
}
}
function error(positionError) {
console.log(positionError.message);
}
if (geolocation) {
geolocation.getCurrentPosition(success, error, positionOptions);
}
} else {
alert("Getting Geolocation is prevented on your browser");
}
return c_pos;
}
</script>
</head>
<body>
<div id='map'></div>
<script>
var current_pos = get_location();
</script>
</body>
</html>
try with this
navigator.geolocation.getCurrentPosition(position => {
const userCoordinates = [position.coords.longitude, position.coords.latitude];
map.addSource("user-coordinates", {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "Point",
coordinates: userCoordinates
}
}
});
map.addLayer({
id: "user-coordinates",
source: "user-coordinates",
type: "circle"
});
map.flyTo({
center: userCoordinates,
zoom: 14
});
});
Yes, you have to use trigger() to activate the tracking in a programmed way.
// Initialize the geolocate control.
var geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate);
map.on('load', function() {
geolocate.trigger(); //<- Automatically activates geolocation
});
see https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol-instance-members

Modify GetFeatureInfo request from WMS with leaflet

I have a map built with leaflet. There are three basemaps. The first one is a basic OSM map. The second and third one ('Boundaries' and 'FNP') are WMS. I want to show attributes by GetFeatureInfo from the WMS 'FNP', but just want to request the values of the columns 'GEMEINDE', 'NUTZUNG' and 'STAND'. Here is the code for this:
<!DOCTYPE html>
<html lang="de">
<head>
<title>FNP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<script src="/cdn-cgi/apps/head/WCXTfKrGxLNzfpUe-D2TgHwMpm4.js"></script><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
html, body {
height: 100%
}
#mapid {
width: 1000px;
height: 800px;
}
#media (max-width: 1000px) {
#mapid{
width: 100%;
height: 100%
}
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="L.TileLayer.BetterWMS.js"></script>
<div id="mapid"></div>
<script type="text/javascript">
<!-- *********************** betterWms ************************************ -->
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
onAdd: function (map) {
// Triggered when the layer is added to a map.
// Register a click listener, then do all the upstream WMS things
L.TileLayer.WMS.prototype.onAdd.call(this, map);
map.on('click', this.getFeatureInfo, this);
},
onRemove: function (map) {
// Triggered when the layer is removed from a map.
// Unregister a click listener, then do all the upstream WMS things
L.TileLayer.WMS.prototype.onRemove.call(this, map);
map.off('click', this.getFeatureInfo, this);
},
getFeatureInfo: function (evt) {
// Make an AJAX request to the server and hope for the best
var url = this.getFeatureInfoUrl(evt.latlng),
showResults = L.Util.bind(this.showGetFeatureInfo, this);
$.ajax({
url: url,
success: function (data, status, xhr) {
var err = typeof data === 'string' ? null : data;
showResults(err, evt.latlng, data);
},
error: function (xhr, status, error) {
showResults(error);
}
});
},
getFeatureInfoUrl: function (latlng) {
// Construct a GetFeatureInfo request URL given a point
var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
size = this._map.getSize(),
params = {
request: 'GetFeatureInfo',
service: 'WMS',
srs: 'EPSG:4326',
styles: this.wmsParams.styles,
transparent: this.wmsParams.transparent,
version: this.wmsParams.version,
format: this.wmsParams.format,
bbox: this._map.getBounds().toBBoxString(),
height: size.y,
width: size.x,
layers: this.wmsParams.layers,
query_layers: this.wmsParams.layers,
info_format: 'text/html',
propertyName: 'GEMEINDE,NUTZUNG,STAND'
};
params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;
return this._url + L.Util.getParamString(params, this._url, true);
},
showGetFeatureInfo: function (err, latlng, content) {
if (err) { console.log(err); return; } // do nothing if there's an error
// Otherwise show the content in a popup, or something.
L.popup({ maxWidth: 800})
.setLatLng(latlng)
.setContent(content)
.openOn(this._map);
}
});
L.tileLayer.betterWms = function (url, options) {
return new L.TileLayer.BetterWMS(url, options);
};
<!-- *****************map******************************** -->
var map = L.map('mapid', {
<!-- center: [51.1961, 13.3105], -->
<!-- zoom: 15 -->
center: [50.8, 14],
zoom: 11
});
var basemaps = {
OSM: L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
minZoom: 4,
maxZoom: 19,
attribution: 'Map tiles by <a target="_blank" href="http://cartodb.com/attributions">CartoDB</a> | Map data by <a target="_blank" href="http://www.openstreetmap.org/copyright" >OpenStreetMap</a>',
subdomains: 'abcd'
}),
Boundaries: L.tileLayer.betterWms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_boundary_lines_land',
transparent: true,
format: 'image/png'
}),
FNP: L.tileLayer.betterWms("https://rz.ipm-gis.de/ags01/services/RAPIS/RAPIS_FNP/MapServer/WmsServer?", {
layers: '1',
format: 'image/png',
transparent: true,
attribution: 'WMS: <a target="_blank" href="https://www.geomis.sachsen.de/terraCatalog/Query/ShowCSWInfo.do?fileIdentifier=a57376e1-1de2-48f7-b125-0b43c5089d91">Flächennutzungsplan RAPIS</a>'
})
};
L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);
basemaps.FNP.addTo(map);
</script>
</body>
</html>
It does not work for the WMS 'FNP'. When I change the 'propertyName' to 'name' to test the request of the wms 'Boundaries' it works. So maybe some expressions are missing in the WMS 'FNP'? Both WMS are external and not published by myself.
Here are the sources/getCapabilities of both WMS:
WMS 'FNP': https://rz.ipm-gis.de/ags01/services/RAPIS/RAPIS_FNP/MapServer/WmsServer?REQUEST=GetCapabilities&SERVICE=WMS
WMS 'Boundaries': https://demo.boundlessgeo.com/geoserver/ows?service=wfs&version=1.0.0&request=GetCapabilities
Do you have any idea why the instruction with the one wms works but not with the other one?
I would be very grateful for any help! Thank you!
Do you have any idea why the instruction with the one wms works but not with the other one?
The service you refer to under the heading WMS 'Boundaries is not a WMS it's a WFS. WFS do no support an operation called GetFeatureInfo only WMS support that operation.

Getting a "jvm.Map is not a constructor" for jvectormap

I'm trying to use jvectormap in a grails application and have been following the examples on the jvectormap website to get started. However, I cannot figure out why I'm getting the error that "jvm.Map is not a constructor". I included all the necessary .css and .js files, and the code is pretty much verbatim from jvectormap's website.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<asset:stylesheet src="jquery-jvectormap-2.0.1.css"/>
<asset:javascript src="jquery-jvectormap-2.0.1.min.js"/>
<asset:javascript src="jquery-jvectormap-world-mill-en.js"/>
</head>
<body>
<div id="widthholder"><span></span></div>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
var gdpData = {
"AF": 16.63,
"AL": 11.58,
"DZ": 158.97
};
$(function(){
map = new jvm.Map({
map: 'world_mill_en',
container: $('#world-map'),
series: {
regions: [{
values: gdpData,
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
onRegionTipShow: function(e, el, code){
el.html(el.html()+' (GDP - '+gdpData[code]+')');
}
});
});
</script>
</body>
</html>
Answer is here
http://jvectormap.com/tutorials/data-visualization/
var mapObject = $('.map').vectorMap('get', 'mapObject');

Error when adding HTML to google site, Google Maps API

I used the Fusion TablesLayer Wizard to layer three separate fusion tables and put it on my google site HERE. I copied and pasted the HTML code from the wizard into an HTML box on my site. But in the HTML Properties window it gives me this error: 12+9 - 58: failed to load external url js?sensor=false- I also tested this html in W3 schools 'TryIt' and it works fine. How do I get it to work on the site?
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:900px; height:900px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
var layer_1;
var layer_2;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(39.34723863007487, -100.37501562500003),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "1qYb8PKCG3P7plw8aFVVpn44RgQI0CNaIuOFhs9RV"
},
map: map,
styleId: 2,
templateId: 3
});
layer_1 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "11PndImUQQPvqjGiNKx87MRrTe71sLHnkGxo9bacC"
},
map: map,
styleId: 2,
templateId: 3
});
layer_2 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "12bzY7A88cndb6bFS43jXSbYqt1AUPNbprYOGgJxj"
},
map: map,
styleId: 2,
templateId: 3
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Do you need to include your API key? I've never really tried, but I don't think Google Maps lets you make anonymous calls. Here's the script from the documentation:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>

Categories