Hello, i'm trying to use MapImageLayer instead of basemap, but it doesn't work.
<!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>Map Edit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style>
#info {
top: 20px;
color: #444;
height: auto;
font-family: arial;
right: 20px;
margin: 5px;
padding: 10px;
position: absolute;
width: 115px;
z-index: 40;
border: solid 2px #666;
border-radius: 4px;
background-color: #fff;
}
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
button {
display: block;
}
</style>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map, tb;
require([
"esri/map",
"esri/layers/MapImageLayer",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/geometry/webMercatorUtils",
"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map, MapImageLayer,Draw,
SimpleMarkerSymbol, SimpleLineSymbol,
PictureFillSymbol, CartographicLineSymbol,
Graphic, webMercatorUtils,
Color, dom, on
) {
map = new Map("mapDiv", {
basemap: "osm",
center: [23.354527,54.556371],
zoom:14
});
/* DOESN'T WORK
var layer = new MapImageLayer({
url: "https://www.maps.lt/arcgis/rest/services/mapslt/MapServer"
});
map.add(layer);
var view = new MapView({
container: "viewDiv",
map: map,
center: [23.675000, 54.665000],
zoom: 14
});
*/
map.on("load", initToolbar);
// lineSymbol used for freehand polyline, polyline and line.
var lineSymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 10,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_MITER, 5
);
// fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
// the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
var fillSymbol = new PictureFillSymbol(
"images/mangrove.png",
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color('#000'),1
), 42, 42
);
function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);
// event delegation so a click handler is not
// needed for each individual button
on(dom.byId("info"), "click", function(evt) {
if ( evt.target.id === "info" ) {
return;
}
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
});
}
function addGraphic(evt) {
//deactivate the toolbar and clear existing graphics
tb.deactivate();
map.enableMapNavigation();
// figure out which symbol to use
var symbol = fillSymbol;
map.graphics.add(new Graphic(evt.geometry, symbol));
evt.geometry = webMercatorUtils.webMercatorToGeographic(evt.geometry);
var obj=evt.geometry.rings;
punkty="";
for ( var path = 0; path <obj.length; path ++ ) {
//For each point in the path...
for ( var pt = 0; pt < obj[path].length; pt++ ) {
punkty+=obj[path][pt][0].toFixed(6)+' \n';
punkty+=obj[path][pt][1].toFixed(6)+' \n';
}
punkty+='#\n';
}
document.getElementById('cords').value += punkty;
}
});
</script>
</head>
<body>
<div id="info">
<button id="Polygon">New polygon</button>
</div>
<div id="mapDiv"></div>
</body>
</html>
I want to have only one basemap (MapsLT/MapServer), but if will be added layer, will be ok. It is possible to do thist? If yes - how to do this?
Solved! Go to Solution.
I don;t see in the docs where it mentions that the baseLayers will autocast so I change your code below and it worked fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/layers/TileLayer",
"esri/Basemap",
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(TileLayer, Basemap, Map, MapView) {
var layer = new TileLayer({
url: "https://www.maps.lt/arcgis/rest/services/mapslt/MapServer"
});
var myBasemap = new Basemap({
baseLayers: [layer],
thumbnailUrl: "https://www.example.com/images/thumbnail_2014-11-25_61051.png",
title: "Custom Basemap",
id: "myMap"
});
var map = new Map({
basemap: myBasemap
});
var view = new MapView({
container: "viewDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
center: [54, 23], // Sets center point of view using longitude,latitude
zoom: 4
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
This sample may help you
Didn't help. The problem is: when added new layer, I can't add new polygon (click on button).
Azariasz,
You are attempting to use MapImageLayer which is a esri JS API 4.x class when the rest of your code is 3.x. You can not mix 3.x api classes and 4.x classes.
The 3.X API has no concept of a MapView, which you reference in your code. This is a new concept with with 4.X.
Your map service has a spatial reference with wkid 2600 so you can't deal with WGS84 geometries in the client. You should work with the projected coordinate system of the basemap. You can add your basemap like this: https://codepen.io/solowt/pen/YrjxoY?editors=1000
Wow, you helped me a lot! Thank you! But why the map isn't in the center? No matter I'm writing in:
basemap: "myCustomBasemap",
center: [23.354527,54.556371],
zoom:5
nothing happens 😞
When I use a custom basemap I specify the center as a point class using the spatial refrence of my custom basemap:
map = new Map("map", {
zoom: 1,
logo: false,
showAttribution: false,
slider: false,
center: new Point({"x": 654661.637354886, "y": 1187279.83575856, "spatialReference": {"wkid": 102629}})
});
I emigrated to v4.5, did as simple as possible, but isn't work. I do not understand this. I just want to use a basemap, add some polygons and that's it. Must it be so complicated? :'-(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/Basemap",
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Basemap, Map, MapView){
var myBasemap = new Basemap({
baseLayers: [{
url: "https://www.maps.lt/arcgis/rest/services/mapslt/MapServer"
}],
thumbnailUrl: "https://www.example.com/images/thumbnail_2014-11-25_61051.png",
title: "Custom Basemap",
id: "myMap"
});
var map = new Map({
basemap: myBasemap
});
var view = new MapView({
container: "viewDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
center: [54, 23] // Sets center point of view using longitude,latitude
zoom: 4, // Sets zoom level based on level of detail (LOD)
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
In 4.5 it looks like you need to explicitly create a TileLayer using your URL like this: https://codepen.io/solowt/pen/wrbWgd?editors=1010
I don;t see in the docs where it mentions that the baseLayers will autocast so I change your code below and it worked fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/layers/TileLayer",
"esri/Basemap",
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(TileLayer, Basemap, Map, MapView) {
var layer = new TileLayer({
url: "https://www.maps.lt/arcgis/rest/services/mapslt/MapServer"
});
var myBasemap = new Basemap({
baseLayers: [layer],
thumbnailUrl: "https://www.example.com/images/thumbnail_2014-11-25_61051.png",
title: "Custom Basemap",
id: "myMap"
});
var map = new Map({
basemap: myBasemap
});
var view = new MapView({
container: "viewDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
center: [54, 23], // Sets center point of view using longitude,latitude
zoom: 4
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>