Any Beginner Resources out there?

3664
10
Jump to solution
09-09-2014 07:17 AM
PaulBernard
New Contributor

I've been working through some of the API documentation and examples for the last couple of days, but I'm still a bit lost.

 

Here is what I need to do, and perhaps someone will be able to point me in the right direction.

 

I have an internal web application that shows information for each zip code in the U.S.  I have polygon data for all of these areas already.

Before I start working on dynamically creating polygons, I want to display a few polygons onto a map to see how it works.

 

That's it for now.  All of the examples I've seen are overly complicated with features and other functionality that I don't need at the moment.  Are there any resources for complete beginners?  How would I go about just adding a few polygons to a map using hard coded latitude / longitude coordinates?

 

Also, is there any way to remove city names from the default maps?

 

Thanks!

0 Kudos
1 Solution

Accepted Solutions
PaulCrickard1
Occasional Contributor II

Depending on what you need to do in the end, Leaflet.js is way easier. You can load and edit all your GIS data if you ever get ArcServer as well. Here is a polygon and a point on a map - save as something.html and open in your browser.

<html>

<head><title>Leaflet.js Essentials</title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />

<style>

    html, body, #map {

      padding: 0;

      margin: 0;

      height: 100%;

    }

  </style>

</head>

<body>

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.6/esri-leaflet.js"></script>

<div id="map"></div>

<script>

var map = L.map('map', {

  center: [51.509, -0.08],

  zoom: 9

  });

  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

var a = L.marker([51.49656, -0.09304]).addTo(map).bindPopup("My Point").openPopup()

var polygon = L.polygon([

    [51.509, -0.08],

    [51.503, -0.06],

    [51.51, -0.047]

  ]).addTo(map);

</script>

</body>

</html>

Want an ArcServer service?

Download (Leaflet Vector Layers - Jason Sanford ), add a reference to it:

<script src="lvector.js"></script>

<script src="Layer.js"></script>

<script src="AGS.js"></script>

<script src="json2.js"></script>

Instead of L.polygon() add a GIS layer:

var trafficEngineering = new lvector.AGS({

    url: "http://YourDomain/ArcGIS/rest/services/YourServiceName/MapServer/7",

    fields: "*",

    uniqueField: "OBJECTID",

    autoUpdate:true,

    autoUpdateInterval: 100,

  scaleRange: [8, 20],

  showAll: false,

  where: qstring,

  popupTemplate: '<h3>{OBJECTID}</h3>',

  symbology: {

      type: "single",

        vectorOptions: {

            weight: 4,

           opacity: 1,

           color: "blue"

  }  

    },

 

  clickEvent: function (feature, e) {

  }

  }).setMap(map);

View solution in original post

0 Kudos
10 Replies
IanGrasshoff
Occasional Contributor

In order to help answer your question, you need to provide some more information.

  • Which API documentation are you talking about?  Javasript API?
  • What application environment are you working in?  ArcGIS Online, Desktop, Server?
  • I assume you are trying to create a web application to display your data?
  • It sounds like you have polygon data for your area, what format is the data in?

If you answer those questions I will be better equipped to help.

0 Kudos
IanGrasshoff
Occasional Contributor

Well..I should have read a little more closely...it looks like you have tagged your post with ArcGIS API for Javascript, my fault.  So to answer your questions better.

  • What format is your polygon data?
  • Do you have an ArcGIS Online Account you can work with?
  • I assume you have looked at the ArcGIS Javascript API examples?
  • The default Esri basemaps are cached, so they are basically static image tiles.  You can't turn the city names on/off.  Maybe you should check out the "dark gray canvas" map or "light gray canvas".  The only other option is to author your own map to use as a base.  That is probably not a good option for you.
0 Kudos
PaulBernard
New Contributor

The polygon data is in x, y coordinate pairs.  I can put them into JSON format easily if needed.  I've been going through the ArcGIS javascript API examples, and it just seems overly complicated for a beginner. 

Where would I start if I wanted to author my own basemap?

I have do have an online account.

0 Kudos
IanGrasshoff
Occasional Contributor

To author your own basemap you really need ArcGIS For Server (publish map service) and ArcGIS For Desktop (design map service), plus all the GIS data for the basemap.  That's probably not really something you want to attempt due to cost and complexity.   

The other route, which won't give you many options for the map design, would be to develop your basemap using ArcGIS online.  You will still need the actual GIS data to create the basemap...and unless it's going to be super simple you probably won't like the result.  I really wouldn't recommend this route either, your best is to just stick with the Esri basemaps from the sound of what you are trying to accomplish.

As for your polygon data...if it's less than 1,000 polygons you can add it to a web map.  If you need help with that let me know.  To make this work, you need to convert a JSON file to shapefile file, then zip it up.  At ArcGIS Desktop version 10.2 there is a tool called "JSON to Features (Conversion)".  If you don't have ArcGIS desktop you might need to do some hunting.  I believe that the open source desktop GIS package QGIS has the ability to work with JSON and save to shapefile.  If you can get your shapefile data loaded into ArcGIS online, you save your web map..then just add it to your Javascript web app.  In my opinion, this would be the easiest route with minimal programming (you can setup your pop-ups in the ArcGIS online web map).  Here is the example that might help..Web map by ID | ArcGIS API for JavaScript.

Other than that, GIS can be rough for beginners

0 Kudos
PaulBernard
New Contributor

Thanks for all of the info.

My company actually has access to ArcGIS for Server and desktop that they are using on another project.

I actually need around 980 polygons to load eventually, but I'm just learning the software for now.

I'll take a look at the resource you have linked.

Thanks again!

0 Kudos
IanGrasshoff
Occasional Contributor

Did I answer your question?

0 Kudos
PaulCrickard1
Occasional Contributor II

Depending on what you need to do in the end, Leaflet.js is way easier. You can load and edit all your GIS data if you ever get ArcServer as well. Here is a polygon and a point on a map - save as something.html and open in your browser.

<html>

<head><title>Leaflet.js Essentials</title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />

<style>

    html, body, #map {

      padding: 0;

      margin: 0;

      height: 100%;

    }

  </style>

</head>

<body>

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.6/esri-leaflet.js"></script>

<div id="map"></div>

<script>

var map = L.map('map', {

  center: [51.509, -0.08],

  zoom: 9

  });

  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

var a = L.marker([51.49656, -0.09304]).addTo(map).bindPopup("My Point").openPopup()

var polygon = L.polygon([

    [51.509, -0.08],

    [51.503, -0.06],

    [51.51, -0.047]

  ]).addTo(map);

</script>

</body>

</html>

Want an ArcServer service?

Download (Leaflet Vector Layers - Jason Sanford ), add a reference to it:

<script src="lvector.js"></script>

<script src="Layer.js"></script>

<script src="AGS.js"></script>

<script src="json2.js"></script>

Instead of L.polygon() add a GIS layer:

var trafficEngineering = new lvector.AGS({

    url: "http://YourDomain/ArcGIS/rest/services/YourServiceName/MapServer/7",

    fields: "*",

    uniqueField: "OBJECTID",

    autoUpdate:true,

    autoUpdateInterval: 100,

  scaleRange: [8, 20],

  showAll: false,

  where: qstring,

  popupTemplate: '<h3>{OBJECTID}</h3>',

  symbology: {

      type: "single",

        vectorOptions: {

            weight: 4,

           opacity: 1,

           color: "blue"

  }  

    },

 

  clickEvent: function (feature, e) {

  }

  }).setMap(map);

0 Kudos
IanGrasshoff
Occasional Contributor

Thanks for sharing the leaflet sample..I agree for a very simple mapping app it's much easier to use than the ArcGIS JavaScript API.  I had not seen the "Leaflet Vector Layers - Jason Sanford" repo before, so thanks for that. 

0 Kudos
PaulBernard
New Contributor

Thanks for showing me this.  I actually just finished mocking up a few things in leaflet.js. 

This is exactly what I needed and the API seems to be able to handle the features I will need in the future.

It's also good to know I can incorporate this with arc server services as well.

0 Kudos