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));
Related
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 create a google map. the latitude and the longitude are from the database so I had to put those in a textbox then get its value in the script. I tried doing so but it doesn't work will you help me with this one; here's my JavaScript:
function initMap() {
var lat = document.getElementById('lat');
var lang = document.getElementById('lang');
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
Here's the html:
<input type="text" style="display: none" id="lat" value="7.8383054" />
<input type="text" style="display: none" id="lang" value="123.2966657" />
<div id="map" ">
</div>
JSfiddle
the "numbers" in the text fields are access using the .value property:
the lat/lng in a google.maps.LatLngLiteral must be numbers. (without the parseFloat the API throws these errors:
InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
You need to actually call the initMap method (your fiddle isn't doing this)
updated fiddle
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<input type="text" id="lat" value="7.8383054" />
<input type="text" id="lang" value="123.2966657" />
<div id="map" ">
</div>
<script>
function initMap() {
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
Try:
var lat = document.getElementById('lat').value;
var lang = document.getElementById('lang').value;
Not really sure where your problem lies aside from not actually using the value of the text inputs or calling the function that returns those values but perhaps something long these lines might help get you started. If you are needing the user to enter different lat/lng coordinates then you would also need an event handler assigned to listen for changes or a button to submit the new coordinates.
<?php
/*
*/
?>
<!doctype html>
<html>
<head>
<title>Google maps</title>
<script src='https://www.google.com/jsapi' charset='utf-8'></script>
<script src='https://maps.google.co.uk/maps/api/js?key=APIKEY' charset='utf-8'></script>
<script type='text/javascript' charset='utf-8'>
function initMap() {
var uluru = {
lat: document.getElementById('lat').value,
lng: document.getElementById('lang').value
};
var options={
zoom: 4,
center: uluru
};
var map = new google.maps.Map( document.getElementById('map'), options );
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
document.addEventListener( 'DOMContentLoaded', initMap, false );
</script>
<style type='text/css' charset='utf-8'></style>
</head>
<body>
<div id='map'></div>
<div>
<input type='text' id='lat' value='7.8383054' />
<input type='text' id='lang' value='123.2966657' />
</div>
</body>
</html>
call initMap() function in body tag. it will load the map, the most important thing do you have api key ? you also need ssl to use google maps. means your url must be https://yourdomain.com
body onload="initMap()"
here i got a sample code which shows the same but i like to know from where to arrange the lat lang for any specific country or city.
here map done for London
var london = new L.LatLng(51.505, -0.09);
map.setView(london, 13);
so if some one knows the LatLng for specific country then it is possible. but just tell is there source exist which tell me the latlang for any country or city.
here is full sample code
<html>
<head>
<title>Leaflet Events Example</title>
<link rel="stylesheet" href="leaflet/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]-->
<script src="leaflet/leaflet.js"></script>
<script language="javascript">
var map;
var popup = L.popup();
function init() {
map = new L.Map('map');
popup = new L.Popup();
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
maxZoom: 18
}).addTo(map);
map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.
var london = new L.LatLng(51.505, -0.09);
map.setView(london, 13);
map.on('click', onMapClick);
}
//Listener function taking an event object
function onMapClick(e) {
//map click event object (e) has latlng property which is a location at which the click occured.
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
</script>
</head>
<body onLoad="javascript:init();">
<div id="map" style="height: 200px"></div> <!-- width equals available horizontal space by default -->
</body>
</html>
Another code
<html>
<head>
<title>Leaflet marker array example</title>
<link rel="stylesheet" href="leaflet/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]-->
<script src="leaflet/leaflet.js"></script>
<script language="javascript">
function init() {
var map = new L.Map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
maxZoom: 18
}).addTo(map);
map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.
var london = new L.LatLng(51.5056,-0.1213);
map.setView(london, 13);
// Define an array. This could be done in a seperate js file.
// This tidy formatted section could even be generated by a server-side script
// or fetched seperately as a jsonp request.
var markers = [
[ -0.1244324, 51.5006728, "Big Ben" ],
[ -0.119623, 51.503308, "London Eye" ],
[ -0.1279688, 51.5077286, "Nelson's Column<br>wp" ]
];
//Loop through the markers array
for (var i=0; i<markers.length; i++) {
var lon = markers[i][0];
var lat = markers[i][1];
var popupText = markers[i][2];
var markerLocation = new L.LatLng(lat, lon);
var marker = new L.Marker(markerLocation);
map.addLayer(marker);
marker.bindPopup(popupText);
}
}
</script>
</head>
<body onLoad="javascript:init();">
<div id="map" style="height: 200px"></div>
</body>
</html>
thanks
If you just want to know the LatLng of any country or city
For example you want to know the LatLng of Australia, Just type this in google
australia lat long like below
Try Google Geocoding API. With this you can get the LatLng of an address.
I've tried all possible solutions but the map just isn't showing. My webview just shows blank.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var map; " +
function initialize() {
var latitude = 0;
var longitude = 0;
if (window.android){
latitude = window.android.getLatitude();
longitude = window.android.getLongitude();
}
var myOptions = {
zoom: 20,
center: myLatLng
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
function centerAt(latitude, longitude){
myLatlng = new google.maps.LatLng(latitude,longitude);
map.panTo(myLatLng);
}
</script>
<title>Insert title here</title>
</head>
<body>
<div id="map_canvas" style="height: 100px; width=100px;">This is the map canvas</div>
<script type="text/javascript">initialize();</script>
</body>
</html>
I've narrowed down to this line: map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
When this line is executed, it fails.
Any help is appreciated.
Thanks.
Regards,
Dexter
I can't see myLatLng definition other than in centerAt() function. You need to pass Google Maps LatLng object to the center attribute of myOptions:
var myLatlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 20,
center: myLatLng
}
...
And there is also a strange thing which I can't understand:
var map; " +
^ ^
my bad, submitted the wrong code. Anyway, the major issue here is the connection. That took me a long time to realize it since i was just focusing on the codes.
Thanks.
Why does my marker not appear?
I also tried without the line "marker.show", but the marker just seems not to appear.
<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Custom Control</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript" src="ZoomPanControl.js"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(47.3732589, 8.2382168),
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true }
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({ position: google.maps.LatLng(47.3732589, 8.2382168), title: 'x', map:map});
marker.show;
};
</script></head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body></html>
This should do the trick:
var marker = new google.maps.Marker();
marker.setPosition(new google.maps.LatLng(47.3732589, 8.2382168));
marker.setMap(map);
You were close, but you forgot the new keyword when adding your position. It should look like this:
var marker = new google.maps.Marker({ position: new google.maps.LatLng(47.3732589, 8.2382168), title: 'x', map:map});