I am trying to load an ESRI Tile Layer within an HTML page but for some reason the map isn't displaying.
It should be a straightforward process and I cannot identify what the issue is (I receive no error messages within the console window).
Any suggestions?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Load a basic WebMap - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(TileLayer, Map, MapView) {
var layer = new TileLayer({
url:
"https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
});
var map = new Map({
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Because your imports order is wrong. You should change this line
function(TileLayer, Map, MapView)
to
function(Map, MapView,TileLayer) {
https://jsfiddle.net/h31m5ub7/
Full code:;
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Load a basic WebMap - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(Map, MapView,TileLayer) {
var layer = new TileLayer({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
});
var map = new Map({
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Related
I am self-studying Vue.js. I am using v-bind to add the highlight class to the span element, which is supposed to add newBorder style to the element, but the style doesn't get applied.
<!DOCTYPE HTML>
<html>
<head>
<title>Intro to v-bind</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.container {
background: #cecece;
}
.newBorder {
border: 5px solid yellow;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
<span v-bind:class="{loadClass,highlight}">
look at me!
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
loadClass: 'container',
highlight: 'newBorder'
}
});
</script>
</body>
</html>
Appreciate it if you can point out my mistake.
Thanks
Just change the class binding the array syntax instead of object :
<span v-bind:class="[loadClass,highlight]">
<!DOCTYPE HTML>
<html>
<head>
<title>Intro to v-bind</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.container {
background: #cecece;
}
.newBorder {
border: 5px solid yellow;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
<span v-bind:class="[loadClass,highlight]">
look at me!
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
loadClass: 'container',
highlight: 'newBorder'
}
});
</script>
</body>
</html>
I'm new at Ionic. I'm try to setup a navigation bar with an icon and a text. With this code, I have both:
<style>
.title-image {
height : 30px;
width : 30px;
}
</style>
<ion-view>
<ion-nav-title>
<img class = "title-image" src='./img/soloLogo.png'><span> Aree di competenza</span>
</ion-nav-title>
</ion-view>
My problem is the icon is too up. How can I change the position only of the icon or only of the text? Because I only found how to move both, but not only 1 of them.
I'm new at Ionic, so if there is an easy solution, say it to me! :D
You can add to your CSS a vertical-align:middle;
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('onepage', {
url: '/1',
templateUrl: 'onepage.html'
})
$urlRouterProvider.otherwise("/1");
})
.title-image {
height: 30px;
width: 30px;
vertical-align: middle;
margin-top: -3px;
}
.title-text {
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="onepage.html" type="text/ng-template">
<ion-view title="onepage">
<ion-nav-title>
<img class="title-image" src='./img/soloLogo.png'><span class="title-text"> Aree di competenza</span>
</ion-nav-title>
<ion-content class="padding">
<h3>Bla bla bla</h3>
<p>Bla bla bla</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
The following code builds 3 datagrids, 2 via markup and one via code.
When you press the "autoheight!" button only the markup datagrids resize.
I don't understand why the code datagrid does not work. As far as i can see, the same attributes are being initialized.
Thanks
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes /claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);</script>
<meta charset="UTF-8">
<title>alubia</title>
<script type="text/javascript">
var test_store;
var layout = [
{name:"id", field:"id", width: '165px', noresize: 'true'},
{name:"data", field:"data", width: '125px', noresize: 'true'}
];
function loadData(gridId, divId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var mi_data = {
items : [],
identifier:"id"
};
for (var i = 0; i < 22; i++) {
mi_data.items.push({id: ""+i, data:"111 ! "+ i});
}
test_store = new ItemFileWriteStore({data: mi_data});
if (divId != null) {
var grid = new DataGrid({
id : gridId,
store : test_store,
structure : layout,
rowSelector : '0px',
autoHeight : false
});
grid.placeAt(divId);
grid.startup();
}
});
}
function fitHeight(gridId) {
var grid = dijit.byId(gridId);
grid.set('autoHeight', true);
grid.set('autoWidth', false);
grid.update();
}
loadData("grid", null);
loadData("grid2", "grid2Div");
loadData("grid3", null);
</script>
</head>
<body class="claro" style="font-family:sans-serif; font-size:12px;">
<button onclick="fitHeight('grid'); fitHeight('grid2'); fitHeight('grid3');">autoheight!</button>
<div id="grid2Div" style="height: 7em;" ></div>
<div id="grid" style="height: 7em;" data-dojo-id="grid" dojoType="dojox.grid.DataGrid" autoHeight="false" store="test_store" structure="layout" ></div>
<div id="grid3" style="height: 7em;" data-dojo-id="grid3" dojoType="dojox.grid.DataGrid" autoHeight="false" store="test_store" structure="layout" ></div>
</body>
</html>
again, dojo is a horrible tool. going to datatables (jquery plugin). the sun shines again.
i am new to dojo and i am trying to make a button with an image, but the image does not show, besides, when one clicks the button, it correctly shows the "hi" alert.
the "zoom_in.png" image is right in the same directory with the html. And firebug shows no errors or warnings.
Update. thanks to ed, i managed to get it working via the declarative approach
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>require(["dojo/parser", "dijit/form/Button"]);</script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 25px;
width: 25px;
text-align: center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button">
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
alert( "Thank you! ");
});
</script>
</button>
<div id="result2"></div>
</body>
</html>
However, programatically, the problem persists
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 250px;
width: 250px;
text-align: center;
background-repeat: no-repeat;
}
</style>
<script>
require([
"dijit/form/Button",
"dojo/domReady!"
],
function(Button) {
new Button({
title: 'Zoom in', iconClass:'zoom_in_icon',
onClick: function() { alert("hi"); }}, "zoom_in").startup();
});
</script>
</head>
<body>
<button id="zoom_in" type="button"></button>
</body>
</html>
thanks
If you want to create the button programatically you need to call startup() on the new Button, and you don't need the data-dojo-type="dijit/form/Button" or the parse in the html, if you want to create it declaratively you don't need the new button, but you need to set the icon in the html.
See the Programatic example here:
http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html
Hi I have a simple one as shown below that displays bordercontainer and contentpane.
I do not understand why the bordercontainer's id is registered twice since I only have one
id defined for bordercontainer.
The error stated: Error: Tried to register widget with id==main_bContainer but that id is already registered
Please advise where I got it wrong.
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../dojo1_8/dijit/themes/soria/soria.css"/>
<link rel="stylesheet" href="../common.css"/>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 5px;
padding: 0px;
overflow: hidden;
}
</style>
</head>
<body class="soria">
<div id="main_bContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'">
<div class="cP_Left" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
Content Pane A
</div>
<div class="cP_Right" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
Content Pane B
</div>
</div>
</body>
<script>
var dojoConfig =
{
parseOnLoad: true,//replace web controls based on theme soria
isDebug: true,//true for debuggin with aid from FireBug, Always set it to false, to avoid overhead
async: true,//
locale : "en-us"//
};
</script>
<script src='../dojo1_8/dojo/dojo.js'></script>
<script>require(["dojo/parser",
"dojo/ready",
"dojo/request",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(parser, ready, request)
{ready(function()
{parser.parse();
});
});
</script>
</html>
Thanks
Clement
Becuase you have parse() its 2 times.
Here dojoConfig = { parseOnLoad: true };
and here parser.parse();
Just parse only one the problem will solve.