This is a working example of Street View API V3:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Events</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var cafe = new google.maps.LatLng(37.869085,-122.254775);
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: 270,
pitch: 0,
zoom: 1
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while(linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
};
var links = panorama.getLinks();
for (var i in links) {
var row = document.createElement("tr");
linksTable.appendChild(row);
var labelCell = document.createElement("td");
labelCell.innerHTML = "<b>Link: " + i + "</b>";
var valueCell = document.createElement("td");
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition();
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading;
pitchCell.firstChild.nodeValue = panorama.getPov().pitch;
});
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="width: 425px; height: 240px;float:left"></div>
<div id="panoInfo" style="width: 425px; height: 240 px;float:left">
<table>
<tr>
<td><b>Position</b></td><td id="position_cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td><td id="heading_cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td><td id="pano_cell"> </td>
</tr>
<table id="links_table">
</table>
</table>
</div>
</body>
</html>
I've been searching all day on how to parse a google maps street view url into a google maps street view embed javascript, but I dont seem to find a solution anywhere, need to parse something like this: http://maps.google.com/?ll=37.588929,-87.337506&spn=1.201384,1.766052&t=m&z=9&layer=c&cbll=37.588929,-87.337506&panoid=C0tiQOjXuQtNmZRPkHbVxw&cbp=12,154.39,,0,-4.06
There's this querystring library: https://github.com/visionmedia/node-querystring. Works in node.js and in the browser.
pano position=37.588929,-87.337506 the "ll="
Looks like "cbp=" will give you heading, pitch and zoom
http://www.geocodezip.com/v3_GoogleEx_streetview-simpleA.htm
See this page on mapki.com for their meaning.
UPDATE (the mapki.com seems to be gone):
According to this site:
The 5 parts of "cbp=" are window size, heading (bearing), tilt, zoom, and pitch (in that order).
Related
I am trying to display several maps within a table, using Leaflet & Thymeleaf. This means that I have to name each map container differently or otherwise I get an error because a container with such name is already initialised. I managed to do it using Thymeleaf's standard expression syntax and got no erros so far but the maps are not displaying. I am using these expressions to name the map container's id after a 'route id' which is a numeric string.
if anybody could offer some advice on what am I doing wrong, it will be much appreciated.
<tbody>
<tr th:each="route: ${listRoutes}">
<form th:action="#{/delete_route}" method="get">
<td><input type="hidden" name ="routeID" th:value="${route.id}" class="form-control"></input> [[${route.id}]] </td>
<td><div th:id="${route.id}"></div>Map Container </td>
<td th:text="${route.owner.id}">Owner</td>
<td th:text="${route.participants}">Participants</td>
<td style="cursor:pointer"><input type="submit" value="Delete Route" class="btn btn-primary" /> </td>
<script th:inline="javascript">
var map = new L.map("[[${route.id}]]");
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap ',
maxZoom: 18
}).addTo(map);
L.control.scale().addTo(map);
var gpx = /*[[${route.directions}]]*/ "";
new L.GPX(gpx, {async: true}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
</script>
</form>
</tr>
</tbody>
Some notes to expand on my last comment in the question:
(1) Move all your map JavaScript into a single script, after the table; (2) Build an array of map objects var maps = [];. (3) Use Thymeleaf's support for JavaScript inlining to iterate over a list of your map IDs, and create each map by pushing it onto the array.
I assume there is a Route class (or something similar), which looks like the following:
public class Route {
private final int id;
private final int ownerId;
private final String participants;
private final String directions; // the URL of a GPX file
public Route(int id, int ownerId, String participants, String directions) {
this.id = id;
this.ownerId = ownerId;
this.participants = participants;
this.directions = directions;
}
// getters not shown
}
The model then contains a List<Route> listRoutes for Thymeleaf to use.
The Thymeleaf template will look something like the following.
I have simplified this to remove the form, and to just focus on the overall structure & processing of the data:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/js/my_script.js"></script>
<link rel="stylesheet" type="text/css" href="/css/main.css"/>
<!-- leaflet and gpx -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" crossorigin=""
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
<style>
.mapContainer {
height: 200px;
width: 500px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr th:each="route: ${listRoutes}">
<td><div th:id="${route.id}" class="mapContainer"></div></td>
</tr>
</tbody>
</table>
<script th:inline="javascript">
var routes = /*[[${listRoutes}]]*/ [];
//var maps = [];
document.addEventListener("DOMContentLoaded", function (event) {
routes.forEach((route) => {
let map = L.map(route.id.toString());
//maps.push(map);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=YOUR TOKEN HERE', {
attribution: 'ATTRIBUTION INFO HERE',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
L.control.scale().addTo(map);
var gpx = route.directions; // the URL of the GPX data
new L.GPX(gpx, {async: true}).on('loaded', function (e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
});
});
</script>
</body>
</html>
Now, the HTML table is much simpler.
The use of <script th:inline="javascript"> allows Thymeleaf to render the List<Route> data as an array of JavaScript objects:
var routes = /*[[${listRoutes}]]*/ [];
After that, you can build each map as needed.
(I did not actually need to use var maps = []; - that part of my comment was incorrect.)
I´m trying to put a google maps image into my HTML page. I cannot touch the <head> section as the page is dynamically loaded using PHP code (this logic is not explained here).
So, I´ve build the following HTML test code, that doesn´t work - the maps does not appear on screen.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<title>TEST PAGE</title>
</head>
<body>
<h1>Maps test page.</h1>
<script type="text/javascript">
function initialize() {
alert("Initialize");
var mapCanvas = document.getElementById("mapCanvas");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addDomListener(window, "load", initialize);
}
window.onload = function() {
alert("Onload");
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js";
document.body.appendChild(script);
}
</script>
<div id="mapCanvas" style="width: 650px; height: 350px;"></div>";
<script type="text/javascript"> initialize() </script>
</body>
</html>
The alerts are coming up, but no map is shown...
Help is appreciated to make is work.
Asynchronously load the Google Maps Javascript API, use the callback parameter to run your initialize function.
working example
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<title>TEST PAGE</title>
</head>
<body>
<h1>Maps test page.</h1>
<script type="text/javascript">
function initialize() {
alert("Initialize");
var mapCanvas = document.getElementById("mapCanvas");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addDomListener(window, "load", initialize);
}
window.onload = function() {
alert("Onload");
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
</script>
<div id="mapCanvas" style="width: 650px; height: 350px;"></div>";
</body>
</html>
The problem is that initialize() is getting executed before the Google Maps Javascript has been added to the page. You aren't importing the Google Maps JS until the DOM has finished loading, in your window.onload callback. Try this instead:
<div id="mapCanvas" style="width: 650px; height: 350px;"></div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
alert("Initialize");
var mapCanvas = document.getElementById("mapCanvas");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
window.onload = function() {
initialize();
};
</script>
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
I am running a queryTask in order to select dynamicMapServiceLayers on my map. I am able to get a popup window for my polygon features (campus buildings) but cannot seem to get the Bus Stop layers to return anything. I looked to reconfigure the point layer itself but did not find any results on here or arcGIS online. I've looked at a ton of sample code and haven't yet seen anything that changes anything specific about point features. Is there something I am missing to return a popup window for my point features(Bus Stops)?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Updating the legend to display visible layers</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#rightPane {
width: 20%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
dojo.require("esri.tasks.query");
dojo.require("esri.dijit.Popup");
dojo.require("esri.tasks.find");
dojo.require("");
var map, queryTask, query;
var symbol, markerSymbol, infoTemplate;
require([
"esri/map",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/dom",
"dojo/dom-construct",
"dojo/parser",
"dojo/_base/array",
"dijit/form/CheckBox",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
function (
Map, utils, Legend, ArcGISDynamicMapServiceLayer, dom, domConstruct,
parser, arrayUtils, CheckBox
) {
parser.parse();
var legendLayers = [];
map = new Map("map", {
basemap: "topo",
center: [-80.556, 37.1367],
zoom: 16
});
var buildingLayer = new ArcGISDynamicMapServiceLayer("http://geog-grant.radford.edu/arcgiscloud/rest/services/RU/MapServer", {
id: 'ruRestServices'
});
legendLayers.push({ layer: buildingLayer, title: 'RU Rest Services' });
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
map.addLayers([ buildingLayer ]);
map.on('layers-add-result', function () {
//add check boxes
arrayUtils.forEach(legendLayers, function (layer) {
var layerName = layer.title;
var checkBox = new CheckBox({
name: "checkBox" + layer.layer.id,
value: layer.layer.id,
checked: layer.layer.visible
});
checkBox.on("change", function () {
var targetLayer = map.getLayer(this.value);
targetLayer.setVisibility(!targetLayer.visible);
this.checked = targetLayer.visible;
});
//add the check box and label to the toc
domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");
var checkLabel = domConstruct.create('label', {
'for': checkBox.name,
innerHTML: layerName
}, checkBox.domNode, "after");
domConstruct.place("<br />", checkLabel, "after");
});
});
dojo.connect(map, "onClick", executeQueryTask);
queryTask = new esri.tasks.QueryTask("http://geog-grant.radford.edu/arcgiscloud/rest/services/RU/MapServer/6");
queryTask2 = new esri.tasks.QueryTask("http://geog-grant.radford.edu/arcgiscloud/rest/services/RU/MapServer/4");
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["BLDGNAME", "OBJECTID", "NAME", "SHAPE_AREA" ];
query2 = new esri.tasks.Query();
query.returnGeometry = true;
query2.outFields = ["OBJECTID"];
infoTemplate = new esri.InfoTemplate("${BLDGNAME}", "Object ID: ${OBJECTID}<br />Name: ${Name}");
infoTemplate2 = new esri.InfoTemplate("${OBJECTID}", "Object ID: ${OBJECTID}" );
markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
});
function executeQueryTask(evt) {
query.geometry = evt.mapPoint;
queryTask.execute(query, showResults);
}
function executeQueryTask2(evt) {
query2.geometry = evt.mapPoint;
queryTask2.execute(query2, showResults2);
}
function showResults(featureSet) {
map.graphics.clear();
dojo.forEach(featureSet.features,function(feature){
var graphic = feature;
switch (graphic.geometry.type){
case "point":
graphic.setSymbol(markerSymbol);
break;
case "polygon":
graphic.setSymbol(polygonSymbol);
break;
}
// graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
graphic.setInfoTemplate(infoTemplate2);
map.graphics.add(graphic);
});
}
</script>
</head>
<body class="claro">
Click on a Radford University Building to get more info. When Building is highlighted, click building again to get info window.
<!--[if IE 7]>
<style>
html, body {
margin: 0;
}
</style>
<![endif]-->
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="title:'RU Layers'">
<span style="padding:10px 0;">Click to toggle the RU Rest API Service Layers</span>
<div id="toggle" style="padding: 2px 2px;"></div>
</div>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;">
</div>
</div>
</body>
</html>
Any help is appreciated.
There is more than one error in your code.
The most important is that when querying a point layer you should build an Extent as a filter geometry, and not a point. That extent must contain the point you're querying. Here are the fixes:
//dojo.connect(map, "onClick", executeQueryTask); WRONG
dojo.connect(map, "onClick", executeQueryTask2);
.....
query2 = new esri.tasks.Query();
//query.returnGeometry = true; WRONG
query2.returnGeometry = true;
query2.outFields = ["OBJECTID"];
.....
function executeQueryTask(evt) {
// clear goes here so that it clears only before first query
map.graphics.clear();
query.geometry = evt.mapPoint;
queryTask.execute(query, showResults);
}
function executeQueryTask2(evt) {
// query2.geometry = evt.mapPoint; WRONG
var ext = new esri.geometry.Extent(evt.mapPoint.x - 50, evt.mapPoint.y - 50 , evt.mapPoint.x + 50, evt.mapPoint.y + 50, evt.mapPoint.spatialReference)
query2.geometry = ext;
queryTask2.execute(query2, showResults);
}
function showResults(featureSet) {
dojo.forEach(featureSet.features,function(feature){
var graphic = feature;
switch (graphic.geometry.type){
case "point":
graphic.setSymbol(markerSymbol);
// set info template for points
graphic.setInfoTemplate(infoTemplate2);
break;
case "polygon":
graphic.setSymbol(polygonSymbol);
// set info template for polygons
graphic.setInfoTemplate(infoTemplate);
break;
}
map.graphics.add(graphic);
});
}
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!