I have been struggling with this piece of javascript for some time now. I have read different, and similar, posts on the subject but I can't find anything that seems to lead me in the right direction of solving my problem.
I need to call the value of the variables from the watchPosition (and getCurrentPosition) method , set them as global and then call them inside of the function initMap().
The code is working but watchPosition reloads the Google map (this appears to happen when i change the browser/switch between tabs). I can't get the global variables to catch the value from the methods below (inside updateMarker).
How do I set the values from:
mon_lat = +position.coords.latitude;
mon_long = +position.coords.longitude;
to become global?
My main question is, more or less: how can i load the script without updating function initMap()? I would like it so that the navigator.geolocation.watchPosition() method updates automatically.
$(document).ready(function() {
updateMarker();
});
var mon_lat = null;
var mon_long = null;
var start_lat = null;
var start_long = null;
function updateMarker() {
// Get positions
if (navigator.geolocation) {
// Get current position
navigator.geolocation.watchPosition(
function (position) {
mon_lat = +position.coords.latitude;
mon_long = +position.coords.longitude;
initMap(mon_lat, mon_long);
}
);
// Get starting position
navigator.geolocation.getCurrentPosition(
function (position) {
start_lat = +position.coords.latitude;
start_long = +position.coords.longitude;
initMap(start_lat, start_long);
}
);
}
}
function initMap() {
// Display the map
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: mon_lat, lng: mon_long},
zoom: 10,
mapTypeControl:false
});
}
Related
I have a project created with ionic. In here I have a Google Map with a places search box.
I have included the Google Map library like so:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=SOMEKEY&libraries=places" defer></script>
Now in my TypeScript code I have the following
// init the google map
initMap() {
var centerOfMap;
var draggableMarker = false;
this.mapHasBeenInitialized = true;
this.isStaticLocation = false;
centerOfMap = new google.maps.LatLng(this.locationService.gpsLat, this.locationService.gpsLong);
draggableMarker = true;
var options = {
center: centerOfMap,
zoom: 11,
fullscreenControl: false,
disableDefaultUI: true, // dont allow default zoom/sattelite/street view
gestureHandline: 'cooperative' // disable moving map with one finger
};
this.map = new google.maps.Map(this.googleMap.nativeElement, options);
this.marker = new google.maps.Marker({
position: centerOfMap,
map: this.map,
draggable: draggableMarker
});
if(!this.isStaticLocation) {
var searchBox = new google.maps.places.SearchBox(this.googleInput.nativeElement);
// add the searchbar to the google map
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.googleInput.nativeElement);
// Bias the SearchBox results towards current map's viewport
this.map.addListener('bounds-changed', () => {
searchBox.setBounds(this.map.getBounds());
});
searchBox.addListener('places_changed', () => {
var places = searchBox.getPlaces();
if(places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
places.forEach(place => {
if(!place.geometry) {
console.log("returned place contains no geometry");
return;
}
this.setMarkerLocation(place);
if(place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extends(place.geometry.location);
}
});
this.map.fitBounds(bounds);
});
}
if(draggableMarker) {
google.maps.event.addListener(this.marker, 'dragend', (event)=>{
this.getMarkerLocation();
});
}
google.maps.event.addListener(this.map, 'click', (event: any)=> {
var clickedLocation = event.latLng;
this.marker.setPosition(clickedLocation);
this.getMarkerLocation();
});
// neccessary for reload. Made async to trick loading process
setTimeout(()=> {
google.maps.event.trigger(this.googleMap.nativeElement, 'resize');
this.map.setCenter(centerOfMap);
}, 100);
}
// function to set the location marker on a different spot
setMarkerLocation(place: any) {
this.marker.setMap(null);
this.marker = new google.maps.Marker({
position: place.geometry.location,
map: this.map,
draggable: true
});
this.getMarkerLocation();
}
getMarkerLocation() {
var currLoc = this.marker.getPosition();
this.locationService.setGoogleMapsLocation(currLoc.lat(), currLoc.lng());
this.locationChanged = true;
}
And this code works like a charm in the browser and on Android. Basically what the code does is whenever someone taps on the map, the marker position changes to their tap location.
When a person searches for a Place, the places dropdown will show over the map. On android, when you tap a place in this dropdown, the marker will go to the selected place (f.e. australia).
On iOS however, the marker will position itself on the location where the person tapped and will totally ignore the tap on the place dropdown.
So when I'm in Europe and I type in 'Australia' and select 'Australia' from my dropdown, on Android I'll go to australia but on iOS I'll stay somewhere in Europe wherever the dropdown was positioned.
I've been able to import some shapefiles to Neo4j 2.3.1.
Now how do I view this data on a map?
I have tried the Wiki instructions on GeoServer and uDig, but both of them are outdated and I couldn't get it to work.
Is there any recent tutorial or other tool that can solve this problem?
I've used neo4j-spatial with Mapbox.js for visualizing geometries in a map.
For my use case I indexed US Congressional district geometries in neo4j-spatial then query the spatial index based on where a user clicks on the map, returning the closest district including the WKT string and the results of a Cypher query. To render the WKT polygon in the map I wrote a simple javascript function to parse that into an array of points to add a map annotation.
Here are some relevant code snippets:
Create the map and define a click handler for the map:
L.mapbox.accessToken = MB_API_TOKEN;
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([39.8282, -98.5795], 5);
map.on('click', function(e) {
clearMap(map);
getClosestDistrict(e);
});
Handle mouse click
/**
* Find the District for a given latlng.
* Find the representative, commitees and subjects for that rep.
*/
function infoDistrictWithinDistance(latlng, distance) {
var districtParams = {
"layer": "geom",
"pointX": latlng.lng,
"pointY": latlng.lat,
"distanceInKm": distance
};
var districtURL = baseURI + findGeometriesPath;
makePOSTRequest(districtURL, districtParams, function (error, data) {
if (error) {
console.log("Error");
} else {
console.log(data);
var params = {
"state": data[0]["data"]["state"],
"district": data[0]["data"]["district"]
};
var points = parseWKTPolygon(data[0]["data"]["wkt"]);
makeCypherRequest([{"statement": subjectsQuery, "parameters": params}], function (error, data) {
if (error) {
console.log("Error");
} else {
console.log(data);
var districtInfo = data["results"][0]["data"][0]["row"][0];
districtInfo["points"] = points;
districtInfo["state"] = params["state"];
districtInfo["district"] = params["district"];
console.log(districtInfo);
addDistrictToMap(districtInfo, latlng);
}
});
}
});
Parse WKT into an array of points
/**
* Converts Polygon WKT string to an array of [x,y] points
*/
function parseWKTPolygon(wkt) {
var pointArr = [];
var points = wkt.slice(10, -3).split(",");
$.each(points, function(i,v) {
var point = $.trim(v).split(" ");
var xy = [Number(point[1]), Number(point[0])];
pointArr.push(xy)
});
return pointArr;
}
The code is in this repo. You can see the simple map demo here (just click anywhere in the US to get started). There is also a recent blog post about this example here.
I jus started learn ruby on rails and currently I am creating my first rails app. And I ran into some problems. In my app, I would like to get user's position (latitude, longitude). So I can put the button "find me" and return user's locations. But I would like to load my page and show my position (latitude, longitude), don't press any buttons. And then use lat and lng in my controllers. How can I do this?
Add the below script in your view page.You may go ahead and modify this as needed as to show/customise messages and buttons.Remember to have a dedicated div with id="map-canvas" to show you map on the page.
I have used geocomplete.js to show map and allow user to enter places from search box .You may remove the scripts using geocomplete if not needed.
<script type="text/javascript">
// Enable the visual refresh
// google.maps.visualRefresh = true;
var map;
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: '<p>You are here!</p>'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}//initialize ends
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = '<p>Unable to find the current location</p>';
} else {
var content = '<p Your browser doesn\'t support geolocation.</p>';
}
var options = {
map: map,
zoom: 5,
position: new google.maps.LatLng(60, 105),
content: content
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(60, 105),
map: map,
animation: google.maps.Animation.DROP,
title: 'Sorry,we were unable to find your location'
});
marker.setAnimation(google.maps.Animation.BOUNCE);
var infowindow = new google.maps.InfoWindow(options);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
map.setCenter(options.position);
}//handleNoGeolocation ends
//load the page and execute above scripts
$(document).ready(function(){
$('#map-canvas').html("<p class='text-center text-alert'>Loading map...</p>").show(3000);
//load the map after 2 seconds
setTimeout('initialize()', 3000);
// $("#geocomplete").geocomplete({
// map: ".map-canvas-guest"
// });
//you may use this or remove this section using geocomplete.js if not needed.
$("#geocomplete").geocomplete();
$("#geocomplete").geocomplete(mapOptions).bind("geocode:result", function(event, result){
console.log(result.formatted_address);
//use this user entered address and you may call ajax here as well
})
})//document ends
</script>
Newbie-question I suppose.
The following code is part of a function that I call on document ready. It is intended to permanently return the values of the current mouse position whenever the mouse is moved.
The odd thing that is happening: Moving the mouse on document ready doesn't log anything to the console. I know the mouse_monitor-function works though because I use this function in another "mousedown"-eventlistener and it then logs the current mouse-position to the console.
//Mouse Monitor
canvas.addEventListener('mousemove', mouse_monitor, false);
//Mouse Monitor Request
var mouse = new Array();
var mouse_monitor = function(e) {
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
mouse.x = e.pageX - offsetX;
mouse.y = e.pageY - offsetY;
return mouse;
console.log(mouse);
}
return mouse;
Any statements after that line won't be executed.
Okay, then get something working and add to it/modify it incrementally:
var mouse_monitor = function(e) {
var x = e.pageX;
var y = e.pageY;
console.log(x, y);
}
window.onload = function() {
this.addEventListener('mousemove', mouse_monitor);
}
But you mentioned "document ready", so if you are using jquery you should avoid using addEventListener() because it's not cross browser:
var mouse_monitor = function(e) {
var x = e.pageX;
var y = e.pageY;
console.log(x, y);
}
$(document).ready( function() {
$(this).on('mousemove', mouse_monitor);
});
Another approach is to console.log() all variables and their values leading up to the failed code to determine which values are not as they should be.
I know there are a few topics on this, but I seem to be fumbling my way through with no results. I'm trying to use a controller to return JSON results to my Bing Maps functions.
Here's what I have for my controller (yes it is properly returning JSON data.
Function Regions() As JsonResult
Dim rj As New List(Of RtnJson)()
rj.Add(New RtnJson("135 Bow Meadows Drive, Cochrane, Alberta", "desc", "title"))
rj.Add(New RtnJson("12 Bowridge Dr NW, Calgary, Alberta, Canada", "desc2", "title2"))
Return Json(rj, JsonRequestBehavior.AllowGet)
End Function
Then in my script I have this, but it's not working.
<script type="text/javascript">
var map = null;
var centerLat = 51.045 ;
var centerLon = -114.05722;
var path = "<%: Url.Action("GetRegions", "Regions")%>";
function LoadMap() {
map = new VEMap('bingMap');
map.LoadMap(new VELatLong(centerLat, centerLon), 10);
$.getJSON(path, function(json){
$.each(json, function(){
alert(this.address); // the alert message is "undefined"
StartGeocoding(this.address, this.title, this.description);
});
});
}
function StartGeocoding(address, title, desc) {
map.Find(null, // what
address, // where
null, // VEFindType (always VEFindType.Businesses)
null, // VEShapeLayer (base by default)
null, // start index for results (0 by default)
null, // max number of results (default is 10)
null, // show results? (default is true)
null, // create pushpin for what results? (ignored since what is null)
true, // use default disambiguation? (default is true)
false, // set best map view? (default is true)
GeocodeCallback); // call back function
}
function GeocodeCallback(shapeLayer, findResults, places, moreResults, errorMsg) {
var bestPlace = places[0];
// Add pushpin to the *best* place
var location = bestPlace.LatLong;
var newShape = new VEShape(VEShapeType.Pushpin, location);
var desc = "Latitude: " + location.Latitude + "<br>Longitude:" + location.Longitude;
newShape.SetDescription(desc);
newShape.SetTitle(bestPlace.Name);
map.AddShape(newShape);
}
$(document).ready(function () {
LoadMap();
});
</script>
Well damn.
Turns out that I was using this.address when I should have been using this.Address. Can't believe I missed that.