Is there a way to 'link' the extents / zooms of multiple google map instances?
I'm working of the dojo example seen here (Creating Google Maps' interface in Dojo) and have modified the code in order to have a second instance of the base map in a new pane. I will eventually be adding different kml layers of info to the two panes etc but for now i would like to find a way to link the view and extent of the two maps. i.e. any pan / zoom performed on either of the maps would be reproduced in the other
here's my code so far (pretty new to javascript so please be gentle!!)
<html>
<head>
<title>dojo/google map example</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/resources/dojo.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dijit/themes/claro/claro.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script djConfig="parseOnLoad:true" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require( "dijit.layout.BorderContainer" );
dojo.require( "dijit.layout.ContentPane" );
dojo.addOnLoad( function intialize() {
var myLatlng = new google.maps.LatLng(48,-80.624207);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions);
});
});
</script>
</head>
<body class="claro" style="height:100%;padding:0;margin:0; overflow:hidden">
<div dojoType="dijit.layout.BorderContainer" style="height:100%">
<div dojoType="dijit.layout.ContentPane" region="left" style="width:15%">
Left search thing
</div>
<div dojoType="dijit.layout.ContentPane" region="top" style="height:2%">
Top
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="overflow:hidden" >
<div id="map_canvas" style="height:100%; width:100%"></div>
</div>
<div dojoType="dijit.layout.ContentPane" region="right" style="width:40%" >
<div id="map_canvas1" style="height:100%; width:100%"></div>
</div>
</div>
</body>
</html>
It's quit easy. You may bind a property of a MVCObject to a property of another MVCObject.
The bounded property of Object#1 will be set to the property of Object#2 everytime the property in Object#2 changes.
Maps-instances are MVCObjects, so all you have to do is to bind zoom and center of map to zoom and center of map1:
map.bindTo('center',map1,'center');
map.bindTo('zoom',map1,'zoom');
Note: there is an syntax-error in your script, remove the }); at the end
Related
i have published suitability map on arc server. but my map does not display, i have followed arcgis java script api example. i want to display suitability map of the desired area. when user click on the map pop window display the analysis result here is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Create web map from id</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"dojo/domReady!"
], function(
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar
) {
ready(function(){
parser.parse();
//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0";
arcgisUtils.createMap("map").then(
function(response){
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
var map = response.map;
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legendDijit.startup();
});
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
<div id="legend"></div>
</div>
</div>
</body>
</html>
well, as i can see the question and code you added above below are this things you want to achieve (correct me if i am wrong)-
create a map
add a published layer(arcgis layer url) on the map
show popup on the click of published gis layer.
As your example says you don't have a webmap id so you not need to worry about that.
Below is the working example for that-
require([
"dojo/dom",
"dojo/dom-construct",
"esri/map",
"esri/dijit/InfoWindow",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"dojo/string",
"dojo/domReady!"
], function(
dom,
domConstruct,
Map,
InfoWindow,
FeatureLayer,
InfoTemplate,
string
) {
var infoWindow = new InfoWindow({}, domConstruct.create("div"));
infoWindow.startup();
// **** update center according to your feature layer url
var map = new Map("mapDiv", {
center: [-122.41, 37.78],
zoom: 17,
basemap: "topo",
infoWindow: infoWindow
});
var template = new InfoTemplate();
//*** update the title field name according to your feature layer url
template.setTitle("<b>${qAddress}</b>");
template.setContent("${*}");
// ****** replace with your Feature layer url "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0"
var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0",{
infoTemplate: template,
outFields: ["*"]
});
map.addLayer(featureLayer);
map.infoWindow.resize(180, 175);
});
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#fff;
overflow:hidden;
}
#header{
border:solid 2px #AAc4c4;
background:#fff;
color:#749749;
border-radius: 4px;
font-size:14px;
padding-left:20px;
font-weight:700;
}
#map{
padding:1px;
border:solid 2px #AAc4c4;
border-radius: 4px;
}
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<script>var dojoConfig = {
parseOnLoad: true
};
</script>
<script src="https://js.arcgis.com/3.20/"></script>
<body>
<div id="mapDiv"></div>
</body>
Note- Update the sample code as per comments in it.
If you want more info let me know i will update the answer accordingly.
Hoping this will help you :)
Well, you apparently adapted this sample:
https://developers.arcgis.com/javascript/3/jssamples/ags_createwebmapid.html
I am not sure if this is what you want, as using webmaps needs some licensing, I guess. In any case, you need to change few lines in your example. Instead of
<link rel="stylesheet" href="css/layout.css">
you should have
<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/ags_createwebmapid/css/layout.css">
to load the original CSS file. You should make your own copy and load it from your server.
More important is to change this line:
arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0";
which should be:
arcgisUtils.arcgisUrl = "https://www.arcgis.com/sharing/rest/content/items/";
or, as the sample suggests, path with YOUR portal URL.
And, last but not least, the next line must be something like:
arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20","map").then(
I Created World Map Using leafletjs And Now Trying To Display Data From https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json As Circle My Data Distribution Output Looks Like
As Of Now Considering Radius As Constant
But It Should Look Like
As Data Is Distributed Across Map
My Codes Are
// load and display the World
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json", function(error, data) {
var map = L.map('map', {
center: [20.0, 5.0],
minZoom: 2,
zoom: 2
});
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors | Tiles Courtesy of MapQuest <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
}).addTo(map);
data.features.forEach(function (data2) {
var coordinates = ([+data2.properties.reclong, +data2.properties.reclat]);
var circle = L.circle([coordinates[0],coordinates[1]], 10, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Forced Layout</title>
<meta charset="utf-8" />
<link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/d3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link href="demo.css" rel="stylesheet" />
</head>
<body>
<!--
<div class="mainContainer text-center">
<div id="chart"></div>
</div>
-->
<div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
<script src="../Scripts/jquery-2.2.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="demo.js"></script>
</body>
</html>
Fiddle Link
Instead of this
var coordinates = ([+data2.properties.reclong, +data2.properties.reclat]);
it should have been this
var coordinates = ([+data2.properties.reclat, +data2.properties.reclong]);
When you create a circle in leaflet the first array element is lat second is lon. refer
L.circle([50.5, 30.5], 200).addTo(map);
For latlng object lat comes first then lon refer
working code here
I am looking for a way to rotate the map which does not contain tile in google map api.
Can i use openlayer3 to do this if yes why the sample demonstrated is not working for the below example
<!DOCTYPE html>
<html>
<head>
<title>Rotation example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [1.353199,103.986908],
rotation: Math.PI / 6,
zoom: 10
})
});
</script>
</body>
</html>
what i am doing wrong here why the map itself is not display i am very new to this please say where i am going wrong
The code there works perfectly fine. The map is loading and you can also see that it is rotated as desired, because in the top right corner it shows the control to reset the rotation. This button is only visible when the map is rotated.
It looks like it's not loading, because the center seems to be specified in a wrong way, so it shows a place on the map where there is only water. The coordinates that you specify as the center of the map must be transformed for the projection of the map.
Try to set the map view like this:
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: Math.PI / 6,
zoom: 10,
})
For me following worked.
olMap.getView().rotate( olMap.getView().getRotation() + Math.PI / 4.0);
I am facing a weird issue with Google Map API V3. I had a previous version of the code, which I migrated to new version V3. The extension is XHTML since this particular file is used as a control in other application. I have created a sample code, which when I execute as stand alone runs fine and displays the google map, but when the similar file is called through another application it is causing an issue where map is loaded but is invisible. Just for information i am using this file from Informatica IDD application. Below is a snippet. Looking for any kind of lead.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://maps.googleapis.com/maps/api/js?&3.21&key=AIzaSyBO11CFgFCL8GnV3-tWZyQOmA8mbO9MP8E&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
/* CONSTANTS */
var geocoder = null;
var map = null;
/* INITIALIZATION */
function initialize() {
alert("initialize");
geocoder = new google.maps.Geocoder();
// Draw the map
/*var startPoint = parseCoordinate(VALUE_SITE_COORDINATE);
alert(startPoint);*/
var startPoint = new google.maps.LatLng(24.886, -70.268);
var mapProp = {
center:startPoint,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map =new google.maps.Map(document.getElementById("map_canvas"),mapProp);
alert("after new map");
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
alert("in idle");
});
var bimage = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
// Set up our GMarkerOptions object
//markerOptions = { icon:blueIcon };
var marker = new google.maps.Marker({
position: startPoint,
map: map,
icon: bimage
});
marker.setVisible(true); // visible_changed triggered
marker.setMap(map);
}
//google.maps.event.addDomListener(window, 'load', initialize);
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width:850px;height:850px;">
<!--<div>
<h:form id="geomap">
<div class="title-bar">
<h:outputText value="Geo Fence Maintenance"/>
</div>
<div style="width:50%;float:left;">
</div>
<div style="width:50%;">
</div>
<div style="width:50%;float:left;">
</div>
<div style="width:50%;">
</div>
<div style="width:100%;padding-bottom:10px;">
<div style="float:left;">
</div>
</div>
<div>
<div id="divCoordinates" style="width:200px;height:200px;float:left;padding-top:5px;padding-left:5px;">
</div>
<div>
<div id="map_canvas" style="width:400px;height:400px;"></div>
</div>
</div>
</h:form>
</div>-->
</div>
</body>
</html>
Further Analysis
I think i found the root cause but not the solution. The issue is my google map is being called through JSF. I guess some update in IE11 is breaking the functionality. The similiar problem i have encountered in link below. http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/mapAjax.xhtml It have google map invisible in IE 11 but shows up when it is opened in firefox. I have similiar kind of issue with IE11. Any suggestion how to fix it?
You have "amp;" in your script src url, but I think that is probably as result of your copy/pasting. Definitely check your src url to make sure you are actually loading the google maps api.
My guess is that your real problem is this line:
google.setOnLoadCallback(initialize);
You are not loading the Google API so google.setOnLoadCallack() does not exist when you are calling it.
Add this to your page just before the script tag for the google maps:
<script src="https://www.google.com/jsapi"></script>
You will need to add your API key if you want it to work for your application when it is deployed to your server.
Alternatively, you could put a callback function in the url for the google maps script:
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer></script>
I was working on a solution based on
http://www.giscloud.com/sandbox/jsapi/html5/?mid=11695
On line 15, you can see the import (multi-line for easy reading)
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
Which in the last week started loading v3.10 (release) instead of v3.9 (now frozen).
The problem as you can see from the page is that the canvases are now loaded in the "MapPane" layer well below the other 6 layers (Ref: MapPanes). That layer is not interactive.
Has anyone come across such an issue, or better yet, is using the very solution in the link - and has upgraded it for v3.10?
JS Fiddle
doesn't work (v3.10)
works (v3.9)
More info
In v3.9, the map panes are laid out as
<div .. (parent)
<div .. z-index:100.. > --- << changed to 150
<div .. z-index:101.. >
<div .. z-index:102.. >
<div .. z-index:103.. >
<div .. z-index:104.. >
<div .. z-index:105.. >
<div .. z-index:106.. >
The code in the solution manipulates the z-index of the first pane ("MapPane"), which goes against the API's intentions...
el.map.getDiv().firstChild.firstChild.firstChild.firstChild.style.zIndex=150
My custom solution sets it to 104 instead, as I make use of the overlayMouseTarget (105) and floatPane (106) layers which need to go above it.
In v3.10, they have been rearranged as follows (you can make out the z-indexes 100-106):
<div .. (parent)
<div .. z-index:200.. >
<div .. z-index:101.. >
<div .. z-index:201.. >
<div .. z-index:102.. >
<div .. z-index:103.. >
<div .. z-index:202.. >
<div .. z-index:104.. >
<div .. z-index:105.. >
<div .. z-index:106.. >
<div .. z-index:100.. >
< overlay tile divs > --<< the divs parenting the canvases in the solution
<canvas ... >
I am thinking that the proper "fix" is to get the tiles moved to the floatShadow MapPane, but does it provide the tiling benefits that an OverlayMapType does, which seems to underpin the solution?
Direct access to pane is not better way.
To get panes correctly, your code should like this:
var dummyLayer = new google.maps.OverlayView();
dummyLayer.onAdd = function() {
var panes = this.getPanes();
console.log(panes.mapPane);
panes.mapPane.style.zIndex = 500;
};
dummyLayer.onRemove = function() {};
dummyLayer.draw = function() {};
dummyLayer.setMap(map);
Ok, I post whole code of yours.
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>GIS Cloud HTML5 Canvas Example</title>
<style>
body, html {
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://api.giscloud.com/sandbox/html5c.js"></script>
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"));
map.setZoom(4);
map.setMapTypeId('terrain');
map.setCenter(new google.maps.LatLng(35.818521016151, -100.932382588817));
var dummyLayer = new google.maps.OverlayView();
dummyLayer.onAdd = function() {
var panes = this.getPanes();
console.log(panes.mapPane);
panes.mapPane.style.zIndex = 500;
};
dummyLayer.onRemove = function() {
};
dummyLayer.draw = function() {
};
dummyLayer.setMap(map);
var gcmap = new giscloud.Html5Map(11695, map);
map.overlayMapTypes.insertAt(0, gcmap);
map.overlayMapTypes.insertAt(0, 0);
}
</script>
</head>
<body onload="initialize()">
<div style="text-align:center"><h2>GIS Cloud HTML5 Canvas Example</h2><p>Showing interactive HTML5 vector map overlay hosted on GIS Cloud. The original project is here. </p></div> <div id="map_canvas" style="width: 70%; height: 75%;margin:auto"></div>
<br />
<center>requires HTML5 compatible browser - article & benchmark: rasters vs vectors</center>
</body>
</html>