Hi all,
Here is my new inquiry:
I am trying to get the user to add a graphic marker using. I would imagine two text boxes as input values and a simple button GO to add the graphic and then zoom to graphic. Here is what I have so far, My fiddle.
Thank you for your help,
Alex
Solved! Go to Solution.
Alex,
You forgot several requires:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/"></script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script>
var map;
require(["esri/map",
"esri/symbols/SimpleLineSymbol",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"dojo/on",
"dojo/dom",
"esri/geometry/Point",
"dojo/domReady!"
],
function(Map, SimpleLineSymbol, Graphic, SimpleMarkerSymbol, Color, on, dom, Point) {
map = new Map("map", {
basemap: "topo",
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 255, 0.5]),
8
),
new Color([0, 0, 255])
);
on(dom.byId("go"), "click", coordinates);
function coordinates() {
console.log("got here")
var lat = document.getElementById("sel_lat").value
var long = document.getElementById("sel_long").value
var mp = new Point(long, lat);
var graphic = new Graphic(mp, symbol);
map.graphics.add(graphic);
}
});
</script>
</head>
<body>
<div id="map">Tag Long:<input id="sel_long" type="text">
<br />
Tag Lat:<input id="sel_lat" type="text">
<br />
<button id="go">GO</button>
</div>
</body>
</html>
try below this...
function onQueryComplete(returnedPointFeatureSet){
var featureSet = returnedPointFeatureSet || {};
var features = featureSet.features || [];
var extent = esri.graphicsExtent(features);
if(!extent && features.length == 1) {
var point = features[0];
map.centerAndZoom(point, 12);
}
else {
map.setExtent(extent, true);
}
}
Alex,
You forgot several requires:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/"></script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script>
var map;
require(["esri/map",
"esri/symbols/SimpleLineSymbol",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"dojo/on",
"dojo/dom",
"esri/geometry/Point",
"dojo/domReady!"
],
function(Map, SimpleLineSymbol, Graphic, SimpleMarkerSymbol, Color, on, dom, Point) {
map = new Map("map", {
basemap: "topo",
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 255, 0.5]),
8
),
new Color([0, 0, 255])
);
on(dom.byId("go"), "click", coordinates);
function coordinates() {
console.log("got here")
var lat = document.getElementById("sel_lat").value
var long = document.getElementById("sel_long").value
var mp = new Point(long, lat);
var graphic = new Graphic(mp, symbol);
map.graphics.add(graphic);
}
});
</script>
</head>
<body>
<div id="map">Tag Long:<input id="sel_long" type="text">
<br />
Tag Lat:<input id="sel_lat" type="text">
<br />
<button id="go">GO</button>
</div>
</body>
</html>
Also - avoid using 'long' as a variable name (line 57) as it is a reserved word in JavaScript.
Thank you, I did not know. Will keep that in mind!
Thank you Robert! It works great! I am trying to apply code for an automatic zoom to graphic suggested above by vtammineni.
Alex,
Did you figure out the zoom part?
Hi Robert,
I did figure it out last evening thanks to Vankata's code above.
All I really had to do was to use this:
map.centerAndZoom(mp, 9);
So my function would be:
function coordinates() {
console.log("Coordinates")
var lat = document.getElementById("sel_lat").value
var longitude = document.getElementById("sel_long").value
var coord = webMercatorUtils.lngLatToXY(longitude, lat);
var mp = new Point(longitude, lat);
var graphic = new Graphic(mp, symbol);
map.graphics.add(graphic);
map.centerAndZoom(mp, 9);
} }
Thank you again for your help!
Alex
Alex,
You will notice in my code that I do not use the webMercatorUtils. The reason you don't need that require or that line of code is that the JavScript API can use web mercator or lat lon coordinates to create a new point (Just FYI).