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}'
})
});
Related
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
The function ol.proj.transform() returns wrong coordinates based on the user input. For testing purposes I set 50.7712078,9.6679688.
When they are passed to a function (add_marker(y,x)) by value, the result is:
1076233.3638212564, -4754497.267923687
but, when I create the local variables that represent the same latitude and longitude as the user input
that gives me:
1076233.3638212564, 6580922.381627579
Is there a problem with this function in ol3?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; carset=utf-8">
<link rel="stylesheet" href="./_css_II.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js" type="text/javascript"></script>
<script src="./_script.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="geo-marker" class="marker"></div>
<div id="inputForm">
Latitude:
<input id="latitude" type="text" value="50.7712078"/>//default
Longitude:
<input id="longitude" type="text" value="9.6679688"/>//default
<input id="btn_addmarker" type="button" value="Add Marker" />
</div>
</body>
</html>
_script.js
var map, marker;
$(document).ready(function(){
init_map();
$("#btn_addmarker").on("click",function(){
var lat = $("#latitude").val();
var lon = $("#longitude").val();
add_marker(lon,lat);
});
});
function init_map(){
var OSM = new ol.layer.Tile({
source: new ol.source.OSM()
});
var v_OSM = new ol.View({
center:[2061969,7281059],
zoom: 14
});
var map = new ol.Map({
layers: [OSM],
target: "map",
renderer: "canvas",
view: v_OSM
});
var markerHwnd = document.getElementById("geo-marker");
marker = new ol.Overlay({
position: [2061961,7281059],
positioning: "bottom-center",
offset: [0,0],
element: markerHwnd,
stopEvent: false
});
map.addOverlay(marker);
}
function add_marker(y,x){
var goodLat = 50.7712078;
var goodLon = 9.6679688;
var newCoord = ol.proj.transform([y,x],"EPSG:4326","EPSG:3857");
console.log(newCoord); //[1076233.3638212564, -4754497.267923687] <- Should be: [1076233.3638212564, 6580922.381627579]
/*
var newCoord = ol.proj.transform([goodLon,goodLat],"EPSG:4326","EPSG:3857");
console.log(newCoord);//[1076233.3638212564, 6580922.381627579] <- OK!
*/
marker.setPosition(newCoord);
}
You are passing text as arguments.
Parse the arguments explicitly when calling your method to get it right:
add_marker(parseFloat(lon),parseFloat(lat));
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
Hi still learning dojo,
with code:
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<!-- load Dojo -->
<script src="/static/1.9.3/dojo/dojo.js"
data-dojo-config="async: true"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var map;
var osm;
var currentPoint;
require([
'dojox/geo/openlayers/Map',
'dojox/geo/openlayers/Layer',
'dojox/geo/openlayers/GfxLayer',
'dojox/geo/openlayers/WidgetFeature',
'dojox/geo/openlayers/Point',
'dojox/geo/openlayers/GeometryFeature',
'dojo/dom',
'dojo/parser',
'wink/api/geolocation/js/geolocation',
'dijit/form/RadioButton',
'dojo/domReady!'
], function (Map, Layer, GfxLayer, WidgetFeature, Point, GeometryFeature, dom,parser,GeoLocation){
// Create the map using the specified // DOM element
map = new Map("rcp1_map");
// Create an OpenStreeMap raster layer // and add to the map
osm = new GfxLayer();
map.addLayer(osm);
var mapobj = map.getOLMap();
mapobj.addControl(new OpenLayers.Control.LayerSwitcher());
mapobj.addControl(new OpenLayers.Control.PanZoomBar());
map.fitTo([ -40, 20, 40, -20 ]);
parser.parse();
currentPoint = new Point({
x : 0,
y : 0
});
var f = new GeometryFeature(currentPoint);
f.setStroke([ 0, 0, 0 ]);
f.setFill([ 255,0, 0]);
f.setShapeProperties({
r : 5
});
osm.addFeature(f);
osm.redraw();
var winkgeo = new GeoLocation();
console.log(winkgeo);
winkgeo.addListener({method: "winkgeoalert"},
1000,
false,
true
);//winkgeo.addListener
}//require function
); //require
function winkgeoalert(geo){
currentPoint.setPoint({
x:geo.longitude,
y:geo.latitude
});
//map.fitTo({position:[geo.longitude, geo.latitude]});
var mapobj = map.getOLMap();
console.log('mapobj: '+mapobj);
console.log(geo.longitude);
console.log(new OpenLayers.LonLat(geo.longitude,geo.latitude));
console.log(mapobj.getCenter());
mapobj.panTo(new OpenLayers.LonLat(geo.longitude,geo.latitude));
osm.redraw();
}
function layerType(id){
require([
'dojo/dom'
],function(dom){
var i = dom.byId(id);
var v = i.value;
alert(v);
map.setBaseLayerType(v);
}//require function
);//require
};//layerType
</script>
</head>
<body>
<input type="radio" data-dojo-type="dijit/form/RadioButton" id="osm" name="layertype" value="OSM" onClick="layerType('osm')" />
<input type="radio" checked data-dojo-type="dijit/form/RadioButton" id="arcgis" name="layertype" value="ArcGIS" onClick="layerType('arcgis')" />
<div id="rcp1_map" style="width: 100%; height: 100%;"></div>
</body>
</html>
mapobj.panTo(new OpenLayers.LonLat(geo.longitude,geo.latitude)); --> the OpenLayers library method does not react as expected?
did dojo do something dumb to the coord system?
is there another way to inject OpenLayers command thru dojo's wrapping?
Arthur.
update: went in to dojo source. problem: different geo projection system problem! FIDED!
This question has already asked (see question "Google maps polygons"). But I have exactly the same problem and just wanted to encourage someone to take it on...
In short, how do you add multiple polygons to a map without a line appearing to join each polygon? In short, how do you "close" a polygon before drawing another?
My page is below. As you can see if you check it in the browser, a line appears between the two states (if you add more shapes, they too appear connected with a line) Is there some easy solution, or do you need complex JS code to detect intersections or something?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? key=MY_VALID_KEY_HERE&sensor=false"></script>
<!--<script type="text/javascript" src="AAAA_State_Coordinates.js"></script>-->
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(46, -100);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var shape_ND = [
new google.maps.LatLng(45.9445, -104.0446),
new google.maps.LatLng(45.934, -96.5671),
new google.maps.LatLng(46.3242, -96.6028),
new google.maps.LatLng(46.6636, -96.7978),
new google.maps.LatLng(46.8602, -96.7896),
new google.maps.LatLng(46.9503, -96.7896),
new google.maps.LatLng(47.13, -96.8335),
new google.maps.LatLng(47.2345, -96.8335),
new google.maps.LatLng(47.4132, -96.8555),
new google.maps.LatLng(47.5469, -96.8555),
new google.maps.LatLng(47.6506, -96.8774),
new google.maps.LatLng(47.9918, -97.0601),
new google.maps.LatLng(48.1267, -97.126),
new google.maps.LatLng(48.2859, -97.1109),
new google.maps.LatLng(48.4301, -97.1233),
new google.maps.LatLng(48.553, -97.1425),
new google.maps.LatLng(48.6765, -97.0999),
new google.maps.LatLng(48.7326, -97.1356),
new google.maps.LatLng(48.7951, -97.1727),
new google.maps.LatLng(48.9081, -97.229),
new google.maps.LatLng(48.9982, -97.2331),
new google.maps.LatLng(48.9946, -104.0501)
];
var shape_WY = [
new google.maps.LatLng(48.9946, -104.0501),
new google.maps.LatLng(44.9949, -104.0584),
new google.maps.LatLng(44.9998, -111.0539),
new google.maps.LatLng(40.9986, -111.0457),
new google.maps.LatLng(41.0006, -104.0556)
];
ND = new google.maps.Polygon({paths: shape_ND,strokeColor: '#FF0000',strokeOpacity: 0.8,strokeWeight: 2,fillColor: '#FF0000',fillOpacity: 0.35});
ND.setMap(map);
WY = new google.maps.Polygon({paths: shape_WY,strokeColor: '#FF0000',strokeOpacity: 0.8,strokeWeight: 2,fillColor: '#FF0000',fillOpacity: 0.35});
WY.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:70%; height:70%"></div>
</body>
</html>
You've duplicated the last coordinate of ND in WY, so that point is part of both shapes. Use the following for WY:
var shape_WY = [
new google.maps.LatLng(44.9949, -104.0584),
new google.maps.LatLng(44.9998, -111.0539),
new google.maps.LatLng(40.9986, -111.0457),
new google.maps.LatLng(41.0006, -104.0556)
];