You can find the code in the link below.
Sample running Code
${NAME} in the infoTemplate displays County name.
I want to add a alert box which displays the county name. I can create a alert box but not able to display the county name.
What am I doing wrong?
well, to show alert you have to attach click event on the feature or you have to use any event to propagate alert message.
In Above sample url I used feature layer click event to show "NAME" in the alert.
Below is the working code:
<!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>Class Breaks Renderer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body, #map{
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/InfoTemplate", "esri/symbols/SimpleFillSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/Color", "dojo/dom-style", "dojo/on", "dojo/domReady!"
], function(
Map, FeatureLayer,
InfoTemplate, SimpleFillSymbol,
ClassBreaksRenderer,
Color, domStyle, on
) {
map = new Map("map", {
basemap: "streets",
center: [-98.215, 38.382],
zoom: 7,
slider: false
});
var symbol = new SimpleFillSymbol();
symbol.setColor(new Color([150, 150, 150, 0.5]));
// Add five breaks to the renderer.
// If you have ESRI's ArcMap available, this can be a good way to determine break values.
// You can also copy the RGB values from the color schemes ArcMap applies, or use colors
// from a site like www.colorbrewer.org
//
// alternatively, ArcGIS Server's generate renderer task could be used
var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI");
renderer.addBreak(0, 25, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
renderer.addBreak(25, 75, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
renderer.addBreak(75, 175, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
renderer.addBreak(175, 400, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
renderer.addBreak(400, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
var infoTemplate = new InfoTemplate("${NAME}", "${*}");
var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"],
infoTemplate: infoTemplate
});
featureLayer.setDefinitionExpression("STATE_NAME = 'Kansas'");
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
on(featureLayer, "click", function(evt){
alert(evt.graphic.attributes.NAME)
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
In this code i have used above sample code with feature layer click event.
Hope this will help you :)
Let me know if any clarifications required !
We can access $NAME outside the infotemplate in the following way...
var t = "${NAME}Incidents:";+inc // String substitution method
var content = esriLang.substitute(evt.graphic.attributes,t);
Related
I'm having trouble creating an object using the addObject function in an HTML element in Bubble.io.
I think the problem is related to the passing of arguments between functions (specially the “map” one).
In this example, the whole “map.object” part creates a circle in my map (which is displayed in the HTML element that contains my script). My goal is to have that chunk of code inside the addCircleToMap function, so that whenever a click is registered, the code will run. My problem is that whenever I do that, the addObject function is not recognized (inside of the addCircleToMap). But when I run it as in the example above (outside of said function) it is recognized and creates the circle as needed, but only one time.
If I want it to run inside of the addCircleToMap function, do I need to change anything?
Thank you very much for your help!
<html>
<head>
<title> MY MAP</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
</head>
<style>
#map {width: 800px; height: 600px;}
</style>
<div id="map"></div>
<body>
<script>
function initializeHEREmap(){
var mapContainer = document.getElementById('map'), routeInstructionsContainer = document.getElementById('panel');
let newLat = 19.46291370462809;
let newLng = -99.13708437766161;
const imlService = platform.getIMLService();
const platform = new H.service.Platform({
apikey: '*******************'
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
center: new H.geo.Point(newLat, newLng),
zoom: 12
}
);
window.addEventListener('resize', () => map.getViewPort().resize());
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
const ui = H.ui.UI.createDefault(map, defaultLayers);
setUpClickListener(map, newLat, newLng);
function setUpClickListener(map, newLat, newLng) {
map.addEventListener('tap', function (evt) {
var coord = map.screenToGeo(evt.currentPointer.viewportX, evt.currentPointer.viewportY);
newLat = coord.lat;
newLng = coord.lng;
addCircleToMap(map, newLat, newLng );
});
map.addObject(new H.map.Circle(
{lat:newLat, lng:newLng},
500,
{
style: {
strokeColor: 'rgba(55, 85, 170, 0.6)',
lineWidth: 2,
fillColor: 'rgba(89, 80, 218, 0.7)'
}
}
));
}
function addCircleToMap(map, newLat, newLng ){
//I WANT MY CODE HERE
}
}
</script>
</body>
</html>
I have a feature layer with specific countries on top of another feature layer showing all the countries of the world.
If you click on these specific countries an info window pops up. The info window should show the name of the country. But it doesn't.
The code is as follows. What is wrong with it?
<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>Feature Layer Only Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
require([
"dojo/dom-construct",
"esri/map",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"dojo/domReady!"
], function(
domConstruct,
Map,
InfoTemplate,
FeatureLayer,
Extent
) {
var bounds = new Extent({
"xmin":-20037509,
"ymin":-8283276,
"xmax":20037509,
"ymax":17929239,
"spatialReference":{"wkid":102100}
});
var map = new Map("map", {
extent: bounds
});
var url = "https://services8.arcgis.com/qruYQAspohLtOguC/ArcGIS/rest/services/englishspeakingcountries/FeatureServer/0";
var template = new InfoTemplate("Country", "${ADMIN}");
var fl = new FeatureLayer(url, {
id: "englishspeakingcountries_0",
infoTemplate: template
});
map.addLayer(fl);
var url_2 = "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries/FeatureServer/0"
var fl2 = new FeatureLayer(url_2);
map.addLayer(fl2, 0);
}
);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Using the Network tab in the Chrome developer tools, I found that queries to the feature services returned only the ObjectId field and geometry for each feature. Use the outFields property to fix this:
var fl = new FeatureLayer(url, {
id: "englishspeakingcountries_0",
outFields: "*",
infoTemplate: template
});
I have an image which size is 8576x8576px, and I want to make the coordinates match 1:1. Also I want the coordinates 0,0 in the center of the image (now the center is -128,128). And I want to show the coordinates too. I want to put a locate button for the user insert coordinates and then find them on the map.
Something like this: http://xero-hurtworld.com/map_steam.php
(I am using the same image but bigger). The tile size I made its 268px.
My code so far:
https://jsfiddle.net/ze62dte0/
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js" charset="utf-8"></script>
<script>
function init() {
var mapMinZoom = 0;
var mapMaxZoom = 3;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
window.latLngToPixels = function(latlng){
return window.map.project([latlng.lat,latlng.lng], window.map.getMaxZoom());
};
window.pixelsToLatLng = function(x,y){
return window.map.unproject([x,y], window.map.getMaxZoom());
};
var mapBounds = new L.LatLngBounds(
map.unproject([0, 8576], mapMaxZoom),
map.unproject([8576, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
noWrap: true,
tms: false
}).addTo(map);
L.marker([0, 0]).addTo(map).bindPopup("Zero");
L.marker([-128, 128]).addTo(map).bindPopup("center");
var popup = L.popup();
<!-- Click pop-up>
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked in " + e.latlng.toString ())
.openOn(map);
}
map.on('click', onMapClick);
}
</script>
<style>
html, body, #map { width:100%; height:100%; margin:0; padding:0; }
</style>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
If I understand correctly, you want a CRS similar to L.CRS.Simple that places tile 0/0/0 (tile size 268px, which is 8576 / 2⁵) so that:
Position [0, 0] is at the center of that tile.
The entire world (i.e. entire tile 0/0/0) goes from position [-8576/2, -8576/2] to [8576/2, 8576/2].
You would just need to adjust the L.CRS.Simple with the appropriate transformation, to account for this scale of 1/2⁵ = 1/32 (instead of just 1) and offset of 8576 * 1/32 / 2 = 268 / 2 = 134 (instead of 0.5).
L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
transformation: new L.Transformation(1 / 32, 134, -1 / 32, 134)
});
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.MySimple
}).setView([0, 0], mapMaxZoom);
Demo: http://plnkr.co/edit/5SQqp7SP4nf8muPM5iso?p=preview (I used Plunker instead of jsfiddle because you provided a full page code with HTML, whereas jsfiddle expects you to split your HTML, CSS and JavaScript codes into separate blocks).
As for showing the coordinates and a "locate" button, it would be quite easy to implement so that it is similar to the example you mention. Feel free to open new questions if you need help.
In the above demo, I used Leaflet.Coordinates plugin to implement quickly both functionalities (see the control on bottom left corner of the map; you have to start moving your mouse on the map for the coordinates to appear; click on that control to open the edition mode).
EDIT:
As for the Leaflet.Coordinates plugin, it wraps displayed coordinates longitude to stay within [-180; 180] degrees.
In your case where coordinates are not degrees, there is no point wrapping the longitude.
I think this is the cause for the discrepancy of coordinates between the click popup and the control.
Simply patch the plugin code to prevent wrapping:
// Patch first to avoid longitude wrapping.
L.Control.Coordinates.include({
_update: function(evt) {
var pos = evt.latlng,
opts = this.options;
if (pos) {
//pos = pos.wrap(); // Remove that instruction.
this._currentPos = pos;
this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator);
this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator);
this._label.innerHTML = this._createCoordinateLabel(pos);
}
}
});
Updated demo: http://plnkr.co/edit/M3Ru0xqn6AxAaSb4kIJU?p=preview
Looked over the example can NOT figure out how to set basemap MANUALLY. I don't want a dijit widget, or any other libraries or anything like that. Just want to manually set a basemap to any of the already available types like Topographic, Satellites, Streets, etc.
Following this API reference:
Object: esri/basemaps
The part I can't figure out is marked with question marks. If some could help me out, would really appreciate it.
require([
"esri/basemaps",
"esri/map",
"dojo/domReady!"
], function (esriBasemaps, Map) {
/* ------------------------------------- */
/* Basemap add one of the existing maps. */
/* ------------------------------------- */
esriBasemaps.myBasemap = {
baseMapLayers ???
};
var map = new Map("map", {
basemap: "myBasemap",
center: [-118, 34.5],
zoom: 8
});
});
The code in the esri/basemaps documentation works fine, combined with the create a map sample.
Here's the part you wondered about:
esriBasemaps.myBasemap = {
baseMapLayers: [
{
url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"
}
],
title: "My Basemap"
};
Here's a full example. Copy and paste the following into the ArcGIS API for JavaScript Sandbox to see how it works.
<!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 map;
require(["esri/basemaps", "esri/map", "dojo/domReady!"], function(esriBasemaps, Map) {
esriBasemaps.myBasemap = {
baseMapLayers: [
{
url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"
}
],
title: "My Basemap"
};
map = new Map("map", {
basemap: "myBasemap",
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I am trying to reproduce the esri/dijit/Search tutorial that is new in the 3.13 release of the ArcGIS API for JavaScript with one of my own layers.
Esri Sample
<!DOCTYPE html>
<html><link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<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>ArcGIS API for JavaScript | Search widget with multiple sources</title>
<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/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
require([
"esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/SpatialReference", "esri/geometry/Extent", "dojo/domReady!"
], function (Map, Search, FeatureLayer, InfoTemplate, SpatialReference, Extent) {
var map = new Map("map", {
basemap: "gray",
center: [-97, 38], // lon, lat
zoom: 5
});
var s = new Search({
enableButtonMode: true, //this enables the search widget to display as a single button
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: false,
map: map
}, "search");
var sources = [];
sources.push({
featureLayer: new FeatureLayer("http://maps.eastriding.gov.uk/arcgis/rest/services/GISIntranet/MapServer/0"),
searchFields: ["ADDRESS_WITHOUT_BREAKS"],
displayField: "ADDRESS_WITHOUT_BREAKS",
exactMatch: false,
name: "ADDRESS_WITHOUT_BREAKS",
outFields: ["*"],
placeholder: "ADDRESS_WITHOUT_BREAKS",
maxResults: 6,
maxSuggestions: 6,
enableSuggestions: true,
minCharacters: 0
});
//Set the sources above to the search widget
s.set("sources", sources);
s.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>
I am having with the suggestions part if it. If I use the default source for this it will for fine. I will enter the first few character in the textbox and it will produce a number of suggestion that I can choose from. When I use my own source (as above) there is no suggestions that appear. I have check for errors and there are none. I have also checked the network in my Dev tools and the suggestions part is not firing off a query like the default source does.
I am wondering if I need something special setting up on my layer or should it just work
Thanks
From the API documentation
Working with suggestions is only available if working with a 10.3 geocoding service that has the suggest capability loaded or a 10.3 feature layer that supports pagination, i.e. supportsPagination = true.
Looking at your server you are running 10.2.2 so you need to move to 10.3 and make sure you allow pagination for your service in order to get this capability.