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!
Related
When we are initializing the map, we set the baselayer to "reduced.day".
We are currently facing a problem, when the user changes the map type from "map-view" to "satellite" and back to "map-view", the tile changed to the standard and not "reduced.day".
I have looked up the docs, but can´t find any hint on how to prevent that problem.
So my question is, how to set with the UI controls the map-view tiles to reduced day.
Thanks a lot.
I finally could achieve the solution for my problem.
The solution was to pass a custom object with the requested map style for each map type.
See below the complete code for editing the map controls.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Here Custom Controlls</title>
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"
></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"
></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"
></script>
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css"
/>
</head>
<body>
<div id="map" style="height: 800px; width: 800px;"></div>
<script type="text/javascript" charset="utf-8">
//Initialize the Platform object:
const platform = new H.service.Platform({
app_id: {YOUR_APP_ID},
app_code: {YOUR_APP_CODE}
});
// Get the default map types from the Platform object:
const defaultLayers = platform.createDefaultLayers();
// Instantiate the map:
const map = new H.Map(
document.getElementById("map"),
defaultLayers.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
}
);
const mapTileService = platform.getMapTileService({ type: "base" });
var reduce = mapTileService.createTileLayer(
"maptile",
"reduced.day",
256,
"png8"
);
map.setBaseLayer(reduce);
// Create the custom UI:
const ui = H.ui.UI.createDefault(
map,
{
...defaultLayers,
normal: {
map: reduce
}
},
"de-DE"
);
</script>
</body>
</html>
Please see two javascript functions codes.
SatelliteLayer will work with type : 'aerial'.
ReducedLayer will work with type : 'base'.
/**
*
* #param {H.Map}
* #param {H.service.Platform}
*/
function setAerialSatelliteLayer(map, platform){
var mapTileService = platform.getMapTileService({
type: 'aerial'
});
var parameters = {};
var tileLayer = mapTileService.createTileLayer(
'maptile',
'satellite.day',
256,
'png8',
parameters
);
map.setBaseLayer(tileLayer);
}
/**
*
* #param {H.Map}
* #param {H.service.Platform}
*/
function setBaseReducedLayer(map, platform){
var mapTileService = platform.getMapTileService({
type: 'base'
});
var parameters = {};
var tileLayer = mapTileService.createTileLayer(
'maptile',
'reduced.day',
256,
'png8',
parameters
);
map.setBaseLayer(tileLayer);
}
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}'
})
});
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);
});
}
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).