The data stored in my Database "video" of "shows" collection in mongodb is as this. It has 3 feilds as dose_rate, x, y.
My code for "app.js" is as follows :
var express=require('express');
var MongoClient=require('mongodb').MongoClient;
var engines=require('consolidate');
var assert=require('assert');
var app=express();
app.engine('html',engines.nunjucks);
app.set('view engine','html');
app.set('views',__dirname+ '/views');
MongoClient.connect('mongodb://localhost:27017/video',function(err,db){
assert.equal(null,err);
console.log("successfully connect to the MongoDB server");
app.get('/',function(req,res){
db.collection('shows').find({}).toArray(function(err,docs){
res.render('shows',{'shows':docs});
});
});
});
});
app.listen(4596,function(req,res){
console.log("connect to the port 4596");
});
the below code is for "shows.html" :
<!DOCTYPE html>
<html>
<head>
<title>Plotting points</title>
</head>
<body>
<ul class="nav navbar-nav">
{%for show in shows%}
<li>{{show.dose_rate}}</li>
<li> {{show.x}}</li>
<li>{{show.y}}</li>
{%endfor%}
</ul>
</body>
</html>
on running the code of "app.js" and on opening "shows.html" from browser on localhost, the output is that all points (i.e dose_rate, x, y) of my "shows" collection in "video" database is displayed on HTML page as this.
Now i have code for plotting single point (77.5,18.1025)on OSM INDEPENDENTLY as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Simplest Example</title>
</head>
<body>
<div id="Map" style="height:600px"></div>
<script src="/home/padmesh/mean/osm sample/OpenLayers.js"></script>
<script>
var lat = 77.5;
var lon = 18.1025;
var zoom = 10;
var fromProjection = new OpenLayers.Projection("EPSG:4326"); //Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); //to Spherical Mercator Projection
var position = new OpenLayers.LonLat(lat,lon).transform( fromProjection, toProjection);
map = new OpenLayers.Map("Map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
</script>
</body>
</html>
I want to plot all my points stored in my collection "shows" as "x" and "y" from that db on OSM map, one by one, at once. I tried finding all reference to this problem but failed to find one. Please help me in doing so as i am new to OSM and nodejs or post any reference which i can read or tag someone who can help. THANK YOU IN ADVANCE
Related
The "function" that I need is in this link, but there is not a code example, just "RouteSummary Object" and the bellow there is the "distance", which is what I need.
I got the code bellow in this link
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
/* No need to set credentials if already passed in URL */
center: new Microsoft.Maps.Location(47.606209, -122.332071),
zoom: 12
});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Set Route Mode to driving
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: 'Redmond', location: new Microsoft.Maps.Location(47.67683029174805, -122.1099624633789) });
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle', location: new Microsoft.Maps.Location(47.59977722167969, -122.33458709716797) });
directionsManager.addWaypoint(waypoint1);
directionsManager.addWaypoint(waypoint2);
// Set the element in which the itinerary will be rendered
directionsManager.calculateDirections();
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=AnOeSZ6a7LgcnBLVjmZ4xfQWIWZjzKv7bDwgyRk-W4NlkGnZGQdk5atUjsunU5yH&callback=loadMapScenario' async defer></script>
</body>
</html>
I tried like that ways:
routeSummary.distance();
and too:
directionsManager.routeSummary.distance();
I don't know almost anything about JavaScript and don't know how to read documentation.
after all, how do I use an Object like described in the documentation?
I just want to know what mean by "object" in this case, is the class-related object of OOP or not?
You need to add an event to the directions manager since the route calculation is done asynchronously. Here is an example:
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);
function directionsUpdated(e) {
//Get the current route index.
var routeIdx = directionsManager.getRequestOptions().routeIndex;
//Get the distance of the route.
var distance = .routeSummary[routeIdx].distance;
}
I have a java client which receive from the server longitude and latitude and i need to send these coordinates as a parameter to an html file which is google map to locate these coordinates i need a way to open html file with passing parameters.
Thanks :)
here's the html code
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850), //coordinates
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
I want to display the transit route from point A to B on the Bahrain map. I'm not sure what the issue is because when I entered the route mode as "driving/walk" a path is displayed but when its "transit" nothing shows up.
Note: I have removed my map's API key from the credentials in the code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
<script type='text/javascript'>
var map;
var directionsManager;
function GetMap()
{
var map = new Microsoft.Maps.Map('#myMap', {
credentials: '',
});
//Load the directions module.
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
//Create an instance of the directions manager.
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
//Calculate a date time that is 1 hour from now.
var departureTime = new Date();
departureTime.setMinutes(departureTime.getHours() + 1);
//Set Route Mode to transit.
directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.transit,
time: departureTime,
timeType: Microsoft.Maps.Directions.TimeTypes.departure
});
//Add waypoints.
var w1 = new Microsoft.Maps.Location(26.230570, 50.577430);
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ location: w1 });
directionsManager.addWaypoint(waypoint1);
var w2 = new Microsoft.Maps.Location(26.227840, 50.494110);
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ location: w2 });
directionsManager.addWaypoint(waypoint2);
//Set the element in which the itinerary will be rendered.
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
//Calculate directions.
directionsManager.calculateDirections();
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:800px;height:600px;"></div>
<div id='directionsItinerary'></div>
</body>
</html>
Transit routing is not supported in all areas. For a list of supported transit markets, see https://msdn.microsoft.com/en-us/library/hh441739.aspx
I am trying to display and center a map for the users current location. Everything works fine if I manually enter a hard coded latitude and longitude, but these needs to be dynamic as one user often changes location.
I suspect I am making a basic mistake, but my logic seems like it is correct to me. Please check my work and let me know what I am doing wrong? The line that is remarked out with Latitude and Longitude is the line I want to use instead of the previous line with the hard coded values.
<!DOCTYPE html>
<html>
<head>
<title>W123</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function showlocation() {
navigator.geolocation.getCurrentPosition(getLocation);
}
function getLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
function loadMapScenario() {
var mapOptions = {
credentials: 'My API key code goes here',
center: new Microsoft.Maps.Location(39.1887643719098, -92.8261546188403),
//center: new Microsoft.Maps.Location(latitude, longitude),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 8
};
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), mapOptions);
var urlTemplate = 'http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-{timestamp}/{zoom}/{x}/{y}.png';
var timestamps = ['900913-m50m', '900913-m45m', '900913-m40m', '900913-m35m', '900913-m30m', '900913-m25m', '900913-m20m', '900913-m15m', '900913-m10m', '900913-m05m', '900913'];
var tileSources = [];
for (var i = 0; i < timestamps.length; i++) {
var tileSource = new Microsoft.Maps.TileSource({
uriConstructor: urlTemplate.replace('{timestamp}', timestamps[i])
});
tileSources.push(tileSource);
}
var animatedLayer = new Microsoft.Maps.AnimatedTileLayer({ mercator: tileSources, frameRate: 500 });
map.layers.insert(animatedLayer);
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>
</body>
</html>
You want to pass in the latitude and longitude into your loadMapScenario function as seen below
function loadMapScenario(latitude,longitude) {
....your code here....
}
Change your callback in the bing map include to a new function like "mapUserLocation" then have mapUserLocation perform the following tasks
function mapUserLocation() {
// code here to get the latitude and longitude from users position
loadMapScenario(latitude,longitude);
}
I am trying to use Google Maps API for my website with Node.js and mongodb. I have an express app on Node.js that fetches locations from mongodb. I have set up the map on my website. However, it is showing markers only for the locations hard coded in the Node.js code. Here, is the piece of code from routes.js
app.get('/website', function(req, res){
website.website(function(events){
res.render('website/index_page.ejs', {events : events});
});
});
The index_page.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<% include map_head %>
</head>
<body>
<h2>Events</h2>
<ol>
<%events.forEach(function(event){%>
<li><p><%= event %></p></li>
<%});%>
</ol>
<div id="googleMap" style="width:650px;height:700px;"></div>`
</body>
</html>`
And the map_head.ejs
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(10, 90),
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
events.forEach(function (event) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(Number(event.latitude), Number(event.longitude)),
map: map,
title: "test"
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The events object is only known to the server and its ejs parser.
The client does not receive the events object in the code you provided.
It only receives an "ol" list.
Your could include the events object in map_head.ejs with code like this:
var events=<%- JSON.stringify(events); %>;