I created a map and added a MapImage trough a MapImageLayer. Now I want to rotate the image by a certain angle on the map. How is this possible?
Or is there an other way to add a rotated image to a map?
var map;
require(["esri/geometry/Extent", "esri/geometry/geometryEngine", "esri/layers/MapImageLayer", "esri/layers/MapImage",
"esri/map", "dojo/domReady!"
], function(Extent, geometryEngine, MapImageLayer, MapImage, Map) {
map = new Map("map", {
basemap: "topo",
center: [-80.93, 31.47],
zoom: 4
});
var mil = new MapImageLayer({
'id': 'image_layer'
});
var mi = new MapImage({
'extent': {
'xmin': -8864908,
'ymin': 3085443,
'xmax': -8062763,
'ymax': 3976997,
'spatialReference': {
'wkid': 3857
}
},
'href': 'https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png'
});
mil.addImage(mi);
map.addLayer(mil);
});
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<!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>Simple Image Service</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" />
<script src="https://js.arcgis.com/3.16/"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Well, Using Css we can try to rotate the image.
However esri esri/layers/MapImageLayer expect className property where you can pass your expected css properties.
This CSS properties applies on the whole layer not only at one image.
Below running code will explain how to achieve this:
var map;
require(["esri/geometry/Extent", "esri/geometry/geometryEngine", "esri/layers/MapImageLayer", "esri/layers/MapImage",
"esri/map", "dojo/domReady!"
], function(Extent, geometryEngine, MapImageLayer, MapImage, Map) {
map = new Map("map", {
basemap: "topo",
center: [-80, 25],
zoom: 4
});
var mil = new MapImageLayer({
'id': 'image_layer',
'className':'rotateClass'
});
var mi = new MapImage({
'extent': {
'xmin': -8864908,
'ymin': 3085443,
'xmax': -8062763,
'ymax': 3976997,
'spatialReference': {
'wkid': 3857
}
},
'href': 'https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png'
});
mil.addImage(mi);
map.addLayer(mil);
});
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.rotateClass {
-ms-transform: rotate(15deg) !important; /* IE 9 */
-webkit-transform: rotate(15deg) !important; /* Chrome, Safari, Opera */
transform: rotate(15deg) !important;
}
<!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>Simple Image Service</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" />
<script src="https://js.arcgis.com/3.16/"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Hope this will help you :)
Related
everyone, I have uploaded my google map KML file to my website then I have used google map javascript API key. if you notice once you run the map you will see all my markers in white( transparent ) is there a way to have my map exactly the same way like I had it before saving. the code below, Thank you in advance:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(35.5715, -97.66704),
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://rogerslimos.com/KML.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Below is my code minus the google map key. I do not get an error and I also do not get a map. What have I missed? You will have to add your on map key to try it you can get that here.
https://developers.google.com/maps/documentation/javascript/get-api-key
<!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">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<title>Test Map</title>
</head>
<body>
<canvas id="map_canvas" width="800" height="auto"></canvas>
<script >
function initMap() {
var map;var elevator;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(39.8403, -88.9548),
mapTypeId: 'roadmap',
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Decatur, Illinois'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x]
+ '&sensor=false', null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map,
});
console.log(p.lat);
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY GOES HERE=initMap"></script>
</body>
</html
This is just a quick and silly idea - but have you tried giving it a explicit height? Mine wouldn't show without that.
ie
height="400px"
Change <canvas id="map_canvas" width="800" height="auto"></canvas> to <div id="map_canvas" style="width: 800px; height: 500px;"></div>. You have to set the height auto will not work.
Also you need to run the initMap function by calling initMap();
How can I reference dojo methods in Dart? I am specificaly trying to use ESRI's Javascript API, which is built on top of dojo within dart by referencing Google's article on on javascript/Dart interoperability
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Home Extent</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="//js.arcgis.com/3.8/"></script>
<script>
require([
"esri/map",
"esri/dijit/HomeButton",
"dojo/domReady!"
], function(
Map, HomeButton
) {
var map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="HomeButton"></div>
</div>
</body>
</html>
I think I have a good grasp on how to call methods and convert objects but I can't figure out how to call dojo methods (specifically the Dojo 1.7+ method), in this case "requires".
With dart:js the following should work :
import 'dart:js' as js;
main() {
js.context.callMethod('require', [new js.JsArray.from(["esri/map",
"esri/dijit/HomeButton", "dojo/domReady!"]), (Map, HomeButton) {
var map = new js.JsObject(Map, ["map", new js.JsObject.jsify({
'center': [-56.049, 38.485],
'zoom': 3,
'basemap': "streets"
})]);
var home = new js.JsObject(HomeButton, [new js.JsObject.jsify({
map: map
}), "HomeButton"]);
home.callMethod('startup');
}]);
}
Trying to replicate Google's "Hello World" for Google Maps. Here is my cljs code:
(ns myapp.core)
(def *map* nil)
(def my-opts
{"zoom" 8
"mapTypeId" google.maps.MapTypeId.ROADMAP
"center" (google.maps.LatLng. -34.397, 150.644)})
(defn map-load []
(let [elem (.getElementById js/document "map-canvas")]
(set! *map* (google.maps.Map. elem my-opts))))
(google.maps.event.addDomListener js/window "load" map-load)
And the HTML:
<!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 }
#map-canvas { height: 100% }
</style>
</head>
<body>
<div id="map-canvas" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script src="myapp.js" type="text/javascript"></script>
<script type="text/javascript">goog.require("myapp.core");</script>
</body>
</html>
This yields a blank, slightly brownish screen and no errors. But no map displays.
Here is the Google Hello World code, which works fine. I cannot figure out the difference between the two.
<!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 }
#map-canvas { height: 100% }
</style>
</head>
<body>
<div id="map-canvas"/>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
as you can see in Himera, when you need interoperability you have to perform some translations between js and clj, through js->clj or clj->js functions
;; ClojureScript records aren't exactly
;; compatible with pure JavaScript
;;
;; Enhance JavaScript objects to ClojureScript
;; records for additional capabilities.
;;
;; Then do something on each element.
;;
;; Then convert back to plain JavaScript.
(defn get-names [people]
(let [people (js->clj people)
names (map "name" people)]
(clj->js names)))
Then, you only have to change this line
(set! *map* (google.maps.Map. elem my-opts))
for this other
(set! *map* (google.maps.Map. elem (clj->js my-opts)))
And I've found out an interesting project about cljs and gmaps maybe it helps you
I prepared a simple page by using the data of a fusion table. ( FusionTablesLayer with Google Maps JavaScript API v3 ) but the map is not displayed. You can see the page here: http://www.siterary.com/0test.html . What's the problem ? The code is as below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>test</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBK_ErFIm-CYBsslK_9ZB6m0wPV197UaJg&sensor=false"></script>
<script>
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location' ,
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<B>MAP</B> <BR>
<div id="map_canvas"></div>
</body>
</html>
The file "/maps/documentation/javascript/examples/default.css" doesn't exist on your site. Your map doesn't have a valid size.
Working version
code snippet:
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<B>MAP</B>
<BR>
<div id="map_canvas"></div>