When i use an SVG as layer, i have set imageSize but it doesn't work on IE11.But on IE10,it works.
openlayers version: 4.6.5.
here is my demo.
https://lucas0819.github.io/
here is my code.
var imgWidth = 1132;
var imgHeight = 804;
var center = [0, 0];
var extent = [-566000, -402000, 566000, 402000];
var map = new ol.Map({
view: new ol.View({
center: center,
zoom: 7
}),
target: 'map',
controls: [],
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg',
imageSize: [imgWidth, imgHeight],
imageExtent: extent
})
})
]
});
<div id="map" class="map"></div>
<link href="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js"></script>
It's because on IE11, it can't get image's height when create an element by new Image();
To get image's height i rewrite function defaultImageLoadFunction in options:
imageLoadFunction: function (image, src) {
image.getImage().src = src;
image.getImage().width = imgWidth;
image.getImage().height = imgHeight;
}
Related
I need the explanation of proper implementation of Graphic and GraphicLayer into my arcgis map intergation
{ <script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/graphic",
"esri/views/MapView",
"esri/geometry/Point",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"esri/layers/GraphicsLayer",
"esri/dijit/BasemapToggle",
"esri/dijit/HomeButton"],
function (Map, MapView, Point, Graphic, GraphicsLayer,
PictureMarkerSymbol) {
var map = new Map({
basemap: "hybrid"
});
on(map, "load",addgraphics);
var view = new MapView({
container: "viewDiv",
map: map,
center: [72.952335,19.180190],
zoom: 15
});
var marker = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 32, 32);
function addgraphics(){
var markerPoint = new Point([72.952335,19.180190]);
var storepoint = new Graphic(markerPoint,marker);
var layer = new GraphicsLayer();
layer.add(storepoint);
view.addLayer(layer);
}
});
}
I expect the output should a map with the marker on the specified Latitude and Longitude.
The Output is the blank blank, which is i think wrong.
Check this example. https://codepen.io/mcantonbul/pen/vYBdVmQ
The error is that the layers are added to the "Map" object, not "MapView" object.
view.addLayer(layer);
to
map.add(layer);
and
var markerPoint = new Point([72.952335,19.180190]);
to
var markerPoint = new Point({x:72.952335,y:19.180190});
I am new to programming and wondering if someone can help me in writing a simple global function to plot a circle based on radius and a center point (lat,long). Basically, i need function that uses variables such as x,y,r to plot a circle using ESRI javscript api 4.x.
<script src = 'https://js.arcgis.com/4.5/init.js'></script>
<link rel = "stylesheet" href
"https://js.arcgis.com/4.5/esri/css/main.css">
I tried many things including the tutorial samples available on ESRI website but nothing worked for me.
<script>
let mapview;
let map;
let layer;
let r;
let Request;
let selectedService;
let Graphic;
let Circle
const DEFAULT_BASEMAP = "streets"
const DEFAULT_PAGE_SIZE = 100;
//second commit
require (["esri/Map",
"esri/views/MapView",
"esri/request",
"esri/layers/MapImageLayer",
"esri/widgets/Legend",
"esri/widgets/Search",
"esri/Graphic",
"esri/geometry/Geometry",
"esri/geometry/Polygon",
"esri/geometry/Circle"],
function(Map,
MapView,
CircleClass,
esriRequest,
MapLayer,
Legend,
Search,
GraphicClass, Geometry, Polygon)
{
Request= esriRequest;
Graphic = GraphicClass;
Circle=CircleClass;
map = new Map({basemap:DEFAULT_BASEMAP})
let viewoptions = {container: "upright", map: map,
center: [-122.388, 37.768], scale: 10000}
mapview = new MapView(viewoptions);
});
function drawPoint (x,y) {
let p = {
type: "point",
longitude: x,
latitude: y
}
let s = {
type: "picture-marker",
url:"CMS.png",
width: "40px",
height: "80px"
}
let graphic = new Graphic({geometry: p, symbol: s})
mapview.graphics.add(graphic);
}
function drawEvent (x,y) {
let p = {
type: "point",
longitude: x,
latitude: y
}
let s = {
type: "simple-marker",
color: getRandomColor(),
size: 60
}
let graphic = new Graphic({geometry: p, symbol: s})
mapview.graphics.add(graphic);
}
/* Here is the function i want to create so i can call elsewhere*/
function drawCircle (x,y,r) {
}
</script>
The "Circle" object can be created by taking the center point and radius information in the constructor method.
Example app:
https://codepen.io/mcantonbul/pen/pozPQqe
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Circle",
"esri/geometry/Point",
"esri/Graphic"
], function(Map, MapView, Circle, Point, Graphic) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});
view.on("click", function(event) {
drawCircle(event.mapPoint.x, event.mapPoint.y, 200000);
});
var fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [227, 139, 79, 0.8],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
function drawCircle(x, y, r) {
var centerPoint = new Point({
x: x,
y: y,
spatialReference: view.spatialReference
});
var myCircle = new Circle({
center: centerPoint,
radius: r
});
var circleGraphic = new Graphic({
geometry: myCircle,
symbol: fillSymbol
});
console.log(myCircle);
// Add the graphics to the view's graphics layer
view.graphics.add(circleGraphic);
}
Is there any way to make the centered point to move whilst dragging the map? It seems currently its not possible to add graphics nor remove them whilst dragging happens.
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/core/watchUtils",
"dojo/domReady!"
], function(
Map,
MapView,
Graphic,
watchUtils
){
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
container: "map",
map: map,
constraints: {
rotationEnabled:false
}
});
var addPoint = function(point){
view.graphics.removeAll();
var graphicPoint = {
type: "point",
latitude: point.latitude,
longitude: point.longitude
};
var markerSymbol = {
type: "simple-marker",
color: [85,139,197],
outline: {
color: [255,255,255],
width:2
}
};
var pointGraphic = new Graphic({
geometry: graphicPoint,
symbol: markerSymbol
});
view.graphics.add(pointGraphic);
};
var centerPoint = function(){
var point = view.center;
var input = document.getElementById("myInput");
input.value = point.latitude.toFixed(5) + " " + point.longitude.toFixed(5);
addPoint(point);
};
var showCenterCoords = function(){
centerPoint();
view.on("pointer-move", function(e){
centerPoint();
});
};
view.when(function(){
showCenterCoords();
});
});
https://jsfiddle.net/wrtqn2e3/3/
Im using Esri Js API 4.8.
If you look at the INPUT window, you can see that the "pointer-move" event triggers, because coordinates do refresh even on dragging.
Is there a possible workaround for this to happen?
Thanks in advance.
I have created a bitmap using an image from the queue. Next, I am trying to change the image by updating the image.src property but it isn't working because it expects a path to the image's location. How can I change the first image to the second one in this scenario. I assume that the transition will be smooth because the images are already loaded.
var queue = new createjs.LoadQueue();
queue.on("complete", loaded);
queue.loadManifest([{
id: "one",
src: "image1.png"
},
{
id: "two",
src: "image2.png"
}
]);
var stage = new createjs.Stage('canvas'),
img1 = queue.getResult("one"),
img2 = queue.getResult("two");
var changingImage = new createjs.Bitmap(img1);
stage.addChild(childImage);
stage.update();
function changeImage() {
changingImage.image.src = img2;
stage.update();
}
Upon calling the function changeImage() the image must change in changingImage.
I made small example you can use :)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
var stage,queue;
function init()
{
stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(12); //set some FPS
createjs.Ticker.addEventListener("tick", stage); //set autiomatic refresh, so we don't need to use stage.update() frequently
queue = new createjs.LoadQueue();
queue.on("complete", loaded);
queue.loadManifest(
[
{
id: "one",
src: "image1.png"
},
{
id: "two",
src: "image2.png"
}
]);
}
function loaded()
{
var img1 = queue.getResult("one");
var img2 = queue.getResult("two");
var someBitmap = new createjs.Bitmap(img1);
stage.addChild(someBitmap); //first image is visible now
//let's wait for a second and then call the function
//img2 is reference to the second image
setTimeout(function(){changeImage(someBitmap,img2)},1000);
}
function changeImage(bitmap,img)
{
bitmap.image=img; //so image is changed
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>
I am migrating from V2 to V3 on google map with multiple markers and info windows and have the map working fine, when a marker is clicked the infowindow opens and close fine.
Beside the map I am doing a list of all points (markers) in a regular text link format, when a user click "cinema" for instance the corresponding infowindow opens up. I have this working but with problems. Firstly, the map itself does not move to open the infowindows which can then be half hidden and when clicking to close the infowindows, it it doesn't.
On version 2 I used Loughcrew to do this.
Here is script I have at the moment:
<div id="map" style="width: 500px; height: 500px; border:solid 1px black; "></div>
<script type="text/javascript">
var myLatlng = new Array();
var marker = new Array();
var infowindow = new Array();
function initialize() {
//set the map options
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(53.50046357326504,-6.8280029296875),
streetViewControl: true,
overviewMapControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
myLatlng[0] = new google.maps.LatLng(53.738315087044704,-7.80029296875);
//marker
marker[0] = new google.maps.Marker({
position: myLatlng[0],
map: map,
icon: 'bus.png',
title:"This is test 1"
});
infowindow[0] = new google.maps.InfoWindow({
content: 'Hey, here is come info'
});
google.maps.event.addListener( marker[0], 'click', function() {
infowindow[0].open(map, marker[0]);
});
myLatlng[1] = new google.maps.LatLng(53.12633883947352,-7.3443603515625);
//marker
marker[1] = new google.maps.Marker({
position: myLatlng[1],
map: map,
icon: 'tennis-sports.png',
title:"This is another test again"
});
infowindow[1] = new google.maps.InfoWindow({
content: 'And more info here!'
});
google.maps.event.addListener( marker[1], 'click', function() {
infowindow[1].open(map, marker[1]);
});
/********************* end of markers ********************/
}//end initialize
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=xxxxxxxx&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
Test link
try like this:
Test link
function openInfoWindow(i) {
infowindow[i].open(map, marker[i])
map.setCenter(marker[i].getPosition())
}