I am trying to create a popup window in a map. I have tree layers in my program; the first two layers are working; the third layer where I have template is defined doesn't work, though. In the console I get following errors:
Error: Unable to draw graphic (null): Unable to complete operation.
...usePost,v=h.crossOrigin):A=!!h);g=e.mixin({},g);g._ssl&&(g.url=g.url.replace(/^h...
I tried to solve this problem, by adding time between the layers. It didn't work.
Below is my code. Please let me know if I am making any mistake. Thanks!
<!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> Trees Location</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">
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
require(["esri/config", "esri/map","esri/dijit/Popup",
"dojo/dom-construct",
"esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/GeometryService",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/Color",
"dojo/domReady!"],
function (esriConfig, Map,Popup,domConstruct, PopupTemplate, FeatureLayer,SimpleMarkerSymbol, GeometryService, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Color ) {
esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var popupOptions = {
markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
new Color([0, 0, 0, 0.25])),
marginLeft: "20",
marginTop: "20"
};
var popup = new Popup(popupOptions, domConstruct.create("div"));
map = new Map("map", {
center: [-76.756, 40.241],
zoom: 8,
infoWindow: popup
});
var popupTemplate = new PopupTemplate({
title: "{MEMORIAL}",
fieldInfos: [
{
fieldName: "TREEDONOR",
visible: true,
label: "Type"
},
{
fieldName: "TREESPECIES",
visible: true,
label: "Type"
},
{
fieldName: "TREEVARIETY",
visible: true,
label: "Type"
}
]
});
var customBasemap = new ArcGISTiledMapServiceLayer(
"");
map.addLayer(customBasemap);
/* setTimeout(function(){
console.log("pausing a few seconds");
map.addLayer(customBasemap);
},1000); */
var treeLayer = new ArcGISDynamicMapServiceLayer(
"");
// map.addLayer(treeLayer);
setTimeout(function(){
console.log("pausing a few seconds");
map.addLayer(treeLayer);
},1000);
var featureLayer = new FeatureLayer("",
{
infoTemplate: popupTemplate,
outFields: ["TREEDONOR","TREESPECIES","TREEVARIETY", "MEMORIAL"]
});
featureLayer.setDefinitionExpression("MEMORIAL != ''");
map.addLayer(featureLayer);
});
</script>
</head>
<body class="claro">
<div align="center"><strong> Trees Listing </strong><hr>
<i><a target="_self" href="listingtrees.html">Listing</a> | <a target="_self" href="locationtrees.html">Locations </a></i>
</div>
<br>
<div id="map" >
</div>
</body>
</html>
Related
I am trying to resize a canvas element to the width of the window using VueJS. I've seen many examples of this working with vanilla JS, but for whatever reason, with VueJS I can't get the canvas content to re-render.
An example is attached. The example is modified from the vanilla JS version from here: http://ameijer.nl/2011/08/resizable-html5-canvas/
https://codepen.io/bastula/pen/yZXowo
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Canvas Test</title>
</head>
<body>
<div id="app">
<canvas id="image-canvas" ref="imagecanvas" v-bind:width="width" v-bind:height="height" style="
background-color: #000;">
</canvas>
</div>
</body>
</html>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: function () {
return {
height: 512,
width: 512,
margin: 20,
};
},
mounted() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
},
computed: {
canvas: function () {
return this.$refs.imagecanvas;
},
ctx: function () {
return this.canvas.getContext('2d');
}
},
methods: {
handleResize: function () {
// Calculate new canvas size based on window
this.height = window.innerHeight - this.margin;
this.width = window.innerWidth - this.margin;
this.drawText();
},
drawText: function () {
// Redraw & reposition content
var resizeText = 'Canvas width: ' + this.canvas.width + 'px';
this.ctx.textAlign = 'center';
this.ctx.fillStyle = '#fff';
this.ctx.fillText(resizeText, 200, 200);
}
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}
})
</script>
Solved here: https://forum.vuejs.org/t/resize-canvas-element-based-on-window-change-using-vuejs/55497/2?u=bastula
The solution is to use: nextTick.
So instead of this.drawText() in the handleResize method it should be:
this.$nextTick(() => {
this.drawText();
})
Updated working CodePen can be found here.
Is there any html editor like summernote or tinyMCE that allows adding rows and columns from bootstrap?
I have followed #Korgrue advice and I found that I can create custom buttons using summernote too. But my code is putting raw text on the textarea, it doesnt change the html into bootstrap. This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
</head>
<body>
<div id="summernote"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script>
$(document).ready(function() {
var HelloButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-child"/> Hello',
tooltip: 'hello',
click: function () {
// invoke insertText method with 'hello' on editor module.
context.invoke('editor.insertText', '<div class="row">Row</div>');
}
});
return button.render(); // return button as jquery object
}
$('#summernote').summernote({
toolbar: [
['mybutton', ['hello']]
],
buttons: {
hello: HelloButton
}
});
});
</script>
</body>
</html>
Am I missing something?
You can do it in TinyMCE. You have to set up a custom button for the toolbar, and define what content you want it to generate (in html, as a string). Add one for columns, and one for rows. For columns, you will need to define a text field where the user can input the amount of columns and let the onclick handle appending the column count to the html element for you.
https://www.tinymce.com/docs/demo/custom-toolbar-button/
tinymce.init({
selector: 'textarea',
height: 500,
toolbar: 'mybutton',
menubar: false,
setup: function (editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function () {
editor.insertContent(' <b>It\'s my button!</b> '); // <--- this line is where you would define the HTML to use on button click.
}
});
},
content_css: [
'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css'
]
});
I'm trying to print a specific zone on an Arcgis maps with the JS API (not the extend that is displayed).
I didn't find any method or option to do this so I tried to change the extend and then print the map :
var extent = new esri.geometry.Extent(
-620526.0922336339,
5993991.149960931,
108988.90572005256,
6293624.300838808,
myMap.spatialReference
);
myMap.setExtent(extent, true).then(function() {
console.log('setExtend is finished');
var template = new esri.tasks.PrintTemplate();
template.exportOptions = {
width : 500,
height : 500
};
template.format = 'jpg';
template.layout = 'MAP_ONLY';
var params = new esri.tasks.PrintParameters();
params.map = myMap;
params.template = template;
var printTask = new esri.tasks.PrintTask(urlToThePrintServer);
printTask.execute(params);
});
Since setExtent is asynchonous and return a defered I have to use the 'then' method.
I can see the map moving but the defered doesn't seem to works ... (I don't see the console.log()).
is there another way to print a specific extend of a map ?
if not why is the 'then' method never called ?
(I'm using the 3.12 JS API)
Your code looks good to me, though obviously you didn't post all your JavaScript or any of your HTML. Maybe you're not requiring the modules you need. Or maybe your code is trying to run before the map is loaded, though that's unlikely because as you say, the map does move. Or maybe something else is wrong.
I put a full working example at http://jsfiddle.net/06jtccx0/ . Hopefully you can compare that to what you're doing and figure out what is wrong with your code. Here's the same code for your convenience:
<!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 Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var myMap;
var urlToThePrintServer = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
require(["esri/map", "dojo/domReady!"], function(Map) {
myMap = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
myMap.on("load", function(map) {
var extent = new esri.geometry.Extent(
-620526.0922336339,
5993991.149960931,
108988.90572005256,
6293624.300838808,
myMap.spatialReference
);
myMap.setExtent(extent, true).then(function() {
console.log('setExtend is finished');
require([
"esri/tasks/PrintTemplate",
"esri/tasks/PrintParameters",
"esri/tasks/PrintTask"
], function(
PrintTemplate,
PrintParameters,
PrintTask
) {
var template = new PrintTemplate();
template.exportOptions = {
width : 500,
height : 500
};
template.format = 'jpg';
template.layout = 'MAP_ONLY';
var params = new PrintParameters();
params.map = myMap;
params.template = template;
var printTask = new PrintTask(urlToThePrintServer);
printTask.execute(params, function(response) {
console.log("The printed document is at " + response.url);
window.open(response.url);
});
});
});
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I have the following HTML and JS. When i click on the image the images zooms. This is working. But then I zoom out I want to retract the image to the original location when It was loaded.
Consider image being dragged to right a little and then zoomed.
What I want is when its zoomed out its relocated to the original location when it was loaded.
What am I doing wrong? I need the effect this page has here. When you drag the image and release it, it will go to its original position.
JS
var isZoom=1;
var stage=new Kinetic.Stage({
container:'container',
width:700,
height:700,
id:'kineticstage',
name:'kineticstage'
});
var layer=new Kinetic.Layer({});
var group = new Kinetic.Group({
width:700,
height:700,
draggable: true
});
layer.add(group);
// set the images
var pages = ["http://197.242.159.63/reader/demo/img/face.jpg"];
var loadedPage = 0;
function loadPage(pageno){
var imageObj = new Image();
imageObj.onload = function() {
var kimage = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width:700,
height:700
});
// add to layer
group.add(kimage);
stage.add(layer);
};
// load the page image
imageObj.src = pages[pageno - 1];
}
// page 1
loadPage(1);
var tween = new Kinetic.Tween({
node: group,
duration: 1.0,
rotation:0,
scaleX: 1.5,
scaleY: 1.5,
easing:Kinetic.Easings.EaseInOut
});
group.on('dblclick dbltap',function(e){
if(isZoom == 1){
tween.play();
}
else{
tween.reverse();
}
layer.batchDraw();
isZoom = (isZoom>0) ? -1 : 1;
});
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >
<meta name="apple-mobile-web-app-capable" content="yes" >
</head>
<body>
<div id="container"><!-- --></div>
</body>
<script type="text/javascript" language="javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
</html>
Fiddle
Dragging your kinetic group will cause its x,y to change.
To "undo" the drag, just reset the group back to its original x,y position:
In your case, you created the group at its default position of 0,0 so reset like this:
group.setX(0);
group.setY(0);
I've setup a little script for testing JRS and a clientfilter. I've used what I could find on the internet to set it up but it ain't working. I'm trying to perform a client side fetch on a JRS using clientFilter. Nevertheless the JRS is querying the backend in stead of performing the fetch clientsided. I pasted the script below, I hope one of you can explain why it isn't working.
Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="js/dojo-release-1.7.2/dojo/resources/dojo.css"/>
<link rel="stylesheet" type="text/css" href="js/dojo-release-1.7.2/dijit/themes/tundra/tundra.css"/>
<script>
dojoConfig= {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
isDebug: true,
locale: "nl"
};
</script>
<script type="text/javascript" src="js/dojo-release-1.7.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojox.data.ClientFilter");
dojo.require("dojox.data.JsonRestStore");
dojo.require("dijit.form.Button");
myStore = new dojox.data.JsonRestStore({target:"TARGET"});
myStore.fetch();
dojo.ready(function() {
dojo.connect(dijit.byId("query"), "onClick", function() {
myStore.fetch({query:{id:"4"},queryOptions:{cache:true}, onItem: function(item) {console.log(item); }});
});
});
</script>
</head>
<body cllass="tundra">
<button type="button" id="query" data-dojo-type="dijit.form.Button">Query</button>
</body>
I made a jsfiddle that shows how to do this with the new syntax and dojo stores.
http://jsfiddle.net/SgyYW/
require([
"dojo/store/Cache",
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/parser",
"dojo/on",
"dojo/ready",
"dijit/form/Button",
"dijit/registry"
],function(Cache,JsonRest,Memory,parser,on,ready,Button,registry){
console.log('x');
var someData = [
{id:1, name:"One"},
{id:2, name:"Two"},
{id:3, name:"Three"},
{id:4, name:"Four"},
{id:5, name:"Five"}
];
recToQuery = 4;
// recToQuery = 6; // try one that is not in the cache
var memoryStore = new Memory({data: someData});
var restStore = new JsonRest({ target: "/i/dont/exist.json/"});
var myStore = new Cache(restStore, memoryStore);
myStore.query({}); // this will ask for everything and prime the cache
ready(function(){
parser.parse();
var queryBtn = registry.byId("query");
console.log('queryBtn',queryBtn);
on(queryBtn, "click", function() {
console.log('query button clicked',[this,arguments]);
var resultOrPromise = myStore.get(recToQuery);
if (typeof resultOrPromise.then ==='function'){
// it is asking the server
resultOrPromise.then(function(){
console.log('Result from server fetch',arguments);
},function(){
console.log('it queried the server but failed',arguments);
});
}else{
// it is in the cache (from the first query)
console.log('result from cache:',resultOrPromise);
}
});//end connect
}); //end ready
}); //end require