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
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 simple 2d map in open layer (5.2.0) that is comming from this url: https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer. When I switch to ol-cesium, the map is not display anymore, I only see a black circle (the earth). Here is the code:
It works fine with OpenStreetMap, the problem is when i try to use the map from arcgisonline.com
<!doctype html>
<html lang="en">
<head>
<style>
.map {
height: 400px;
width: 400px;
}
</style>
<link type="text/css" rel="stylesheet" href="/csiaps/webjars/openlayers/5.2.0/ol.css" />
<link type="text/css" rel="stylesheet" href="/csiaps/js/olcesium/olcs.css" />
<script type="text/javascript" src="/csiaps/webjars/openlayers/5.2.0/ol.js"></script>
<script type="text/javascript" src="/csiaps/js/cesium/Build/CesiumUnminified/Cesium.js"></script>
<script type="text/javascript" src="/csiaps/js/olcesium/olcesium.js"></script>
<script>
var ol3d = null;
var baseLayerGroup;
function createArcGISCacheLayer(name, url, layerInfoParam) {
name = 'NatGeo_World_Map';
url = 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer';
layerInfoParam = <NEVER MIND, not include for this post>;
var wrapDateLineOption = true;
var layer = new ol.layer.Image({
visible : true,
source : new ol.source.ImageArcGISRest({
url : url,
params : {
"layerInfo" : layerInfoParam,
"wrapDateLine" : wrapDateLineOption
}
})
});
layer.set('title', name);
return layer;
}
</script>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var layer = createArcGISCacheLayer(null, null, null);
var map = new ol.Map({
target : 'map',
layers : [ layer ],
view : new ol.View({
center : ol.proj.fromLonLat([ 37.41, 8.82 ]),
zoom : 4
})
});
function showHideMap() {
if (!ol3d || !ol3d.getEnabled()){
ol3d = new olcs.OLCesium({
map : map,
});
}
ol3d.setEnabled(!ol3d.getEnabled());
}
</script>
3d
</body>
</html>
I expect the ol-celium to format the already loaded 2d maps in 3d and show them instead of a black map
It's a tile layer
var layer = new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer'
})
});
Since it's EPSG:3857 and uses a standard grid it will also work set as an XYZ source and will be quicker to open (note the x and y are reversed compared with most XYZ sources)
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}'
})
});
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);
}
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
Can anyone solve this code?
i have some javascript code geolocation and here map script, i want to put geolocation coordinate in here map script..
here bellow my code..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.css" />
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button onclick="getLocation()">My Location</button><br/>
<input type="text" id="latpos" name="latpos">
<input type="text" id="longpos" name="longpos">
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var origlat= position.coords.latitude ;
var origlong= position.coords.longitude ;
var lat=document.getElementById("latpos");
lat.value=origlat;
var lon=document.getElementById("longpos");
lon.value=origlong;
}
function addMarkerAndSetViewBounds(map) {
var latitu="-6.811408423530006";
var longitu= "110.85068956017494";
var origl= origlat;
var origlo= origlong;
var Isone = new H.map.Marker({lat:latitu, lng:longitu}),
geol = new H.map.Marker({lat:origl, lng:origlo}),
group = new H.map.Group();
group.addObjects([Isone , geol]);
map.addObject(group);
// get geo bounding box for the group and set it to the map
map.setViewBounds(group.getBounds());
}
/Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: false,
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:50, lng:5},
zoom: 15
});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
addMarkerAndSetViewBounds(map);
</script>
</body>
</html>
but, that code didn't work fine..
how to get value var origlat and var origlong in variable var origl and var origlo?
can anyone help me to fix this code run correctly
You should make origlat, origlong global variables, instead of local variable.
http://www.w3schools.com/js/js_scope.asp