Embed Points in Single HTML Map Page

[glennlawrence]

Can anyone advise where I might find a tutorial on how to create a simple Map and add Markers/Points with popup InfoWindows and have all the code embedded in a single HTML page?

I have been browsing the Developer Samples but cannot seem to find a sample or tutorial on how to do this.

Many thanks in advance...

Glenn

[glennlawrence]

No worries,

Cheers for your help...

[JohnGravois]

Using ArcGIS Online, you can published Tiled Map Services (consumed in our JavaScript API as ArcGISTiledMapServiceLayers) and hosted feature layers (FeatureLayers).  You can also leverage utility Geocoding, Routing, Analysis, Geometry, GeoEnrichment and print services.

The only layer types I can think of at the moment which cannot be consumed without ArcGIS Server are ArcGISDynamicMapServiceLayers, image service layers, or services that incorporate custom data for geocoding, routing or geoprocessing.

also, just my two cents, but i'd argue that Tim's suggestion of programmatically defining graphics is probably not the best approach for you here.  If you have more than a handful of features to manage I would highly suggest leveraging something like a hosted feature service (for example, by uploading a CSV or shapefile) instead of coding graphics by hand.

that way you can load your hosted feature service into individual webmaps, modify symbology and popups and then publish using existing templates.

Store and Query Geographic Data In Feature Services
https://developers.arcgis.com/en/features/cloud-storage/

Web map by ID
https://developers.arcgis.com/javascript/jssamples/ags_createwebmapid.html

[glennlawrence]

Thank you for your input jgravois, however Tim's method was exactly what I was looking for in this case.

For certain security reasons we need to include all code in a single html page. We can reference external stylesheets and js files, however all Point location & Popup window info must be contained within the html page. It would be nice to have all of this data in an external csv that we can add to the map as a layer, however this is not possible in our setup.

Basically we will be publishing this map in a secure Extranet where users will login and will be able to open the map page to view the points/point info. As mentioned above, all info on the map must be secure and unless we do it this way, we would have to either -

1. Call the csv from another secure source, whether this be an ArcGIS source or another secure web location, which would then require the user to authenticate again. This is a Big No No as the user has already authenticated to login into the Extranet and we don't want them to have to login again.

or

2. Host the csv in a public setting, which is a Bigger No No for obvious reasons!

SSO (Single-Sign-On) will not work for this either as most of the users will be from various different domains.

Also, due to how the Extranet works it's not possible to call the csv into the Map from a secure Extranet location.

Thanks again for your input but I think this is the way we are going to have to work this one.

Cheers...

Glenn

[JohnGravois]

glenn,

i wasn't talking about hosting a CSV on a web server.  i was talking about publishing a RESTful service which could be queried dynamically by your application to display graphics.

you could enforce security and require a login to access the hosted feature service itself if the data is sensitive and use something like a proxy from within your application if you wanted to avoid having people login twice.

[glennlawrence]

jgravois,

The RESTful service is not something that I am familiar with at all I'm afraid, I have never even heard of it...:o And for the Proxy, we don't currently have a web server to run this service on. We are basically just putting together some html pages that we upload to a Secure DataRoom (Extranet) where we can open these pages with the embedded map & features.

It would be great if we could make use of a csv file for the map points for this solution in a secure way. Maybe you can elaborate a bit more on how this could potentially work?

Cheers...

[JohnGravois]

no problem Glenn,

ArcGIS Online for Organizations gives you the capability of publishing both secure and public 'hosted feature services'.  afterward all of our RESTful developer APIs can be used to talk to the service interactively (ie. query for JSON features based on either a SQL clause or spatial relationship or even POST edits)

here are a few helpful links which discuss the publishing steps
https://developers.arcgis.com/tools/csv-to-feature-service/
http://video.esri.com/watch/1342/publish-hosted-feature-layers

as an alternative, our JS API now also includes a CSV layer which allows you to talk to CSVs published on a web server directly.  if you can think of a way to 'secure' the CSV itself, that would be an option too.

[glennlawrence]

Thanks for this jgravois,

I have been playing around with the js csv layer and it works quite well internally on my domain. The challange now will be how to secure it outside of our domain!

Thanks again...

[glennlawrence]

Glenn,

something like this? I have created map points and when you click on them or the buttons a pop-up will appear.

Tim

Hey Tim,

Can you tell me how I may be able to change the marker symbol used in this example? Currently it just uses a default red square. If I want to have multiple points with unique symbols, how would I do this?

Many thanks in advance...

Glenn

[TimWitt]

Glenn,

you would need to create a new symbol, depending on how many unique symbols you would like.

This is the only symbol that you have right now:

      var storepoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([0,255,0,0.25]), 1),
              new Color([255,0,0])
              )

create another one:

      var storepoint2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([246,27,27,0.25]), 1),
              new Color([255,0,0]) 
              )

look here for what type of symbols you can have and look here on what type of color you would like.

Once you have your 2nd symbol type created, replace the storepoint in this code with storepoint2:

var store2 = new Graphic(singlePoint2,storepoint,attr2,infoTemplate2);

You can do this with every new point. Let me know if this is clear.

Tim

[glennlawrence]

That works for changing alright Tim, thanks.

Do you know how I can use different symbols though, other than square, circle etc? I am hoping to use some of the ArcGIS symbols like the one - here

Cheers...